sms verification code style (#3564)

* sms verification: fix code style

* sms verification: move server-related code to 3rdparty

* sms verification: adapt to ropsten

js/src/3rdparty/sms-verification/index.js

@@ -14,9 +14,10 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { stringify } from 'querystring';
 import React from 'react';
 
-export default (
+export const termsOfService = (
   <ul>
     <li>This privacy notice relates to your use of the Parity SMS verification service. We take your privacy seriously and deal in an honest, direct and transparent way when it comes to your data.</li>
     <li>We collect your phone number when you use this service. This is temporarily kept in memory, and then encrypted and stored in our EU servers. We only retain the cryptographic hash of the number to prevent duplicated accounts. You consent to this use.</li>
@@ -25,3 +26,18 @@ export default (
     <li><i>Parity Technology Limited</i> is registered in England and Wales under company number <code>09760015</code> and complies with the Data Protection Act 1998 (UK). You may contact us via email at <a href={ 'mailto:admin@parity.io' }>admin@parity.io</a>. Our general privacy policy can be found here: <a href={ 'https://ethcore.io/legal.html' }>https://ethcore.io/legal.html</a>.</li>
   </ul>
 );
+
+export const postToServer = (query) => {
+  query = stringify(query);
+  return fetch('https://sms-verification.parity.io/?' + query, {
+    method: 'POST', mode: 'cors', cache: 'no-store'
+  })
+  .then((res) => {
+    return res.json().then((data) => {
+      if (res.ok) {
+        return data.message;
+      }
+      throw new Error(data.message || 'unknown error');
+    });
+  });
+};

js/src/contracts/sms-verification.js

@@ -14,8 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { stringify } from 'querystring';
-
 export const checkIfVerified = (contract, account) => {
   return contract.instance.certified.call({}, [account]);
 };
@@ -35,18 +33,3 @@ export const checkIfRequested = (contract, account) => {
     });
   });
 };
-
-export const postToServer = (query) => {
-  query = stringify(query);
-  return fetch('https://sms-verification.parity.io/?' + query, {
-    method: 'POST', mode: 'cors', cache: 'no-store'
-  })
-  .then((res) => {
-    return res.json().then((data) => {
-      if (res.ok) {
-        return data.message;
-      }
-      throw new Error(data.message || 'unknown error');
-    });
-  });
-};

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

@@ -25,7 +25,7 @@ import ErrorIcon from 'material-ui/svg-icons/navigation/close';
 import { fromWei } from '../../../api/util/wei';
 import { Form, Input } from '../../../ui';
 
-import terms from '../terms-of-service';
+import { termsOfService } from '../../../3rdparty/sms-verification';
 import styles from './gatherData.css';
 
 export default class GatherData extends Component {
@@ -66,7 +66,7 @@ export default class GatherData extends Component {
           disabled={ isVerified }
           onCheck={ this.consentOnChange }
         />
-        <div className={ styles.terms }>{ terms }</div>
+        <div className={ styles.terms }>{ termsOfService }</div>
       </Form>
     );
   }
@@ -123,8 +123,7 @@ export default class GatherData extends Component {
           <p className={ styles.message }>You already requested verification.</p>
         </div>
       );
-    }
-    if (hasRequested === false) {
+    } else if (hasRequested === false) {
       return (
         <div className={ styles.container }>
           <SuccessIcon />

js/src/modals/SMSVerification/SMSVerification.js

@@ -16,8 +16,8 @@
 
 import React, { Component, PropTypes } from 'react';
 import { observer } from 'mobx-react';
-import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
-import ContentClear from 'material-ui/svg-icons/content/clear';
+import DoneIcon from 'material-ui/svg-icons/action/done-all';
+import CancelIcon from 'material-ui/svg-icons/content/clear';
 
 import { Button, IdentityIcon, Modal } from '../../ui';
 
@@ -77,7 +77,7 @@ export default class SMSVerification extends Component {
     const cancel = (
       <Button
         key='cancel' label='Cancel'
-        icon={ <ContentClear /> }
+        icon={ <CancelIcon /> }
         onClick={ onClose }
       />
     );
@@ -92,7 +92,7 @@ export default class SMSVerification extends Component {
           <Button
             key='done' label='Done'
             disabled={ !isStepValid }
-            icon={ <ActionDoneAll /> }
+            icon={ <DoneIcon /> }
             onClick={ onClose }
           />
         </div>
@@ -140,37 +140,47 @@ export default class SMSVerification extends Component {
       setNumber, setConsentGiven, setCode
     } = this.props.store;
 
-    if (phase === 5) {
-      return (<Done />);
-    }
-    if (phase === 4) {
-      return (<SendConfirmation step={ step } tx={ confirmationTx } />);
-    }
-    if (phase === 3) {
-      return (
-        <QueryCode
-          number={ number } fee={ fee } isCodeValid={ isCodeValid }
-          setCode={ setCode }
-        />
-      );
-    }
-    if (phase === 2) {
-      return (<SendRequest step={ step } tx={ requestTx } />);
-    }
-    if (phase === 1) {
-      const { setNumber, setConsentGiven } = this.props.store;
-      return (
-        <GatherData
-          fee={ fee } isNumberValid={ isNumberValid }
-          isVerified={ isVerified } hasRequested={ hasRequested }
-          setNumber={ setNumber } setConsentGiven={ setConsentGiven }
-        />
-      );
-    }
-    if (phase === 0) {
-      return (<p>Preparing awesomeness!</p>);
-    }
+    switch (phase) {
+      case 0:
+        return (
+          <p>Loading SMS Verification.</p>
+        );
 
-    return null;
+      case 1:
+        const { setNumber, setConsentGiven } = this.props.store;
+        return (
+          <GatherData
+            fee={ fee } isNumberValid={ isNumberValid }
+            isVerified={ isVerified } hasRequested={ hasRequested }
+            setNumber={ setNumber } setConsentGiven={ setConsentGiven }
+          />
+        );
+
+      case 2:
+        return (
+          <SendRequest step={ step } tx={ requestTx } />
+        );
+
+      case 3:
+        return (
+          <QueryCode
+            number={ number } fee={ fee } isCodeValid={ isCodeValid }
+            setCode={ setCode }
+          />
+        );
+
+      case 4:
+        return (
+          <SendConfirmation step={ step } tx={ confirmationTx } />
+        );
+
+      case 5:
+        return (
+          <Done />
+        );
+
+      default:
+        return null;
+    }
   }
 }

js/src/modals/SMSVerification/store.js

@@ -20,7 +20,8 @@ import { sha3 } from '../../api/util/sha3';
 
 import Contracts from '../../contracts';
 
-import { checkIfVerified, checkIfRequested, postToServer } from '../../contracts/sms-verification';
+import { checkIfVerified, checkIfRequested } from '../../contracts/sms-verification';
+import { postToServer } from '../../3rdparty/sms-verification';
 import checkIfTxFailed from '../../util/check-if-tx-failed';
 import waitForConfirmations from '../../util/wait-for-block-confirmations';
 
@@ -87,7 +88,7 @@ export default class VerificationStore {
     this.account = account;
 
     this.step = LOADING;
-    Contracts.create(api).registry.getContract('smsVerification')
+    Contracts.create(api).registry.getContract('smsverification')
       .then((contract) => {
         this.contract = contract;
         this.load();