From 1a51eccdd115789a96eeb81b2cb322dc593a67ce Mon Sep 17 00:00:00 2001
From: Jason Robbins <jrobbins@gmail.com>
Date: Thu, 27 May 2021 09:20:42 -0700
Subject: [PATCH] Simplify the on-page JS for signIn and signOut (#1332)

* progress

* Added catch() for case where sign-in fails.
---
 static/js-src/cs-client.js | 18 ++++++++++++-
 templates/_base.html       | 52 ++++++++++++--------------------------
 templates/header.html      | 14 +++++++++-
 3 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/static/js-src/cs-client.js b/static/js-src/cs-client.js
index 1259bc09..70073267 100644
--- a/static/js-src/cs-client.js
+++ b/static/js-src/cs-client.js
@@ -92,7 +92,7 @@ class ChromeStatusClient {
 
     if (response.status !== 200) {
       throw new Error(
-          `Got error response from server: ${response.status}`);
+          `Got error response from server ${resource}: ${response.status}`);
     }
     const rawResponseText = await response.text();
     const XSSIPrefix = ')]}\'\n';
@@ -131,6 +131,22 @@ class ChromeStatusClient {
   // //////////////////////////////////////////////////////////////
   // Specific API calls
 
+  // Signing in and out
+
+  signIn(googleUser) {
+    // TODO(jrobbins): Consider using profile pic.
+    // let profile = googleUser.getBasicProfile();
+    let idToken = googleUser.getAuthResponse().id_token;
+    // We don't use doPost because we don't already have a XSRF token.
+    return this.doFetch('/login', 'POST', {'id_token': idToken}, false);
+  }
+
+  signOut(auth2) {
+    return auth2.signOut().then(() => {
+      return this.doPost('/logout');
+    });
+  }
+
   // Cues API
 
   dismissCue(cue) {
diff --git a/templates/_base.html b/templates/_base.html
index 813acfd0..c7736323 100644
--- a/templates/_base.html
+++ b/templates/_base.html
@@ -65,45 +65,25 @@ limitations under the License.
 
   <script nonce="{{nonce}}">
     function onSignIn(googleUser) {
-      var profile = googleUser.getBasicProfile();
-      var id_token = googleUser.getAuthResponse().id_token;
-        var xhr = new XMLHttpRequest();
-      xhr.open('POST', '/api/v0/login');
-      xhr.setRequestHeader('Content-Type', 'application/json');
-      xhr.onload = function() {
-        if (xhr.status == 200) {
-            if (window.location.href.includes('?')) {
-                window.location.replace(window.location.href.split("?")[0])
-            } else {
-                window.location.reload();
-            }
-        }
-        else {
-          // signout if cookie not set
-          signOut();
-        }
-      };
-      let data = JSON.stringify({ "id_token": id_token})
-      xhr.send(data);
-
+        csClient.signIn(googleUser)
+            .then(responseJson => {
+                console.log('Signed in:');
+                console.log(responseJson);
+                window.location.replace(window.location.href.split("?")[0]);
+            })
+            .catch(() => {
+                console.error('Sign in failed, so signing out to allow retry');
+                signOut();
+            });
     }
 
     function signOut() {
-      var auth2 = gapi.auth2.getAuthInstance();
-      auth2.signOut().then(function () {
-        var xhr = new XMLHttpRequest();
-        xhr.open('POST', '/api/v0/logout');
-        xhr.setRequestHeader('Content-Type', 'application/json');
-        xhr.onload = function() {
-          if (xhr.status == 200) {
-            console.log('Signed Out' + xhr.responseText);
-            window.location.reload()
-          }
-        };
-        // let data = JSON.stringify({ "id_token": id_token})
-        xhr.send();
-        console.log('User signed out.');
-      });
+        let auth2 = gapi.auth2.getAuthInstance();
+        csClient.signOut(auth2).then(responseJson => {
+            console.log('Signed out:');
+            console.log(responseJson);
+            window.location.reload();
+        });
     }
 
     function onLoad() {
diff --git a/templates/header.html b/templates/header.html
index d2e9f352..49c46b57 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -30,7 +30,7 @@
         </a>
         <ul>
           <li><a href="/settings">Settings</a></li>
-          <li><a href="#" onclick="signOut()">Sign out</a></li>
+          <li><a href="#" id="sign-out-link">Sign out</a></li>
 
         </ul>
       </div>
@@ -41,3 +41,15 @@
 
   </nav>
 </header>
+
+{% if user %}
+  <script nonce="{{nonce}}">
+    const signOutEl = document.querySelector('#sign-out-link');
+    if (signOutEl) {
+        signOutEl.addEventListener('click', (e) => {
+            e.preventDefault();
+            signOut();
+        });
+    }
+  </script>
+{% endif %}