verification: code style ✨, more i18n

openethereum · Jan 11, 2017 · 1c418dd · 1c418dd
1 parent d635ff6
commit 1c418dd
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 26 deletions.
diff --git a/js/src/modals/Verification/GatherData/gatherData.js b/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,11 +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,
+    hasRequested: nullableProptype(PropTypes.bool.isRequired),
     isServerRunning: nullableProptype(PropTypes.bool.isRequired),
     isVerified: nullableProptype(PropTypes.bool.isRequired),
-    hasRequested: nullableProptype(PropTypes.bool.isRequired),
+    method: PropTypes.string.isRequired,
     setConsentGiven: PropTypes.func.isRequired
   }
 
@@ -56,7 +57,12 @@ export default class GatherData extends Component {
         { 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 }
         />
@@ -72,19 +78,34 @@ export default class GatherData extends Component {
       return (
         <div className={ styles.container }>
           <SuccessIcon />
-          <p className={ styles.message }>The verification server is running.</p>
+          <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 }>The verification server is not running.</p>
+          <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 }>Checking if the verification server is running…</p>
+      <p className={ styles.message }>
+        <FormattedMessage
+          id='ui.verification.gatherData.isServerRunning.pending'
+          defaultMessage='Checking if the verification server is running…'
+        />
+      </p>
     );
   }
 
@@ -97,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>
     );
   }
@@ -109,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>
     );
   }
 
@@ -137,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.true'
+              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>
     );
   }
 

diff --git a/js/src/modals/Verification/verification.js b/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,9 +188,9 @@ 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 }
         />
       );
     }
@@ -223,18 +231,21 @@ class Verification extends Component {
 
         return (
           <GatherData
-            method={ method } fields={ fields }
-            isServerRunning={ isServerRunning }
             fee={ fee }
-            isVerified={ isVerified }
             hasRequested={ hasRequested }
+            isServerRunning={ isServerRunning }
+            isVerified={ isVerified }
+            method={ method } fields={ fields }
             setConsentGiven={ setConsentGiven }
           />
         );
 
       case 2:
         return (
-          <SendRequest step={ step } tx={ requestTx } />
+          <SendRequest
+            step={ step }
+            tx={ requestTx }
+          />
         );
 
       case 3:
@@ -248,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: