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

sms verification: polish UI

Browse Source 
This introduces another "Done" step, making clear the process has finished.

Also, steps 2 ("Request") and 4 ("Confirm") now have a pending indicator.
This commit is contained in:
Jannis R 2016-11-10 14:31:30 +01:00
parent 2309e53fe6
commit afdda48ab5
No known key found for this signature in database
GPG Key ID: 0FE83946296A88A5
9 changed files with 127 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
js/src/modals/SMSVerification/Done/done.css Normal file
View File

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

39
js/src/modals/SMSVerification/Done/done.js Normal file
View File

@ -0,0 +1,39 @@
// 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 styles from './done.css';
export default class Done extends Component {
static propTypes = {
onSuccess: PropTypes.func.isRequired
}
componentWillMount () {
this.props.onSuccess();
}
render () {
return (
<div className={ styles.container }>
<SuccessIcon />
<p className={ styles.message }>Congratulations, your account is verified!</p>
</div>
);
}
}

17
js/src/modals/SMSVerification/Done/index.js Normal file
View File

@ -0,0 +1,17 @@
// 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 './done';

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

@ -14,6 +14,11 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.list li {
padding: .1em 0;
}
.spacing {
margin-top: 1.5em;
}

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

@ -66,12 +66,18 @@ export default class GatherData extends Component {
// TODO: proper legal text
return (
<Form>
<p>The following steps will let you prove that you control both an account and a phone number.</p>
<ol className={ styles.list }>
<li>You send a verification request to a specific contract.</li>
<li>Our server puts a puzzle into this contract.</li>
<li>The code you receive via SMS is the solution to this puzzle.</li>
</ol>
{ this.renderFee() }
{ this.renderCertified() }
{ this.renderRequested() }
<Input
label={ 'phone number' }
hint={ 'the sms will be sent to this number' }
hint={ 'the SMS will be sent to this number' }
error={ numberIsValid ? null : 'invalid number' }
disabled={ isVerified || hasRequested }
onChange={ this.numberOnChange }

3
js/src/modals/SMSVerification/QueryCode/queryCode.js
View File

@ -31,10 +31,11 @@ export default class QueryCode extends Component {
}
render () {
const { code } = this.props.data;
const { number, code } = this.props.data;
return (
<Form>
<p>The verification code has been sent to { number }.</p>
<Input
label={ 'verification code' }
hint={ 'Enter the code you received via SMS.' }

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

@ -28,6 +28,7 @@ import GatherData from './GatherData';
import SendRequest from './SendRequest';
import QueryCode from './QueryCode';
import SendConfirmation from './SendConfirmation';
import Done from './Done';
export default class SMSVerification extends Component {
static contextTypes = {
@ -63,7 +64,8 @@ export default class SMSVerification extends Component {
title='verify your account via SMS'
visible scroll
current={ step }
steps={ ['Enter Data', 'Request', 'Enter Code', 'Confirm'] }
steps={ ['Enter Data', 'Request', 'Enter Code', 'Confirm', 'Done!'] }
waiting={ [ 1, 3 ] }
>
{ this.renderStep() }
</Modal>
@ -82,7 +84,7 @@ export default class SMSVerification extends Component {
/>
);
if (step === 3) {
if (step === 4) {
return (
<div>
{ cancel }
@ -116,7 +118,9 @@ export default class SMSVerification extends Component {
}
const { step } = this.state;
if (step === 3) {
if (step === 4) {
return this.renderFifthStep();
} else if (step === 3) {
return this.renderFourthStep();
} else if (step === 2) {
return this.renderThirdStep();
@ -140,7 +144,10 @@ export default class SMSVerification extends Component {
}
next = () => {
this.setState({ step: this.state.step + 1, stepIsValid: false });
const { stepIsValid } = this.state;
if (stepIsValid) {
this.setState({ step: this.state.step + 1, stepIsValid: false });
}
}
renderFirstStep () {
@ -167,6 +174,7 @@ export default class SMSVerification extends Component {
onData={ this.onData }
onSuccess={ this.onDataIsValid }
onError={ this.onDataIsInvalid }
nextStep={ this.next }
/>
);
}
@ -194,7 +202,12 @@ export default class SMSVerification extends Component {
onData={ this.onData }
onSuccess={ this.onDataIsValid }
onError={ this.onDataIsInvalid }
nextStep={ this.next }
/>
);
}
renderFifthStep () {
return (<Done onSuccess={ this.onDataIsValid } />);
}
}

13
js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.js
View File

@ -33,7 +33,8 @@ export default class SendConfirmation extends Component {
data: PropTypes.object.isRequired,
onData: PropTypes.func.isRequired,
onSuccess: PropTypes.func.isRequired,
onError: PropTypes.func.isRequired
onError: PropTypes.func.isRequired,
nextStep: PropTypes.func.isRequired
}
state = {
@ -57,7 +58,7 @@ export default class SendConfirmation extends Component {
}
if (step === 'pending') {
return (<p>Waiting for authorization by the Parity Signer.</p>);
return (<p>The verification code will be sent to the contract. Please authorize this using the Parity Signer.</p>);
}
if (step === 'posted') {
@ -68,16 +69,12 @@ export default class SendConfirmation extends Component {
</div>);
}
if (step === 'mined') {
return (<p>Congratulations, your account is verified!</p>);
}
return null;
}
send = () => {
const { api } = this.context;
const { account, contract, onData, onError, onSuccess } = this.props;
const { account, contract, onData, onError, onSuccess, nextStep } = this.props;
const { code } = this.props.data;
const token = sha3(code);
@ -104,8 +101,8 @@ export default class SendConfirmation extends Component {
return waitForConfirmations(api, txHash, 3);
})
.then(() => {
this.setState({ step: 'mined' });
onSuccess();
nextStep();
})
.catch((err) => {
console.error('failed to confirm sms verification', err);

12
js/src/modals/SMSVerification/SendRequest/sendRequest.js
View File

@ -48,7 +48,8 @@ export default class SendRequest extends Component {
data: PropTypes.object.isRequired,
onData: PropTypes.func.isRequired,
onSuccess: PropTypes.func.isRequired,
onError: PropTypes.func.isRequired
onError: PropTypes.func.isRequired,
nextStep: PropTypes.func.isRequired
}
state = {
@ -72,7 +73,7 @@ export default class SendRequest extends Component {
}
if (step === 'pending') {
return (<p>Waiting for authorization by the Parity Signer.</p>);
return (<p>A verification request will be sent to the contract. Please authorize this using the Parity Signer.</p>);
}
if (step === 'posted') {
@ -87,16 +88,12 @@ export default class SendRequest extends Component {
return (<p>Requesting an SMS from the Parity server.</p>);
}
if (step === 'sms-sent') {
return (<p>The verification code has been sent to { this.props.data.number }.</p>);
}
return null;
}
send = () => {
const { api } = this.context;
const { account, contract, onData, onError, onSuccess } = this.props;
const { account, contract, onData, onError, onSuccess, nextStep } = this.props;
const { fee, number, hasRequested } = this.props.data;
const request = contract.functions.find((fn) => fn.name === 'request');
@ -131,6 +128,7 @@ export default class SendRequest extends Component {
.then(() => {
this.setState({ step: 'sms-sent' });
onSuccess();
nextStep();
})
.catch((err) => {
console.error('failed to request sms verification', err);