query phone number & consent

js/package.json

@@ -132,6 +132,7 @@
     "mobx-react": "^3.5.8",
     "mobx-react-devtools": "^4.2.9",
     "moment": "^2.14.1",
+    "phoneformat.js": "^1.0.3",
     "qs": "^6.3.0",
     "react": "^15.2.1",
     "react-addons-css-transition-group": "^15.2.1",

js/src/modals/SMSVerification/SMSVerification.js

@@ -24,7 +24,7 @@ import { validateAddress, validateUint } from '../../util/validation';
 import ABI from '../../contracts/abi/sms-verification.json';
 const contract = '0x7B3F58965439b22ef1dA4BB78f16191d11ab80B0';
 
-// import DetailsStep from './DetailsStep';
+import SendRequest from './SendRequest';
 
 export default class SMSVerification extends Component {
   static contextTypes = {
@@ -40,6 +40,7 @@ export default class SMSVerification extends Component {
   state = {
     contract: null,
     step: 0,
+    stepIsValid: false,
     number: null,
     numberError: null
   }
@@ -70,7 +71,7 @@ export default class SMSVerification extends Component {
 
   renderDialogActions () {
     const { onClose, account } = this.props;
-    const { step } = this.state;
+    const { step, stepIsValid } = this.state;
 
     const cancel = (
       <Button
@@ -98,6 +99,7 @@ export default class SMSVerification extends Component {
         { cancel }
         <Button
           key='next' label='Next'
+          disabled={ !stepIsValid }
           icon={ <IdentityIcon address={ account } button /> }
           onClick={ this.next }
         />
@@ -114,15 +116,24 @@ export default class SMSVerification extends Component {
     }
   }
 
+  onDataIsValid = () => {
+    this.setState({ stepIsValid: true });
+  }
+
+  onDataIsInvalid = () => {
+    this.setState({ stepIsValid: false });
+  }
+
   next = () => {
-    this.setState({
-      step: this.state.step + 1
-    });
+    this.setState({ step: this.state.step + 1 });
   }
 
   renderFirstStep () {
     return (
-      <span>first step</span>
+      <SendRequest
+        onDataIsValid={ this.onDataIsValid }
+        onDataIsInvalid={ this.onDataIsInvalid }
+      />
     );
   }
 

js/src/modals/SMSVerification/SendRequest/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 './sendRequest';

js/src/modals/SMSVerification/SendRequest/sendRequest.css

@@ -0,0 +1,19 @@
+/* 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/>.
+*/
+.spacing {
+  margin-top: 1.5em;
+}

js/src/modals/SMSVerification/SendRequest/sendRequest.js

@@ -0,0 +1,82 @@
+// 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 { Checkbox } from 'material-ui';
+import phone from 'phoneformat.js';
+
+import { Form, Input } from '../../../ui';
+
+import styles from './SendRequest.css';
+
+export default class SendRequest extends Component {
+  static propTypes = {
+    onDataIsValid: PropTypes.func.isRequired,
+    onDataIsInvalid: PropTypes.func.isRequired
+  }
+
+  state = {
+    numberIsValid: null,
+    consentGiven: false
+  };
+
+  render () {
+    const { numberIsValid } = this.state;
+
+    return (
+      <Form>
+        <Input
+          label={ 'phone number' }
+          hint={ 'the sms will be sent to this number' }
+          error={ numberIsValid ? null : 'invalid number' }
+          onChange={ this.numberOnChange }
+          onSubmit={ this.numberOnSubmit }
+        />
+        <Checkbox
+          className={ styles.spacing }
+          label={ 'I agree that my number will be stored.' }
+          onCheck={ this.consentOnChange }
+        />
+      </Form>
+    );
+  }
+
+  numberOnSubmit = (value) => {
+    this.numberOnChange(null, value);
+  }
+
+  numberOnChange = (_, value) => {
+    this.setState({
+      numberIsValid: phone.isValidNumber(value)
+    }, this.onChange);
+  }
+
+  consentOnChange = (_, consentGiven) => {
+    this.setState({
+      consentGiven: !!consentGiven
+    }, this.onChange);
+  }
+
+  onChange = () => {
+    const { numberIsValid, consentGiven } = this.state;
+
+    if (numberIsValid && consentGiven) {
+      this.props.onDataIsValid();
+    } else {
+      this.props.onDataIsInvalid();
+    }
+  }
+}