diff --git a/js/src/modals/SMSVerification/QueryCode/index.js b/js/src/modals/SMSVerification/QueryCode/index.js
new file mode 100644
index 000000000..539c340f0
--- /dev/null
+++ b/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 .
+
+export default from './queryCode';
diff --git a/js/src/modals/SMSVerification/QueryCode/queryCode.js b/js/src/modals/SMSVerification/QueryCode/queryCode.js
new file mode 100644
index 000000000..b85c6f5e5
--- /dev/null
+++ b/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 .
+
+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 (
+
+ );
+ }
+
+ 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);
+ }
+}
diff --git a/js/src/modals/SMSVerification/SMSVerification.js b/js/src/modals/SMSVerification/SMSVerification.js
index 75df048a7..ec5dc7d61 100644
--- a/js/src/modals/SMSVerification/SMSVerification.js
+++ b/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() }
@@ -81,7 +82,7 @@ export default class SMSVerification extends Component {
/>
);
- if (step === 2) {
+ if (step === 3) {
return (
{ 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 (
+
+ );
+ }
}