minor edits

Author: salman90

2-Authorization-I/1-call-graph/App/authConfig.js

@@ -15,6 +15,35 @@ const msalConfig = {
         cacheLocation: 'localStorage', // This configures where your cache will be stored
         storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
     },
+    system: {
+        /**
+         * Below you can configure MSAL.js logs. For more information, visit:
+         * https://docs.microsoft.com/azure/active-directory/develop/msal-logging-js
+         */
+        loggerOptions: {
+            loggerCallback: (level, message, containsPii) => {
+                if (containsPii) {
+                    return;
+                }
+                switch (level) {
+                    case msal.LogLevel.Error:
+                        console.error(message);
+                        return;
+                    case msal.LogLevel.Info:
+                        console.info(message);
+                        return;
+                    case msal.LogLevel.Verbose:
+                        console.debug(message);
+                        return;
+                    case msal.LogLevel.Warning:
+                        console.warn(message);
+                        return;
+                    default:
+                        return;
+                }
+            },
+        },
+    },
 };
 
 // Add here the endpoints for MS Graph API services you would like to use.

2-Authorization-I/1-call-graph/App/authPopup.js

@@ -6,14 +6,14 @@ let username = '';
 
 myMSALObj.addEventCallback((event) => {
     if (
-        (event.eventType === 'msal:loginSuccess' || event.eventType === 'msal:acquireTokenSuccess') &&
+        (event.eventType === msal.EventType.LOGIN_SUCCESS || event.eventType === msal.EventType.ACQUIRE_TOKEN_SUCCESS) &&
         event.payload.account
     ) {
         const account = event.payload.account;
         myMSALObj.setActiveAccount(account);
     }
 
-    if (event.eventType === 'msal:logoutSuccess') {
+    if (event.eventType === msal.EventType.LOGOUT_SUCCESS) {
         if (myMSALObj.getAllAccounts().length > 0) {
             myMSALObj.setActiveAccount(myMSALObj.getAllAccounts()[0]);
         }
@@ -28,19 +28,15 @@ function selectAccount() {
     const currentAccounts = myMSALObj.getAllAccounts();
     if (currentAccounts === null) {
         return;
-    } else if (currentAccounts.length > 1) {
+    } else if (currentAccounts.length >= 1) {
         // Add choose account code here
-        console.warn('Multiple accounts detected.');
         username = myMSALObj.getActiveAccount().username;
         showWelcomeMessage(username, currentAccounts);
-    } else if (currentAccounts.length === 1) {
-        username = myMSALObj.getActiveAccount().username;
-        showWelcomeMessage(username, currentAccounts);
-    }
+    } 
 }
 
 async function addAnotherAccount(event) {
-    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(event.target.innerHTML)) {
+    if (event.target.innerHTML.includes("@")) {
         const username = event.target.innerHTML;
         const account = myMSALObj.getAllAccounts().find((account) => account.username === username);
         const activeAccount = myMSALObj.getActiveAccount();
@@ -51,6 +47,7 @@ async function addAnotherAccount(event) {
                     ...loginRequest,
                     account: account,
                 });
+                closeModal();
                 handleResponse(res);
                 window.location.reload();
             } catch (error) {
@@ -75,6 +72,7 @@ async function addAnotherAccount(event) {
             });
             handleResponse(res);
             closeModal();
+            window.location.reload();
         } catch (error) {
             console.log(error);
         }

2-Authorization-I/1-call-graph/App/authRedirect.js

@@ -7,14 +7,15 @@ let username = '';
 
 myMSALObj.addEventCallback((event) => {
     if (
-        (event.eventType === 'msal:loginSuccess' || event.eventType === 'msal:acquireTokenSuccess') &&
+        (event.eventType === msal.EventType.LOGIN_SUCCESS ||
+            event.eventType === msal.EventType.ACQUIRE_TOKEN_SUCCESS) &&
         event.payload.account
     ) {
         const account = event.payload.account;
         myMSALObj.setActiveAccount(account);
     }
 
-    if (event.eventType === 'msal:logoutSuccess') {
+    if (event.eventType === msal.EventType.LOGOUT_SUCCESS) {
         if (myMSALObj.getAllAccounts().length > 0) {
             myMSALObj.setActiveAccount(myMSALObj.getAllAccounts()[0]);
         }
@@ -43,19 +44,15 @@ function selectAccount() {
 
     if (!currentAccounts) {
         return;
-    } else if (currentAccounts.length > 1) {
+    } else if (currentAccounts.length >= 1) {
         // Add your account choosing logic here
-        console.warn('Multiple accounts detected.');
         username = myMSALObj.getActiveAccount().username;
         showWelcomeMessage(username, currentAccounts);
-    } else if (currentAccounts.length === 1) {
-        username = myMSALObj.getActiveAccount().username;
-        showWelcomeMessage(username, currentAccounts);
-    }
+    } 
 }
 
 async function addAnotherAccount(event) {
-    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(event.target.innerHTML)) {
+    if (event.target.innerHTML.includes("@")) {
         const username = event.target.innerHTML;
         const account = myMSALObj.getAllAccounts().find((account) => account.username === username);
         const activeAccount = myMSALObj.getActiveAccount();
@@ -67,10 +64,11 @@ async function addAnotherAccount(event) {
                     account: account,
                 });
                 handleResponse(res);
+                closeModal();
                 window.location.reload();
             } catch (error) {
                 if (error instanceof msal.InteractionRequiredAuthError) {
-                    await instance.loginRedirect({
+                    await myMSALObj.loginRedirect({
                         ...loginRequest,
                         prompt: 'login',
                     });