diff --git a/js/src/modals/Verification/verification.js b/js/src/modals/Verification/verification.js index d1ea53798..0fac3bf75 100644 --- a/js/src/modals/Verification/verification.js +++ b/js/src/modals/Verification/verification.js @@ -15,13 +15,17 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { connect } from 'react-redux'; import { observer } from 'mobx-react'; +import { observable } from 'mobx'; import DoneIcon from 'material-ui/svg-icons/action/done-all'; import CancelIcon from 'material-ui/svg-icons/content/clear'; import { Button, IdentityIcon, Modal } from '~/ui'; import RadioButtons from '~/ui/Form/RadioButtons'; -import { nullableProptype } from '~/util/proptypes'; + +import SMSVerificationStore from './sms-store'; +import EmailVerificationStore from './email-store'; import styles from './verification.css'; @@ -52,11 +56,14 @@ import SendConfirmation from './SendConfirmation'; import Done from './Done'; @observer -export default class Verification extends Component { +class Verification extends Component { + static contextTypes = { + api: PropTypes.object.isRequired + } + static propTypes = { - store: nullableProptype(PropTypes.object.isRequired), account: PropTypes.string.isRequired, - onSelectMethod: PropTypes.func.isRequired, + isTest: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired } @@ -72,8 +79,10 @@ export default class Verification extends Component { method: 'sms' }; + @observable store = null; + render () { - const { store } = this.props; + const store = this.store; let phase = 0; let error = false; let isStepValid = true; if (store) { @@ -97,7 +106,8 @@ export default class Verification extends Component { } renderDialogActions (phase, error, isStepValid) { - const { store, account, onClose } = this.props; + const { account, onClose } = this.props; + const store = this.store; const cancel = ( { - const { onSelectMethod } = this.props; const { method } = this.state; - onSelectMethod(method); + this.onSelectMethod(method); }; break; case 1: @@ -183,7 +192,7 @@ export default class Verification extends Component { fee, isVerified, hasRequested, requestTx, isCodeValid, confirmationTx, setCode - } = this.props.store; + } = this.store; switch (phase) { case 1: @@ -191,7 +200,7 @@ export default class Verification extends Component { return (Loading verification data.); } - const { setConsentGiven } = this.props.store; + const { setConsentGiven } = this.store; const fields = []; if (method === 'sms') { @@ -199,16 +208,16 @@ export default class Verification extends Component { key: 'number', label: 'phone number in international format', hint: 'the SMS will be sent to this number', - error: this.props.store.isNumberValid ? null : 'invalid number', - onChange: this.props.store.setNumber + error: this.store.isNumberValid ? null : 'invalid number', + onChange: this.store.setNumber }); } else if (method === 'email') { fields.push({ key: 'email', label: 'email address', hint: 'the code will be sent to this address', - error: this.props.store.isEmailValid ? null : 'invalid email', - onChange: this.props.store.setEmail + error: this.store.isEmailValid ? null : 'invalid email', + onChange: this.store.setEmail }); } @@ -228,10 +237,10 @@ export default class Verification extends Component { case 3: let receiver, hint; if (method === 'sms') { - receiver = this.props.store.number; + receiver = this.store.number; hint = 'Enter the code you received via SMS.'; } else if (method === 'email') { - receiver = this.props.store.email; + receiver = this.store.email; hint = 'Enter the code you received via e-mail.'; } return ( @@ -258,7 +267,27 @@ export default class Verification extends Component { } } + onSelectMethod = (name) => { + const { api } = this.context; + const { account, isTest } = this.props; + + if (name === 'sms') { + this.store = new SMSVerificationStore(api, account, isTest); + } else if (name === 'email') { + this.store = new EmailVerificationStore(api, account, isTest); + } + } + selectMethod = (choice, i) => { this.setState({ method: choice.value }); } } + +const mapStateToProps = (state) => ({ + isTest: state.nodeStatus.isTest +}); + +export default connect( + mapStateToProps, + null // mapDispatchToProps +)(Verification); diff --git a/js/src/views/Account/account.js b/js/src/views/Account/account.js index 82b2e6b71..ed05844f5 100644 --- a/js/src/views/Account/account.js +++ b/js/src/views/Account/account.js @@ -33,16 +33,9 @@ import Transactions from './Transactions'; import { setVisibleAccounts } from '~/redux/providers/personalActions'; import { fetchCertifiers, fetchCertifications } from '~/redux/providers/certifications/actions'; -import SMSVerificationStore from '~/modals/Verification/sms-store'; -import EmailVerificationStore from '~/modals/Verification/email-store'; - import styles from './account.css'; class Account extends Component { - static contextTypes = { - api: PropTypes.object.isRequired - } - static propTypes = { setVisibleAccounts: PropTypes.func.isRequired, fetchCertifiers: PropTypes.func.isRequired, @@ -51,7 +44,6 @@ class Account extends Component { params: PropTypes.object, accounts: PropTypes.object, - isTestnet: PropTypes.bool, balances: PropTypes.object } @@ -60,7 +52,6 @@ class Account extends Component { showEditDialog: false, showFundDialog: false, showVerificationDialog: false, - verificationStore: null, showTransferDialog: false, showPasswordDialog: false } @@ -221,13 +212,11 @@ class Account extends Component { return null; } - const store = this.state.verificationStore; const { address } = this.props.params; return ( ); @@ -301,22 +290,6 @@ class Account extends Component { this.setState({ showVerificationDialog: true }); } - selectVerificationMethod = (name) => { - const { isTestnet } = this.props; - if (typeof isTestnet !== 'boolean' || this.state.verificationStore) return; - - const { api } = this.context; - const { address } = this.props.params; - - let verificationStore = null; - if (name === 'sms') { - verificationStore = new SMSVerificationStore(api, address, isTestnet); - } else if (name === 'email') { - verificationStore = new EmailVerificationStore(api, address, isTestnet); - } - this.setState({ verificationStore }); - } - onVerificationClose = () => { this.setState({ showVerificationDialog: false }); } @@ -344,13 +317,11 @@ class Account extends Component { function mapStateToProps (state) { const { accounts } = state.personal; - const { isTest } = state.nodeStatus; const { balances } = state.balances; const { images } = state; return { accounts, - isTestnet: isTest, balances, images };
Loading verification data.