[feat] Go to first open line when enter is pressed

When filling out the signup or login pages, and when adding an
additional service provider, the enter key will trigger the submit
action. When on the choose provider page, enter will take you to the
next page.

- Resolves: #8841

1 files changed, 40 insertions, 14 deletions

diff --git a/ui/app/components/main_panel/user_password_form.js b/ui/app/components/main_panel/user_password_form.js
index 5e26b198..33640f0c 100644
--- a/ui/app/components/main_panel/user_password_form.js
+++ b/ui/app/components/main_panel/user_password_form.js
@@ -26,6 +26,7 @@ export default class UserPasswordForm extends React.Component {
       repeatPassword: null
     }
     this.submit = this.submit.bind(this)
+    this.onKeyPress = this.onKeyPress.bind(this)
     this.setNew = this.setNew.bind(this)
     this.setCurrent = this.setCurrent.bind(this)
     this.setRepeat = this.setRepeat.bind(this)
@@ -79,6 +80,22 @@ export default class UserPasswordForm extends React.Component {
     )
   }
 
+  onKeyPress(e) {
+    if (e.key === 'Enter') {
+      const firstUnfilledField = [
+        this.currentPasswordRef,
+        this.newPasswordRef,
+        this.repeatPasswordRef,
+      ].find(ref => ref != null && ref.value == "")
+
+      if (firstUnfilledField) {
+        firstUnfilledField.focus()
+      } else {
+        this.submit(e);
+      }
+    }
+  }
+
   render () {
     let submitButton = null
     let message = null
@@ -100,21 +117,30 @@ export default class UserPasswordForm extends React.Component {
       submitButton = <Button block disabled={!this.maySubmit()} onClick={this.submit}>Change</Button>
     }
     return (
-      <form onSubmit={this.submit}>
+      <form onSubmit={this.submit} onKeyPress={this.onKeyPress}>
         {message}
-        <PasswordField id={this.props.account.id + "-current-password"}
-          label="Current Password"
-          validationMode="none"
-          onChange={this.setCurrent} />
-        <PasswordField id={this.props.account.id + "-new-password"}
-          label="New Password"
-          validationMode="crack"
-          onChange={this.setNew} />
-        <PasswordField id={this.props.account.id + "-repeat-password"}
-          label="Repeat Password"
-          validationMode="match"
-          matchText={this.state.newPassword}
-          onChange={this.setRepeat} />
+        <PasswordField
+            id={this.props.account.id + "-current-password"}
+            inputRef={ref => this.currentPasswordRef = ref}
+            label="Current Password"
+            validationMode="none"
+            onChange={this.setCurrent}
+        />
+        <PasswordField
+            id={this.props.account.id + "-new-password"}
+            inputRef={ref => this.newPasswordRef = ref}
+            label="New Password"
+            validationMode="crack"
+            onChange={this.setNew}
+        />
+        <PasswordField
+            id={this.props.account.id + "-repeat-password"}
+            inputRef={ref => this.repeatPasswordRef = ref}
+            label="Repeat Password"
+            validationMode="match"
+            matchText={this.state.newPassword}
+            onChange={this.setRepeat}
+        />
         {submitButton}
       </form>
     )