diff --git a/js/src/modals/Verification/verification.js b/js/src/modals/Verification/verification.js
index b05ed353a..5982933a9 100644
--- a/js/src/modals/Verification/verification.js
+++ b/js/src/modals/Verification/verification.js
@@ -20,6 +20,13 @@ 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';
+
+const methods = {
+ sms: { label: 'SMS Verification', key: 0, value: 'sms' },
+ email: { label: 'E-mail Verification', key: 1, value: 'email' }
+};
import {
LOADING,
@@ -39,23 +46,34 @@ import Done from './Done';
@observer
export default class Verification extends Component {
static propTypes = {
- store: PropTypes.any.isRequired,
+ store: nullableProptype(PropTypes.object).isRequired,
account: PropTypes.string.isRequired,
+ onSelectMethod: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired
}
static phases = { // mapping (store steps -> steps)
- [LOADING]: 0,
- [QUERY_DATA]: 1,
- [POSTING_REQUEST]: 2, [POSTED_REQUEST]: 2, [REQUESTING_CODE]: 2,
- [QUERY_CODE]: 3,
- [POSTING_CONFIRMATION]: 4, [POSTED_CONFIRMATION]: 4,
- [DONE]: 5
+ [LOADING]: 1,
+ [QUERY_DATA]: 2,
+ [POSTING_REQUEST]: 3, [POSTED_REQUEST]: 3, [REQUESTING_CODE]: 3,
+ [QUERY_CODE]: 4,
+ [POSTING_CONFIRMATION]: 5, [POSTED_CONFIRMATION]: 5,
+ [DONE]: 6
}
+ state = {
+ method: 'sms'
+ };
+
render () {
- const phase = Verification.phases[this.props.store.step];
- const { error, isStepValid } = this.props.store;
+ const { store } = this.props;
+ let phase = 0; let error = false; let isStepValid = true;
+
+ if (store) {
+ phase = Verification.phases[store.step];
+ error = store.error;
+ isStepValid = store.isStepValid;
+ }
return (
{ this.renderStep(phase, error) }
@@ -85,7 +103,7 @@ export default class Verification extends Component {
return (
{ cancel }
);
}
- if (phase === 5) {
+ if (phase === 6) {
return (
{ cancel }
@@ -101,16 +119,23 @@ export default class Verification extends Component {
let action = () => {};
switch (phase) {
- case 1:
- action = store.sendRequest;
+ case 0:
+ action = () => {
+ const { onSelectMethod } = this.props;
+ const { method } = this.state;
+ onSelectMethod(method);
+ };
break;
case 2:
- action = store.queryCode;
+ action = store.sendRequest;
break;
case 3:
- action = store.sendConfirmation;
+ action = store.queryCode;
break;
case 4:
+ action = store.sendConfirmation;
+ break;
+ case 5:
action = store.done;
break;
}
@@ -133,6 +158,19 @@ export default class Verification extends Component {
return (
{ error }
);
}
+ if (phase === 0) {
+ const { method } = this.state;
+ const values = Object.values(methods);
+ const value = values.findIndex((v) => v.value === method);
+ return (
+
+ );
+ }
+
const {
step,
fee, number, isNumberValid, isVerified, hasRequested,
@@ -141,13 +179,34 @@ export default class Verification extends Component {
} = this.props.store;
switch (phase) {
- case 0:
+ case 1:
return (
Loading Verification.
);
- case 1:
- const { setNumber, setConsentGiven } = this.props.store;
+ case 2:
+ const { method } = this.state;
+ const { setConsentGiven } = this.props.store;
+
+ const fields = []
+ if (method === 'sms') {
+ fields.push({
+ 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
+ });
+ } 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
+ });
+ }
+
return (
);
- case 2:
+ case 3:
return (
);
- case 3:
+ case 4:
return (
);
- case 4:
+ case 5:
return (
);
- case 5:
+ case 6:
return (
);
@@ -183,4 +242,8 @@ export default class Verification extends Component {
return null;
}
}
+
+ selectMethod = (choice, i) => {
+ this.setState({ method: choice.value });
+ }
}
diff --git a/js/src/views/Account/account.js b/js/src/views/Account/account.js
index 240ca2f9b..3f262bce4 100644
--- a/js/src/views/Account/account.js
+++ b/js/src/views/Account/account.js
@@ -32,7 +32,8 @@ import Header from './Header';
import Transactions from './Transactions';
import { setVisibleAccounts } from '~/redux/providers/personalActions';
-import VerificationStore from '~/modals/Verification/sms-store';
+import SMSVerificationStore from '~/modals/Verification/sms-store';
+import EmailVerificationStore from '~/modals/Verification/email-store';
import styles from './account.css';
@@ -72,15 +73,6 @@ class Account extends Component {
if (prevAddress !== nextAddress) {
this.setVisibleAccounts(nextProps);
}
-
- const { isTestnet } = nextProps;
- if (typeof isTestnet === 'boolean' && !this.state.verificationStore) {
- const { api } = this.context;
- const { address } = nextProps.params;
- this.setState({
- verificationStore: new VerificationStore(api, address, isTestnet)
- });
- }
}
componentWillUnmount () {
@@ -230,6 +222,7 @@ class Account extends Component {
return (
);
@@ -303,6 +296,22 @@ 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 });
}