config_service: Fixed multiple ajax requests in the front page while the page determines whether a …

appengine/config_service/ui/common/auth-signin.html

 <!--
   Copyright 2017 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 
   The `auth-signin` element displays sign-in/sign-out button, user email and
   avatar.
   It has a google-signin/google-signin-aware element under the hood that handles
   the actual OAuth logic.
 
@@ skipping 28 matching lines @@
       .center { vertical-align: middle; }
 
       .typeface { 
         font-size: 75%;
         color: white;
       }
     </style>
 
     <google-signin-aware id="aware"
       client-id="[[client_id]]"
+      initialized="{{initialized}}"
       scopes="email"
       on-google-signin-aware-success="_onSignin"
       on-google-signin-aware-signed-out="_onSignout">
     </google-signin-aware>
 
     <template is="dom-if" if="[[!signed_in]]">
       <div id="signinContainer">
         <!-- TODO(cwpayton): Before official deployment, change href to "/#/" -->
         <a class="typeface" on-tap="signIn" href="/newui#/">Sign in</a>
       </div>
     </template>
 
     <template is="dom-if" if="[[signed_in]]">
       <img class="center" id="avatar" src="[[profile.imageUrl]]" width="30" height="30">
       <span class="center typeface">[[profile.email]]</span>
       <span class="center typeface">|</span>
       <!-- TODO(cwpayton): Before official deployment, change href to "/#/" -->
       <a class="center typeface" on-tap="signOut" href="/newui#/">Sign out</a>
     </template>
   </template>
   <script>
     'use strict';
     Polymer({
       is: 'auth-signin',
       properties: {
         auth_headers: {
           type: Object,
-          value: () => {},
+          value: () => null,
           notify: true
         },
 
         auth_response: {
           type: Object,
           notify: true,
           observer: '_makeHeader'
         },
 
         client_id: {
           type: String
         },
 
+        initialized: {
+          type: Boolean,
+          value: false,
+          notify: true
+        },
+
         profile: {
           type: Object,
           notify: true
         },
 
         signed_in: {
           type: Boolean,
           value: false,
           notify: true
+        },
+
+        user: {
+          type: Object,
+          value: () => null,
+          notify: true,
         }
       },
 
       ready: function() {
         if (!this.client_id) {
           return;
         }
         // If a page is opened in a new tab, we are (likely) already logged in
         // so we wait for the gapi and auth2 to be loaded and re-extract our
         // access_token.
         window.setTimeout(function(){

[Ryan Tseng, 2017/07/14 20:43:05]

Actually you just have to attach this function to the google-signin-aware's
initialized-changed event, export a new "ready" event from this component,
remove the exported user property, and you can remove all of the timers here and
simplify the code in the other modules.

           // The 'gapi' checks are the same that signin-aware does. We do them
           // to avoid extraneous errors in the console.
           if (!this.signed_in && !this._signingIn){
             if (('gapi' in window) && ('auth2' in window.gapi)) {
-              var user = gapi.auth2.getAuthInstance().currentUser.get();
-              if (user && user.getAuthResponse().access_token) {
+              this.set('user', null);
+              this.set('user', gapi.auth2.getAuthInstance().currentUser.get());
+              if (this.user && this.user.getAuthResponse().access_token) {
                 // User is already logged in, can use the access_token.
                 this._onSignin();
-              } else {
+              } else if (!this.initialized) {
                 window.setTimeout(this.ready.bind(this), 50);
               }
             } else {
               window.setTimeout(this.ready.bind(this), 50);
             }
           }
         }.bind(this), 50);
       },
 
       _onSignin: function() {
         this._signingIn = true;
-        var user = gapi.auth2.getAuthInstance().currentUser.get();
-        var profile = { email: user.getBasicProfile().getEmail(),
-                        imageUrl: user.getBasicProfile().getImageUrl() };
-        this.set('profile', {});
+        this.set('user', null);
+        this.set('user', gapi.auth2.getAuthInstance().currentUser.get());
+        var profile = { email: this.user.getBasicProfile().getEmail(),
+                        imageUrl: this.user.getBasicProfile().getImageUrl() };
+        this.set('profile', null);
         this.set('profile', profile);
-        this.set('auth_response', user.getAuthResponse());
+        this.set('auth_response', this.user.getAuthResponse());
         this.signed_in = true;
         // The credential will expire after a while (usually an hour)
         // so we need to reload it.
         this.async(function(){
           console.log("reloading credentials");
-          user.reloadAuthResponse();
+          this.user.reloadAuthResponse();
           this._onSignin();
         }, this.auth_response.expires_in * 1000);  // convert seconds to ms
         this._signingIn = false;
       },
 
       _onSignout: function(e) {
         this.signed_in = false;
         this.set('profile', null);
       },
 
       _makeHeader: function() {
         if (!this.auth_response) {
-          this.set('auth_headers', {});
+          this.set('auth_headers', null);
         }
         this.set('auth_headers', 
             {
               "authorization": this.auth_response.token_type + " " +
                                this.auth_response.access_token
             });
       },
 
       signIn: function() {
         this.$.aware.signIn();
       },
 
       signOut: function() {
         this.$.aware.signOut();
         window.location.reload();
       }
     });
   </script>
 </dom-module>