[Webapp Refactor] Implements Pin dialog as an object.

Implements Pin Dialog as an object.

BUG=466406

Review URL: https://codereview.chromium.org/1004873003

Cr-Commit-Position: refs/heads/master@{#320559}

5 files changed, 110 insertions, 58 deletions

diff --git a/remoting/webapp/browser_test/cancel_pin_browser_test.js b/remoting/webapp/browser_test/cancel_pin_browser_test.js
index d6dc750..888ea06 100644
--- a/remoting/webapp/browser_test/cancel_pin_browser_test.js
+++ b/remoting/webapp/browser_test/cancel_pin_browser_test.js
@@ -25,7 +25,7 @@ browserTest.Cancel_PIN.prototype.run = function(data) {
 
   var AppMode = remoting.AppMode;
   browserTest.connectMe2Me().then(function() {
-    browserTest.clickOnControl('cancel-pin-entry-button');
+    browserTest.clickOnControl('#pin-dialog .cancel-button');
     return browserTest.onUIMode(AppMode.HOME);
   }).then(function() {
     return browserTest.connectMe2Me()
diff --git a/remoting/webapp/crd/html/dialog_client_pin_prompt.html b/remoting/webapp/crd/html/dialog_client_pin_prompt.html
index 992b1e9..1688ff7 100644
--- a/remoting/webapp/crd/html/dialog_client_pin_prompt.html
+++ b/remoting/webapp/crd/html/dialog_client_pin_prompt.html
@@ -3,12 +3,12 @@ Copyright (c) 2014 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
-<div data-ui-mode="home.client.pin-prompt">
-  <div id="pin-message"
-       i18n-content="PIN_MESSAGE"
-       class="message"></div>
+<div data-ui-mode="home.client.pin-prompt" id="pin-dialog">
+  <div i18n-content="PIN_MESSAGE"
+       class="pin-message message"></div>
 
-  <form id="pin-form" action="">
+  <!-- using a form so that the PIN can be submitted on ENTER -->
+  <form id="pin-form">
     <table class="centered">
       <tr>
         <td>
@@ -19,13 +19,14 @@ found in the LICENSE file.
         <td>
           <input id="pin-entry"
                  type="password"
+                 class="pin-inputField"
                  autofocus="autofocus"
                  autocomplete="off"/>
           <button id="pin-connect-button"
-                  type="submit"
+                  class="connect-button"
                   i18n-content="CONNECT_BUTTON">
           </button>
-          <button id="cancel-pin-entry-button"
+          <button class="cancel-button"
                   type="button"
                   i18n-content="CANCEL">
           </button>
@@ -36,8 +37,10 @@ found in the LICENSE file.
           <!-- Empty cell to align the checkbox and PIN entry. -->
         </td>
         <td>
-          <label id="remember-pin" class="checkbox-label">
-            <input id="remember-pin-checkbox" type="checkbox">
+          <label id="remember-pin" class="pairing-section checkbox-label">
+            <input id="remember-pin-checkbox"
+                   class="pairing-checkbox"
+                   type="checkbox">
             <span i18n-content="REMEMBER_PIN"></span>
           </label>
         </td>
diff --git a/remoting/webapp/crd/js/crd_connect.js b/remoting/webapp/crd/js/crd_connect.js
index ab75e59..8fb2a11 100644
--- a/remoting/webapp/crd/js/crd_connect.js
+++ b/remoting/webapp/crd/js/crd_connect.js
@@ -84,53 +84,13 @@ remoting.connectMe2MeHostVersionAcknowledged_ = function(host) {
    * @param {function(string):void} onPinFetched
    */
   var requestPin = function(supportsPairing, onPinFetched) {
-    /** @type {Element} */
-    var pinForm = document.getElementById('pin-form');
-    /** @type {Element} */
-    var pinCancel = document.getElementById('cancel-pin-entry-button');
-    /** @type {Element} */
-    var rememberPin = document.getElementById('remember-pin');
-    /** @type {Element} */
-    var rememberPinCheckbox = document.getElementById('remember-pin-checkbox');
-    /**
-     * Event handler for both the 'submit' and 'cancel' actions. Using
-     * a single handler for both greatly simplifies the task of making
-     * them one-shot. If separate handlers were used, each would have
-     * to unregister both itself and the other.
-     *
-     * @param {Event} event The click or submit event.
-     */
-    var onSubmitOrCancel = function(event) {
-      pinForm.removeEventListener('submit', onSubmitOrCancel, false);
-      pinCancel.removeEventListener('click', onSubmitOrCancel, false);
-      var pinField = document.getElementById('pin-entry');
-      var pin = pinField.value;
-      pinField.value = '';
-      if (event.target == pinForm) {
-        event.preventDefault();
-
-        // Set the focus away from the password field. This has to be done
-        // before the password field gets hidden, to work around a Blink
-        // clipboard-handling bug - http://crbug.com/281523.
-        document.getElementById('pin-connect-button').focus();
-
-        remoting.setMode(remoting.AppMode.CLIENT_CONNECTING);
-        onPinFetched(pin);
-        if (rememberPinCheckbox.checked) {
-          /** @type {boolean} */
-          remoting.pairingRequested = true;
-        }
-      } else {
-        remoting.setMode(remoting.AppMode.HOME);
-      }
-    };
-    pinForm.addEventListener('submit', onSubmitOrCancel, false);
-    pinCancel.addEventListener('click', onSubmitOrCancel, false);
-    rememberPin.hidden = !supportsPairing;
-    rememberPinCheckbox.checked = false;
-    var message = document.getElementById('pin-message');
-    l10n.localizeElement(message, host.hostName);
-    remoting.setMode(remoting.AppMode.CLIENT_PIN_PROMPT);
+    var pinDialog =
+        new remoting.PinDialog(document.getElementById('pin-dialog'), host);
+    pinDialog.show(supportsPairing).then(function(/** string */ pin) {
+      onPinFetched(pin);
+      /** @type {boolean} */
+      remoting.pairingRequested = pinDialog.pairingRequested();
+    });
   };
 
   /** @param {Object} settings */
diff --git a/remoting/webapp/crd/js/desktop_remoting.js b/remoting/webapp/crd/js/desktop_remoting.js
index c345d64..186c5b6 100644
--- a/remoting/webapp/crd/js/desktop_remoting.js
+++ b/remoting/webapp/crd/js/desktop_remoting.js
@@ -302,7 +302,7 @@ remoting.DesktopRemoting.prototype.handleExtensionMessage = function(
  * @return {void} Nothing.
  */
 remoting.DesktopRemoting.prototype.handleError = function(error) {
-  console.error('Connection failed:', error.tag);
+  console.error('Connection failed:' + error.tag);
   remoting.accessCode = '';
 
   if (error.tag === remoting.Error.Tag.AUTHENTICATION_FAILED) {
diff --git a/remoting/webapp/crd/js/me2me_connect_flow.js b/remoting/webapp/crd/js/me2me_connect_flow.js
index e8317a0..59cd4ee 100644
--- a/remoting/webapp/crd/js/me2me_connect_flow.js
+++ b/remoting/webapp/crd/js/me2me_connect_flow.js
@@ -78,4 +78,93 @@ remoting.HostNeedsUpdateDialog.prototype.onCancel_ = function() {
   this.cleanup_();
 };
 
+/**
+ * @param {HTMLElement} rootElement
+ * @param {remoting.Host} host
+ * @constructor
+ */
+remoting.PinDialog = function(rootElement, host) {
+  /** @private */
+  this.rootElement_ = rootElement;
+  /** @private {base.Deferred} */
+  this.deferred_ = null;
+  /** @private {base.Disposables} */
+  this.eventHooks_ = null;
+  /** @private */
+  this.pairingCheckbox_ = rootElement.querySelector('.pairing-checkbox');
+  /** @private */
+  this.pinInput_ = rootElement.querySelector('.pin-inputField');
+  /** @private */
+  this.host_ = host;
+};
+
+/**
+ * @param {boolean} supportsPairing
+ * @return {Promise<string>}  Promise that resolves with the PIN or rejects with
+ *    |remoting.Error.CANCELLED| if the user cancels the connection.
+ */
+remoting.PinDialog.prototype.show = function(supportsPairing) {
+  var cancel = this.rootElement_.querySelector('.cancel-button');
+  var form = this.rootElement_.querySelector('form');
+  var onCancel = this.createClickHandler_(this.onCancel_.bind(this));
+  var onConnect = this.createClickHandler_(this.onConnect_.bind(this));
+
+  this.eventHooks_ = new base.Disposables(
+    new base.DomEventHook(form, 'submit', onConnect, false),
+    new base.DomEventHook(cancel, 'click', onCancel, false));
+
+  // Reset the UI.
+  this.pairingCheckbox_.checked = false;
+  this.rootElement_.querySelector('.pairing-section').hidden = !supportsPairing;
+  var message = this.rootElement_.querySelector('.pin-message');
+  l10n.localizeElement(message, this.host_.hostName);
+  this.pinInput_.value = '';
+
+  base.debug.assert(this.deferred_ === null);
+  this.deferred_ = new base.Deferred();
+
+  remoting.setMode(remoting.AppMode.CLIENT_PIN_PROMPT);
+
+  return this.deferred_.promise();
+};
+
+/** @return {boolean} */
+remoting.PinDialog.prototype.pairingRequested = function() {
+  return this.pairingCheckbox_.checked;
+};
+
+/**
+ * @param {function():void} handler
+ * @return {Function}
+ * @private
+ */
+remoting.PinDialog.prototype.createClickHandler_ = function(handler) {
+  var that = this;
+  return function (/** Event */ e) {
+    // Prevents form submission from reloading the v1 app.
+    e.preventDefault();
+
+    // Set the focus away from the password field. This has to be done
+    // before the password field gets hidden, to work around a Blink
+    // clipboard-handling bug - http://crbug.com/281523.
+    that.rootElement_.querySelector('.connect-button').focus();
+    handler();
+    base.dispose(that.eventHooks_);
+    that.eventHooks_ = null;
+    that.deferred_ = null;
+  };
+};
+
+/** @private */
+remoting.PinDialog.prototype.onConnect_ = function() {
+  this.deferred_.resolve(this.pinInput_.value);
+  remoting.setMode(remoting.AppMode.CLIENT_CONNECTING);
+};
+
+/** @private */
+remoting.PinDialog.prototype.onCancel_ = function() {
+  this.deferred_.reject(remoting.Error.CANCELLED);
+  remoting.setMode(remoting.AppMode.HOME);
+};
+
 })();