import { EventEmitter } from 'events' import React, { Component } from 'react' import PropTypes from 'prop-types' import Button from '@material-ui/core/Button' import getCaretCoordinates from 'textarea-caret' import TextField from '../../components/ui/text-field' import Mascot from '../../components/ui/mascot' import { DEFAULT_ROUTE } from '../../helpers/constants/routes' export default class UnlockPage extends Component { static contextTypes = { metricsEvent: PropTypes.func, t: PropTypes.func, } static propTypes = { history: PropTypes.object.isRequired, isUnlocked: PropTypes.bool, onImport: PropTypes.func, onRestore: PropTypes.func, onSubmit: PropTypes.func, forceUpdateMetamaskState: PropTypes.func, showOptInModal: PropTypes.func, } state = { password: '', error: null, } submitting = false animationEventEmitter = new EventEmitter() UNSAFE_componentWillMount () { const { isUnlocked, history } = this.props if (isUnlocked) { history.push(DEFAULT_ROUTE) } } handleSubmit = async (event) => { event.preventDefault() event.stopPropagation() const { password } = this.state const { onSubmit, forceUpdateMetamaskState, showOptInModal } = this.props if (password === '' || this.submitting) { return } this.setState({ error: null }) this.submitting = true try { await onSubmit(password) const newState = await forceUpdateMetamaskState() this.context.metricsEvent({ eventOpts: { category: 'Navigation', action: 'Unlock', name: 'Success', }, isNewVisit: true, }) if (newState.participateInMetaMetrics === null || newState.participateInMetaMetrics === undefined) { showOptInModal() } } catch ({ message }) { if (message === 'Incorrect password') { const newState = await forceUpdateMetamaskState() this.context.metricsEvent({ eventOpts: { category: 'Navigation', action: 'Unlock', name: 'Incorrect Password', }, customVariables: { numberOfTokens: newState.tokens.length, numberOfAccounts: Object.keys(newState.accounts).length, }, }) } this.setState({ error: message }) this.submitting = false } } handleInputChange ({ target }) { this.setState({ password: target.value, error: null }) // tell mascot to look at page action if (target.getBoundingClientRect) { 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 { password, error } = this.state const { t } = this.context const { onImport, onRestore } = this.props return (

{ t('welcomeBack') }

{ t('unlockMessage') }
this.handleInputChange(event)} error={error} autoFocus autoComplete="current-password" theme="material" fullWidth /> { this.renderSubmitButton() }
onRestore()} > { t('restoreFromSeed') }
onImport()} > { t('importUsingSeed') }
) } }