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-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-11-28 17:39:55 +01:00
|
|
|
REQUESTING_SMS, 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-11-15 16:59:10 +01:00
|
|
|
store: PropTypes.any.isRequired,
|
|
|
|
account: PropTypes.string.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-11-17 14:21:44 +01:00
|
|
|
[LOADING]: 0,
|
|
|
|
[QUERY_DATA]: 1,
|
|
|
|
[POSTING_REQUEST]: 2, [POSTED_REQUEST]: 2, [REQUESTING_SMS]: 2,
|
2016-11-28 17:39:55 +01:00
|
|
|
[QUERY_CODE]: 3,
|
2016-11-17 14:21:44 +01:00
|
|
|
[POSTING_CONFIRMATION]: 4, [POSTED_CONFIRMATION]: 4,
|
|
|
|
[DONE]: 5
|
2016-11-03 18:01:24 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2016-12-06 15:09:54 +01:00
|
|
|
const phase = Verification.phases[this.props.store.step];
|
2016-11-15 16:59:10 +01:00
|
|
|
const { error, isStepValid } = this.props.store;
|
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-11-03 18:01:24 +01:00
|
|
|
title='verify your account via SMS'
|
2016-11-29 13:50:22 +01:00
|
|
|
visible
|
2016-11-15 19:05:16 +01:00
|
|
|
current={ phase }
|
2016-11-17 14:21:44 +01:00
|
|
|
steps={ ['Prepare', 'Enter Data', 'Request', 'Enter Code', 'Confirm', 'Done!'] }
|
|
|
|
waiting={ error ? [] : [ 0, 2, 4 ] }
|
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-11-17 14:21:44 +01:00
|
|
|
if (phase === 5) {
|
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-11-17 14:21:44 +01:00
|
|
|
case 1:
|
2016-11-17 12:26:59 +01:00
|
|
|
action = store.sendRequest;
|
|
|
|
break;
|
2016-11-17 14:21:44 +01:00
|
|
|
case 2:
|
2016-11-17 12:26:59 +01:00
|
|
|
action = store.queryCode;
|
|
|
|
break;
|
2016-11-17 14:21:44 +01:00
|
|
|
case 3:
|
2016-11-17 12:26:59 +01:00
|
|
|
action = store.sendConfirmation;
|
|
|
|
break;
|
2016-11-17 14:21:44 +01:00
|
|
|
case 4:
|
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
|
|
|
|
|
|
|
const {
|
2016-11-15 19:05:16 +01:00
|
|
|
step,
|
|
|
|
fee, number, isNumberValid, 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) {
|
|
|
|
case 0:
|
|
|
|
return (
|
|
|
|
<p>Loading SMS Verification.</p>
|
|
|
|
);
|
|
|
|
|
|
|
|
case 1:
|
|
|
|
const { setNumber, setConsentGiven } = this.props.store;
|
|
|
|
return (
|
|
|
|
<GatherData
|
|
|
|
fee={ fee } isNumberValid={ isNumberValid }
|
|
|
|
isVerified={ isVerified } hasRequested={ hasRequested }
|
|
|
|
setNumber={ setNumber } setConsentGiven={ setConsentGiven }
|
|
|
|
/>
|
|
|
|
);
|
2016-11-10 14:31:30 +01:00
|
|
|
|
2016-11-21 20:45:47 +01:00
|
|
|
case 2:
|
|
|
|
return (
|
|
|
|
<SendRequest step={ step } tx={ requestTx } />
|
|
|
|
);
|
|
|
|
|
|
|
|
case 3:
|
|
|
|
return (
|
|
|
|
<QueryCode
|
|
|
|
number={ number } fee={ fee } isCodeValid={ isCodeValid }
|
|
|
|
setCode={ setCode }
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
case 4:
|
|
|
|
return (
|
|
|
|
<SendConfirmation step={ step } tx={ confirmationTx } />
|
|
|
|
);
|
|
|
|
|
|
|
|
case 5:
|
|
|
|
return (
|
|
|
|
<Done />
|
|
|
|
);
|
|
|
|
|
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
2016-11-10 14:31:30 +01:00
|
|
|
}
|
2016-11-03 18:01:24 +01:00
|
|
|
}
|