grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sms verification: merge step 1 & 2

Browse Source
This commit is contained in:
Jannis R 2016-11-09 17:57:30 +01:00
parent a42140edde
commit 01cf88d71a
No known key found for this signature in database
GPG Key ID: 0FE83946296A88A5
6 changed files with 67 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
js/src/modals/SMSVerification/CheckIfCertified/checkIfCertified.css
View File

@ -1,27 +0,0 @@
/* 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/>.
*/
.container {
display: flex;
align-items: center;
}
.message {
margin-top: 0;
margin-bottom: 0;
margin-left: .5em;
}

85
js/src/modals/SMSVerification/CheckIfCertified/checkIfCertified.js
View File

@ -1,85 +0,0 @@
// 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';
import SuccessIcon from 'material-ui/svg-icons/navigation/check';
import ErrorIcon from 'material-ui/svg-icons/alert/error-outline';
import styles from './checkIfCertified.css';
export default class CheckIfCertified extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
static propTypes = {
account: PropTypes.string.isRequired,
contract: PropTypes.object.isRequired,
onIsCertified: PropTypes.func.isRequired,
onIsNotCertified: PropTypes.func.isRequired
}
state = {
pending: false,
isCertified: null
};
componentWillMount () {
const { pending } = this.state;
if (pending) {
return;
}
this.setState({ pending: true });
const { account, contract, onIsCertified, onIsNotCertified } = this.props;
contract.instance.certified.call({}, [account])
.then((isCertified) => {
this.setState({ isCertified, pending: false });
if (isCertified) {
onIsCertified();
} else {
onIsNotCertified();
}
})
.catch((err) => {
console.error('error checking if certified', err);
});
}
render () {
const { pending, isCertified } = this.state;
if (pending) {
return (<p className={ styles.message }>Checking if your account is verified…</p>);
}
if (isCertified) {
return (
<div className={ styles.container }>
<ErrorIcon />
<p className={ styles.message }>Your account is already verified.</p>
</div>
);
}
return (
<div className={ styles.container }>
<SuccessIcon />
<p className={ styles.message }>Your account is not verified yet.</p>
</div>
);
}
}

17
js/src/modals/SMSVerification/CheckIfCertified/index.js
View File

@ -1,17 +0,0 @@
// 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/>.
export default from './checkIfCertified';

11
js/src/modals/SMSVerification/GatherData/gatherData.css
View File

@ -17,3 +17,14 @@
.spacing {
margin-top: 1.5em;
}
.container {
margin-top: .5em;
display: flex;
align-items: center;
}
.message {
margin-top: 0;
margin-bottom: 0;
margin-left: .5em;
}

52
js/src/modals/SMSVerification/GatherData/gatherData.js
View File

