diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js deleted file mode 100644 index e7bbfb225..000000000 --- a/ui/app/first-time/init-menu.js +++ /dev/null @@ -1,224 +0,0 @@ -const { EventEmitter } = require('events') -const { Component } = require('react') -const PropTypes = require('prop-types') -const connect = require('react-redux').connect -const h = require('react-hyperscript') -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 { getEnvironmentType } = require('../../../app/scripts/lib/util') -const { ENVIRONMENT_TYPE_POPUP } = require('../../../app/scripts/lib/enums') - -class InitializeMenuScreen extends Component { - constructor (props) { - super(props) - - this.animationEventEmitter = new EventEmitter() - this.state = { - warning: null, - } - } - - componentWillMount () { - const { isInitialized, isUnlocked, history } = this.props - if (isInitialized || isUnlocked) { - history.push(DEFAULT_ROUTE) - } - } - - componentDidMount () { - document.getElementById('password-box').focus() - } - - render () { - const { warning } = this.state - - return ( - h('.initialize-screen.flex-column.flex-center', [ - - h(Mascot, { - animationEventEmitter: this.animationEventEmitter, - }), - - h('h1', { - style: { - fontSize: '1.3em', - textTransform: 'uppercase', - color: '#7F8082', - marginBottom: 10, - }, - }, this.context.t('appName')), - - h('div', [ - h('h3', { - style: { - fontSize: '0.8em', - color: '#7F8082', - display: 'inline', - }, - }, this.context.t('encryptNewDen')), - - h(Tooltip, { - title: this.context.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.error.in-progress-notification', warning), - - // password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box', - placeholder: this.context.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.context.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.context.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.context.t('importDen')), - ]), - - 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', - }, - }, this.context.t('classicInterface')), - ]), - - ]) - ) - } - - 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 }) - - if (password.length < 8) { - this.setState({ warning: this.context.t('passwordShort') }) - return - } - - if (password !== passwordConfirm) { - this.setState({ warning: this.context.t('passwordMismatch') }) - return - } - - this.props.createNewVaultAndKeychain(password) - .then(() => history.push(DEFAULT_ROUTE)) - } - - 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, - }) - } - - showRestoreVault () { - this.props.markPasswordForgotten() - if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { - global.platform.openExtensionInBrowser() - } - - this.props.history.push(RESTORE_VAULT_ROUTE) - } - - showOldUI () { - this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) - } -} - -InitializeMenuScreen.propTypes = { - history: PropTypes.object, - isInitialized: PropTypes.bool, - isUnlocked: PropTypes.bool, - createNewVaultAndKeychain: PropTypes.func, - markPasswordForgotten: PropTypes.func, - dispatch: PropTypes.func, -} - -InitializeMenuScreen.contextTypes = { - t: PropTypes.func, -} - -const mapStateToProps = state => { - const { metamask: { isInitialized, isUnlocked } } = state - - return { - isInitialized, - isUnlocked, - } -} - -const mapDispatchToProps = dispatch => { - return { - createNewVaultAndKeychain: password => dispatch(actions.createNewVaultAndKeychain(password)), - markPasswordForgotten: () => dispatch(actions.markPasswordForgotten()), - } -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(InitializeMenuScreen)