sms verification: query code

js/src/modals/SMSVerification/QueryCode/index.js

@@ -0,0 +1,17 @@
+// 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 './queryCode';

js/src/modals/SMSVerification/QueryCode/queryCode.js

@@ -0,0 +1,62 @@
+// 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 { Form, Input } from '../../../ui';
+
+// import styles from './gatherData.css';
+
+const isValidCode = /^[A-Z0-9_-]{7,14}$/i;
+
+export default class QueryCode extends Component {
+  static propTypes = {
+    data: PropTypes.object.isRequired,
+    onData: PropTypes.func.isRequired,
+    onDataIsValid: PropTypes.func.isRequired,
+    onDataIsInvalid: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { code } = this.props.data;
+
+    return (
+      <Form>
+        <Input
+          label={ 'verification code' }
+          hint={ 'Enter the code you received via SMS.' }
+          error={ isValidCode.test(code) ? null : 'invalid code' }
+          onChange={ this.onChange }
+          onSubmit={ this.onSubmit }
+        />
+      </Form>
+    );
+  }
+
+  onChange = (_, code) => {
+    code = code.trim();
+    this.props.onData({ code });
+
+    if (isValidCode.test(code)) {
+      this.props.onDataIsValid();
+    } else {
+      this.props.onDataIsInvalid();
+    }
+  }
+  onSubmit = (code) => {
+    this.onChange(null, code);
+  }
+}

js/src/modals/SMSVerification/SMSVerification.js

@@ -27,6 +27,7 @@ const contract = '0xcE381B876A85A72303f7cA7b3a012f58F4CEEEeB';
 import CheckIfCertified from './CheckIfCertified';
 import GatherData from './GatherData';
 import SendRequest from './SendRequest';
+import QueryCode from './QueryCode';
 
 export default class SMSVerification extends Component {
   static contextTypes = {
@@ -62,7 +63,7 @@ export default class SMSVerification extends Component {
         title='verify your account via SMS'
         visible scroll
         current={ step }
-        steps={ ['Preparations', 'Enter Data', 'Send Request'] }
+        steps={ ['Preparations', 'Enter Data', 'Send Request', 'Enter Code'] }
       >
         { this.renderStep() }
       </Modal>
@@ -81,7 +82,7 @@ export default class SMSVerification extends Component {
       />
     );
 
-    if (step === 2) {
+    if (step === 3) {
       return (
         <div>
           { cancel }
@@ -115,7 +116,9 @@ export default class SMSVerification extends Component {
     }
 
     const { step } = this.state;
-    if (step === 2) {
+    if (step === 3) {
+      return this.renderFourthStep();
+    } else if (step === 2) {
       return this.renderThirdStep();
     } else if (step === 1) {
       return this.renderSecondStep();
@@ -179,4 +182,17 @@ export default class SMSVerification extends Component {
       />
     );
   }
+
+  renderFourthStep () {
+    const { data } = this.state;
+
+    return (
+      <QueryCode
+        data={ data }
+        onData={ this.onData }
+        onDataIsValid={ this.onDataIsValid }
+        onDataIsInvalid={ this.onDataIsInvalid }
+      />
+    );
+  }
 }