aboutsummaryrefslogtreecommitdiffstats
path: root/mascara/src/app/first-time/create-password-screen.js
diff options
context:
space:
mode:
Diffstat (limited to 'mascara/src/app/first-time/create-password-screen.js')
-rw-r--r--mascara/src/app/first-time/create-password-screen.js254
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,
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-13 04:30:01 +0800