aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/first-time
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/first-time')
-rw-r--r--ui/app/first-time/init-menu.js335
1 files changed, 175 insertions, 160 deletions
diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js
index c0c2d3ed0..014bc5906 100644
--- a/ui/app/first-time/init-menu.js
+++ b/ui/app/first-time/init-menu.js
@@ -1,206 +1,221 @@
-const inherits = require('util').inherits
-const EventEmitter = require('events').EventEmitter
-const Component = require('react').Component
+const { EventEmitter } = require('events')
+const { Component } = require('react')
const connect = require('../metamask-connect')
const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
const Mascot = require('../components/mascot')
const actions = require('../actions')
const Tooltip = require('../components/tooltip')
const getCaretCoordinates = require('textarea-caret')
+const { RESTORE_VAULT_ROUTE, DEFAULT_ROUTE } = require('../routes')
const environmentType = require('../../../app/scripts/lib/environment-type')
const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
-let isSubmitting = false
+class InitializeMenuScreen extends Component {
+ constructor (props) {
+ super(props)
-module.exports = connect(mapStateToProps)(InitializeMenuScreen)
-
-inherits(InitializeMenuScreen, Component)
-function InitializeMenuScreen () {
- Component.call(this)
- this.animationEventEmitter = new EventEmitter()
-}
-
-function mapStateToProps (state) {
- return {
- // state from plugin
- currentView: state.appState.currentView,
- warning: state.appState.warning,
+ this.animationEventEmitter = new EventEmitter()
+ this.state = {
+ warning: null,
+ }
}
-}
-
-InitializeMenuScreen.prototype.render = function () {
- var state = this.props
-
- switch (state.currentView.name) {
-
- default:
- return this.renderMenu(state)
+ componentWillMount () {
+ const { isInitialized, isUnlocked, history } = this.props
+ if (isInitialized || isUnlocked) {
+ history.push(DEFAULT_ROUTE)
+ }
}
-}
-// InitializeMenuScreen.prototype.componentDidMount = function(){
-// document.getElementById('password-box').focus()
-// }
-
-InitializeMenuScreen.prototype.renderMenu = function (state) {
- return (
-
- h('.initialize-screen.flex-column.flex-center.flex-grow', [
+ componentDidMount () {
+ document.getElementById('password-box').focus()
+ }
- h(Mascot, {
- animationEventEmitter: this.animationEventEmitter,
- }),
+ render () {
+ const { warning } = this.state
- h('h1', {
- style: {
- fontSize: '1.3em',
- textTransform: 'uppercase',
- color: '#7F8082',
- marginBottom: 10,
- },
- }, this.props.t('appName')),
+ return (
+ h('.initialize-screen.flex-column.flex-center', [
+ h(Mascot, {
+ animationEventEmitter: this.animationEventEmitter,
+ }),
- h('div', [
- h('h3', {
+ h('h1', {
style: {
- fontSize: '0.8em',
+ fontSize: '1.3em',
+ textTransform: 'uppercase',
color: '#7F8082',
- display: 'inline',
+ marginBottom: 10,
},
- }, this.props.t('encryptNewDen')),
+ }, this.props.t('appName')),
- h(Tooltip, {
- title: this.props.t('denExplainer'),
- }, [
- h('i.fa.fa-question-circle.pointer', {
+ h('div', [
+ h('h3', {
style: {
- fontSize: '18px',
- position: 'relative',
- color: 'rgb(247, 134, 28)',
- top: '2px',
- marginLeft: '4px',
+ fontSize: '0.8em',
+ color: '#7F8082',
+ display: 'inline',
},
- }),
+ }, this.props.t('encryptNewDen')),
+
+ h(Tooltip, {
+ title: this.props.t('denExplainer'),
+ }, [
+ h('i.fa.fa-question-circle.pointer', {
+ style: {
+ fontSize: '18px',
+ position: 'relative',
+ color: 'rgb(247, 134, 28)',
+ top: '2px',
+ marginLeft: '4px',
+ },
+ }),
+ ]),
]),
- ]),
-
- h('span.in-progress-notification', state.warning),
-
- // password
- h('input.large-input.letter-spacey', {
- type: 'password',
- id: 'password-box',
- placeholder: this.props.t('newPassword'),
- onInput: this.inputChanged.bind(this),
- style: {
- width: 260,
- marginTop: 12,
- },
- }),
-
- // confirm password
- h('input.large-input.letter-spacey', {
- type: 'password',
- id: 'password-box-confirm',
- placeholder: this.props.t('confirmPassword'),
- onKeyPress: this.createVaultOnEnter.bind(this),
- onInput: this.inputChanged.bind(this),
- style: {
- width: 260,
- marginTop: 16,
- },
- }),
-
-
- h('button.primary', {
- onClick: this.createNewVaultAndKeychain.bind(this),
- style: {
- margin: 12,
- },
- }, this.props.t('createDen')),
-
- h('.flex-row.flex-center.flex-grow', [
- h('p.pointer', {
- onClick: this.showRestoreVault.bind(this),
+
+ h('span.error.in-progress-notification', warning),
+
+ // password
+ h('input.large-input.letter-spacey', {
+ type: 'password',
+ id: 'password-box',
+ placeholder: this.props.t('newPassword'),
+ onInput: this.inputChanged.bind(this),
style: {
- fontSize: '0.8em',
- color: 'rgb(247, 134, 28)',
- textDecoration: 'underline',
+ width: 260,
+ marginTop: 12,
},
- }, this.props.t('importDen')),
- ]),
+ }),
+
+ // confirm password
+ h('input.large-input.letter-spacey', {
+ type: 'password',
+ id: 'password-box-confirm',
+ placeholder: this.props.t('confirmPassword'),
+ onKeyPress: this.createVaultOnEnter.bind(this),
+ onInput: this.inputChanged.bind(this),
+ style: {
+ width: 260,
+ marginTop: 16,
+ },
+ }),
+
- h('.flex-row.flex-center.flex-grow', [
- h('p.pointer', {
- onClick: this.showOldUI.bind(this),
+ h('button.primary', {
+ onClick: this.createNewVaultAndKeychain.bind(this),
style: {
- fontSize: '0.8em',
- color: '#aeaeae',
- textDecoration: 'underline',
- marginTop: '32px',
+ margin: 12,
},
- }, 'Use classic interface'),
- ]),
+ }, this.props.t('createDen')),
- ])
- )
-}
+ h('.flex-row.flex-center.flex-grow', [
+ h('p.pointer', {
+ onClick: () => this.showRestoreVault(),
+ style: {
+ fontSize: '0.8em',
+ color: 'rgb(247, 134, 28)',
+ textDecoration: 'underline',
+ },
+ }, this.props.t('importDen')),
+ ]),
-InitializeMenuScreen.prototype.createVaultOnEnter = function (event) {
- if (event.key === 'Enter') {
- event.preventDefault()
- this.createNewVaultAndKeychain()
+ h('.flex-row.flex-center.flex-grow', [
+ h('p.pointer', {
+ onClick: this.showOldUI.bind(this),
+ style: {
+ fontSize: '0.8em',
+ color: '#aeaeae',
+ textDecoration: 'underline',
+ marginTop: '32px',
+ },
+ }, 'Use classic interface'),
+ ]),
+
+ ])
+ )
}
-}
-InitializeMenuScreen.prototype.componentDidMount = function () {
- document.getElementById('password-box').focus()
-}
+ createVaultOnEnter (event) {
+ if (event.key === 'Enter') {
+ event.preventDefault()
+ this.createNewVaultAndKeychain()
+ }
+ }
+
+ createNewVaultAndKeychain () {
+ const { history } = this.props
+ var passwordBox = document.getElementById('password-box')
+ var password = passwordBox.value
+ var passwordConfirmBox = document.getElementById('password-box-confirm')
+ var passwordConfirm = passwordConfirmBox.value
+
+ this.setState({ warning: null })
-InitializeMenuScreen.prototype.showRestoreVault = function () {
- this.props.dispatch(actions.markPasswordForgotten())
- if (environmentType() === 'popup') {
- global.platform.openExtensionInBrowser()
+ if (password.length < 8) {
+ this.setState({ warning: this.props.t('passwordShort') })
+ return
+ }
+
+ if (password !== passwordConfirm) {
+ this.setState({ warning: this.props.t('passwordMismatch') })
+ return
+ }
+
+ this.props.createNewVaultAndKeychain(password)
+ .then(() => history.push(DEFAULT_ROUTE))
}
-}
-InitializeMenuScreen.prototype.showOldUI = function () {
- this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
- .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
-}
+ 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,
+ })
+ }
-InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () {
- var passwordBox = document.getElementById('password-box')
- var password = passwordBox.value
- var passwordConfirmBox = document.getElementById('password-box-confirm')
- var passwordConfirm = passwordConfirmBox.value
+ showRestoreVault () {
+ this.props.markPasswordForgotten()
+ if (environmentType() === 'popup') {
+ global.platform.openExtensionInBrowser()
+ }
- if (password.length < 8) {
- this.warning = this.props.t('passwordShort')
- this.props.dispatch(actions.displayWarning(this.warning))
- return
+ this.props.history.push(RESTORE_VAULT_ROUTE)
}
- if (password !== passwordConfirm) {
- this.warning = this.props.t('passwordMismatch')
- this.props.dispatch(actions.displayWarning(this.warning))
- return
+
+ showOldUI () {
+ this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+ .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
}
+}
+
+InitializeMenuScreen.propTypes = {
+ history: PropTypes.object,
+ isInitialized: PropTypes.bool,
+ isUnlocked: PropTypes.bool,
+ createNewVaultAndKeychain: PropTypes.func,
+ markPasswordForgotten: PropTypes.func,
+ dispatch: PropTypes.func,
+}
- if (!isSubmitting) {
- isSubmitting = true
- this.props.dispatch(actions.createNewVaultAndKeychain(password))
+const mapStateToProps = state => {
+ const { metamask: { isInitialized, isUnlocked } } = state
+
+ return {
+ isInitialized,
+ isUnlocked,
}
}
-InitializeMenuScreen.prototype.inputChanged = function (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,
- })
+const mapDispatchToProps = dispatch => {
+ return {
+ createNewVaultAndKeychain: password => dispatch(actions.createNewVaultAndKeychain(password)),
+ markPasswordForgotten: () => dispatch(actions.markPasswordForgotten()),
+ }
}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(InitializeMenuScreen)
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-10 05:16:47 +0800