From 706a6b0ad6d7b6e2d56252f17713e63430d84abc Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 15:13:02 -0500 Subject: Add initialized checks for first time flow routes --- ui/app/app.js | 16 +- ui/app/components/pages/authenticated.js | 28 ++-- ui/app/components/pages/initialized.js | 25 ++++ ui/app/components/pages/unauthenticated/index.js | 38 ----- ui/app/components/pages/unauthenticated/unlock.js | 172 ---------------------- ui/app/components/pages/unlock.js | 170 +++++++++++++++++++++ 6 files changed, 213 insertions(+), 236 deletions(-) create mode 100644 ui/app/components/pages/initialized.js delete mode 100644 ui/app/components/pages/unauthenticated/index.js delete mode 100644 ui/app/components/pages/unauthenticated/unlock.js create mode 100644 ui/app/components/pages/unlock.js (limited to 'ui') diff --git a/ui/app/app.js b/ui/app/app.js index 8c3cfee2f..6717b3d67 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -24,10 +24,10 @@ const WalletView = require('./components/wallet-view') // other views const Authenticated = require('./components/pages/authenticated') -const Unauthenticated = require('./components/pages/unauthenticated') +const Initialized = require('./components/pages/initialized') const MetamaskRoute = require('./components/pages/metamask-route') const Settings = require('./components/pages/settings') -const UnlockPage = require('./components/pages/unauthenticated/unlock') +const UnlockPage = require('./components/pages/unlock') const RestoreVaultPage = require('./components/pages/keychains/restore-vault') const RevealSeedPage = require('./components/pages/keychains/reveal-seed') const AddTokenPage = require('./components/pages/add-token') @@ -88,21 +88,21 @@ class App extends Component { component: InitializeMenuScreen, mascaraComponent: MascaraCreatePassword, }), - h(MetamaskRoute, { + h(Initialized, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage, mascaraComponent: MascaraSeedScreen, }), - h(MetamaskRoute, { + h(Initialized, { path: CONFIRM_SEED_ROUTE, exact, mascaraComponent: MascaraConfirmSeedScreen, }), - h(Unauthenticated, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), - h(Unauthenticated, { path: SETTINGS_ROUTE, component: Settings }), - h(Unauthenticated, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), - h(Unauthenticated, { + h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), + h(Initialized, { path: SETTINGS_ROUTE, component: Settings }), + h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), + h(Initialized, { path: NOTICE_ROUTE, exact, component: NoticeScreen, diff --git a/ui/app/components/pages/authenticated.js b/ui/app/components/pages/authenticated.js index 89bd238d2..1f6b0be49 100644 --- a/ui/app/components/pages/authenticated.js +++ b/ui/app/components/pages/authenticated.js @@ -5,28 +5,20 @@ const h = require('react-hyperscript') const MetamaskRoute = require('./metamask-route') const { UNLOCK_ROUTE, INITIALIZE_ROUTE } = require('../../routes') -const Authenticated = ({ component: Component, isUnlocked, isInitialized, ...props }) => { - const component = renderProps => { - switch (true) { - case isUnlocked: - return h(Component, { ...renderProps }) - case !isInitialized: - return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) - default: - return h(Redirect, { to: { pathname: UNLOCK_ROUTE } }) - } - } +const Authenticated = props => { + const { isUnlocked, isInitialized } = props - return ( - h(MetamaskRoute, { - ...props, - component, - }) - ) + switch (true) { + case isUnlocked && isInitialized: + return h(MetamaskRoute, { ...props }) + case !isInitialized: + return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) + default: + return h(Redirect, { to: { pathname: UNLOCK_ROUTE } }) + } } Authenticated.propTypes = { - component: PropTypes.func, isUnlocked: PropTypes.bool, isInitialized: PropTypes.bool, } diff --git a/ui/app/components/pages/initialized.js b/ui/app/components/pages/initialized.js new file mode 100644 index 000000000..3adf67b28 --- /dev/null +++ b/ui/app/components/pages/initialized.js @@ -0,0 +1,25 @@ +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const { Redirect } = require('react-router-dom') +const h = require('react-hyperscript') +const { INITIALIZE_ROUTE } = require('../../routes') +const MetamaskRoute = require('./metamask-route') + +const Initialized = props => { + return props.isInitialized + ? h(MetamaskRoute, { ...props }) + : h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) +} + +Initialized.propTypes = { + isInitialized: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isInitialized } } = state + return { + isInitialized, + } +} + +module.exports = connect(mapStateToProps)(Initialized) diff --git a/ui/app/components/pages/unauthenticated/index.js b/ui/app/components/pages/unauthenticated/index.js deleted file mode 100644 index f8b5fa172..000000000 --- a/ui/app/components/pages/unauthenticated/index.js +++ /dev/null @@ -1,38 +0,0 @@ -const { connect } = require('react-redux') -const PropTypes = require('prop-types') -const { Redirect } = require('react-router-dom') -const h = require('react-hyperscript') -const { INITIALIZE_ROUTE } = require('../../../routes') -const MetamaskRoute = require('../metamask-route') - -const Unauthenticated = ({ component: Component, isInitialized, ...props }) => { - const component = renderProps => { - return isInitialized - ? h(Component, { ...renderProps }) - : h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) - } - - return ( - h(MetamaskRoute, { - ...props, - component, - }) - ) -} - -Unauthenticated.propTypes = { - component: PropTypes.func, - isInitialized: PropTypes.bool, - isMascara: PropTypes.bool, - mascaraComponent: PropTypes.func, -} - -const mapStateToProps = state => { - const { metamask: { isInitialized, isMascara } } = state - return { - isInitialized, - isMascara, - } -} - -module.exports = connect(mapStateToProps)(Unauthenticated) diff --git a/ui/app/components/pages/unauthenticated/unlock.js b/ui/app/components/pages/unauthenticated/unlock.js deleted file mode 100644 index 72f27c11d..000000000 --- a/ui/app/components/pages/unauthenticated/unlock.js +++ /dev/null @@ -1,172 +0,0 @@ -const { Component } = require('react') -const PropTypes = require('prop-types') -const { connect } = require('react-redux') -const h = require('react-hyperscript') -const { Redirect, withRouter } = require('react-router-dom') -const { compose } = require('recompose') -const { tryUnlockMetamask, forgotPassword } = require('../../../actions') -const getCaretCoordinates = require('textarea-caret') -const EventEmitter = require('events').EventEmitter -const Mascot = require('../../mascot') -const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../../routes') - -class UnlockScreen extends Component { - constructor (props) { - super(props) - - this.state = { - error: null, - } - - this.animationEventEmitter = new EventEmitter() - } - - componentDidMount () { - const passwordBox = document.getElementById('password-box') - - if (passwordBox) { - passwordBox.focus() - } - } - - tryUnlockMetamask (password) { - const { tryUnlockMetamask, history } = this.props - tryUnlockMetamask(password) - .then(() => history.push(DEFAULT_ROUTE)) - .catch(({ message }) => this.setState({ error: message })) - } - - onSubmit (event) { - const input = document.getElementById('password-box') - const password = input.value - this.tryUnlockMetamask(password) - } - - onKeyPress (event) { - if (event.key === 'Enter') { - this.submitPassword(event) - } - } - - submitPassword (event) { - var element = event.target - var password = element.value - // reset input - element.value = '' - this.tryUnlockMetamask(password) - } - - inputChanged (event) { - // tell mascot to look at page action - var element = event.target - var boundingRect = element.getBoundingClientRect() - var coordinates = getCaretCoordinates(element, element.selectionEnd) - this.animationEventEmitter.emit('point', { - x: boundingRect.left + coordinates.left - element.scrollLeft, - y: boundingRect.top + coordinates.top - element.scrollTop, - }) - } - - render () { - const { error } = this.state - const { isUnlocked, history } = this.props - - if (isUnlocked) { - return ( - h(Redirect, { - to: { - pathname: DEFAULT_ROUTE, - }, - }) - ) - } - - return ( - h('.unlock-page.main-container', [ - h('.flex-column', { - style: { - width: 'inherit', - }, - }, [ - h('.unlock-screen.flex-column.flex-center.flex-grow', [ - - h(Mascot, { - animationEventEmitter: this.animationEventEmitter, - }), - - h('h1', { - style: { - fontSize: '1.4em', - textTransform: 'uppercase', - color: '#7F8082', - }, - }, 'MetaMask'), - - h('input.large-input', { - type: 'password', - id: 'password-box', - placeholder: 'enter password', - style: { - background: 'white', - }, - onKeyPress: this.onKeyPress.bind(this), - onInput: this.inputChanged.bind(this), - }), - - h('.error', { - style: { - display: error ? 'block' : 'none', - padding: '0 20px', - textAlign: 'center', - }, - }, error), - - h('button.primary.cursor-pointer', { - onClick: this.onSubmit.bind(this), - style: { - margin: 10, - }, - }, 'Unlock'), - - h('.flex-row.flex-center.flex-grow', [ - h('p.pointer', { - onClick: () => history.push(RESTORE_VAULT_ROUTE), - style: { - fontSize: '0.8em', - color: 'rgb(247, 134, 28)', - textDecoration: 'underline', - }, - }, 'Restore from seed phrase'), - ]), - ]), - ]), - ]) - ) - } -} - -UnlockScreen.propTypes = { - forgotPassword: PropTypes.func, - tryUnlockMetamask: PropTypes.func, - history: PropTypes.object, - isUnlocked: PropTypes.bool, -} - -const mapStateToProps = state => { - const { metamask: { isUnlocked } } = state - return { - isUnlocked, - } -} - -const mapDispatchToProps = dispatch => { - return { - forgotPassword: () => dispatch(forgotPassword()), - tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), - } -} - -module.exports = compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(UnlockScreen) diff --git a/ui/app/components/pages/unlock.js b/ui/app/components/pages/unlock.js new file mode 100644 index 000000000..27e093a29 --- /dev/null +++ b/ui/app/components/pages/unlock.js @@ -0,0 +1,170 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const { connect } = require('react-redux') +const h = require('react-hyperscript') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const { tryUnlockMetamask, forgotPassword } = require('../../actions') +const getCaretCoordinates = require('textarea-caret') +const EventEmitter = require('events').EventEmitter +const Mascot = require('../mascot') +const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../routes') + +class UnlockScreen extends Component { + constructor (props) { + super(props) + + this.state = { + error: null, + } + + this.animationEventEmitter = new EventEmitter() + } + + componentWillMount () { + const { isUnlocked, history } = this.props + + if (isUnlocked) { + history.push(DEFAULT_ROUTE) + } + } + + componentDidMount () { + const passwordBox = document.getElementById('password-box') + + if (passwordBox) { + passwordBox.focus() + } + } + + tryUnlockMetamask (password) { + const { tryUnlockMetamask, history } = this.props + tryUnlockMetamask(password) + .then(() => history.push(DEFAULT_ROUTE)) + .catch(({ message }) => this.setState({ error: message })) + } + + onSubmit (event) { + const input = document.getElementById('password-box') + const password = input.value + this.tryUnlockMetamask(password) + } + + onKeyPress (event) { + if (event.key === 'Enter') { + this.submitPassword(event) + } + } + + submitPassword (event) { + var element = event.target + var password = element.value + // reset input + element.value = '' + this.tryUnlockMetamask(password) + } + + inputChanged (event) { + // tell mascot to look at page action + var element = event.target + var boundingRect = element.getBoundingClientRect() + var coordinates = getCaretCoordinates(element, element.selectionEnd) + this.animationEventEmitter.emit('point', { + x: boundingRect.left + coordinates.left - element.scrollLeft, + y: boundingRect.top + coordinates.top - element.scrollTop, + }) + } + + render () { + const { error } = this.state + const { history } = this.props + + return ( + h('.unlock-page.main-container', [ + h('.flex-column', { + style: { + width: 'inherit', + }, + }, [ + h('.unlock-screen.flex-column.flex-center.flex-grow', [ + + h(Mascot, { + animationEventEmitter: this.animationEventEmitter, + }), + + h('h1', { + style: { + fontSize: '1.4em', + textTransform: 'uppercase', + color: '#7F8082', + }, + }, 'MetaMask'), + + h('input.large-input', { + type: 'password', + id: 'password-box', + placeholder: 'enter password', + style: { + background: 'white', + }, + onKeyPress: this.onKeyPress.bind(this), + onInput: this.inputChanged.bind(this), + }), + + h('.error', { + style: { + display: error ? 'block' : 'none', + padding: '0 20px', + textAlign: 'center', + }, + }, error), + + h('button.primary.cursor-pointer', { + onClick: this.onSubmit.bind(this), + style: { + margin: 10, + }, + }, 'Unlock'), + + h('.flex-row.flex-center.flex-grow', [ + h('p.pointer', { + onClick: () => history.push(RESTORE_VAULT_ROUTE), + style: { + fontSize: '0.8em', + color: 'rgb(247, 134, 28)', + textDecoration: 'underline', + }, + }, 'Restore from seed phrase'), + ]), + ]), + ]), + ]) + ) + } +} + +UnlockScreen.propTypes = { + forgotPassword: PropTypes.func, + tryUnlockMetamask: PropTypes.func, + history: PropTypes.object, + isUnlocked: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isUnlocked } } = state + return { + isUnlocked, + } +} + +const mapDispatchToProps = dispatch => { + return { + forgotPassword: () => dispatch(forgotPassword()), + tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), + } +} + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(UnlockScreen) -- cgit v1.2.3