path: root/ui/app/first-time/init-menu.js

const { EventEmitter } = require('events')
const { Component } = require('react')
const { connect } = require('react-redux')
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')

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 { history } = this.props
    const { warning } = this.state

    return (
      h('.initialize-screen.flex-column.flex-center.flex-grow', [

        h(Mascot, {
          animationEventEmitter: this.animationEventEmitter,
        }),

        h('h1', {
          style: {
            fontSize: '1.3em',
            textTransform: 'uppercase',
            color: '#7F8082',
            marginBottom: 10,
          },
        }, 'MetaMask'),


        h('div', [
          h('h3', {
            style: {
              fontSize: '0.8em',
              color: '#7F8082',
              display: 'inline',
            },
          }, 'Encrypt your new DEN'),

          h(Tooltip, {
            title: 'Your DEN is your password-encrypted storage within MetaMask.',
          }, [
            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: 'New Password (min 8 chars)',
          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: 'Confirm Password',
          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,
          },
        }, 'Create'),

        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',
            },
          }, 'Import Existing DEN'),
        ]),

      ])
    )
  }

  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: 'password not long enough' })
      return
    }
    if (password !== passwordConfirm) {
      this.setState({ warning: 'passwords don\'t match' })
      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,
    })
  }
}

InitializeMenuScreen.propTypes = {
  history: PropTypes.object,
  isInitialized: PropTypes.bool,
  isUnlocked: PropTypes.bool,
  createNewVaultAndKeychain: PropTypes.func,
}

const mapStateToProps = state => {
  const { metamask: { isInitialized, isUnlocked } } = state

  return {
    isInitialized,
    isUnlocked,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    createNewVaultAndKeychain: password => dispatch(actions.createNewVaultAndKeychain(password)),
  }
}

module.exports = connect(mapStateToProps, mapDispatchToProps)(InitializeMenuScreen)