Choose device name screen: Finish by pressing enter (#2085)

background.html

@@ -759,22 +759,25 @@
     </div>
     {{/isStep3}}
     {{#isStep4}}
-    <div id='step4' class='step'>
-      <div class='inner'>
-        <div class='step-body'>
-          <span class='banner-icon lead-pencil'></span>
-          <div class='header'>{{ chooseName }}</div>
-          <div>
-            <input type='text' class='device-name' spellcheck='false' maxlength='50' />
-          </div>
-        </div>
-        <div class='nav'>
-          <div>
-            <a class='button finish'>{{ finishLinkingPhoneButton }}</a>
+    <form id='link-phone'>
+      <div id='step4' class='step'>
+        <div class='inner'>
+          <div class='step-body'>
+            <span class='banner-icon lead-pencil'></span>
+            <div class='header'>{{ chooseName }}</div>
+            <div>
+              <input type='text' class='device-name' spellcheck='false' maxlength='50' />
+            </div>
           </div>
+
+            <div class='nav'>
+              <div>
+                <a class='button finish'>{{ finishLinkingPhoneButton }}</a>
+              </div>
+            </div>
         </div>
       </div>
-    </div>
+    </form>
     {{/isStep4}}
     {{#isStep5}}
     <div id='step5' class='step'>

js/views/install_view.js

@@ -23,7 +23,8 @@
         className: 'main full-screen-flow',
         events: {
             'click .try-again': 'connect',
-            // handler for finish button is in confirmNumber()
+            'click .finish': 'finishLinking',
+            // the actual next step happens in confirmNumber() on submit form #link-phone
         },
         initialize: function(options) {
             options = options || {};
@@ -143,13 +144,17 @@
             this.$(DEVICE_NAME_SELECTOR).val(deviceName || window.config.hostname);
             this.$(DEVICE_NAME_SELECTOR).focus();
         },
+        finishLinking: function() {
+            // We use a form so we get submit-on-enter behavior
+            this.$('#link-phone').submit();
+        },
         confirmNumber: function(number) {
             window.removeSetupMenuItems();
             this.selectStep(Steps.ENTER_NAME);
             this.setDeviceNameDefault();
 
             return new Promise(function(resolve, reject) {
-                this.$('.finish').click(function(e) {
+                this.$('#link-phone').submit(function(e) {
                     e.stopPropagation();
                     e.preventDefault();
 

stylesheets/_global.scss

@@ -735,6 +735,10 @@ input[type=text], input[type=search], textarea {
     margin-right: auto;
   }
 
+  form {
+    height: 100%;
+    width: 100%;
+  }
   .step {
     height: 100%;
     width: 100%;