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

background.html

@@ -759,6 +759,7 @@
     </div>
     {{/isStep3}}
     {{#isStep4}}
+    <form id='link-phone'>
       <div id='step4' class='step'>
         <div class='inner'>
           <div class='step-body'>
@@ -768,6 +769,7 @@
               <input type='text' class='device-name' spellcheck='false' maxlength='50' />
             </div>
           </div>
+
             <div class='nav'>
               <div>
                 <a class='button finish'>{{ finishLinkingPhoneButton }}</a>
@@ -775,6 +777,7 @@
             </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%;