grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Show busy indicator, focus first field (#4997)

Browse Source
This commit is contained in:
Jaco Greeff 2017-03-22 16:39:49 +01:00 committed by Gav Wood
parent 1879dbca8a
commit 5df3f5d136
1 changed files with 144 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
js/src/modals/PasswordManager/passwordManager.js
View File

@ -60,8 +60,11 @@ class PasswordManager extends Component {
store = new Store(this.context.api, this.props.account); store = new Store(this.context.api, this.props.account);
render () { render () {
const { busy } = this.store;
return ( return (
<Portal <Portal
busy={ busy }
buttons={ this.renderDialogActions() } buttons={ this.renderDialogActions() }
onClose={ this.onClose } onClose={ this.onClose }
open open
@ -133,8 +136,6 @@ class PasswordManager extends Component {
} }
renderPage () { renderPage () {
const { busy, isRepeatValid, newPassword, passwordHint } = this.store;
return ( return (
<Tabs <Tabs
inkBarStyle={ TABS_INKBAR_STYLE } inkBarStyle={ TABS_INKBAR_STYLE }
@ -149,29 +150,7 @@ class PasswordManager extends Component {
} }
onActive={ this.onActivateTestTab } onActive={ this.onActivateTestTab }
> >
<Form className={ styles.form }> { this.renderTabTest() }
<div>
<Input
disabled={ busy }
hint={
<FormattedMessage
id='passwordChange.testPassword.hint'
defaultMessage='your account password'
/>
}
label={
<FormattedMessage
id='passwordChange.testPassword.label'
defaultMessage='password'
/>
}
onChange={ this.onEditTestPassword }
onSubmit={ this.testPassword }
submitOnBlur={ false }
type='password'
/>
</div>
</Form>
</Tab> </Tab>
<Tab <Tab
label={ label={
@ -182,103 +161,151 @@ class PasswordManager extends Component {
} }
onActive={ this.onActivateChangeTab } onActive={ this.onActivateChangeTab }
> >
<Form className={ styles.form }> { this.renderTabChange() }
<div>
<Input
disabled={ busy }
hint={
<FormattedMessage
id='passwordChange.currentPassword.hint'
defaultMessage='your current password for this account'
/>
}
label={
<FormattedMessage
id='passwordChange.currentPassword.label'
defaultMessage='current password'
/>
}
onChange={ this.onEditCurrentPassword }
type='password'
/>
<Input
disabled={ busy }
hint={
<FormattedMessage
id='passwordChange.passwordHint.hint'
defaultMessage='hint for the new password'
/>
}
label={
<FormattedMessage
id='passwordChange.passwordHint.label'
defaultMessage='(optional) new password hint'
/>
}
onChange={ this.onEditNewPasswordHint }
value={ passwordHint }
/>
<div className={ styles.passwords }>
<div className={ styles.password }>
<Input
disabled={ busy }
hint={
<FormattedMessage
id='passwordChange.newPassword.hint'
defaultMessage='the new password for this account'
/>
}
label={
<FormattedMessage
id='passwordChange.newPassword.label'
defaultMessage='new password'
/>
}
onChange={ this.onEditNewPassword }
onSubmit={ this.changePassword }
submitOnBlur={ false }
type='password'
/>
</div>
<div className={ styles.password }>
<Input
disabled={ busy }
error={
isRepeatValid
? null
: <FormattedMessage
id='passwordChange.repeatPassword.error'
defaultMessage='the supplied passwords do not match'
/>
}
hint={
<FormattedMessage
id='passwordChange.repeatPassword.hint'
defaultMessage='repeat the new password for this account'
/>
}
label={
<FormattedMessage
id='passwordChange.repeatPassword.label'
defaultMessage='repeat new password'
/>
}
onChange={ this.onEditNewPasswordRepeat }
onSubmit={ this.changePassword }
submitOnBlur={ false }
type='password'
/>
</div>
</div>
<PasswordStrength input={ newPassword } />
</div>
</Form>
</Tab> </Tab>
</Tabs> </Tabs>
); );
} }
renderTabTest () {
const { actionTab, busy } = this.store;
if (actionTab !== TEST_ACTION) {
return null;
}
return (
<Form className={ styles.form }>
<div>
<Input
autoFocus
disabled={ busy }
hint={
<FormattedMessage
id='passwordChange.testPassword.hint'
defaultMessage='your account password'
/>
}
label={
<FormattedMessage
id='passwordChange.testPassword.label'
defaultMessage='password'
/>
}
onChange={ this.onEditTestPassword }
onSubmit={ this.testPassword }
submitOnBlur={ false }
type='password'
/>
</div>
</Form>
);
}
renderTabChange () {
const { actionTab, busy, isRepeatValid, newPassword, passwordHint } = this.store;
if (actionTab !== CHANGE_ACTION) {
return null;
}
return (
<Form className={ styles.form }>
<div>
<Input
autoFocus
disabled={ busy }
hint={
<FormattedMessage
id='passwordChange.currentPassword.hint'
defaultMessage='your current password for this account'
/>
}
label={
<FormattedMessage
id='passwordChange.currentPassword.label'
defaultMessage='current password'
/>
}
onChange={ this.onEditCurrentPassword }
type='password'
/>
<Input
disabled={ busy }
hint={
<FormattedMessage
id='passwordChange.passwordHint.hint'
defaultMessage='hint for the new password'
/>
}
label={
<FormattedMessage
id='passwordChange.passwordHint.label'
defaultMessage='(optional) new password hint'
/>
}
onChange={ this.onEditNewPasswordHint }
value={ passwordHint }
/>
<div className={ styles.passwords }>
<div className={ styles.password }>
<Input
disabled={ busy }
hint={
<FormattedMessage
id='passwordChange.newPassword.hint'
defaultMessage='the new password for this account'
/>
}
label={
<FormattedMessage
id='passwordChange.newPassword.label'
defaultMessage='new password'
/>
}
onChange={ this.onEditNewPassword }
onSubmit={ this.changePassword }
submitOnBlur={ false }
type='password'
/>
</div>
<div className={ styles.password }>
<Input
disabled={ busy }
error={
isRepeatValid
? null
: <FormattedMessage
id='passwordChange.repeatPassword.error'
defaultMessage='the supplied passwords do not match'
/>
}
hint={
<FormattedMessage
id='passwordChange.repeatPassword.hint'
defaultMessage='repeat the new password for this account'
/>
}
label={
<FormattedMessage
id='passwordChange.repeatPassword.label'
defaultMessage='repeat new password'
/>
}
onChange={ this.onEditNewPasswordRepeat }
onSubmit={ this.changePassword }
submitOnBlur={ false }
type='password'
/>
</div>
</div>
<PasswordStrength input={ newPassword } />
</div>
</Form>
);
}
renderDialogActions () { renderDialogActions () {
const { actionTab, busy, isRepeatValid } = this.store; const { actionTab, busy, isRepeatValid } = this.store;