From aa8cf504f876182048e1f0e5b72b234b10a7f472 Mon Sep 17 00:00:00 2001 From: Simon Fondrie-Teitler Date: Wed, 26 Apr 2017 20:28:27 -0400 Subject: [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 --- ui/app/components/list_editor/index.js | 24 +++- ui/app/components/login.js | 145 +++++++++++++-------- ui/app/components/main_panel/user_password_form.js | 54 ++++++-- ui/app/components/password_field.js | 28 ++-- ui/app/components/wizard/provider_select_stage.js | 32 +++-- 5 files changed, 189 insertions(+), 94 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/list_editor/index.js b/ui/app/components/list_editor/index.js index 58b6ec4..4fff1ca 100644 --- a/ui/app/components/list_editor/index.js +++ b/ui/app/components/list_editor/index.js @@ -20,7 +20,8 @@ class ListEdit extends React.Component { selected: null, // string of the selected item onRemove: null, onAdd: null, - onSelect: null + onSelect: null, + onKeyDown: null }} constructor(props) { @@ -64,6 +65,18 @@ class ListEdit extends React.Component { } } + componentDidMount() { + if (this.props.onKeyDown) { + this.listEditorDiv.addEventListener("keydown", this.props.onKeyDown) + } + } + + componentWillUnmount() { + if (this.props.onKeyDown) { + this.listEditorDiv.removeEventListener("keydown", this.props.onKeyDown) + } + } + render() { let options = null if (this.props.items) { @@ -72,11 +85,16 @@ class ListEdit extends React.Component { }, this) } return( -
+
{ this.listEditorDiv = div; }} + className="list-editor" > + componentClass="select" + size="5" + onChange={this.click} + > {options} diff --git a/ui/app/components/login.js b/ui/app/components/login.js index 0a47d58..2c96e0d 100644 --- a/ui/app/components/login.js +++ b/ui/app/components/login.js @@ -1,5 +1,4 @@ import React from 'react' -import ReactDOM from 'react-dom' import { FormGroup, ControlLabel, FormControl, HelpBlock, Button, Checkbox, Glyphicon, Overlay, Tooltip, Alert } from 'react-bootstrap' @@ -59,6 +58,7 @@ class Login extends React.Component { this.onPassword2 = this.onPassword2.bind(this) this.onInvite = this.onInvite.bind(this) this.onSubmit = this.onSubmit.bind(this) + this.onKeyPress = this.onKeyPress.bind(this) this.onRemember = this.onRemember.bind(this) } @@ -73,6 +73,19 @@ class Login extends React.Component { } } + componentDidUpdate(prevProps, prevState) { + // If the user changes anything in the domain (which follows the @ sign) + // it gets replaced reverted to the domain name. This moves the cursor to + // before the @ sign when that happens + if (this.props.domain && this.state.username){ + let textarea = this.usernameref + let start = this.state.username.indexOf('@') + if (textarea.selectionStart > start) { + textarea.setSelectionRange(start, start) + } + } + } + render () { let rememberCheck = "" let submitButton = "" @@ -147,10 +160,11 @@ class Login extends React.Component { Repeat Password + type="password" + inputRef={ref => this.password2ref = ref} + value={this.state.password2 || ""} + onChange={this.onPassword2} + /> {this.state.password2State == 'success' ? null : } {password2Help} @@ -161,8 +175,10 @@ class Login extends React.Component { Invite Code + value={this.state.invite || ""} + onChange={this.onInvite} + inputRef={ref => this.inviteref = ref} + /> {inviteHelp} ) @@ -175,64 +191,54 @@ class Login extends React.Component { disabled: !this.maySubmit() } if (this.state.loading) { - submitButton = + submitButton = } else { - submitButton = + submitButton = } - - let usernameref = null let usernameDisabled = false let usernameValue = this.state.username || "" if (this.props.address) { usernameDisabled = true usernameValue = this.props.address - } else if (this.props.domain) { - usernameref = function(c) { - if (c != null) { - let textarea = ReactDOM.findDOMNode(c) - let start = textarea.value.indexOf('@') - if (textarea.selectionStart > start) { - textarea.setSelectionRange(start, start) - } - } - } } + const form = ( +
+ {message} + + Username + this.usernameref = ref} + autoFocus + value={usernameValue} + disabled={usernameDisabled} + onChange={this.onUsernameChange} + onBlur={this.onUsernameBlur} + /> + {this.state.usernameState == 'success' ? null : } + {usernameHelp} + - let form = - {message} - - Username - - {this.state.usernameState == 'success' ? null : } - {usernameHelp} - - - - Password - - {this.state.passwordState == 'success' ? null : } - {passwordHelp} - - - {password2Elem} - {inviteElem} - {submitButton} - {rememberCheck} -
+ + Password + this.passwordref = ref} + value={this.state.password || ""} + onChange={this.onPassword} + /> + {this.state.passwordState == 'success' ? null : } + {passwordHelp} + + {password2Elem} + {inviteElem} + {submitButton} + {rememberCheck} + + ) return form } @@ -390,6 +396,33 @@ class Login extends React.Component { } } + /** + * Handle key presses + */ + onKeyPress(e) { + // On "Enter", move the focus to the first mounted but unfilled field, + // or submit the form if there are none. + if (e.key === 'Enter') { + // Ignore the @ and domain when checking the username + if (this.usernameref.value.split('@')[0] === ''){ + this.usernameref.focus() + return + } + + const firstUnfilledField = [ + this.passwordref, + this.password2ref, + this.inviteref, + ].find(ref => ref != null && ref.value == "") + + if (firstUnfilledField) { + firstUnfilledField.focus() + } else { + this.onSubmit(e); + } + } + } + doLogin() { let account = Account.findOrAdd(this.state.username) account.login(this.state.password, this.props.autoAllowed).then( @@ -451,4 +484,4 @@ class Login extends React.Component { } -export default Login \ No newline at end of file +export default Login diff --git a/ui/app/components/main_panel/user_password_form.js b/ui/app/components/main_panel/user_password_form.js index 5e26b19..33640f0 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 = } return ( -
+ {message} - - - + this.currentPasswordRef = ref} + label="Current Password" + validationMode="none" + onChange={this.setCurrent} + /> + this.newPasswordRef = ref} + label="New Password" + validationMode="crack" + onChange={this.setNew} + /> + this.repeatPasswordRef = ref} + label="Repeat Password" + validationMode="match" + matchText={this.state.newPassword} + onChange={this.setRepeat} + /> {submitButton} ) diff --git a/ui/app/components/password_field.js b/ui/app/components/password_field.js index 8397967..654b8a5 100644 --- a/ui/app/components/password_field.js +++ b/ui/app/components/password_field.js @@ -8,13 +8,16 @@ import Validate from 'lib/validate' export default class PasswordField extends React.Component { - static get defaultProps() {return{ - id: null, // required. controlId of the element - label: "Password", - onChange: null, // callback passed current password - validationMode: "crack", // one of 'none', 'match', 'crack' - matchText: null, // used if validationMode == 'match' - }} + static get defaultProps() { + return { + id: null, // required. controlId of the element + label: "Password", + onChange: null, // callback passed current password + validationMode: "crack", // one of 'none', 'match', 'crack' + matchText: null, // used if validationMode == 'match' + inputRef: null, // a ref to the input. Used to set focus + } + } constructor(props) { super(props) @@ -43,14 +46,15 @@ export default class PasswordField extends React.Component { {this.props.label} + type="password" + inputRef={this.props.inputRef} + value={this.state.password || ""} + onChange={this.keypress} + /> {this.state.passwordState == 'success' ? null : } {passwordHelp} - ) + ) } keypress(e) { diff --git a/ui/app/components/wizard/provider_select_stage.js b/ui/app/components/wizard/provider_select_stage.js index 2a342d9..b19fc8a 100644 --- a/ui/app/components/wizard/provider_select_stage.js +++ b/ui/app/components/wizard/provider_select_stage.js @@ -33,12 +33,13 @@ export default class ProviderSelectStage extends React.Component { provider: null, // Provider object, if selected error: null // error message } - this.add = this.add.bind(this) - this.remove = this.remove.bind(this) - this.select = this.select.bind(this) - this.close = this.close.bind(this) - this.cancel = this.cancel.bind(this) - this.next = this.next.bind(this) + this.add = this.add.bind(this) + this.remove = this.remove.bind(this) + this.select = this.select.bind(this) + this.close = this.close.bind(this) + this.cancel = this.cancel.bind(this) + this.next = this.next.bind(this) + this.onKeyDown = this.onKeyDown.bind(this) } componentWillMount() { @@ -134,6 +135,13 @@ export default class ProviderSelectStage extends React.Component { }) } + onKeyDown(e) { + // Check for enter key + if (e.keyCode === 13) { + this.next(); + } + } + render() { let modal = null let info = null @@ -171,9 +179,15 @@ export default class ProviderSelectStage extends React.Component {
) - let editlist = + let editlist = return( -- cgit v1.2.3