m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Make restore vault a form so an user can submit via keyboard (#12989)

Browse Source 
* Make this a form

Similar to "import-with-seed-phrase" I would like to be able to restore my vault by pressing `<enter>` on my keyboard.

* actually test enter

* preventDefault()
This commit is contained in:
ricky 2021-12-10 14:32:13 -05:00 committed by GitHub
parent df6db8cfef
commit 2085352de8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
test/e2e/tests/metamask-responsive-ui.spec.js
View File

@ -178,10 +178,7 @@ describe('Metamask Responsive UI', function () {
await driver.fill('#password', 'correct horse battery staple'); await driver.fill('#password', 'correct horse battery staple');
await driver.fill('#confirm-password', 'correct horse battery staple'); await driver.fill('#confirm-password', 'correct horse battery staple');
await driver.clickElement({ await driver.press('#confirm-password', driver.Key.ENTER);
text: enLocaleMessages.restore.message,
tag: 'button',
});
// balance renders // balance renders
await driver.waitForSelector({ await driver.waitForSelector({

85
ui/pages/keychains/restore-vault.js
View File

@ -86,8 +86,10 @@ class RestoreVaultPage extends Component {
this.setState({ confirmPassword, confirmPasswordError }); this.setState({ confirmPassword, confirmPasswordError });
} }
onClick = () => { handleImport = (event) => {
const { password, seedPhrase } = this.state; event.preventDefault();
const { password, seedPhrase, disabled } = this.state;
if (disabled) return;
const { const {
// eslint-disable-next-line no-shadow // eslint-disable-next-line no-shadow
createNewVaultAndRestore, createNewVaultAndRestore,
@ -167,7 +169,10 @@ class RestoreVaultPage extends Component {
<div className="import-account__selector-typography"> <div className="import-account__selector-typography">
{this.context.t('secretPhraseWarning')} {this.context.t('secretPhraseWarning')}
</div> </div>
<div className="import-account__input-wrapper"> <form
className="import-account__input-wrapper"
onSubmit={this.handleImport}
>
<label className="import-account__input-label"> <label className="import-account__input-label">
{this.context.t('walletSeedRestore')} {this.context.t('walletSeedRestore')}
</label> </label>
@ -215,43 +220,43 @@ class RestoreVaultPage extends Component {
{t('showSeedPhrase')} {t('showSeedPhrase')}
</label> </label>
</div> </div>
</div> <TextField
<TextField id="password"
id="password" label={t('newPassword')}
label={t('newPassword')} type="password"
type="password" className="first-time-flow__input"
className="first-time-flow__input" value={this.state.password}
value={this.state.password} onChange={(event) =>
onChange={(event) => this.handlePasswordChange(event.target.value)
this.handlePasswordChange(event.target.value) }
} error={passwordError}
error={passwordError} autoComplete="new-password"
autoComplete="new-password" margin="normal"
margin="normal" largeLabel
largeLabel />
/> <TextField
<TextField id="confirm-password"
id="confirm-password" label={t('confirmPassword')}
label={t('confirmPassword')} type="password"
type="password" className="first-time-flow__input"
className="first-time-flow__input" value={this.state.confirmPassword}
value={this.state.confirmPassword} onChange={(event) =>
onChange={(event) => this.handleConfirmPasswordChange(event.target.value)
this.handleConfirmPasswordChange(event.target.value) }
} error={confirmPasswordError}
error={confirmPasswordError} autoComplete="confirm-password"
autoComplete="confirm-password" margin="normal"
margin="normal" largeLabel
largeLabel />
/> <Button
<Button type="primary"
type="primary" submit
className="first-time-flow__button" className="first-time-flow__button"
onClick={() => !disabled && this.onClick()} disabled={disabled}
disabled={disabled} >
> {this.context.t('restore')}
{this.context.t('restore')} </Button>
</Button> </form>
</div> </div>
</div> </div>
</div> </div>