verification: check if server is running (#4140)

* verification: check if server is running

See also ethcore/email-verification#67c6466 and ethcore/sms-verification#a585e42.

* verification: show in the UI if server is running

* verification: code style ✨, more i18n

* fix i18n key

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

@@ -16,6 +16,19 @@
 
 import { stringify } from 'querystring';
 
+export const isServerRunning = (isTestnet = false) => {
+  const port = isTestnet ? 28443 : 18443;
+  return fetch(`https://email-verification.parity.io:${port}/health`, {
+    mode: 'cors', cache: 'no-store'
+  })
+    .then((res) => {
+      return res.ok;
+    })
+    .catch(() => {
+      return false;
+    });
+};
+
 export const postToServer = (query, isTestnet = false) => {
   const port = isTestnet ? 28443 : 18443;
   query = stringify(query);

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

@@ -16,6 +16,19 @@
 
 import { stringify } from 'querystring';
 
+export const isServerRunning = (isTestnet = false) => {
+  const port = isTestnet ? 8443 : 443;
+  return fetch(`https://sms-verification.parity.io:${port}/health`, {
+    mode: 'cors', cache: 'no-store'
+  })
+    .then((res) => {
+      return res.ok;
+    })
+    .catch(() => {
+      return false;
+    });
+};
+
 export const postToServer = (query, isTestnet = false) => {
   const port = isTestnet ? 8443 : 443;
   query = stringify(query);

js/src/modals/Verification/GatherData/gatherData.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import BigNumber from 'bignumber.js';
 import { Checkbox } from 'material-ui';
 import InfoIcon from 'material-ui/svg-icons/action/info-outline';
@@ -33,10 +34,11 @@ import styles from './gatherData.css';
 export default class GatherData extends Component {
   static propTypes = {
     fee: React.PropTypes.instanceOf(BigNumber),
-    method: PropTypes.string.isRequired,
     fields: PropTypes.array.isRequired,
-    isVerified: nullableProptype(PropTypes.bool.isRequired),
     hasRequested: nullableProptype(PropTypes.bool.isRequired),
+    isServerRunning: nullableProptype(PropTypes.bool.isRequired),
+    isVerified: nullableProptype(PropTypes.bool.isRequired),
+    method: PropTypes.string.isRequired,
     setConsentGiven: PropTypes.func.isRequired
   }
 
@@ -48,13 +50,19 @@ export default class GatherData extends Component {
     return (
       <Form>
         { howItWorks }
+        { this.renderServerRunning() }
         { this.renderFee() }
         { this.renderCertified() }
         { this.renderRequested() }
         { this.renderFields() }
         <Checkbox
           className={ styles.spacing }
-          label={ 'I agree to the terms and conditions below.' }
+          label={
+            <FormattedMessage
+              id='ui.verification.gatherData.termsOfService'
+              defaultMessage='I agree to the terms and conditions below.'
+            />
+          }
           disabled={ isVerified }
           onCheck={ this.consentOnChange }
         />
@@ -63,6 +71,44 @@ export default class GatherData extends Component {
     );
   }
 
+  renderServerRunning () {
+    const { isServerRunning } = this.props;
+
+    if (isServerRunning) {
+      return (
+        <div className={ styles.container }>
+          <SuccessIcon />
+          <p className={ styles.message }>
+            <FormattedMessage
+              id='ui.verification.gatherData.isServerRunning.true'
+              defaultMessage='The verification server is running.'
+            />
+          </p>
+        </div>
+      );
+    } else if (isServerRunning === false) {
+      return (
+        <div className={ styles.container }>
+          <ErrorIcon />
+          <p className={ styles.message }>
+            <FormattedMessage
+              id='ui.verification.gatherData.isServerRunning.false'
+              defaultMessage='The verification server is not running.'
+            />
+          </p>
+        </div>
+      );
+    }
+    return (
+      <p className={ styles.message }>
+        <FormattedMessage
+          id='ui.verification.gatherData.isServerRunning.pending'
+          defaultMessage='Checking if the verification server is running…'
+        />
+      </p>
+    );
+  }
+
   renderFee () {
     const { fee } = this.props;
 
@@ -72,7 +118,15 @@ export default class GatherData extends Component {
     return (
       <div className={ styles.container }>
         <InfoIcon />
-        <p className={ styles.message }>The fee is { fromWei(fee).toFixed(3) } ETH.</p>
+        <p className={ styles.message }>
+          <FormattedMessage
+            id='ui.verification.gatherData.fee'
+            defaultMessage='The fee is {amount} ETH.'
+            values={ {
+              amount: fromWei(fee).toFixed(3)
+            } }
+          />
+        </p>
       </div>
     );
   }
@@ -84,19 +138,34 @@ export default class GatherData extends Component {
       return (
         <div className={ styles.container }>
           <ErrorIcon />
-          <p className={ styles.message }>Your account is already verified.</p>
+          <p className={ styles.message }>
+            <FormattedMessage
+              id='ui.verification.gatherData.isVerified.true'
+              defaultMessage='Your account is already verified.'
+            />
+          </p>
         </div>
       );
     } else if (isVerified === false) {
       return (
         <div className={ styles.container }>
           <SuccessIcon />
-          <p className={ styles.message }>Your account is not verified yet.</p>
+          <p className={ styles.message }>
+            <FormattedMessage
+              id='ui.verification.gatherData.isVerified.false'
+              defaultMessage='Your account is not verified yet.'
+            />
+          </p>
         </div>
       );
     }
     return (
-      <p className={ styles.message }>Checking if your account is verified…</p>
+      <p className={ styles.message }>
+        <FormattedMessage
+          id='ui.verification.gatherData.isVerified.pending'
+          defaultMessage='Checking if your account is verified…'
+        />
+      </p>
     );
   }
 
@@ -112,19 +181,34 @@ export default class GatherData extends Component {
       return (
         <div className={ styles.container }>
           <InfoIcon />
-          <p className={ styles.message }>You already requested verification.</p>
+          <p className={ styles.message }>
+            <FormattedMessage
+              id='ui.verification.gatherData.hasRequested.true'
+              defaultMessage='You already requested verification.'
+            />
+          </p>
         </div>
       );
     } else if (hasRequested === false) {
       return (
         <div className={ styles.container }>
           <SuccessIcon />
-          <p className={ styles.message }>You did not request verification yet.</p>
+          <p className={ styles.message }>
+            <FormattedMessage
+              id='ui.verification.gatherData.hasRequested.false'
+              defaultMessage='You did not request verification yet.'
+            />
+          </p>
         </div>
       );
     }
     return (
-      <p className={ styles.message }>Checking if you requested verification…</p>
+      <p className={ styles.message }>
+        <FormattedMessage
+          id='ui.verification.gatherData.hasRequested.pending'
+          defaultMessage='Checking if you requested verification…'
+        />
+      </p>
     );
   }
 

js/src/modals/Verification/email-store.js

@@ -21,7 +21,7 @@ import EmailVerificationABI from '~/contracts/abi/email-verification.json';
 import VerificationStore, {
   LOADING, QUERY_DATA, QUERY_CODE, POSTED_CONFIRMATION, DONE
 } from './store';
-import { postToServer } from '../../3rdparty/email-verification';
+import { isServerRunning, postToServer } from '../../3rdparty/email-verification';
 
 const EMAIL_VERIFICATION = 7; // id in the `BadgeReg.sol` contract
 
@@ -59,6 +59,10 @@ export default class EmailVerificationStore extends VerificationStore {
     super(api, EmailVerificationABI, EMAIL_VERIFICATION, account, isTestnet);
   }
 
+  isServerRunning = () => {
+    return isServerRunning(this.isTestnet);
+  }
+
   requestValues = () => [ sha3.text(this.email) ]
 
   @action setEmail = (email) => {

js/src/modals/Verification/sms-store.js

@@ -21,7 +21,7 @@ import SMSVerificationABI from '~/contracts/abi/sms-verification.json';
 import VerificationStore, {
   LOADING, QUERY_DATA, QUERY_CODE, POSTED_CONFIRMATION, DONE
 } from './store';
-import { postToServer } from '../../3rdparty/sms-verification';
+import { isServerRunning, postToServer } from '../../3rdparty/sms-verification';
 
 const SMS_VERIFICATION = 0; // id in the `BadgeReg.sol` contract
 
@@ -58,6 +58,10 @@ export default class SMSVerificationStore extends VerificationStore {
     super(api, SMSVerificationABI, SMS_VERIFICATION, account, isTestnet);
   }
 
+  isServerRunning = () => {
+    return isServerRunning(this.isTestnet);
+  }
+
   @action setNumber = (number) => {
     this.number = number;
   }

js/src/modals/Verification/store.js

@@ -40,6 +40,7 @@ export default class VerificationStore {
   @observable fee = null;
   @observable isVerified = null;
   @observable hasRequested = null;
+  @observable isServerRunning = null;
   @observable consentGiven = false;
   @observable requestTx = null;
   @observable code = '';
@@ -73,6 +74,14 @@ export default class VerificationStore {
     const { contract, account } = this;
     this.step = LOADING;
 
+    const isServerRunning = this.isServerRunning()
+      .then((isRunning) => {
+        this.isServerRunning = isRunning;
+      })
+      .catch((err) => {
+        this.error = 'Failed to check if server is running: ' + err.message;
+      });
+
     const fee = contract.instance.fee.call()
       .then((fee) => {
         this.fee = fee;
@@ -101,7 +110,7 @@ export default class VerificationStore {
       });
 
     Promise
-      .all([ fee, isVerified, hasRequested ])
+      .all([ isServerRunning, fee, isVerified, hasRequested ])
       .then(() => {
         this.step = QUERY_DATA;
       });

js/src/modals/Verification/verification.js

@@ -94,10 +94,10 @@ class Verification extends Component {
     return (
       <Modal
         actions={ this.renderDialogActions(phase, error, isStepValid) }
-        title='verify your account'
-        visible
         current={ phase }
         steps={ ['Method', 'Enter Data', 'Request', 'Enter Code', 'Confirm', 'Done!'] }
+        title='verify your account'
+        visible
         waiting={ error ? [] : [ 2, 4 ] }
       >
         { this.renderStep(phase, error) }
@@ -111,8 +111,9 @@ class Verification extends Component {
 
     const cancel = (
       <Button
-        key='cancel' label='Cancel'
         icon={ <CancelIcon /> }
+        key='cancel'
+        label='Cancel'
         onClick={ onClose }
       />
     );
@@ -125,9 +126,10 @@ class Verification extends Component {
         <div>
           { cancel }
           <Button
-            key='done' label='Done'
             disabled={ !isStepValid }
             icon={ <DoneIcon /> }
+            key='done'
+            label='Done'
             onClick={ onClose }
           />
         </div>
@@ -160,9 +162,15 @@ class Verification extends Component {
       <div>
         { cancel }
         <Button
-          key='next' label='Next'
           disabled={ !isStepValid }
-          icon={ <IdentityIcon address={ account } button /> }
+          icon={
+            <IdentityIcon
+              address={ account }
+              button
+            />
+          }
+          key='next'
+          label='Next'
           onClick={ action }
         />
       </div>
@@ -180,16 +188,16 @@ class Verification extends Component {
       const value = values.findIndex((v) => v.value === method);
       return (
         <RadioButtons
+          onChange={ this.selectMethod }
           value={ value < 0 ? 0 : value }
           values={ values }
-          onChange={ this.selectMethod }
         />
       );
     }
 
     const {
       step,
-      fee, isVerified, hasRequested,
+      isServerRunning, fee, isVerified, hasRequested,
       requestTx, isCodeValid, confirmationTx,
       setCode
     } = this.store;
@@ -223,15 +231,21 @@ class Verification extends Component {
 
         return (
           <GatherData
+            fee={ fee }
+            hasRequested={ hasRequested }
+            isServerRunning={ isServerRunning }
+            isVerified={ isVerified }
             method={ method } fields={ fields }
-            fee={ fee } isVerified={ isVerified } hasRequested={ hasRequested }
             setConsentGiven={ setConsentGiven }
           />
         );
 
       case 2:
         return (
-          <SendRequest step={ step } tx={ requestTx } />
+          <SendRequest
+            step={ step }
+            tx={ requestTx }
+          />
         );
 
       case 3:
@@ -245,16 +259,19 @@ class Verification extends Component {
         }
         return (
           <QueryCode
-            receiver={ receiver }
             hint={ hint }
             isCodeValid={ isCodeValid }
+            receiver={ receiver }
             setCode={ setCode }
           />
         );
 
       case 4:
         return (
-          <SendConfirmation step={ step } tx={ confirmationTx } />
+          <SendConfirmation
+            step={ step }
+            tx={ confirmationTx }
+          />
         );
 
       case 5: