Improved logging around AAD B2C flows

src/admin/custom.d.ts

@@ -1,5 +1,5 @@
-declare module '*.svg' {
-    import React = require('react');
+declare module "*.svg" {
+    import React = require("react");
     export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
     const src: string;
     export default src;

src/admin/utils/helpers.ts

@@ -1,15 +1,15 @@
-import * as MediaUtils from '@paperbits/common/media/mediaUtils';
-import { MediaContract } from '@paperbits/common/media';
+import * as MediaUtils from "@paperbits/common/media/mediaUtils";
+import { MediaContract } from "@paperbits/common/media";
 
 export const getThumbnailUrl = (mediaItem: MediaContract): string => {
-    if (mediaItem?.mimeType?.startsWith('video')) {
-        let thumbnailUrl: string = '';
+    if (mediaItem?.mimeType?.startsWith("video")) {
+        let thumbnailUrl: string = "";
         MediaUtils.getVideoThumbnailAsDataUrlFromUrl(mediaItem.downloadUrl).then(result => thumbnailUrl = result);
 
         return thumbnailUrl;
     }
 
-    if (mediaItem?.mimeType?.startsWith('image')) {
+    if (mediaItem?.mimeType?.startsWith("image")) {
         let thumbnailUrl = mediaItem.downloadUrl;
 
         if (mediaItem.variants) {

src/admin/utils/themes.ts

@@ -1,4 +1,4 @@
-import { PartialTheme } from '@fluentui/react';
+import { PartialTheme } from "@fluentui/react";
 
 /**
  * Custom Fluent theme pallete used by calling related components in this library.
@@ -22,38 +22,38 @@ export interface CallingTheme {
  */
 export const lightTheme: PartialTheme & CallingTheme = {
     palette: {
-        themePrimary: '#0078d4',
-        themeLighterAlt: '#eff6fc',
-        themeLighter: '#deecf9',
-        themeLight: '#c7e0f4',
-        themeTertiary: '#71afe5',
-        themeSecondary: '#2b88d8',
-        themeDarkAlt: '#106ebe',
-        themeDark: '#59b0f7',
-        themeDarker: '#004578',
-        neutralLighterAlt: '#faf9f8',
-        neutralLighter: '#f3f2f1',
-        neutralLight: '#edebe9',
-        neutralQuaternaryAlt: '#e1dfdd',
-        neutralQuaternary: '#d0d0d0',
-        neutralTertiaryAlt: '#c8c6c4',
-        neutralTertiary: '#a19f9d',
-        neutralSecondary: '#605e5c',
-        neutralPrimaryAlt: '#3b3a39',
-        neutralPrimary: '#323130',
-        neutralDark: '#201f1e',
-        black: '#000000',
-        white: '#ffffff'
+        themePrimary: "#0078d4",
+        themeLighterAlt: "#eff6fc",
+        themeLighter: "#deecf9",
+        themeLight: "#c7e0f4",
+        themeTertiary: "#71afe5",
+        themeSecondary: "#2b88d8",
+        themeDarkAlt: "#106ebe",
+        themeDark: "#59b0f7",
+        themeDarker: "#004578",
+        neutralLighterAlt: "#faf9f8",
+        neutralLighter: "#f3f2f1",
+        neutralLight: "#edebe9",
+        neutralQuaternaryAlt: "#e1dfdd",
+        neutralQuaternary: "#d0d0d0",
+        neutralTertiaryAlt: "#c8c6c4",
+        neutralTertiary: "#a19f9d",
+        neutralSecondary: "#605e5c",
+        neutralPrimaryAlt: "#3b3a39",
+        neutralPrimary: "#323130",
+        neutralDark: "#201f1e",
+        black: "#000000",
+        white: "#ffffff"
     },
     callingPalette: {
-        callRed: '#a42e43',
-        callRedDark: '#8b2c3d',
-        callRedDarker: '#772a38',
-        iconWhite: '#ffffff',
-        green: '#107c10'
+        callRed: "#a42e43",
+        callRedDark: "#8b2c3d",
+        callRedDarker: "#772a38",
+        iconWhite: "#ffffff",
+        green: "#107c10"
     },
     semanticColors: {
-        errorText: '#a80000'
+        errorText: "#a80000"
     }
 };
 
@@ -64,37 +64,37 @@ export const lightTheme: PartialTheme & CallingTheme = {
  */
 export const darkTheme: PartialTheme & CallingTheme = {
     palette: {
-        themePrimary: '#2899f5',
-        themeLighterAlt: '#02060a',
-        themeLighter: '#061827',
-        themeLight: '#0c2e49',
-        themeTertiary: '#185b93',
-        themeSecondary: '#2286d7',
-        themeDarkAlt: '#3ca2f6',
-        themeDark: '#59b0f7',
-        themeDarker: '#84c5f9',
-        neutralLighterAlt: '#302e2d',
-        neutralLighter: '#383735',
-        neutralLight: '#464443',
-        neutralQuaternaryAlt: '#4e4d4b',
-        neutralQuaternary: '#4d4b49',
-        neutralTertiaryAlt: '#72706e',
-        neutralTertiary: '#c8c8c8',
-        neutralSecondary: '#d0d0d0',
-        neutralPrimaryAlt: '#dadada',
-        neutralPrimary: '#ffffff',
-        neutralDark: '#f4f4f4',
-        black: '#f8f8f8',
-        white: '#252423'
+        themePrimary: "#2899f5",
+        themeLighterAlt: "#02060a",
+        themeLighter: "#061827",
+        themeLight: "#0c2e49",
+        themeTertiary: "#185b93",
+        themeSecondary: "#2286d7",
+        themeDarkAlt: "#3ca2f6",
+        themeDark: "#59b0f7",
+        themeDarker: "#84c5f9",
+        neutralLighterAlt: "#302e2d",
+        neutralLighter: "#383735",
+        neutralLight: "#464443",
+        neutralQuaternaryAlt: "#4e4d4b",
+        neutralQuaternary: "#4d4b49",
+        neutralTertiaryAlt: "#72706e",
+        neutralTertiary: "#c8c8c8",
+        neutralSecondary: "#d0d0d0",
+        neutralPrimaryAlt: "#dadada",
+        neutralPrimary: "#ffffff",
+        neutralDark: "#f4f4f4",
+        black: "#f8f8f8",
+        white: "#252423"
     },
     callingPalette: {
-        callRed: '#c4314b',
-        callRedDark: '#a42e43',
-        callRedDarker: '#8b2c3d',
-        iconWhite: '#ffffff',
-        green: '#107c10'
+        callRed: "#c4314b",
+        callRedDark: "#a42e43",
+        callRedDarker: "#8b2c3d",
+        iconWhite: "#ffffff",
+        green: "#107c10"
     },
     semanticColors: {
-        errorText: '#f1707b'
+        errorText: "#f1707b"
     }
 };

src/admin/utils/validator.ts

@@ -1,38 +1,38 @@
-export const REQUIRED = 'required';
-export const UNIQUE_REQUIRED = 'unique-required';
-export const URL = 'url';
-export const URL_REQUIRED = 'url-required';
+export const REQUIRED = "required";
+export const UNIQUE_REQUIRED = "unique-required";
+export const URL = "url";
+export const URL_REQUIRED = "url-required";
 
-export const REQUIRED_MESSAGE = 'This field is required';
-export const UNIQUE_REQUIRED_MESSAGE = 'Field value is required and must be unique';
-export const URL_MESSAGE = 'Field value should be a valid URL';
-export const URL_REQUIRED_MESSAGE = 'Field value is required and should be a valid URL';
+export const REQUIRED_MESSAGE = "This field is required";
+export const UNIQUE_REQUIRED_MESSAGE = "Field value is required and must be unique";
+export const URL_MESSAGE = "Field value should be a valid URL";
+export const URL_REQUIRED_MESSAGE = "Field value is required and should be a valid URL";
 
 export const validateField = (validationType: string, value: string, customValidation?: boolean): string => {
     if (value === undefined) return;
 
     let isValid: boolean = true;
-    let errorMessage: string = '';
+    let errorMessage: string = "";
 
     const absoluteUrlRegex = /^(?:https?:\/\/)?(?:[\w-]+\.)*[\w.-]+\.[a-zA-Z]{2,}(?:\/[\w-.~:/?#[\]@!$&'()*+,;=%]*)?$/;
     const relativeUrlRegex = /^(?:\/|#)[\w-.~:/?#[\]@!$&'()*+,;=%]*$/;
 
     switch (validationType) {
         case REQUIRED:
             isValid = value.length > 0;
-            errorMessage = isValid ? '' : REQUIRED_MESSAGE;
+            errorMessage = isValid ? "" : REQUIRED_MESSAGE;
             break;
         case UNIQUE_REQUIRED:
             isValid = value.length > 0 && customValidation;
-            errorMessage = isValid ? '' : UNIQUE_REQUIRED_MESSAGE;
+            errorMessage = isValid ? "" : UNIQUE_REQUIRED_MESSAGE;
             break;
         case URL:
             isValid = value.length === 0 || (absoluteUrlRegex.test(value) || relativeUrlRegex.test(value));
-            errorMessage = isValid ? '' : URL_MESSAGE;
+            errorMessage = isValid ? "" : URL_MESSAGE;
             break;
         case URL_REQUIRED:
             isValid = value.length > 0 && (absoluteUrlRegex.test(value) || relativeUrlRegex.test(value));
-            errorMessage = isValid ? '' : URL_REQUIRED_MESSAGE;
+            errorMessage = isValid ? "" : URL_REQUIRED_MESSAGE;
             break;
     }
 

src/apim.runtime.module.ts

@@ -87,11 +87,13 @@ import { StaticDataHttpClient } from "./services/staticDataHttpClient";
 import { TagService } from "./services/tagService";
 import { TenantService } from "./services/tenantService";
 import { UsersService } from "./services/usersService";
+import { TraceClick } from "./bindingHandlers/traceClick";
 
 
 export class ApimRuntimeModule implements IInjectorModule {
     public register(injector: IInjector): void {
         injector.bindSingleton("logger", ConsoleLogger);
+        injector.bindSingleton("traceClick", TraceClick);
         injector.bindToCollection("autostart", UnhandledErrorHandler);
         injector.bindToCollection("autostart", BalloonBindingHandler);
         injector.bindToCollection("autostart", ResizableBindingHandler);

src/bindingHandlers/traceClick.ts

@@ -0,0 +1,18 @@
+import { Logger } from "@paperbits/common/logging";
+import * as ko from "knockout";
+import { eventTypes } from "../logging/clientLogger";
+
+export class TraceClick {
+    constructor(private readonly logger: Logger) {
+    }
+
+    public setupBinding(): void {
+        ko.bindingHandlers["traceClick"] = {
+            init: (element: HTMLElement): void => {
+                ko.utils.registerEventHandler(element, "click", () => {
+                    this.logger.trackEvent(eventTypes.click, { message: `User clicked on the element with id ${element.id ?? "-"}` });
+                });
+            }
+        }
+    }
+}

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

@@ -185,10 +185,10 @@ export class ApiListDropdown {
     }
 
     public closeDropdown(): void {
-        const apiDropdowns = document.getElementsByClassName('api-list-dropdown');
-        for (var i = 0; i < apiDropdowns.length; i++) {
-            if (apiDropdowns[i].classList.contains('show'))
-                apiDropdowns[i].classList.remove('show');
+        const apiDropdowns = document.getElementsByClassName("api-list-dropdown");
+        for (let i = 0; i < apiDropdowns.length; i++) {
+            if (apiDropdowns[i].classList.contains("show"))
+                apiDropdowns[i].classList.remove("show");
         }
     }
 

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

@@ -119,7 +119,7 @@ export class OperationList {
             .subscribe(this.loadOperations);
 
         if (this.defaultAllGroupTagsExpanded()) {
-            let groups = new Set<string>()
+            const groups = new Set<string>()
             this.operationGroups().map(g => {groups.add(g.tag)})
             this.groupTagsExpanded(groups);
         }

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

@@ -148,7 +148,7 @@ export class ChangePassword {
                 await this.refreshCaptcha();
             }
 
-            parseAndDispatchError(this.eventManager, ErrorSources.changepassword, error, undefined, detail => `${detail.target}: ${detail.message} \n`);
+            parseAndDispatchError(this.eventManager, ErrorSources.changepassword, error, this.logger, undefined, detail => `${detail.target}: ${detail.message} \n`);
         } finally {
             this.working(false);
         }

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

@@ -7,6 +7,7 @@ import { UsersService } from "../../../../../services";
 import { ErrorSources } from "../../../validation-summary/constants";
 import { dispatchErrors, parseAndDispatchError } from "../../../validation-summary/utils";
 import { ValidationMessages } from "../../../validationMessages";
+import { Logger } from "@paperbits/common/logging";
 
 @RuntimeComponent({
     selector: "confirm-password"
@@ -25,7 +26,8 @@ export class ConfirmPassword {
 
     constructor(
         private readonly usersService: UsersService,
-        private readonly eventManager: EventManager) {
+        private readonly eventManager: EventManager,
+        private readonly logger: Logger) {
         this.password = ko.observable();
         this.passwordConfirmation = ko.observable();
         this.isResetConfirmed = ko.observable(false);
@@ -104,7 +106,7 @@ export class ConfirmPassword {
             }, 1000);
         }
         catch (error) {
-            parseAndDispatchError(this.eventManager, ErrorSources.confirmpassword, error, undefined, detail => `${detail.target}: ${detail.message} \\n`);
+            parseAndDispatchError(this.eventManager, ErrorSources.confirmpassword, error, this.logger, undefined, detail => `${detail.target}: ${detail.message} \\n`);
         }
     }
 }

src/components/users/profile/ko/runtime/profile.ts

@@ -15,6 +15,7 @@ import { dispatchErrors, parseAndDispatchError } from "../../../validation-summa
 import { ErrorSources } from "../../../validation-summary/constants";
 import { BackendService } from "../../../../../services/backendService";
 import { ValidationMessages } from "../../../validationMessages";
+import { Logger } from "@paperbits/common/logging";
 
 @RuntimeComponent({
     selector: "profile-runtime"
@@ -40,7 +41,8 @@ export class Profile {
         private readonly tenantService: TenantService,
         private readonly backendService: BackendService,
         private readonly eventManager: EventManager,
-        private readonly router: Router) {
+        private readonly router: Router,
+        private readonly logger: Logger) {
         this.user = ko.observable();
         this.firstName = ko.observable();
         this.lastName = ko.observable();
@@ -133,7 +135,7 @@ export class Profile {
             this.setUser(user);
             await this.toggleEdit();
         } catch (error) {
-            parseAndDispatchError(this.eventManager, ErrorSources.changeProfile, error);
+            parseAndDispatchError(this.eventManager, ErrorSources.changeProfile, error, this.logger);
         }
         this.working(false);
     }

src/components/users/reset-password/ko/runtime/reset-password.ts

@@ -128,7 +128,7 @@ export class ResetPassword {
                 await this.refreshCaptcha();
             }
 
-            parseAndDispatchError(this.eventManager, ErrorSources.resetpassword, error, undefined, detail => `${detail.target}: ${detail.message} \n`);
+            parseAndDispatchError(this.eventManager, ErrorSources.resetpassword, error, this.logger, undefined, detail => `${detail.target}: ${detail.message} \n`);
         }
         finally {
             this.working(false);

src/components/users/signin-social/ko/runtime/signin-aad-b2c.html

@@ -1,4 +1,4 @@
-<button id="signinB2C" class="button" data-bind="click: signIn, css: classNames">
+<button id="signinB2C" class="button" data-bind="click: signIn, css: classNames, traceClick">
     <i class="icon-emb icon-svg-aad"></i>
     <span data-bind="text: label"></span>
 </button>