openethereum/js/packages/dapp-account/Verification/GatherData/gatherData.js

292 lines
8.7 KiB
JavaScript
Raw Normal View History

// Copyright 2015-2017 Parity Technologies (UK) Ltd.
2016-11-03 19:21:38 +01:00
// 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 } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import BigNumber from 'bignumber.js';
2016-11-09 17:57:30 +01:00
2017-04-21 11:40:22 +02:00
import { fromWei } from '@parity/api/util/wei';
import { Checkbox, Form, Input } from '@parity/ui';
import { DoneIcon, ErrorIcon, InfoIcon } from '@parity/ui/Icons';
import { nullableProptype } from '@parity/shared/util/proptypes';
2016-11-03 19:21:38 +01:00
import smsTermsOfService from '../sms-verification/terms-of-service';
import emailTermsOfService from '../email-verification/terms-of-service';
import { howSMSVerificationWorks, howEmailVerificationWorks } from '../how-it-works';
2016-11-07 10:23:42 +01:00
import styles from './gatherData.css';
2016-11-03 19:21:38 +01:00
const boolOfError = PropTypes.oneOfType([ PropTypes.bool, PropTypes.instanceOf(Error) ]);
export default class GatherData extends Component {
2016-11-03 19:21:38 +01:00
static propTypes = {
fee: React.PropTypes.instanceOf(BigNumber),
2016-12-07 11:53:48 +01:00
fields: PropTypes.array.isRequired,
accountHasRequested: nullableProptype(PropTypes.bool.isRequired),
isServerRunning: nullableProptype(PropTypes.bool.isRequired),
isAbleToRequest: nullableProptype(boolOfError.isRequired),
accountIsVerified: nullableProptype(PropTypes.bool.isRequired),
method: PropTypes.string.isRequired,
setConsentGiven: PropTypes.func.isRequired
}
2016-11-03 19:21:38 +01:00
render () {
const { method, accountIsVerified } = this.props;
const termsOfService = method === 'email' ? emailTermsOfService : smsTermsOfService;
const howItWorks = method === 'email' ? howEmailVerificationWorks : howSMSVerificationWorks;
2016-11-03 19:21:38 +01:00
return (
<Form>
2016-12-07 11:53:48 +01:00
{ howItWorks }
{ this.renderServerRunning() }
2016-11-09 19:04:13 +01:00
{ this.renderFee() }
2016-11-09 17:57:30 +01:00
{ this.renderCertified() }
{ this.renderRequested() }
2016-12-07 11:53:48 +01:00
{ this.renderFields() }
{ this.renderIfAbleToRequest() }
2016-11-03 19:21:38 +01:00
<Checkbox
className={ styles.spacing }
label={
<FormattedMessage
id='ui.verification.gatherData.termsOfService'
defaultMessage='I agree to the terms and conditions below.'
/>
}
disabled={ accountIsVerified }
onClick={ this.consentOnChange }
2016-11-03 19:21:38 +01:00
/>
<div className={ styles.terms }>{ termsOfService }</div>
2016-11-03 19:21:38 +01:00
</Form>
);
}
2016-11-09 19:04:13 +01:00
renderServerRunning () {
const { isServerRunning } = this.props;
if (isServerRunning) {
return (
<div className={ styles.container }>
<DoneIcon />
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.isServerRunning.true'
defaultMessage='The verification server is running.'
/>
</p>
</div>
);
} else if (isServerRunning === false) {
return (
<div className={ styles.container }>
<ErrorIcon />
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.isServerRunning.false'
defaultMessage='The verification server is not running.'
/>
</p>
</div>
);
}
return (
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.isServerRunning.pending'
defaultMessage='Checking if the verification server is running…'
/>
</p>
);
}
2016-11-09 19:04:13 +01:00
renderFee () {
const { fee } = this.props;
2016-11-09 19:04:13 +01:00
if (!fee) {
return (<p>Fetching the fee</p>);
}
if (fee.eq(0)) {
return (
<div className={ styles.container }>
<InfoIcon />
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.nofee'
defaultMessage='There is no additional fee.'
/>
</p>
</div>
);
}
2016-11-09 19:04:13 +01:00
return (
<div className={ styles.container }>
<InfoIcon />
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.fee'
defaultMessage='The additional fee is {amount} ETH.'
values={ {
amount: fromWei(fee).toFixed(3)
} }
/>
</p>
2016-11-09 19:04:13 +01:00
</div>
);
}
2016-11-03 19:21:38 +01:00
2016-11-09 17:57:30 +01:00
renderCertified () {
const { accountIsVerified } = this.props;
2016-11-09 17:57:30 +01:00
if (accountIsVerified) {
2016-11-09 17:57:30 +01:00
return (
<div className={ styles.container }>
<ErrorIcon />
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.accountIsVerified.true'
defaultMessage='Your account is already verified.'
/>
</p>
2016-11-09 17:57:30 +01:00
</div>
);
} else if (accountIsVerified === false) {
2016-11-09 17:57:30 +01:00
return (
<div className={ styles.container }>
<DoneIcon />
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.accountIsVerified.false'
defaultMessage='Your account is not verified yet.'
/>
</p>
2016-11-09 17:57:30 +01:00
</div>
);
}
return (
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.accountIsVerified.pending'
defaultMessage='Checking if your account is verified…'
/>
</p>
);
2016-11-09 17:57:30 +01:00
}
renderRequested () {
const { accountIsVerified, accountHasRequested } = this.props;
// If the account is verified, don't show that it has requested verification.
if (accountIsVerified) {
return null;
}
if (accountHasRequested) {
return (
<div className={ styles.container }>
<InfoIcon />
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.accountHasRequested.true'
defaultMessage='You already requested verification from this account.'
/>
</p>
</div>
);
} else if (accountHasRequested === false) {
return (
<div className={ styles.container }>
<DoneIcon />
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.accountHasRequested.false'
defaultMessage='You did not request verification from this account yet.'
/>
</p>
</div>
);
}
return (
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.accountHasRequested.pending'
defaultMessage='Checking if you requested verification…'
/>
</p>
);
}
2016-12-07 11:53:48 +01:00
renderFields () {
const { accountIsVerified, fields } = this.props;
2016-12-07 11:53:48 +01:00
const rendered = fields.map((field, index) => {
2016-12-07 11:53:48 +01:00
const onChange = (_, v) => {
field.onChange(v);
};
const onSubmit = field.onChange;
2016-12-07 11:53:48 +01:00
return (
<Input
autoFocus={ index === 0 }
className={ styles.field }
2016-12-07 11:53:48 +01:00
key={ field.key }
label={ field.label }
hint={ field.hint }
error={ field.error }
disabled={ accountIsVerified }
2016-12-07 11:53:48 +01:00
onChange={ onChange }
onSubmit={ onSubmit }
/>
);
});
2016-11-03 19:21:38 +01:00
2016-12-07 11:53:48 +01:00
return (<div>{rendered}</div>);
2016-11-03 19:21:38 +01:00
}
renderIfAbleToRequest () {
const { accountIsVerified, isAbleToRequest } = this.props;
// If the account is verified, don't show a warning.
// If the client is able to send the request, don't show a warning
if (accountIsVerified || isAbleToRequest === true) {
return null;
}
if (isAbleToRequest === null) {
return (
<p className={ styles.message }>
<FormattedMessage
id='ui.verification.gatherData.isAbleToRequest.pending'
defaultMessage='Validating your input…'
/>
</p>
);
} else if (isAbleToRequest) {
return (
<div className={ styles.container }>
<ErrorIcon />
<p className={ styles.message }>
{ isAbleToRequest.message }
</p>
</div>
);
}
}
2016-11-03 19:21:38 +01:00
consentOnChange = (_, consentGiven) => {
this.props.setConsentGiven(consentGiven);
2016-11-03 19:21:38 +01:00
}
}