2016-11-03 18:01:24 +01:00
|
|
|
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
|
|
|
// This file is part of Parity.
|
|
|
|
|
|
|
|
// Parity is free software: you can redistribute it and/or modify
|
|
|
|
// it under the terms of the GNU General Public License as published by
|
|
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
|
|
// (at your option) any later version.
|
|
|
|
|
|
|
|
// Parity is distributed in the hope that it will be useful,
|
|
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
// GNU General Public License for more details.
|
|
|
|
|
|
|
|
// You should have received a copy of the GNU General Public License
|
|
|
|
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
|
|
|
import React, { Component, PropTypes } from 'react';
|
2016-11-15 16:21:53 +01:00
|
|
|
import { observer } from 'mobx-react';
|
2016-11-21 20:45:47 +01:00
|
|
|
import DoneIcon from 'material-ui/svg-icons/action/done-all';
|
|
|
|
import CancelIcon from 'material-ui/svg-icons/content/clear';
|
2016-11-03 18:01:24 +01:00
|
|
|
|
2016-12-05 11:47:13 +01:00
|
|
|
import { Button, IdentityIcon, Modal } from '~/ui';
|
2016-12-06 17:16:54 +01:00
|
|
|
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' }
|
|
|
|
};
|
2016-11-03 18:01:24 +01:00
|
|
|
|
2016-11-15 16:59:10 +01:00
|
|
|
import {
|
2016-11-17 14:21:44 +01:00
|
|
|
LOADING,
|
|
|
|
QUERY_DATA,
|
2016-11-15 16:21:53 +01:00
|
|
|
POSTING_REQUEST, POSTED_REQUEST,
|
2016-12-06 16:09:02 +01:00
|
|
|
REQUESTING_CODE, QUERY_CODE,
|
2016-11-15 16:21:53 +01:00
|
|
|
POSTING_CONFIRMATION, POSTED_CONFIRMATION,
|
|
|
|
DONE
|
2016-11-15 16:59:10 +01:00
|
|
|
} from './store';
|
2016-11-03 18:01:24 +01:00
|
|
|
|
2016-11-07 10:23:42 +01:00
|
|
|
import GatherData from './GatherData';
|
2016-11-07 15:13:22 +01:00
|
|
|
import SendRequest from './SendRequest';
|
2016-11-09 16:54:38 +01:00
|
|
|
import QueryCode from './QueryCode';
|
2016-11-09 17:34:21 +01:00
|
|
|
import SendConfirmation from './SendConfirmation';
|
2016-11-10 14:31:30 +01:00
|
|
|
import Done from './Done';
|
2016-11-03 18:01:24 +01:00
|
|
|
|
2016-11-15 16:21:53 +01:00
|
|
|
@observer
|
2016-12-06 15:09:54 +01:00
|
|
|
export default class Verification extends Component {
|
2016-11-03 18:01:24 +01:00
|
|
|
static propTypes = {
|
2016-12-07 11:53:48 +01:00
|
|
|
store: nullableProptype(PropTypes.object.isRequired),
|
2016-11-15 16:59:10 +01:00
|
|
|
account: PropTypes.string.isRequired,
|
2016-12-06 17:16:54 +01:00
|
|
|
onSelectMethod: PropTypes.func.isRequired,
|
2016-11-03 18:01:24 +01:00
|
|
|
onClose: PropTypes.func.isRequired
|
|
|
|
}
|
|
|
|
|
2016-11-15 19:05:16 +01:00
|
|
|
static phases = { // mapping (store steps -> steps)
|
2016-12-06 17:16:54 +01:00
|
|
|
[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
|
2016-11-03 18:01:24 +01:00
|
|
|
}
|
|
|
|
|
2016-12-06 17:16:54 +01:00
|
|
|
state = {
|
|
|
|
method: 'sms'
|
|
|
|
};
|
|
|
|
|
2016-11-03 18:01:24 +01:00
|
|
|
render () {
|
2016-12-06 17:16:54 +01:00
|
|
|
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;
|
|
|
|
}
|
2016-11-03 18:13:45 +01:00
|
|
|
|
2016-11-03 18:01:24 +01:00
|
|
|
return (
|
|
|
|
<Modal
|
2016-11-15 19:05:16 +01:00
|
|
|
actions={ this.renderDialogActions(phase, error, isStepValid) }
|
2016-12-06 16:09:02 +01:00
|
|
|
title='verify your account'
|
2016-11-29 13:50:22 +01:00
|
|
|
visible
|
2016-11-15 19:05:16 +01:00
|
|
|
current={ phase }
|
2016-12-06 17:16:54 +01:00
|
|
|
steps={ ['Method', 'Prepare', 'Enter Data', 'Request', 'Enter Code', 'Confirm', 'Done!'] }
|
|
|
|
waiting={ error ? [] : [ 1, 3, 5 ] }
|
2016-11-03 18:01:24 +01:00
|
|
|
>
|
2016-11-15 19:05:16 +01:00
|
|
|
{ this.renderStep(phase, error) }
|
2016-11-03 18:01:24 +01:00
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-11-15 19:05:16 +01:00
|
|
|
renderDialogActions (phase, error, isStepValid) {
|
2016-11-15 16:59:10 +01:00
|
|
|
const { store, account, onClose } = this.props;
|
2016-11-03 18:13:45 +01:00
|
|
|
|
|
|
|
const cancel = (
|
|
|
|
<Button
|
|
|
|
key='cancel' label='Cancel'
|
2016-11-21 20:45:47 +01:00
|
|
|
icon={ <CancelIcon /> }
|
2016-11-03 18:13:45 +01:00
|
|
|
onClick={ onClose }
|
|
|
|
/>
|
|
|
|
);
|
2016-11-17 12:26:59 +01:00
|
|
|
if (error) {
|
|
|
|
return (<div>{ cancel }</div>);
|
|
|
|
}
|
2016-11-03 18:13:45 +01:00
|
|
|
|
2016-12-06 17:16:54 +01:00
|
|
|
if (phase === 6) {
|
2016-11-03 18:13:45 +01:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{ cancel }
|
|
|
|
<Button
|
|
|
|
key='done' label='Done'
|
2016-11-15 16:21:53 +01:00
|
|
|
disabled={ !isStepValid }
|
2016-11-21 20:45:47 +01:00
|
|
|
icon={ <DoneIcon /> }
|
2016-11-03 18:13:45 +01:00
|
|
|
onClick={ onClose }
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-11-03 18:01:24 +01:00
|
|
|
|
2016-11-17 14:21:44 +01:00
|
|
|
let action = () => {};
|
2016-11-17 12:26:59 +01:00
|
|
|
switch (phase) {
|
2016-12-06 17:16:54 +01:00
|
|
|
case 0:
|
|
|
|
action = () => {
|
|
|
|
const { onSelectMethod } = this.props;
|
|
|
|
const { method } = this.state;
|
|
|
|
onSelectMethod(method);
|
|
|
|
};
|
2016-11-17 12:26:59 +01:00
|
|
|
break;
|
2016-11-17 14:21:44 +01:00
|
|
|
case 2:
|
2016-12-06 17:16:54 +01:00
|
|
|
action = store.sendRequest;
|
2016-11-17 12:26:59 +01:00
|
|
|
break;
|
2016-11-17 14:21:44 +01:00
|
|
|
case 3:
|
2016-12-06 17:16:54 +01:00
|
|
|
action = store.queryCode;
|
2016-11-17 12:26:59 +01:00
|
|
|
break;
|
2016-11-17 14:21:44 +01:00
|
|
|
case 4:
|
2016-12-06 17:16:54 +01:00
|
|
|
action = store.sendConfirmation;
|
|
|
|
break;
|
|
|
|
case 5:
|
2016-11-17 12:26:59 +01:00
|
|
|
action = store.done;
|
|
|
|
break;
|
2016-11-15 16:21:53 +01:00
|
|
|
}
|
|
|
|
|
2016-11-03 18:01:24 +01:00
|
|
|
return (
|
|
|
|
<div>
|
2016-11-03 18:13:45 +01:00
|
|
|
{ cancel }
|
2016-11-03 18:01:24 +01:00
|
|
|
<Button
|
2016-11-03 18:13:45 +01:00
|
|
|
key='next' label='Next'
|
2016-11-15 16:21:53 +01:00
|
|
|
disabled={ !isStepValid }
|
2016-11-03 18:13:45 +01:00
|
|
|
icon={ <IdentityIcon address={ account } button /> }
|
2016-11-15 16:21:53 +01:00
|
|
|
onClick={ action }
|
2016-11-03 18:01:24 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-11-03 18:13:45 +01:00
|
|
|
|
2016-11-15 19:05:16 +01:00
|
|
|
renderStep (phase, error) {
|
2016-11-17 12:26:59 +01:00
|
|
|
if (error) {
|
|
|
|
return (<p>{ error }</p>);
|
|
|
|
}
|
2016-11-15 16:21:53 +01:00
|
|
|
|
2016-12-07 19:21:29 +01:00
|
|
|
const { method } = this.state;
|
2016-12-06 17:16:54 +01:00
|
|
|
if (phase === 0) {
|
|
|
|
const values = Object.values(methods);
|
|
|
|
const value = values.findIndex((v) => v.value === method);
|
|
|
|
return (
|
|
|
|
<RadioButtons
|
|
|
|
value={ value < 0 ? 0 : value }
|
|
|
|
values={ values }
|
|
|
|
onChange={ this.selectMethod }
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-11-15 16:21:53 +01:00
|
|
|
const {
|
2016-11-15 19:05:16 +01:00
|
|
|
step,
|
2016-12-08 11:55:51 +01:00
|
|
|
fee, isVerified, hasRequested,
|
2016-11-15 16:21:53 +01:00
|
|
|
requestTx, isCodeValid, confirmationTx,
|
2016-11-25 19:48:06 +01:00
|
|
|
setCode
|
2016-11-15 16:59:10 +01:00
|
|
|
} = this.props.store;
|
2016-11-07 15:13:22 +01:00
|
|
|
|
2016-11-21 20:45:47 +01:00
|
|
|
switch (phase) {
|
2016-12-06 17:16:54 +01:00
|
|
|
case 1:
|
2016-11-21 20:45:47 +01:00
|
|
|
return (
|
2016-12-06 16:09:02 +01:00
|
|
|
<p>Loading Verification.</p>
|
2016-11-21 20:45:47 +01:00
|
|
|
);
|
|
|
|
|
2016-12-06 17:16:54 +01:00
|
|
|
case 2:
|
|
|
|
const { setConsentGiven } = this.props.store;
|
|
|
|
|
2016-12-08 11:55:51 +01:00
|
|
|
const fields = [];
|
2016-12-06 17:16:54 +01:00
|
|
|
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
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-11-21 20:45:47 +01:00
|
|
|
return (
|
|
|
|
<GatherData
|
2016-12-07 11:53:48 +01:00
|
|
|
method={ method } fields={ fields }
|
|
|
|
fee={ fee } isVerified={ isVerified } hasRequested={ hasRequested }
|
|
|
|
setConsentGiven={ setConsentGiven }
|
2016-11-21 20:45:47 +01:00
|
|
|
/>
|
|
|
|
);
|
2016-11-10 14:31:30 +01:00
|
|
|
|
2016-12-06 17:16:54 +01:00
|
|
|
case 3:
|
2016-11-21 20:45:47 +01:00
|
|
|
return (
|
|
|
|
<SendRequest step={ step } tx={ requestTx } />
|
|
|
|
);
|
|
|
|
|
2016-12-06 17:16:54 +01:00
|
|
|
case 4:
|
2016-12-07 19:21:29 +01:00
|
|
|
let receiver, hint;
|
|
|
|
if (method === 'sms') {
|
|
|
|
receiver = this.props.store.number;
|
|
|
|
hint = 'Enter the code you received via SMS.';
|
|
|
|
} else if (method === 'email') {
|
|
|
|
receiver = this.props.store.email;
|
|
|
|
hint = 'Enter the code you received via e-mail.';
|
|
|
|
}
|
2016-11-21 20:45:47 +01:00
|
|
|
return (
|
|
|
|
<QueryCode
|
2016-12-07 19:21:29 +01:00
|
|
|
receiver={ receiver }
|
|
|
|
hint={ hint }
|
|
|
|
isCodeValid={ isCodeValid }
|
2016-11-21 20:45:47 +01:00
|
|
|
setCode={ setCode }
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2016-12-06 17:16:54 +01:00
|
|
|
case 5:
|
2016-11-21 20:45:47 +01:00
|
|
|
return (
|
|
|
|
<SendConfirmation step={ step } tx={ confirmationTx } />
|
|
|
|
);
|
|
|
|
|
2016-12-06 17:16:54 +01:00
|
|
|
case 6:
|
2016-11-21 20:45:47 +01:00
|
|
|
return (
|
|
|
|
<Done />
|
|
|
|
);
|
|
|
|
|
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
2016-11-10 14:31:30 +01:00
|
|
|
}
|
2016-12-06 17:16:54 +01:00
|
|
|
|
|
|
|
selectMethod = (choice, i) => {
|
|
|
|
this.setState({ method: choice.value });
|
|
|
|
}
|
2016-11-03 18:01:24 +01:00
|
|
|
}
|