|
|
|
|
@ -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,16 +69,107 @@ 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 |
|
|
|
|
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 isLoading |
|
|
|
|
? <LoadingScreen loadingMessage="Creating your new account" /> |
|
|
|
|
: ( |
|
|
|
|
return ( |
|
|
|
|
<div className={classnames({ 'first-view-main-wrapper': !isMascara })}> |
|
|
|
|
<div className={classnames({ |
|
|
|
|
'first-view-main': !isMascara, |
|
|
|
|
@ -145,14 +241,16 @@ class CreatePasswordScreen extends Component { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
Alexander Tseung
7 years ago