pass fields to query into GatherData

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

@@ -15,10 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.list li {
-  padding: .1em 0;
-}
-
 .spacing {
   margin-top: 1.5em;
 }

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

@@ -25,41 +25,31 @@ import { fromWei } from '~/api/util/wei';
 import { Form, Input } from '~/ui';
 import { nullableProptype } from '~/util/proptypes';
 
-import { termsOfService } from '../../../3rdparty/sms-verification';
+import * as sms from '../../../3rdparty/sms-verification';
+import * as email from '../../../3rdparty/email-verification';
 import styles from './gatherData.css';
 
 export default class GatherData extends Component {
   static propTypes = {
     fee: React.PropTypes.instanceOf(BigNumber),
-    isNumberValid: PropTypes.bool.isRequired,
+    method: PropTypes.string.isRequired,
+    fields: PropTypes.array.isRequired,
     isVerified: nullableProptype(PropTypes.bool.isRequired),
     hasRequested: nullableProptype(PropTypes.bool.isRequired),
-    setNumber: PropTypes.func.isRequired,
     setConsentGiven: PropTypes.func.isRequired
   }
 
   render () {
-    const { isNumberValid, isVerified } = this.props;
+    const { method, isVerified } = this.props;
+    const { howItWorks, termsOfService } = method === 'email' ? email : sms;
 
     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>
+        { howItWorks }
         { this.renderFee() }
         { this.renderCertified() }
         { this.renderRequested() }
-        <Input
-          label={ 'phone number in international format' }
-          hint={ 'the SMS will be sent to this number' }
-          error={ isNumberValid ? null : 'invalid number' }
-          disabled={ isVerified }
-          onChange={ this.numberOnChange }
-          onSubmit={ this.numberOnSubmit }
-        />
+        { this.renderFields() }
         <Checkbox
           className={ styles.spacing }
           label={ 'I agree to the terms and conditions below.' }
@@ -136,12 +126,28 @@ export default class GatherData extends Component {
     );
   }
 
-  numberOnSubmit = (value) => {
-    this.props.setNumber(value);
-  }
+  renderFields () {
+    const { isVerified, fields } = this.props;
 
-  numberOnChange = (_, value) => {
-    this.props.setNumber(value);
+    const rendered = fields.map((field) => {
+      const onChange = (_, v) => {
+        field.onChange(v);
+      };
+      const onSubmit = field.onChange;
+      return (
+        <Input
+          key={ field.key }
+          label={ field.label }
+          hint={ field.hint }
+          error={ field.error }
+          disabled={ isVerified }
+          onChange={ onChange }
+          onSubmit={ onSubmit }
+        />
+      );
+    });
+
+    return (<div>{rendered}</div>);
   }
 
   consentOnChange = (_, consentGiven) => {

js/src/modals/Verification/verification.js

@@ -46,7 +46,7 @@ import Done from './Done';
 @observer
 export default class Verification extends Component {
   static propTypes = {
-    store: nullableProptype(PropTypes.object).isRequired,
+    store: nullableProptype(PropTypes.object.isRequired),
     account: PropTypes.string.isRequired,
     onSelectMethod: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired
@@ -209,9 +209,9 @@ export default class Verification extends Component {
 
         return (
           <GatherData
-            fee={ fee } isNumberValid={ isNumberValid }
-            isVerified={ isVerified } hasRequested={ hasRequested }
-            setNumber={ setNumber } setConsentGiven={ setConsentGiven }
+            method={ method } fields={ fields }
+            fee={ fee } isVerified={ isVerified } hasRequested={ hasRequested }
+            setConsentGiven={ setConsentGiven }
           />
         );