review requests2

Author: derisen

JavaScriptSPA/index.html

@@ -23,7 +23,8 @@
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <a class="navbar-brand" href="/">Azure AD B2C</a>
     <div class="btn-group ml-auto dropleft">
-        <button type="button" id="SignIn" class="btn btn-secondary">Sign In</button>
+        <button type="button" id="signIn" class="btn btn-secondary">Sign In</button>
+        <button type="button" id="signOut" class="btn btn-success" style="display:none">Sign Out</button>
     </div>
   </nav>
   <div class="card">

JavaScriptSPA/ui.js

@@ -1,7 +1,10 @@
 // UI elements to work with
-const signInButton = document.getElementById('SignIn');
+const signInButton = document.getElementById('signIn');
 signInButton.addEventListener('click', signIn);
 
+const signOutButton = document.getElementById('signOut');
+signOutButton.addEventListener('click', logout);
+
 const callWebApiButton = document.getElementById('callApiButton');
 
 const label = document.getElementById('label');
@@ -11,12 +14,9 @@ const response = document.getElementById("response");
 function updateUI() {
         const userName = myMSALObj.getAccount().name;
         logMessage("User '" + userName + "' logged-in");
-    
-        // add the logout button
-        signInButton.innerHTML = 'logout';
-        signInButton.setAttribute('class', "btn btn-success ml-auto")
-        signInButton.removeEventListener('click', signIn);
-        signInButton.addEventListener('click', logout);
+
+        signInButton.style.display = 'none';
+        signOutButton.style.display = 'initial';
 
         // greet the user - specifying login
         label.innerText = "Hello " + userName;