Skip to content

Commit dc7e69e

Browse files
malincristmalincrist
authored
Improved logging around AAD B2C flows (#2402)
* Improved logging around AAD B2C flows * ran lint:fix
1 parent 5941570 commit dc7e69e

File tree

26 files changed

+197
-118
lines changed

26 files changed

+197
-118
lines changed

‎src/admin/custom.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
declare module '*.svg' {
2-
import React = require('react');
1+
declare module "*.svg" {
2+
import React = require("react");
33
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
44
const src: string;
55
export default src;

‎src/admin/utils/helpers.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import * as MediaUtils from '@paperbits/common/media/mediaUtils';
2-
import { MediaContract } from '@paperbits/common/media';
1+
import * as MediaUtils from "@paperbits/common/media/mediaUtils";
2+
import { MediaContract } from "@paperbits/common/media";
33

44
export const getThumbnailUrl = (mediaItem: MediaContract): string => {
5-
if (mediaItem?.mimeType?.startsWith('video')) {
6-
let thumbnailUrl: string = '';
5+
if (mediaItem?.mimeType?.startsWith("video")) {
6+
let thumbnailUrl: string = "";
77
MediaUtils.getVideoThumbnailAsDataUrlFromUrl(mediaItem.downloadUrl).then(result => thumbnailUrl = result);
88

99
return thumbnailUrl;
1010
}
1111

12-
if (mediaItem?.mimeType?.startsWith('image')) {
12+
if (mediaItem?.mimeType?.startsWith("image")) {
1313
let thumbnailUrl = mediaItem.downloadUrl;
1414

1515
if (mediaItem.variants) {

‎src/admin/utils/themes.ts‎

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PartialTheme } from '@fluentui/react';
1+
import { PartialTheme } from "@fluentui/react";
22

33
/**
44
* Custom Fluent theme pallete used by calling related components in this library.
@@ -22,38 +22,38 @@ export interface CallingTheme {
2222
*/
2323
export const lightTheme: PartialTheme & CallingTheme = {
2424
palette: {
25-
themePrimary: '#0078d4',
26-
themeLighterAlt: '#eff6fc',
27-
themeLighter: '#deecf9',
28-
themeLight: '#c7e0f4',
29-
themeTertiary: '#71afe5',
30-
themeSecondary: '#2b88d8',
31-
themeDarkAlt: '#106ebe',
32-
themeDark: '#59b0f7',
33-
themeDarker: '#004578',
34-
neutralLighterAlt: '#faf9f8',
35-
neutralLighter: '#f3f2f1',
36-
neutralLight: '#edebe9',
37-
neutralQuaternaryAlt: '#e1dfdd',
38-
neutralQuaternary: '#d0d0d0',
39-
neutralTertiaryAlt: '#c8c6c4',
40-
neutralTertiary: '#a19f9d',
41-
neutralSecondary: '#605e5c',
42-
neutralPrimaryAlt: '#3b3a39',
43-
neutralPrimary: '#323130',
44-
neutralDark: '#201f1e',
45-
black: '#000000',
46-
white: '#ffffff'
25+
themePrimary: "#0078d4",
26+
themeLighterAlt: "#eff6fc",
27+
themeLighter: "#deecf9",
28+
themeLight: "#c7e0f4",
29+
themeTertiary: "#71afe5",
30+
themeSecondary: "#2b88d8",
31+
themeDarkAlt: "#106ebe",
32+
themeDark: "#59b0f7",
33+
themeDarker: "#004578",
34+
neutralLighterAlt: "#faf9f8",
35+
neutralLighter: "#f3f2f1",
36+
neutralLight: "#edebe9",
37+
neutralQuaternaryAlt: "#e1dfdd",
38+
neutralQuaternary: "#d0d0d0",
39+
neutralTertiaryAlt: "#c8c6c4",
40+
neutralTertiary: "#a19f9d",
41+
neutralSecondary: "#605e5c",
42+
neutralPrimaryAlt: "#3b3a39",
43+
neutralPrimary: "#323130",
44+
neutralDark: "#201f1e",
45+
black: "#000000",
46+
white: "#ffffff"
4747
},
4848
callingPalette: {
49-
callRed: '#a42e43',
50-
callRedDark: '#8b2c3d',
51-
callRedDarker: '#772a38',
52-
iconWhite: '#ffffff',
53-
green: '#107c10'
49+
callRed: "#a42e43",
50+
callRedDark: "#8b2c3d",
51+
callRedDarker: "#772a38",
52+
iconWhite: "#ffffff",
53+
green: "#107c10"
5454
},
5555
semanticColors: {
56-
errorText: '#a80000'
56+
errorText: "#a80000"
5757
}
5858
};
5959

@@ -64,37 +64,37 @@ export const lightTheme: PartialTheme & CallingTheme = {
6464
*/
6565
export const darkTheme: PartialTheme & CallingTheme = {
6666
palette: {
67-
themePrimary: '#2899f5',
68-
themeLighterAlt: '#02060a',
69-
themeLighter: '#061827',
70-
themeLight: '#0c2e49',
71-
themeTertiary: '#185b93',
72-
themeSecondary: '#2286d7',
73-
themeDarkAlt: '#3ca2f6',
74-
themeDark: '#59b0f7',
75-
themeDarker: '#84c5f9',
76-
neutralLighterAlt: '#302e2d',
77-
neutralLighter: '#383735',
78-
neutralLight: '#464443',
79-
neutralQuaternaryAlt: '#4e4d4b',
80-
neutralQuaternary: '#4d4b49',
81-
neutralTertiaryAlt: '#72706e',
82-
neutralTertiary: '#c8c8c8',
83-
neutralSecondary: '#d0d0d0',
84-
neutralPrimaryAlt: '#dadada',
85-
neutralPrimary: '#ffffff',
86-
neutralDark: '#f4f4f4',
87-
black: '#f8f8f8',
88-
white: '#252423'
67+
themePrimary: "#2899f5",
68+
themeLighterAlt: "#02060a",
69+
themeLighter: "#061827",
70+
themeLight: "#0c2e49",
71+
themeTertiary: "#185b93",
72+
themeSecondary: "#2286d7",
73+
themeDarkAlt: "#3ca2f6",
74+
themeDark: "#59b0f7",
75+
themeDarker: "#84c5f9",
76+
neutralLighterAlt: "#302e2d",
77+
neutralLighter: "#383735",
78+
neutralLight: "#464443",
79+
neutralQuaternaryAlt: "#4e4d4b",
80+
neutralQuaternary: "#4d4b49",
81+
neutralTertiaryAlt: "#72706e",
82+
neutralTertiary: "#c8c8c8",
83+
neutralSecondary: "#d0d0d0",
84+
neutralPrimaryAlt: "#dadada",
85+
neutralPrimary: "#ffffff",
86+
neutralDark: "#f4f4f4",
87+
black: "#f8f8f8",
88+
white: "#252423"
8989
},
9090
callingPalette: {
91-
callRed: '#c4314b',
92-
callRedDark: '#a42e43',
93-
callRedDarker: '#8b2c3d',
94-
iconWhite: '#ffffff',
95-
green: '#107c10'
91+
callRed: "#c4314b",
92+
callRedDark: "#a42e43",
93+
callRedDarker: "#8b2c3d",
94+
iconWhite: "#ffffff",
95+
green: "#107c10"
9696
},
9797
semanticColors: {
98-
errorText: '#f1707b'
98+
errorText: "#f1707b"
9999
}
100100
};

‎src/admin/utils/validator.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
export const REQUIRED = 'required';
2-
export const UNIQUE_REQUIRED = 'unique-required';
3-
export const URL = 'url';
4-
export const URL_REQUIRED = 'url-required';
1+
export const REQUIRED = "required";
2+
export const UNIQUE_REQUIRED = "unique-required";
3+
export const URL = "url";
4+
export const URL_REQUIRED = "url-required";
55

6-
export const REQUIRED_MESSAGE = 'This field is required';
7-
export const UNIQUE_REQUIRED_MESSAGE = 'Field value is required and must be unique';
8-
export const URL_MESSAGE = 'Field value should be a valid URL';
9-
export const URL_REQUIRED_MESSAGE = 'Field value is required and should be a valid URL';
6+
export const REQUIRED_MESSAGE = "This field is required";
7+
export const UNIQUE_REQUIRED_MESSAGE = "Field value is required and must be unique";
8+
export const URL_MESSAGE = "Field value should be a valid URL";
9+
export const URL_REQUIRED_MESSAGE = "Field value is required and should be a valid URL";
1010

1111
export const validateField = (validationType: string, value: string, customValidation?: boolean): string => {
1212
if (value === undefined) return;
1313

1414
let isValid: boolean = true;
15-
let errorMessage: string = '';
15+
let errorMessage: string = "";
1616

1717
const absoluteUrlRegex = /^(?:https?:\/\/)?(?:[\w-]+\.)*[\w.-]+\.[a-zA-Z]{2,}(?:\/[\w-.~:/?#[\]@!$&'()*+,;=%]*)?$/;
1818
const relativeUrlRegex = /^(?:\/|#)[\w-.~:/?#[\]@!$&'()*+,;=%]*$/;
1919

2020
switch (validationType) {
2121
case REQUIRED:
2222
isValid = value.length > 0;
23-
errorMessage = isValid ? '' : REQUIRED_MESSAGE;
23+
errorMessage = isValid ? "" : REQUIRED_MESSAGE;
2424
break;
2525
case UNIQUE_REQUIRED:
2626
isValid = value.length > 0 && customValidation;
27-
errorMessage = isValid ? '' : UNIQUE_REQUIRED_MESSAGE;
27+
errorMessage = isValid ? "" : UNIQUE_REQUIRED_MESSAGE;
2828
break;
2929
case URL:
3030
isValid = value.length === 0 || (absoluteUrlRegex.test(value) || relativeUrlRegex.test(value));
31-
errorMessage = isValid ? '' : URL_MESSAGE;
31+
errorMessage = isValid ? "" : URL_MESSAGE;
3232
break;
3333
case URL_REQUIRED:
3434
isValid = value.length > 0 && (absoluteUrlRegex.test(value) || relativeUrlRegex.test(value));
35-
errorMessage = isValid ? '' : URL_REQUIRED_MESSAGE;
35+
errorMessage = isValid ? "" : URL_REQUIRED_MESSAGE;
3636
break;
3737
}
3838

‎src/apim.runtime.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,13 @@ import { StaticDataHttpClient } from "./services/staticDataHttpClient";
8787
import { TagService } from "./services/tagService";
8888
import { TenantService } from "./services/tenantService";
8989
import { UsersService } from "./services/usersService";
90+
import { TraceClick } from "./bindingHandlers/traceClick";
9091

9192

9293
export class ApimRuntimeModule implements IInjectorModule {
9394
public register(injector: IInjector): void {
9495
injector.bindSingleton("logger", ConsoleLogger);
96+
injector.bindSingleton("traceClick", TraceClick);
9597
injector.bindToCollection("autostart", UnhandledErrorHandler);
9698
injector.bindToCollection("autostart", BalloonBindingHandler);
9799
injector.bindToCollection("autostart", ResizableBindingHandler);

‎src/bindingHandlers/traceClick.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Logger } from "@paperbits/common/logging";
2+
import * as ko from "knockout";
3+
import { eventTypes } from "../logging/clientLogger";
4+
5+
export class TraceClick {
6+
constructor(private readonly logger: Logger) {
7+
}
8+
9+
public setupBinding(): void {
10+
ko.bindingHandlers["traceClick"] = {
11+
init: (element: HTMLElement): void => {
12+
ko.utils.registerEventHandler(element, "click", () => {
13+
this.logger.trackEvent(eventTypes.click, { message: `User clicked on the element with id ${element.id ?? "-"}` });
14+
});
15+
}
16+
}
17+
}
18+
}

‎src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -185,10 +185,10 @@ export class ApiListDropdown {
185185
}
186186

187187
public closeDropdown(): void {
188-
const apiDropdowns = document.getElementsByClassName('api-list-dropdown');
189-
for (var i = 0; i < apiDropdowns.length; i++) {
190-
if (apiDropdowns[i].classList.contains('show'))
191-
apiDropdowns[i].classList.remove('show');
188+
const apiDropdowns = document.getElementsByClassName("api-list-dropdown");
189+
for (let i = 0; i < apiDropdowns.length; i++) {
190+
if (apiDropdowns[i].classList.contains("show"))
191+
apiDropdowns[i].classList.remove("show");
192192
}
193193
}
194194

‎src/components/operations/operation-list/ko/runtime/operation-list.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export class OperationList {
119119
.subscribe(this.loadOperations);
120120

121121
if (this.defaultAllGroupTagsExpanded()) {
122-
let groups = new Set<string>()
122+
const groups = new Set<string>()
123123
this.operationGroups().map(g => {groups.add(g.tag)})
124124
this.groupTagsExpanded(groups);
125125
}

‎src/components/users/change-password/ko/runtime/change-password.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ export class ChangePassword {
148148
await this.refreshCaptcha();
149149
}
150150

151-
parseAndDispatchError(this.eventManager, ErrorSources.changepassword, error, undefined, detail => `${detail.target}: ${detail.message} \n`);
151+
parseAndDispatchError(this.eventManager, ErrorSources.changepassword, error, this.logger, undefined, detail => `${detail.target}: ${detail.message} \n`);
152152
} finally {
153153
this.working(false);
154154
}

‎src/components/users/confirm-password/ko/runtime/confirm-password.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { UsersService } from "../../../../../services";
77
import { ErrorSources } from "../../../validation-summary/constants";
88
import { dispatchErrors, parseAndDispatchError } from "../../../validation-summary/utils";
99
import { ValidationMessages } from "../../../validationMessages";
10+
import { Logger } from "@paperbits/common/logging";
1011

1112
@RuntimeComponent({
1213
selector: "confirm-password"
@@ -25,7 +26,8 @@ export class ConfirmPassword {
2526

2627
constructor(
2728
private readonly usersService: UsersService,
28-
private readonly eventManager: EventManager) {
29+
private readonly eventManager: EventManager,
30+
private readonly logger: Logger) {
2931
this.password = ko.observable();
3032
this.passwordConfirmation = ko.observable();
3133
this.isResetConfirmed = ko.observable(false);
@@ -104,7 +106,7 @@ export class ConfirmPassword {
104106
}, 1000);
105107
}
106108
catch (error) {
107-
parseAndDispatchError(this.eventManager, ErrorSources.confirmpassword, error, undefined, detail => `${detail.target}: ${detail.message} \\n`);
109+
parseAndDispatchError(this.eventManager, ErrorSources.confirmpassword, error, this.logger, undefined, detail => `${detail.target}: ${detail.message} \\n`);
108110
}
109111
}
110112
}

0 commit comments

Comments
 (0)