sms verification: merge step 1 & 2

js/src/modals/SMSVerification/CheckIfCertified/checkIfCertified.css

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

js/src/modals/SMSVerification/CheckIfCertified/checkIfCertified.js

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

js/src/modals/SMSVerification/CheckIfCertified/index.js

@@ -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';

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

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

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

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

js/src/modals/SMSVerification/SMSVerification.js

@@ -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) {
+    if (step === 3) {
-      return this.renderFifthStep();
-    } else 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;