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('#confirm-password', 'correct horse battery staple');
await driver.clickElement({
text: enLocaleMessages.restore.message,
tag: 'button',
});
await driver.press('#confirm-password', driver.Key.ENTER);
// balance renders
await driver.waitForSelector({

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

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