diff options
Diffstat (limited to 'mascara/src/app/first-time/create-password-screen.js')
-rw-r--r-- | mascara/src/app/first-time/create-password-screen.js | 254 |
1 files changed, 176 insertions, 78 deletions
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index c34391fa6..7b8971afe 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' -import { withRouter } from 'react-router-dom' +import { withRouter, Redirect } from 'react-router-dom' import { compose } from 'recompose' import { createNewVaultAndKeychain } from '../../../../ui/app/actions' import LoadingScreen from './loading-screen' @@ -11,8 +11,10 @@ import Mascot from '../../../../ui/app/components/mascot' import classnames from 'classnames' import { DEFAULT_ROUTE, + INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, - INITIALIZE_IMPORT_ACCOUNT_ROUTE, + // INITIALIZE_IMPORT_ACCOUNT_ROUTE, + INITIALIZE_NOTICE_ROUTE, } from '../../../../ui/app/routes' class CreatePasswordScreen extends Component { @@ -28,6 +30,7 @@ class CreatePasswordScreen extends Component { state = { password: '', confirmPassword: '', + isLoading: false, } constructor () { @@ -36,9 +39,11 @@ class CreatePasswordScreen extends Component { } componentWillMount () { - const { isInitialized, isUnlocked, history } = this.props - if (isInitialized || isUnlocked) { - history.push(DEFAULT_ROUTE) + const { isInitialized, isUnlocked, history, noActiveNotices } = this.props + + if (isInitialized) { + console.log('%c IM already initialized', 'background: #222; color: #bada55') + history.push(INITIALIZE_NOTICE_ROUTE) } } @@ -64,95 +69,188 @@ class CreatePasswordScreen extends Component { const { password } = this.state const { createAccount, history } = this.props + this.setState({ isLoading: true }) createAccount(password) - .then(() => history.push(DEFAULT_ROUTE)) + .then(() => { + // this.setState({ isLoading: false }) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + }) + .catch(() => this.setState({ isLoading: false})) + } + + renderFields () { + const { isMascara, history } = this.props + const { isLoading } = this.state + + return ( + <div className={classnames({ 'first-view-main-wrapper': !isMascara })}> + <div className={classnames({ + 'first-view-main': !isMascara, + 'first-view-main__mascara': isMascara, + })}> + {isMascara && <div className="mascara-info first-view-phone-invisible"> + <Mascot + animationEventEmitter={this.animationEventEmitter} + width="225" + height="225" + /> + <div className="info"> + MetaMask is a secure identity vault for Ethereum. + </div> + <div className="info"> + It allows you to hold ether & tokens, and interact with decentralized applications. + </div> + </div>} + <div className="create-password"> + <div className="create-password__title"> + Create Password + </div> + <input + className="first-time-flow__input" + type="password" + placeholder="New Password (min 8 characters)" + onChange={e => this.setState({password: e.target.value})} + /> + <input + className="first-time-flow__input create-password__confirm-input" + type="password" + placeholder="Confirm Password" + onChange={e => this.setState({confirmPassword: e.target.value})} + /> + <button + className="first-time-flow__button" + disabled={!this.isValid()} + onClick={this.createAccount} + > + Create + </button> + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => { + e.preventDefault() + history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) + }} + > + Import with seed phrase + </a> + { /* } + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => { + e.preventDefault() + history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) + }} + > + Import an account + </a> + { */ } + <Breadcrumbs total={3} currentIndex={0} /> + </div> + </div> + </div> + ) } render () { - const { isLoading, isMascara, history } = this.props - - return isLoading - ? <LoadingScreen loadingMessage="Creating your new account" /> - : ( - <div className={classnames({ 'first-view-main-wrapper': !isMascara })}> - <div className={classnames({ - 'first-view-main': !isMascara, - 'first-view-main__mascara': isMascara, - })}> - {isMascara && <div className="mascara-info first-view-phone-invisible"> - <Mascot - animationEventEmitter={this.animationEventEmitter} - width="225" - height="225" - /> - <div className="info"> - MetaMask is a secure identity vault for Ethereum. - </div> - <div className="info"> - It allows you to hold ether & tokens, and interact with decentralized applications. - </div> - </div>} - <div className="create-password"> - <div className="create-password__title"> - Create Password - </div> - <input - className="first-time-flow__input" - type="password" - placeholder="New Password (min 8 characters)" - onChange={e => this.setState({password: e.target.value})} - /> - <input - className="first-time-flow__input create-password__confirm-input" - type="password" - placeholder="Confirm Password" - onChange={e => this.setState({confirmPassword: e.target.value})} - /> - <button - className="first-time-flow__button" - disabled={!this.isValid()} - onClick={this.createAccount} - > - Create - </button> - <a - href="" - className="first-time-flow__link create-password__import-link" - onClick={e => { - e.preventDefault() - history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) - }} - > - Import with seed phrase - </a> - { /* } - <a - href="" - className="first-time-flow__link create-password__import-link" - onClick={e => { - e.preventDefault() - history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) - }} - > - Import an account - </a> - { */ } - <Breadcrumbs total={3} currentIndex={0} /> + const { isInitialized, isUnlocked, history, noActiveNotices, isMascara } = this.props + + // if (isInitialized) { + // console.log('%c IM already initialized', 'background: #222; color: #bada55') + // if (!noActiveNotices) { + // console.log('%c GOING TO NOTICES', 'background: #222; color: #bada55') + // // history.replace(INITIALIZE_NOTICE_ROUTE) + // return <Redirect to={INITIALIZE_NOTICE_ROUTE} /> + // } else { + // console.log('%c GOING TO DEFAULT', 'background: #222; color: #bada55') + // // history.replace(DEFAULT_ROUTE) + // return <Redirect to={DEFAULT_ROUTE} /> + // } + // } + + return ( + <div className={classnames({ 'first-view-main-wrapper': !isMascara })}> + <div className={classnames({ + 'first-view-main': !isMascara, + 'first-view-main__mascara': isMascara, + })}> + {isMascara && <div className="mascara-info first-view-phone-invisible"> + <Mascot + animationEventEmitter={this.animationEventEmitter} + width="225" + height="225" + /> + <div className="info"> + MetaMask is a secure identity vault for Ethereum. + </div> + <div className="info"> + It allows you to hold ether & tokens, and interact with decentralized applications. + </div> + </div>} + <div className="create-password"> + <div className="create-password__title"> + Create Password </div> + <input + className="first-time-flow__input" + type="password" + placeholder="New Password (min 8 characters)" + onChange={e => this.setState({password: e.target.value})} + /> + <input + className="first-time-flow__input create-password__confirm-input" + type="password" + placeholder="Confirm Password" + onChange={e => this.setState({confirmPassword: e.target.value})} + /> + <button + className="first-time-flow__button" + disabled={!this.isValid()} + onClick={this.createAccount} + > + Create + </button> + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => { + e.preventDefault() + history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) + }} + > + Import with seed phrase + </a> + { /* } + <a + href="" + className="first-time-flow__link create-password__import-link" + onClick={e => { + e.preventDefault() + history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) + }} + > + Import an account + </a> + { */ } + <Breadcrumbs total={3} currentIndex={0} /> </div> </div> - ) + </div> + ) } } -const mapStateToProps = state => { - const { metamask: { isInitialized, isUnlocked, isMascara }, appState: { isLoading } } = state +const mapStateToProps = ({ metamask, appState }) => { + const { isInitialized, isUnlocked, isMascara, noActiveNotices } = metamask + const { isLoading } = appState return { isLoading, isInitialized, isUnlocked, isMascara, + noActiveNotices, } } |