summaryrefslogtreecommitdiff
path: root/ui/app/components/main_panel
diff options
context:
space:
mode:
authorSimon Fondrie-Teitler <simonft@riseup.net>2017-04-26 20:28:27 -0400
committerKali Kaneko (leap communications) <kali@leap.se>2017-05-04 16:27:23 +0200
commitaa8cf504f876182048e1f0e5b72b234b10a7f472 (patch)
tree2fc444b7b3c622621bb9f594e7b664eb5293d136 /ui/app/components/main_panel
parenta6437a3f30a8690b5cb0cf9bad2d0e5253743039 (diff)
[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
Diffstat (limited to 'ui/app/components/main_panel')
-rw-r--r--ui/app/components/main_panel/user_password_form.js54
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>
)