Handle authentication failures in the v2 app by restarting the app

remoting/webapp/base/js/auth_dialog.js

Index: remoting/webapp/base/js/auth_dialog.js
diff --git a/remoting/webapp/base/js/auth_dialog.js b/remoting/webapp/base/js/auth_dialog.js
index c9b884cebdfa6660812492abbeadc8e4b3212eb6..cd2c60ce4c8e10771788b1c969e8c0cc8a39b5c7 100644
--- a/remoting/webapp/base/js/auth_dialog.js
+++ b/remoting/webapp/base/js/auth_dialog.js
@@ -2,22 +2,48 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-'use strict';
-
 /** @suppress {duplicate} */
 var remoting = remoting || {};
 
+(function() {
+
+'use strict';
+
+var instance_ = null;
+
 /**
  * @constructor
  * @implements {remoting.WindowShape.ClientUI}
- * @param {HTMLElement} element The dialog DOM element.
+ * @param {HTMLElement} rootElement The dialog DOM element.
+ * @private
  */
-remoting.AuthDialog = function(element) {
+remoting.AuthDialog = function(rootElement) {
   /**
    * @type {HTMLElement}
    * @private
    */
-  this.element_ = element;
+  this.rootElement_ = rootElement;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.borderElement_ = rootElement.querySelector('#auth-dialog-border');

[Jamie, 2015/01/28 20:52:09]

In general, I like this model of using querySelector to find sub-elements, but
it doesn't really make sense if those elements are referred to by id. Can you
change these to use classes instead of ids? It can be a follow-up CL if you
prefer.

[kelvinp, 2015/01/29 01:05:34]

That's exactly my motivation of the change.  I tried but that would require
fixing a few browser tests as that's how we find the auth button.  I would do a
follow-up cl instead.

[Jamie, 2015/01/29 01:52:34]

Acknowledged.

+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.authButton_ = rootElement.querySelector('#auth-button');
+
+  /**
+   * @type {base.Deferred}

[Jamie, 2015/01/28 20:52:09]

Unrelated to this CL: Whenever I see base.Deferred used, I have to remind myself
what it does. I think the problem is that the name is too generic. Maybe
something more like base.Promise.Deferred would be better (though it still
doesn't really encapsulate what it does).

[kelvinp, 2015/01/29 01:05:34]

Acknowledged. Deferred is actually a standard name for such operations and it is
used in many open source frameworks (JQuery, angular, etc)
http://api.jquery.com/category/deferred-object/
https://docs.angularjs.org/api/ng/service/$q

I realized that chrome has a native implementation of deferred recently.  You
can do Promise.defer() in the console.  However, it is marked as obsolete for
Mozilla 
https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Prom...
and that's the only reason why I haven't switched over to it yet in case chrome
may follow suit later.

+   * @private
+   */
+  this.onAuthButtonDeferred_ = null;
+
+  this.authButton_.addEventListener('click', this.onClick_.bind(this), false);
+  remoting.windowShape.addCallback(this);
 };
 
 /**
@@ -25,12 +51,55 @@ remoting.AuthDialog = function(element) {
  *     rects List of rectangles.
  */
 remoting.AuthDialog.prototype.addToRegion = function(rects) {
-  var rect = /** @type {ClientRect} */(this.element_.getBoundingClientRect());
+  var rect =
+      /** @type {ClientRect} */(this.borderElement_.getBoundingClientRect());
   rects.push({left: rect.left,
               top: rect.top,
               width: rect.width,
               height: rect.height});
-}
+};
+
+/** @private */
+remoting.AuthDialog.prototype.onClick_ = function() {
+  this.rootElement_.hidden = true;
+  this.onAuthButtonDeferred_.resolve();

[Jamie, 2015/01/28 20:52:09]

Maybe assert that the deferred object is non-null (and, correspondingly, that it
is null when you create it in show).

[kelvinp, 2015/01/29 01:05:35]

Done.  I will assert null in show().  However, I don't think I need to assert
here as if it is null, resolve() will blow up anyways.

+  this.onAuthButtonDeferred_ = null;
+  remoting.windowShape.updateClientWindowShape();
+};
+
+/**
+ * @return {Promise} A Promise object that resolves when the user clicks on the
+ *   auth button.
+ */
+remoting.AuthDialog.prototype.show = function() {
+  base.debug.assert(!this.isVisible());
+  this.rootElement_.hidden = false;
+  this.onAuthButtonDeferred_ = new base.Deferred();
+  return this.onAuthButtonDeferred_.promise();
+};
+
+/**
+ * @return {boolean} whether the auth dialog is visible or not.
+ */
+remoting.AuthDialog.prototype.isVisible = function() {
+  return !this.rootElement_.hidden;
+};
+
+/**
+ * @return {Promise} A Promise object that resolves when the user clicks on the
+ *   auth button.
+ */
+remoting.AuthDialog.show = function() {

[Jamie, 2015/01/28 20:52:09]

Having both a static and a non-static show() method is a little confusing. Can
the non-static one be made private?

[kelvinp, 2015/01/29 01:05:34]

Done.

+  if (!instance_) {
+    var rootElement = document.getElementById('auth-dialog');
+    instance_ = new remoting.AuthDialog(rootElement);
+  }
+
+  if (instance_.isVisible()) {
+    return Promise.reject('Auth dialog is already showing.');
+  }
+
+  return instance_.show();
+};
 
-/** @type {remoting.AuthDialog} */
-remoting.authDialog = null;
+})();