1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/keychains/restore-vault.js

266 lines
8.0 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { ethers } from 'ethers';
2018-07-05 19:09:55 +02:00
import {
createNewVaultAndRestore,
unMarkPasswordForgotten,
initializeThreeBox,
} from '../../store/actions';
import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
import TextField from '../../components/ui/text-field';
import Button from '../../components/ui/button';
2018-07-05 19:09:55 +02:00
const { isValidMnemonic } = ethers.utils;
2018-07-05 19:09:55 +02:00
class RestoreVaultPage extends Component {
static contextTypes = {
t: PropTypes.func,
Metametrics (#6171) * Add metametrics provider and util. * Add backend api and state for participating in metametrics. * Add frontend action for participating in metametrics. * Add metametrics opt-in screen. * Add metametrics events to first time flow. * Add metametrics events for route changes * Add metametrics events for send and confirm screens * Add metametrics events to dropdowns, transactions, log in and out, settings, sig requests and main screen * Ensures each log in is measured as a new visit by metametrics. * Ensure metametrics is called with an empty string for dimensions params if specified * Adds opt in metametrics modal after unlock for existing users * Adds settings page toggle for opting in and out of MetaMetrics * Switch metametrics dimensions to page level scope * Lint, test and translation fixes for metametrics. * Update design for metametrics opt-in screen * Complete responsive styling of metametrics-opt-in modal * Use new chart image on metrics opt in screens * Incorporate the metametrics opt-in screen into the new onboarding flow * Update e2e tests to accomodate metametrics changes * Mock out metametrics network requests in integration tests * Fix tx-list integration test to support metametrics provider. * Send number of tokens and accounts data with every metametrics event. * Update metametrics event descriptor schema and add new events. * Fix import tos bug and send gas button bug due to metametrics changes. * Various small fixes on the metametrics branch. * Add origin custom variable type to metametrics.util * Fix names of onboarding complete actions (metametrics). * Fix names of Metrics Options actions (metametrics). * Clean up code related to metametrics. * Fix bad merge conflict resolution and improve promise handling in sendMetaMetrics event and confrim tx base * Don't send a second metrics event if user has gone back during first time flow. * Collect metametrics on going back from onboarding create/import. * Add missing custom variable constants for metametrics * Fix metametrics provider * Make height of opt-in modal responsive. * Adjust text content for opt-in modal. * Update metametrics event names and clean up code in opt-in-modal * Put phishing warning step next to last in onboarding flow * Link terms of service on create and import screens of first time flow * Add subtext to options on the onboarding select action screen. * Fix styling of bullet points on end of onboarding screen. * Combine phishing warning and congratulations screens. * Fix placement of users if unlocking after an incomplete onboarding import flow. * Fix capitalization in opt-in screen * Fix last onboarding screen translations * Add link to 'Learn More' on the last screen of onboarding * Code clean up: metametrics branch * Update e2e tests for phishing warning step removal * e2e tests passing on metametrics branch * Different tracking urls for metametrics on development and prod
2019-03-05 16:45:01 +01:00
metricsEvent: PropTypes.func,
};
2018-07-05 19:09:55 +02:00
static propTypes = {
createNewVaultAndRestore: PropTypes.func.isRequired,
leaveImportSeedScreenState: PropTypes.func,
history: PropTypes.object,
isLoading: PropTypes.bool,
initializeThreeBox: PropTypes.func,
};
2018-07-05 19:09:55 +02:00
state = {
seedPhrase: '',
showSeedPhrase: false,
2018-07-05 19:09:55 +02:00
password: '',
confirmPassword: '',
seedPhraseError: null,
passwordError: null,
confirmPasswordError: null,
};
2020-11-03 00:41:28 +01:00
parseSeedPhrase = (seedPhrase) =>
(seedPhrase || '').trim().toLowerCase().match(/\w+/gu)?.join(' ') || '';
2020-11-03 00:41:28 +01:00
handleSeedPhraseChange(seedPhrase) {
const { t } = this.context;
let seedPhraseError = null;
2018-07-05 19:09:55 +02:00
const wordCount = this.parseSeedPhrase(seedPhrase).split(/\s/u).length;
2020-11-03 00:41:28 +01:00
if (
seedPhrase &&
(wordCount % 3 !== 0 || wordCount < 12 || wordCount > 24)
) {
seedPhraseError = t('seedPhraseReq');
} else if (!isValidMnemonic(seedPhrase)) {
seedPhraseError = t('invalidSeedPhrase');
2018-07-05 19:09:55 +02:00
}
this.setState({ seedPhrase, seedPhraseError });
2018-07-05 19:09:55 +02:00
}
2020-11-03 00:41:28 +01:00
handlePasswordChange(password) {
const { confirmPassword } = this.state;
let confirmPasswordError = null;
let passwordError = null;
2018-07-05 19:09:55 +02:00
if (password && password.length < 8) {
passwordError = this.context.t('passwordNotLongEnough');
}
2018-07-05 19:09:55 +02:00
if (confirmPassword && password !== confirmPassword) {
confirmPasswordError = this.context.t('passwordsDontMatch');
}
this.setState({ password, passwordError, confirmPasswordError });
2018-07-05 19:09:55 +02:00
}
2020-11-03 00:41:28 +01:00
handleConfirmPasswordChange(confirmPassword) {
const { password } = this.state;
let confirmPasswordError = null;
2018-07-05 19:09:55 +02:00
if (password !== confirmPassword) {
confirmPasswordError = this.context.t('passwordsDontMatch');
}
this.setState({ confirmPassword, confirmPasswordError });
2018-07-05 19:09:55 +02:00
}
onClick = () => {
const { password, seedPhrase } = this.state;
2018-07-05 19:09:55 +02:00
const {
// eslint-disable-next-line no-shadow
2018-07-05 19:09:55 +02:00
createNewVaultAndRestore,
leaveImportSeedScreenState,
history,
// eslint-disable-next-line no-shadow
initializeThreeBox,
} = this.props;
2018-07-05 19:09:55 +02:00
leaveImportSeedScreenState();
2020-11-03 00:41:28 +01:00
createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase)).then(
() => {
Metametrics (#6171) * Add metametrics provider and util. * Add backend api and state for participating in metametrics. * Add frontend action for participating in metametrics. * Add metametrics opt-in screen. * Add metametrics events to first time flow. * Add metametrics events for route changes * Add metametrics events for send and confirm screens * Add metametrics events to dropdowns, transactions, log in and out, settings, sig requests and main screen * Ensures each log in is measured as a new visit by metametrics. * Ensure metametrics is called with an empty string for dimensions params if specified * Adds opt in metametrics modal after unlock for existing users * Adds settings page toggle for opting in and out of MetaMetrics * Switch metametrics dimensions to page level scope * Lint, test and translation fixes for metametrics. * Update design for metametrics opt-in screen * Complete responsive styling of metametrics-opt-in modal * Use new chart image on metrics opt in screens * Incorporate the metametrics opt-in screen into the new onboarding flow * Update e2e tests to accomodate metametrics changes * Mock out metametrics network requests in integration tests * Fix tx-list integration test to support metametrics provider. * Send number of tokens and accounts data with every metametrics event. * Update metametrics event descriptor schema and add new events. * Fix import tos bug and send gas button bug due to metametrics changes. * Various small fixes on the metametrics branch. * Add origin custom variable type to metametrics.util * Fix names of onboarding complete actions (metametrics). * Fix names of Metrics Options actions (metametrics). * Clean up code related to metametrics. * Fix bad merge conflict resolution and improve promise handling in sendMetaMetrics event and confrim tx base * Don't send a second metrics event if user has gone back during first time flow. * Collect metametrics on going back from onboarding create/import. * Add missing custom variable constants for metametrics * Fix metametrics provider * Make height of opt-in modal responsive. * Adjust text content for opt-in modal. * Update metametrics event names and clean up code in opt-in-modal * Put phishing warning step next to last in onboarding flow * Link terms of service on create and import screens of first time flow * Add subtext to options on the onboarding select action screen. * Fix styling of bullet points on end of onboarding screen. * Combine phishing warning and congratulations screens. * Fix placement of users if unlocking after an incomplete onboarding import flow. * Fix capitalization in opt-in screen * Fix last onboarding screen translations * Add link to 'Learn More' on the last screen of onboarding * Code clean up: metametrics branch * Update e2e tests for phishing warning step removal * e2e tests passing on metametrics branch * Different tracking urls for metametrics on development and prod
2019-03-05 16:45:01 +01:00
this.context.metricsEvent({
eventOpts: {
category: 'Retention',
action: 'userEntersSeedPhrase',
name: 'onboardingRestoredVault',
},
});
initializeThreeBox();
history.push(DEFAULT_ROUTE);
2020-11-03 00:41:28 +01:00
},
);
};
2018-07-05 19:09:55 +02:00
2020-11-03 00:41:28 +01:00
hasError() {
const { passwordError, confirmPasswordError, seedPhraseError } = this.state;
return passwordError || confirmPasswordError || seedPhraseError;
}
toggleShowSeedPhrase = () => {
this.setState(({ showSeedPhrase }) => ({
showSeedPhrase: !showSeedPhrase,
}));
};
2020-11-03 00:41:28 +01:00
render() {
2018-07-05 19:09:55 +02:00
const {
seedPhrase,
showSeedPhrase,
2018-07-05 19:09:55 +02:00
password,
confirmPassword,
seedPhraseError,
passwordError,
confirmPasswordError,
} = this.state;
const { t } = this.context;
const { isLoading } = this.props;
2020-11-03 00:41:28 +01:00
const disabled =
!seedPhrase ||
!password ||
!confirmPassword ||
isLoading ||
this.hasError();
return (
2018-07-05 19:09:55 +02:00
<div className="first-view-main-wrapper">
<div className="first-view-main">
<div className="import-account">
<a
className="import-account__back-button"
2020-02-15 21:34:12 +01:00
onClick={(e) => {
e.preventDefault();
this.props.leaveImportSeedScreenState();
this.props.history.goBack();
2018-07-05 19:09:55 +02:00
}}
href="#"
>
{`< ${t('back')}`}
2018-07-05 19:09:55 +02:00
</a>
<div className="import-account__title">
2020-11-03 00:41:28 +01:00
{this.context.t('restoreAccountWithSeed')}
2018-07-05 19:09:55 +02:00
</div>
<div className="import-account__selector-label">
2020-11-03 00:41:28 +01:00
{this.context.t('secretPhrase')}
2018-07-05 19:09:55 +02:00
</div>
<div className="import-account__input-wrapper">
<label className="import-account__input-label">
{this.context.t('walletSeedRestore')}
</label>
{showSeedPhrase ? (
<textarea
className="import-account__secret-phrase"
onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
value={seedPhrase}
autoFocus
placeholder={this.context.t('separateEachWord')}
/>
) : (
<TextField
className="import-account__textarea import-account__seedphrase"
type="password"
onChange={(e) => this.handleSeedPhraseChange(e.target.value)}
value={seedPhrase}
autoFocus
placeholder={t('seedPhrasePlaceholderPaste')}
/>
)}
2020-11-03 00:41:28 +01:00
<span className="error">{seedPhraseError}</span>
<div
className="import-account__checkbox-container"
onClick={this.toggleShowSeedPhrase}
>
<div
className="import-account__checkbox"
tabIndex="0"
id="seed-checkbox"
role="checkbox"
onKeyPress={this.toggleShowSeedPhrase}
aria-checked={showSeedPhrase}
aria-labelledby="ftf-chk1-label"
>
{showSeedPhrase ? <i className="fa fa-check fa-2x" /> : null}
</div>
<label
htmlFor="seed-checkbox"
2020-11-03 00:41:28 +01:00
id="ftf-chk1-label"
className="import-account__checkbox-label"
>
{t('showSeedPhrase')}
</label>
</div>
2018-07-05 19:09:55 +02:00
</div>
<TextField
id="password"
label={t('newPassword')}
type="password"
className="first-time-flow__input"
value={this.state.password}
2020-11-03 00:41:28 +01:00
onChange={(event) =>
this.handlePasswordChange(event.target.value)
}
2018-07-05 19:09:55 +02:00
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}
2020-11-03 00:41:28 +01:00
onChange={(event) =>
this.handleConfirmPasswordChange(event.target.value)
}
2018-07-05 19:09:55 +02:00
error={confirmPasswordError}
autoComplete="confirm-password"
margin="normal"
largeLabel
/>
<Button
type="first-time"
2018-07-05 19:09:55 +02:00
className="first-time-flow__button"
onClick={() => !disabled && this.onClick()}
disabled={disabled}
>
{this.context.t('restore')}
</Button>
2018-07-05 19:09:55 +02:00
</div>
</div>
</div>
);
}
}
2018-07-05 19:09:55 +02:00
export default connect(
({ appState: { isLoading } }) => ({ isLoading }),
2020-02-15 21:34:12 +01:00
(dispatch) => ({
2018-07-05 19:09:55 +02:00
leaveImportSeedScreenState: () => {
dispatch(unMarkPasswordForgotten());
},
2020-11-03 00:41:28 +01:00
createNewVaultAndRestore: (pw, seed) =>
dispatch(createNewVaultAndRestore(pw, seed)),
initializeThreeBox: () => dispatch(initializeThreeBox()),
}),
)(RestoreVaultPage);