metamask-extension/ui/app/first-time/init-menu.js

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')
const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/controllers/network/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',
            },
          }, 'Use classic interface'),
        ]),

      ])
    )
  }

  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'))
      .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,
}

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)