From afdda48ab57280afd4a4518b4b030ed346c6b912 Mon Sep 17 00:00:00 2001 From: Jannis R Date: Thu, 10 Nov 2016 14:31:30 +0100 Subject: [PATCH] sms verification: polish UI This introduces another "Done" step, making clear the process has finished. Also, steps 2 ("Request") and 4 ("Confirm") now have a pending indicator. --- js/src/modals/SMSVerification/Done/done.css | 30 ++++++++++++++ js/src/modals/SMSVerification/Done/done.js | 39 +++++++++++++++++++ js/src/modals/SMSVerification/Done/index.js | 17 ++++++++ .../SMSVerification/GatherData/gatherData.css | 5 +++ .../SMSVerification/GatherData/gatherData.js | 8 +++- .../SMSVerification/QueryCode/queryCode.js | 3 +- .../modals/SMSVerification/SMSVerification.js | 21 ++++++++-- .../SendConfirmation/sendConfirmation.js | 13 +++---- .../SendRequest/sendRequest.js | 12 +++--- 9 files changed, 127 insertions(+), 21 deletions(-) create mode 100644 js/src/modals/SMSVerification/Done/done.css create mode 100644 js/src/modals/SMSVerification/Done/done.js create mode 100644 js/src/modals/SMSVerification/Done/index.js diff --git a/js/src/modals/SMSVerification/Done/done.css b/js/src/modals/SMSVerification/Done/done.css new file mode 100644 index 000000000..4bd7697fb --- /dev/null +++ b/js/src/modals/SMSVerification/Done/done.css @@ -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 . +*/ +.spacing { + margin-top: 1.5em; +} + +.container { + margin-top: .5em; + display: flex; + align-items: center; +} +.message { + margin-top: 0; + margin-bottom: 0; + margin-left: .5em; +} diff --git a/js/src/modals/SMSVerification/Done/done.js b/js/src/modals/SMSVerification/Done/done.js new file mode 100644 index 000000000..0af05ad41 --- /dev/null +++ b/js/src/modals/SMSVerification/Done/done.js @@ -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 . + +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 ( +
+ +

Congratulations, your account is verified!

+
+ ); + } +} diff --git a/js/src/modals/SMSVerification/Done/index.js b/js/src/modals/SMSVerification/Done/index.js new file mode 100644 index 000000000..549306dbd --- /dev/null +++ b/js/src/modals/SMSVerification/Done/index.js @@ -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 . + +export default from './done'; diff --git a/js/src/modals/SMSVerification/GatherData/gatherData.css b/js/src/modals/SMSVerification/GatherData/gatherData.css index 4bd7697fb..0c501c223 100644 --- a/js/src/modals/SMSVerification/GatherData/gatherData.css +++ b/js/src/modals/SMSVerification/GatherData/gatherData.css @@ -14,6 +14,11 @@ /* You should have received a copy of the GNU General Public License /* along with Parity. If not, see . */ + +.list li { + padding: .1em 0; +} + .spacing { margin-top: 1.5em; } diff --git a/js/src/modals/SMSVerification/GatherData/gatherData.js b/js/src/modals/SMSVerification/GatherData/gatherData.js index 72c0c3061..528aaf1d1 100644 --- a/js/src/modals/SMSVerification/GatherData/gatherData.js +++ b/js/src/modals/SMSVerification/GatherData/gatherData.js @@ -66,12 +66,18 @@ export default class GatherData extends Component { // TODO: proper legal text return (
+

The following steps will let you prove that you control both an account and a phone number.

+
    +
  1. You send a verification request to a specific contract.
    2. +
  2. Our server puts a puzzle into this contract.
    3. +
  3. The code you receive via SMS is the solution to this puzzle.
    4. +
{ this.renderFee() } { this.renderCertified() } { this.renderRequested() } +

The verification code has been sent to { number }.

{ this.renderStep() } @@ -82,7 +84,7 @@ export default class SMSVerification extends Component { /> ); - if (step === 3) { + if (step === 4) { return (
{ 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 (); + } } diff --git a/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.js b/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.js index 7e7880929..4f044d51c 100644 --- a/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.js +++ b/js/src/modals/SMSVerification/SendConfirmation/sendConfirmation.js @@ -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 (

Waiting for authorization by the Parity Signer.

); + return (

The verification code will be sent to the contract. Please authorize this using the Parity Signer.

); } if (step === 'posted') { @@ -68,16 +69,12 @@ export default class SendConfirmation extends Component {
); } - if (step === 'mined') { - return (

Congratulations, your account is verified!

); - } - 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); diff --git a/js/src/modals/SMSVerification/SendRequest/sendRequest.js b/js/src/modals/SMSVerification/SendRequest/sendRequest.js index 0594ebbf1..056728116 100644 --- a/js/src/modals/SMSVerification/SendRequest/sendRequest.js +++ b/js/src/modals/SMSVerification/SendRequest/sendRequest.js @@ -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 (

Waiting for authorization by the Parity Signer.

); + return (

A verification request will be sent to the contract. Please authorize this using the Parity Signer.

); } if (step === 'posted') { @@ -87,16 +88,12 @@ export default class SendRequest extends Component { return (

Requesting an SMS from the Parity server.

); } - if (step === 'sms-sent') { - return (

The verification code has been sent to { this.props.data.number }.

); - } - 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);