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

@@ -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;
+}

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

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 <http://www.gnu.org/licenses/>.
+
+export default from './done';

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 <http://www.gnu.org/licenses/>.
 */
+
+.list li {
+  padding: .1em 0;
+}
+
 .spacing {
   margin-top: 1.5em;
 }

js/src/modals/SMSVerification/GatherData/gatherData.js

@@ -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 }

js/src/modals/SMSVerification/QueryCode/queryCode.js

@@ -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.' }

js/src/modals/SMSVerification/SMSVerification.js

@@ -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 } />);
+  }
 }

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

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