diff options
author | Alexander Tseung <alextsg@gmail.com> | 2018-03-27 15:20:35 +0800 |
---|---|---|
committer | Alexander Tseung <alextsg@gmail.com> | 2018-03-27 15:20:35 +0800 |
commit | 6f367a5a6b4fb8918405f233293dc3f4840b4a3d (patch) | |
tree | c60c01300c90204f8634d1f3e9e79b4ecc2fceda /mascara/src/app/first-time/import-seed-phrase-screen.js | |
parent | 72ffa2c3f5abbcb06c8ab5fdf20b9d934c330692 (diff) | |
parent | e001c0900b5256c0c8769f0c3eb5d2007f5b18d3 (diff) | |
download | tangerine-wallet-browser-6f367a5a6b4fb8918405f233293dc3f4840b4a3d.tar.gz tangerine-wallet-browser-6f367a5a6b4fb8918405f233293dc3f4840b4a3d.tar.zst tangerine-wallet-browser-6f367a5a6b4fb8918405f233293dc3f4840b4a3d.zip |
Fix merge conflicts
Diffstat (limited to 'mascara/src/app/first-time/import-seed-phrase-screen.js')
-rw-r--r-- | mascara/src/app/first-time/import-seed-phrase-screen.js | 205 |
1 files changed, 125 insertions, 80 deletions
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js index 2b01fa75d..86f02ceac 100644 --- a/mascara/src/app/first-time/import-seed-phrase-screen.js +++ b/mascara/src/app/first-time/import-seed-phrase-screen.js @@ -1,7 +1,13 @@ -import React, {Component, PropTypes} from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import {connect} from 'react-redux' -import LoadingScreen from './loading-screen' -import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions' +import classnames from 'classnames' +import { + createNewVaultAndRestore, + hideWarning, + displayWarning, + unMarkPasswordForgotten, +} from '../../../../ui/app/actions' class ImportSeedPhraseScreen extends Component { static propTypes = { @@ -10,8 +16,8 @@ class ImportSeedPhraseScreen extends Component { next: PropTypes.func.isRequired, createNewVaultAndRestore: PropTypes.func.isRequired, hideWarning: PropTypes.func.isRequired, - isLoading: PropTypes.bool.isRequired, displayWarning: PropTypes.func, + leaveImportSeedScreenState: PropTypes.func, }; state = { @@ -20,98 +26,137 @@ class ImportSeedPhraseScreen extends Component { confirmPassword: '', } - onClick = () => { - const { password, seedPhrase, confirmPassword } = this.state - const { createNewVaultAndRestore, next, displayWarning } = this.props + parseSeedPhrase = (seedPhrase) => { + return seedPhrase + .match(/\w+/g) + .join(' ') + } - if (seedPhrase.split(' ').length !== 12) { - this.warning = 'Seed Phrases are 12 words long' - displayWarning(this.warning) - return - } + onChange = ({ seedPhrase, password, confirmPassword }) => { + const { + password: prevPassword, + confirmPassword: prevConfirmPassword, + } = this.state + const { displayWarning, hideWarning } = this.props + + let warning = null - if (password.length < 8) { - this.warning = 'Passwords require a mimimum length of 8' - displayWarning(this.warning) - return + if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) { + warning = 'Seed Phrases are 12 words long' + } else if (password && password.length < 8) { + warning = 'Passwords require a mimimum length of 8' + } else if ((password || prevPassword) !== (confirmPassword || prevConfirmPassword)) { + warning = 'Confirmed password does not match' } - if (password !== confirmPassword) { - this.warning = 'Confirmed password does not match' - displayWarning(this.warning) - return + if (warning) { + displayWarning(warning) + } else { + hideWarning() } - this.warning = null - createNewVaultAndRestore(password, seedPhrase) + + seedPhrase && this.setState({ seedPhrase }) + password && this.setState({ password }) + confirmPassword && this.setState({ confirmPassword }) + } + + onClick = () => { + const { password, seedPhrase } = this.state + const { + createNewVaultAndRestore, + next, + displayWarning, + leaveImportSeedScreenState, + } = this.props + + leaveImportSeedScreenState() + createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase)) .then(next) } render () { - return this.props.isLoading - ? <LoadingScreen loadingMessage="Creating your new account" /> - : ( - <div className="import-account"> - <a - className="import-account__back-button" - onClick={e => { - e.preventDefault() - this.props.back() - }} - href="#" - > - {`< Back`} - </a> - <div className="import-account__title"> - Import an Account with Seed Phrase - </div> - <div className="import-account__selector-label"> - Enter your secret twelve word phrase here to restore your vault. - </div> - <div className="import-account__input-wrapper"> - <label className="import-account__input-label">Wallet Seed</label> - <textarea - className="import-account__secret-phrase" - onChange={e => this.setState({seedPhrase: e.target.value})} - placeholder="Separate each word with a single space" - /> - </div> - <span - className="error" - > - {this.props.warning} - </span> - <div className="import-account__input-wrapper"> - <label className="import-account__input-label">New Password</label> - <input - className="first-time-flow__input" - type="password" - placeholder="New Password (min 8 characters)" - onChange={e => this.setState({password: e.target.value})} - /> - </div> - <div className="import-account__input-wrapper"> - <label className="import-account__input-label">Confirm Password</label> - <input - className="first-time-flow__input" - type="password" - placeholder="Confirm Password" - onChange={e => this.setState({confirmPassword: e.target.value})} - /> + const { seedPhrase, password, confirmPassword } = this.state + const { warning } = this.props + const importDisabled = warning || !seedPhrase || !password || !confirmPassword + return ( + <div className="first-view-main-wrapper"> + <div className="first-view-main"> + <div className="import-account"> + <a + className="import-account__back-button" + onClick={e => { + e.preventDefault() + this.props.back() + }} + href="#" + > + {`< Back`} + </a> + <div className="import-account__title"> + Import an Account with Seed Phrase + </div> + <div className="import-account__selector-label"> + Enter your secret twelve word phrase here to restore your vault. + </div> + <div className="import-account__input-wrapper"> + <label className="import-account__input-label">Wallet Seed</label> + <textarea + className="import-account__secret-phrase" + onChange={e => this.onChange({seedPhrase: e.target.value})} + value={this.state.seedPhrase} + placeholder="Separate each word with a single space" + /> + </div> + <span + className="error" + > + {this.props.warning} + </span> + <div className="import-account__input-wrapper"> + <label className="import-account__input-label">New Password</label> + <input + className="first-time-flow__input" + type="password" + placeholder="New Password (min 8 characters)" + onChange={e => this.onChange({password: e.target.value})} + /> + </div> + <div className="import-account__input-wrapper"> + <label + className={classnames('import-account__input-label', { + 'import-account__input-label__disabled': password.length < 8, + })} + >Confirm Password</label> + <input + className={classnames('first-time-flow__input', { + 'first-time-flow__input__disabled': password.length < 8, + })} + type="password" + placeholder="Confirm Password" + onChange={e => this.onChange({confirmPassword: e.target.value})} + disabled={password.length < 8} + /> + </div> + <button + className="first-time-flow__button" + onClick={() => !importDisabled && this.onClick()} + disabled={importDisabled} + > + Import + </button> </div> - <button - className="first-time-flow__button" - onClick={this.onClick} - > - Import - </button> </div> - ) + </div> + ) } } export default connect( - ({ appState: { isLoading, warning } }) => ({ isLoading, warning }), + ({ appState: { warning } }) => ({ warning }), dispatch => ({ + leaveImportSeedScreenState: () => { + dispatch(unMarkPasswordForgotten()) + }, createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)), displayWarning: (warning) => dispatch(displayWarning(warning)), hideWarning: () => dispatch(hideWarning()), |