import React, { Component } from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { requestRevealSeedWords } from '../../store/actions'; import ExportTextContainer from '../../components/ui/export-text-container'; import { getMostRecentOverviewPage } from '../../ducks/history/history'; import Button from '../../components/ui/button'; const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'; const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'; class RevealSeedPage extends Component { state = { screen: PASSWORD_PROMPT_SCREEN, password: '', seedWords: null, error: null, }; componentDidMount() { const passwordBox = document.getElementById('password-box'); if (passwordBox) { passwordBox.focus(); } } handleSubmit(event) { event.preventDefault(); this.setState({ seedWords: null, error: null }); this.props .requestRevealSeedWords(this.state.password) .then((seedWords) => this.setState({ seedWords, screen: REVEAL_SEED_SCREEN }), ) .catch((error) => this.setState({ error: error.message })); } renderWarning() { return (
{this.context.t('revealSeedWordsWarningTitle')}
{this.context.t('revealSeedWordsWarning')}
); } renderContent() { return this.state.screen === PASSWORD_PROMPT_SCREEN ? this.renderPasswordPromptContent() : this.renderRevealSeedContent(); } renderPasswordPromptContent() { const { t } = this.context; return (
this.handleSubmit(event)}>
this.setState({ password: event.target.value }) } className={classnames('form-control', { 'form-control--error': this.state.error, })} />
{this.state.error && (
{this.state.error}
)}
); } renderRevealSeedContent() { const { t } = this.context; return (
); } renderFooter() { return this.state.screen === PASSWORD_PROMPT_SCREEN ? this.renderPasswordPromptFooter() : this.renderRevealSeedFooter(); } renderPasswordPromptFooter() { return (
); } renderRevealSeedFooter() { return (
); } render() { return (
{this.context.t('revealSeedWordsTitle')}
{this.context.t('revealSeedWordsDescription')}
{this.renderWarning()}
{this.renderContent()}
{this.renderFooter()}
); } } RevealSeedPage.propTypes = { requestRevealSeedWords: PropTypes.func, history: PropTypes.object, mostRecentOverviewPage: PropTypes.string.isRequired, }; RevealSeedPage.contextTypes = { t: PropTypes.func, }; const mapStateToProps = (state) => { return { mostRecentOverviewPage: getMostRecentOverviewPage(state), }; }; const mapDispatchToProps = (dispatch) => { return { requestRevealSeedWords: (password) => dispatch(requestRevealSeedWords(password)), }; }; export default connect(mapStateToProps, mapDispatchToProps)(RevealSeedPage);