[Chromoting] Improve the PIN entry part of the host setup dialog.

- Sets focus to the first PIN text widget.
- On ENTER, moves focus to the second PIN text widget.
- Clears PIN text widgets before starting the flow.
- Fixes a minor HTML typo.

A follow-up CL will compare the values of the two PIN text widgets.

BUG=121516

Review URL: https://chromiumcodereview.appspot.com/9981008

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@130679 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 14 insertions, 4 deletions

diff --git a/remoting/webapp/host_setup_dialog.js b/remoting/webapp/host_setup_dialog.js
index 9e586f6..21996f2 100644
--- a/remoting/webapp/host_setup_dialog.js
+++ b/remoting/webapp/host_setup_dialog.js
@@ -111,6 +111,14 @@ remoting.HostSetupDialog = function(daemon) {
   };
   var form = document.getElementById('ask-pin-form');
   form.addEventListener('submit', onPinSubmit, false);
+  /** @param {Event} event The event. */
+  var onDaemonPinEntryKeyPress = function(event) {
+    if (event.which == 13) {
+      document.getElementById('daemon-pin-confirm').focus();
+      event.preventDefault();
+    }
+  };
+  this.pinEntry_.addEventListener('keypress', onDaemonPinEntryKeyPress, false);
 };
 
 /**
@@ -165,8 +173,8 @@ remoting.HostSetupDialog.prototype.hide = function() {
  */
 remoting.HostSetupDialog.prototype.startNewFlow_ = function(sequence) {
   this.flow_ = new remoting.HostSetupFlow(sequence);
-  this.pinEntry_.text = '';
-  this.pinConfirm_.text = '';
+  this.pinEntry_.value = '';
+  this.pinConfirm_.value = '';
   this.updateState_();
 };
 
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index c9c1c0d..8e8b5b2 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -201,10 +201,12 @@ found in the LICENSE file.
               data-ui-mode="home.host-setup.ask-pin"
               action="">
           <div>
-            <label for="daemon-pin-input"
+            <label for="daemon-pin-entry"
                    i18n-content="ASK_PIN_DIALOG_LABEL"
                    class="box-spacer"></label>
-            <input id="daemon-pin-entry" type="password">
+            <input id="daemon-pin-entry"
+                   autofocus="autofocus"
+                   type="password">
           </div>
           <div>
             <label for="daemon-pin-confirm"