import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' import { withRouter } from 'react-router-dom' import { compose } from 'recompose' import { createNewVaultAndKeychain } from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' import EventEmitter from 'events' import Mascot from '../../../../ui/app/components/mascot' import classnames from 'classnames' import { INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_NOTICE_ROUTE, } from '../../../../ui/app/routes' import TextField from '../../../../ui/app/components/text-field' class CreatePasswordScreen extends Component { static contextTypes = { t: PropTypes.func, } static propTypes = { isLoading: PropTypes.bool.isRequired, createAccount: PropTypes.func.isRequired, history: PropTypes.object.isRequired, isInitialized: PropTypes.bool, isUnlocked: PropTypes.bool, isMascara: PropTypes.bool.isRequired, } state = { password: '', confirmPassword: '', passwordError: null, confirmPasswordError: null, } constructor (props) { super(props) this.animationEventEmitter = new EventEmitter() } componentWillMount () { const { isInitialized, history } = this.props if (isInitialized) { history.push(INITIALIZE_NOTICE_ROUTE) } } isValid () { const { password, confirmPassword } = this.state if (!password || !confirmPassword) { return false } if (password.length < 8) { return false } return password === confirmPassword } createAccount = () => { if (!this.isValid()) { return } const { password } = this.state const { createAccount, history } = this.props this.setState({ isLoading: true }) createAccount(password) .then(() => history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE)) } handlePasswordChange (password) { const { confirmPassword } = this.state let confirmPasswordError = null let passwordError = null if (password && password.length < 8) { passwordError = this.context.t('passwordNotLongEnough') } if (confirmPassword && password !== confirmPassword) { confirmPasswordError = this.context.t('passwordsDontMatch') } this.setState({ password, passwordError, confirmPasswordError }) } handleConfirmPasswordChange (confirmPassword) { const { password } = this.state let confirmPasswordError = null if (password !== confirmPassword) { confirmPasswordError = this.context.t('passwordsDontMatch') } this.setState({ confirmPassword, confirmPasswordError }) } render () { const { history, isMascara } = this.props const { passwordError, confirmPasswordError } = this.state const { t } = this.context return (