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

@@ -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) {

templates/_base.html

@@ -65,45 +65,25 @@ limitations under the License.
 
   <script nonce="{{nonce}}">
     function onSignIn(googleUser) {
-      var profile = googleUser.getBasicProfile();
+        csClient.signIn(googleUser)
-      var id_token = googleUser.getAuthResponse().id_token;
+            .then(responseJson => {
-        var xhr = new XMLHttpRequest();
+                console.log('Signed in:');
-      xhr.open('POST', '/api/v0/login');
+                console.log(responseJson);
-      xhr.setRequestHeader('Content-Type', 'application/json');
+                window.location.replace(window.location.href.split("?")[0]);
-      xhr.onload = function() {
+            })
-        if (xhr.status == 200) {
+            .catch(() => {
-            if (window.location.href.includes('?')) {
+                console.error('Sign in failed, so signing out to allow retry');
-                window.location.replace(window.location.href.split("?")[0])
+                signOut();
-            } else {
+            });
-                window.location.reload();
-            }
-        }
-        else {
-          // signout if cookie not set
-          signOut();
-        }
-      };
-      let data = JSON.stringify({ "id_token": id_token})
-      xhr.send(data);
-
     }
 
     function signOut() {
-      var auth2 = gapi.auth2.getAuthInstance();
+        let auth2 = gapi.auth2.getAuthInstance();
-      auth2.signOut().then(function () {
+        csClient.signOut(auth2).then(responseJson => {
-        var xhr = new XMLHttpRequest();
+            console.log('Signed out:');
-        xhr.open('POST', '/api/v0/logout');
+            console.log(responseJson);
-        xhr.setRequestHeader('Content-Type', 'application/json');
+            window.location.reload();
-        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.');
-      });
     }
 
     function onLoad() {

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 %}