From 59bee6690d4f3fc8de5fc0f499a3e5b0efd141ba Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Fri, 2 Mar 2018 15:34:51 -0800
Subject: [PATCH] Choose device name screen: Finish by pressing enter (#2085)

---
 background.html          | 29 ++++++++++++++++-------------
 js/views/install_view.js |  9 +++++++--
 stylesheets/_global.scss |  4 ++++
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/background.html b/background.html
index 388dd921b..ade360ddb 100644
--- a/background.html
+++ b/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'>
diff --git a/js/views/install_view.js b/js/views/install_view.js
index 330d0a5d3..d07f511ff 100644
--- a/js/views/install_view.js
+++ b/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();
 
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 9b4d7290e..bf4e7fe47 100644
--- a/stylesheets/_global.scss
+++ b/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%;