diff options
Diffstat (limited to 'ui/app/components/pages/first-time-flow/create-password')
4 files changed, 96 insertions, 53 deletions
diff --git a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js index 69b1e549f..7cca82ca6 100644 --- a/ui/app/components/pages/first-time-flow/create-password/create-password.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/create-password.component.js @@ -8,13 +8,13 @@ import { INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE, - INITIALIZE_NOTICE_ROUTE, } from '../../../../routes' export default class CreatePassword extends PureComponent { static propTypes = { history: PropTypes.object, isInitialized: PropTypes.bool, + isImportedKeyring: PropTypes.bool, onCreateNewAccount: PropTypes.func, onCreateNewAccountFromSeed: PropTypes.func, } @@ -23,17 +23,38 @@ export default class CreatePassword extends PureComponent { const { isInitialized, history } = this.props if (isInitialized) { - history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) } } render () { - const { onCreateNewAccount, onCreateNewAccountFromSeed } = this.props + const { onCreateNewAccount, onCreateNewAccountFromSeed, isImportedKeyring } = this.props return ( <div className="first-time-flow__wrapper"> + <div className="app-header__logo-container"> + <img + className="app-header__metafox-logo app-header__metafox-logo--horizontal" + src="/images/logo/metamask-logo-horizontal.svg" + height={30} + /> + <img + className="app-header__metafox-logo app-header__metafox-logo--icon" + src="/images/logo/metamask-fox.svg" + height={42} + width={42} + /> + </div> <Switch> - <Route exact path={INITIALIZE_UNIQUE_IMAGE_ROUTE} component={UniqueImage} /> + <Route exact + path={INITIALIZE_UNIQUE_IMAGE_ROUTE} + render={props => ( + <UniqueImage + { ...props } + isImportedKeyring={isImportedKeyring} + /> + )} + /> <Route exact path={INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE} diff --git a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index 6f8ab031a..2e99147bb 100644 --- a/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -3,10 +3,9 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import TextField from '../../../../text-field' import Button from '../../../../button' -import Breadcrumbs from '../../../../breadcrumbs' import { - INITIALIZE_CREATE_PASSWORD_ROUTE, - INITIALIZE_NOTICE_ROUTE, + INITIALIZE_SELECT_ACTION_ROUTE, + INITIALIZE_UNIQUE_IMAGE_ROUTE, } from '../../../../../routes' export default class ImportWithSeedPhrase extends PureComponent { @@ -26,6 +25,7 @@ export default class ImportWithSeedPhrase extends PureComponent { seedPhraseError: '', passwordError: '', confirmPasswordError: '', + termsChecked: false, } parseSeedPhrase = (seedPhrase) => { @@ -104,7 +104,7 @@ export default class ImportWithSeedPhrase extends PureComponent { try { await onSubmit(password, seedPhrase) - history.push(INITIALIZE_NOTICE_ROUTE) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) } catch (error) { this.setState({ seedPhraseError: error.message }) } @@ -131,20 +131,26 @@ export default class ImportWithSeedPhrase extends PureComponent { return !passwordError && !confirmPasswordError && !seedPhraseError } + toggleTermsCheck = () => { + this.setState((prevState) => ({ + termsChecked: !prevState.termsChecked, + })) + } + render () { const { t } = this.context - const { seedPhraseError, passwordError, confirmPasswordError } = this.state + const { seedPhraseError, passwordError, confirmPasswordError, termsChecked } = this.state return ( <form className="first-time-flow__form" onSubmit={this.handleImport} > - <div> + <div className="first-time-flow__create-back"> <a onClick={e => { e.preventDefault() - this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) }} href="#" > @@ -197,19 +203,22 @@ export default class ImportWithSeedPhrase extends PureComponent { margin="normal" largeLabel /> + <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}> + <div className="first-time-flow__checkbox"> + {termsChecked ? <i className="fa fa-check fa-2x" /> : null} + </div> + <span className="first-time-flow__checkbox-label"> + { t('agreeTermsOfService') } + </span> + </div> <Button - type="first-time" + type="confirm" className="first-time-flow__button" - disabled={!this.isValid()} + disabled={!this.isValid() || !termsChecked} onClick={this.handleImport} > { t('import') } </Button> - <Breadcrumbs - className="first-time-flow__breadcrumbs" - total={2} - currentIndex={0} - /> </form> ) } diff --git a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js index 54f8c1a70..b82cba0c5 100644 --- a/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -1,10 +1,10 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Breadcrumbs from '../../../../breadcrumbs' import Button from '../../../../button' import { INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_SELECT_ACTION_ROUTE, } from '../../../../../routes' import TextField from '../../../../text-field' @@ -23,6 +23,7 @@ export default class NewAccount extends PureComponent { confirmPassword: '', passwordError: '', confirmPasswordError: '', + termsChecked: false, } isValid () { @@ -111,12 +112,29 @@ export default class NewAccount extends PureComponent { history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) } + toggleTermsCheck = () => { + this.setState((prevState) => ({ + termsChecked: !prevState.termsChecked, + })) + } + render () { const { t } = this.context - const { password, confirmPassword, passwordError, confirmPasswordError } = this.state + const { password, confirmPassword, passwordError, confirmPasswordError, termsChecked } = this.state return ( <div> + <div className="first-time-flow__create-back"> + <a + onClick={e => { + e.preventDefault() + this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE) + }} + href="#" + > + {`< Back`} + </a> + </div> <div className="first-time-flow__header"> { t('createPassword') } </div> @@ -151,27 +169,23 @@ export default class NewAccount extends PureComponent { fullWidth largeLabel /> + <div className="first-time-flow__checkbox-container" onClick={this.toggleTermsCheck}> + <div className="first-time-flow__checkbox"> + {termsChecked ? <i className="fa fa-check fa-2x" /> : null} + </div> + <span className="first-time-flow__checkbox-label"> + I agree to the Terms Of Service + </span> + </div> <Button - type="first-time" + type="confirm" className="first-time-flow__button" - disabled={!this.isValid()} + disabled={!this.isValid() || !termsChecked} onClick={this.handleCreate} > { t('create') } </Button> </form> - <a - href="" - className="first-time-flow__link create-password__import-link" - onClick={this.handleImportWithSeedPhrase} - > - { t('importWithSeedPhrase') } - </a> - <Breadcrumbs - className="first-time-flow__breadcrumbs" - total={3} - currentIndex={0} - /> </div> ) } diff --git a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js index 41a566f0a..fa76074f5 100644 --- a/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js +++ b/ui/app/components/pages/first-time-flow/create-password/unique-image/unique-image.component.js @@ -1,9 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import Identicon from '../../../../identicon' -import Breadcrumbs from '../../../../breadcrumbs' import Button from '../../../../button' -import { INITIALIZE_NOTICE_ROUTE } from '../../../../../routes' +import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE } from '../../../../../routes' export default class UniqueImageScreen extends PureComponent { static contextTypes = { @@ -11,42 +9,43 @@ export default class UniqueImageScreen extends PureComponent { } static propTypes = { - address: PropTypes.string, history: PropTypes.object, + isImportedKeyring: PropTypes.bool, } render () { const { t } = this.context - const { address, history } = this.props + const { history, isImportedKeyring } = this.props return ( <div> - <Identicon - className="first-time-flow__unique-image" - address={address} - diameter={70} + <img + src="/images/sleuth.svg" + height={42} + width={42} /> <div className="first-time-flow__header"> - { t('yourUniqueAccountImage') } + { t('protectYourKeys') } </div> <div className="first-time-flow__text-block"> - { t('yourUniqueAccountImageDescription1') } + { t('protectYourKeysMessage1') } </div> <div className="first-time-flow__text-block"> - { t('yourUniqueAccountImageDescription2') } + { t('protectYourKeysMessage2') } </div> <Button - type="first-time" + type="confirm" className="first-time-flow__button" - onClick={() => history.push(INITIALIZE_NOTICE_ROUTE)} + onClick={() => { + if (isImportedKeyring) { + history.push(INITIALIZE_END_OF_FLOW_ROUTE) + } else { + history.push(INITIALIZE_SEED_PHRASE_ROUTE) + } + }} > { t('next') } </Button> - <Breadcrumbs - className="first-time-flow__breadcrumbs" - total={3} - currentIndex={0} - /> </div> ) } |