openethereum/js/src/modals/SMSVerification/SMSVerification.js

187 lines
4.6 KiB
JavaScript
Raw Normal View History

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';
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
import { Button, IdentityIcon, Modal } from '../../ui';
2016-11-03 18:01:24 +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,
REQUESTING_SMS, QUERY_CODE,
2016-11-15 16:21:53 +01:00
POSTING_CONFIRMATION, POSTED_CONFIRMATION,
DONE
} 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';
import Done from './Done';
2016-11-03 18:01:24 +01:00
2016-11-15 16:21:53 +01:00
@observer
2016-11-03 18:01:24 +01:00
export default class SMSVerification extends Component {
static propTypes = {
store: PropTypes.any.isRequired,
account: PropTypes.string.isRequired,
2016-11-03 18:01:24 +01:00
onClose: PropTypes.func.isRequired
}
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,
[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 () {
const phase = SMSVerification.phases[this.props.store.step];
const { error, isStepValid } = this.props.store;
2016-11-03 18:13:45 +01:00
2016-11-03 18:01:24 +01:00
return (
<Modal
actions={ this.renderDialogActions(phase, error, isStepValid) }
2016-11-03 18:01:24 +01:00
title='verify your account via SMS'
visible scroll
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
>
{ this.renderStep(phase, error) }
2016-11-03 18:01:24 +01:00
</Modal>
);
}
renderDialogActions (phase, error, isStepValid) {
const { store, account, onClose } = this.props;
2016-11-03 18:13:45 +01:00
const cancel = (
<Button
key='cancel' label='Cancel'
icon={ <CancelIcon /> }
2016-11-03 18:13:45 +01:00
onClick={ onClose }
/>
);
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 }
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 = () => {};
switch (phase) {
2016-11-17 14:21:44 +01:00
case 1:
action = store.sendRequest;
break;
2016-11-17 14:21:44 +01:00
case 2:
action = store.queryCode;
break;
2016-11-17 14:21:44 +01:00
case 3:
action = store.sendConfirmation;
break;
2016-11-17 14:21:44 +01:00
case 4:
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
renderStep (phase, error) {
if (error) {
return (<p>{ error }</p>);
}
2016-11-15 16:21:53 +01:00
const {
step,
fee, number, isNumberValid, isVerified, hasRequested,
2016-11-15 16:21:53 +01:00
requestTx, isCodeValid, confirmationTx,
setCode
} = this.props.store;
2016-11-07 15:13:22 +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 }
/>
);
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-03 18:01:24 +01:00
}