@ -16,6 +16,9 @@
import React, { Component, PropTypes } from 'react';
import { Checkbox } from 'material-ui';
import SuccessIcon from 'material-ui/svg-icons/navigation/check';
import ErrorIcon from 'material-ui/svg-icons/alert/error-outline';
import phone from 'phoneformat.js';
import { fromWei } from '../../../api/util/wei';
@ -24,7 +27,12 @@ import { Form, Input } from '../../../ui';
import styles from './gatherData.css';
export default class GatherData extends Component {
static contextTypes = {
api: PropTypes.object.isRequired
}
static propTypes = {
account: PropTypes.string.isRequired,
contract: PropTypes.object.isRequired,
data: PropTypes.object.isRequired,
onData: PropTypes.func.isRequired,
@ -34,6 +42,7 @@ export default class GatherData extends Component {
state = {
init: true,
isCertified: null,
numberIsValid: null,
consentGiven: false
};
@ -41,8 +50,9 @@ export default class GatherData extends Component {
componentWillMount () {
const { init } = this.state;
if (init) {
this.queryFee();
this.setState({ init: false });
this.queryFee();
this.checkIfCertified();
}
}
@ -53,6 +63,7 @@ export default class GatherData extends Component {
return (
<Form>
<p>{ fee ? `The fee is ${fromWei(fee).toFixed(3)} ETH.` : 'Fetching the fee…' }</p>
{ this.renderCertified() }
<Input
label={ 'phone number' }
hint={ 'the sms will be sent to this number' }
@ -69,6 +80,28 @@ export default class GatherData extends Component {
);
}
renderCertified () {
const { isCertified } = this.props.data;
if (isCertified) {
return (
<div className={ styles.container }>
<ErrorIcon />
<p className={ styles.message }>Your account is already verified.</p>
</div>
);
}
if (isCertified === false) {
return (
<div className={ styles.container }>
<SuccessIcon />
<p className={ styles.message }>Your account is not verified yet.</p>
</div>
);
}
return (<p className={ styles.message }>Checking if your account is verified…</p>);
}
queryFee = () => {
const { contract, onData } = this.props;
@ -83,6 +116,19 @@ export default class GatherData extends Component {
});
}
checkIfCertified = () => {
const { account, contract, onData } = this.props;
contract.instance.certified.call({}, [account])
.then((isCertified) => {
onData({ isCertified });
this.onChange();
})
.catch((err) => {
console.error('error checking if certified', err);
});
}
numberOnSubmit = (value) => {
this.numberOnChange(null, value);
this.props.onData({ number: value });
@ -102,10 +148,10 @@ export default class GatherData extends Component {
}
onChange = () => {
const { fee } = this.props.data;
const { fee, isCertified } = this.props.data;
const { numberIsValid, consentGiven } = this.state;
if (fee && numberIsValid && consentGiven) {
if (fee && numberIsValid && consentGiven && isCertified === false) {
this.props.onDataIsValid();
} else {
this.props.onDataIsInvalid();

29
js/src/modals/SMSVerification/SMSVerification.js
View File

@ -24,7 +24,6 @@ import { validateAddress, validateUint } from '../../util/validation';
import ABI from '../../contracts/abi/sms-verification.json';
const contract = '0xcE381B876A85A72303f7cA7b3a012f58F4CEEEeB';
import CheckIfCertified from './CheckIfCertified';
import GatherData from './GatherData';
import SendRequest from './SendRequest';
import QueryCode from './QueryCode';
@ -64,7 +63,7 @@ export default class SMSVerification extends Component {
title='verify your account via SMS'
visible scroll
current={ step }
steps={ ['Preparations', 'Enter Data', 'Request', 'Enter Code', 'Confirm'] }
steps={ ['Enter Data', 'Request', 'Enter Code', 'Confirm'] }
>
{ this.renderStep() }
</Modal>
@ -83,7 +82,7 @@ export default class SMSVerification extends Component {
/>
);
if (step === 4) {
if (step === 3) {
return (
<div>
{ cancel }
@ -117,9 +116,7 @@ export default class SMSVerification extends Component {
}
const { step } = this.state;
if (step === 4) {
return this.renderFifthStep();
} else if (step === 3) {
if (step === 3) {
return this.renderFourthStep();
} else if (step === 2) {
return this.renderThirdStep();
@ -148,23 +145,11 @@ export default class SMSVerification extends Component {
renderFirstStep () {
const { account } = this.props;
const { contract } = this.state;
return (
<CheckIfCertified
account={ account } contract={ contract }
onIsCertified={ this.onDataIsInvalid }
onIsNotCertified={ this.onDataIsValid }
/>
);
}
renderSecondStep () {
const { contract, data } = this.state;
return (
<GatherData
contract={ contract } data={ data }
account={ account } contract={ contract } data={ data }
onData={ this.onData }
onDataIsValid={ this.onDataIsValid }
onDataIsInvalid={ this.onDataIsInvalid }
@ -172,7 +157,7 @@ export default class SMSVerification extends Component {
);
}
renderThirdStep () {
renderSecondStep () {
const { account } = this.props;
const { contract, data } = this.state;
@ -186,7 +171,7 @@ export default class SMSVerification extends Component {
);
}
renderFourthStep () {
renderThirdStep () {
const { data } = this.state;
return (
@ -199,7 +184,7 @@ export default class SMSVerification extends Component {
);
}
renderFifthStep () {
renderFourthStep () {
const { account } = this.props;
const { contract, data } = this.state;