import React, { Component } from 'react' import PropTypes from 'prop-types' import Button from 'material-ui/Button' import TextField from '../../text-field' const { ENVIRONMENT_TYPE_POPUP } = require('../../../../../app/scripts/lib/enums') const { getEnvironmentType } = require('../../../../../app/scripts/lib/util') const getCaretCoordinates = require('textarea-caret') const EventEmitter = require('events').EventEmitter const Mascot = require('../../mascot') const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../../routes') class UnlockPage extends Component { static contextTypes = { t: PropTypes.func, } constructor (props) { super(props) this.state = { password: '', error: null, } this.animationEventEmitter = new EventEmitter() } componentWillMount () { const { isUnlocked, history } = this.props if (isUnlocked) { history.push(DEFAULT_ROUTE) } } tryUnlockMetamask (password) { const { tryUnlockMetamask, history } = this.props tryUnlockMetamask(password) .then(() => history.push(DEFAULT_ROUTE)) .catch(({ message }) => this.setState({ error: message })) } handleSubmit (event) { event.preventDefault() event.stopPropagation() const { password } = this.state const { tryUnlockMetamask, history } = this.props if (password === '') { return } this.setState({ error: null }) tryUnlockMetamask(password) .then(() => history.push(DEFAULT_ROUTE)) .catch(({ message }) => this.setState({ error: message })) } handleInputChange ({ target }) { this.setState({ password: target.value, error: null }) // tell mascot to look at page action const element = target const boundingRect = element.getBoundingClientRect() const coordinates = getCaretCoordinates(element, element.selectionEnd) this.animationEventEmitter.emit('point', { x: boundingRect.left + coordinates.left - element.scrollLeft, y: boundingRect.top + coordinates.top - element.scrollTop, }) } renderSubmitButton () { const style = { backgroundColor: '#f7861c', color: 'white', marginTop: '20px', height: '60px', fontWeight: '400', boxShadow: 'none', borderRadius: '4px', } return ( ) } render () { const { error } = this.state return (

{ this.context.t('welcomeBack') }

{ this.context.t('unlockMessage') }
this.handleSubmit(event)} > this.handleInputChange(event)} error={error} autoFocus autoComplete="current-password" fullWidth /> { this.renderSubmitButton() }
{ this.props.markPasswordForgotten() this.props.history.push(RESTORE_VAULT_ROUTE) if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { global.platform.openExtensionInBrowser() } }} > { this.context.t('restoreFromSeed') }
{ this.props.markPasswordForgotten() this.props.history.push(RESTORE_VAULT_ROUTE) if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { global.platform.openExtensionInBrowser() } }} > { this.context.t('importUsingSeed') }
) } } UnlockPage.propTypes = { forgotPassword: PropTypes.func, tryUnlockMetamask: PropTypes.func, markPasswordForgotten: PropTypes.func, history: PropTypes.object, isUnlocked: PropTypes.bool, t: PropTypes.func, useOldInterface: PropTypes.func, setNetworkEndpoints: PropTypes.func, } export default UnlockPage