sms verification modal

js/package.json

@@ -138,6 +138,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-ace": "^4.0.0",

js/src/contracts/abi/sms-verification.json

@@ -0,0 +1 @@
+[{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setOwner","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_who","type":"address"}],"name":"certify","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"request","outputs":[],"payable":true,"type":"function"},{"constant":false,"inputs":[{"name":"_who","type":"address"},{"name":"_puzzle","type":"bytes32"}],"name":"puzzle","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"},{"name":"_field","type":"string"}],"name":"getAddress","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"uint256"}],"name":"setFee","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_who","type":"address"}],"name":"revoke","outputs":[],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_code","type":"bytes32"}],"name":"confirm","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":false,"inputs":[],"name":"drain","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"delegate","outputs":[{"name":"","type":"address"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"},{"name":"_field","type":"string"}],"name":"getUint","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":false,"inputs":[{"name":"_new","type":"address"}],"name":"setDelegate","outputs":[],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"}],"name":"certified","outputs":[{"name":"","type":"bool"}],"payable":false,"type":"function"},{"constant":true,"inputs":[],"name":"fee","outputs":[{"name":"","type":"uint256"}],"payable":false,"type":"function"},{"constant":true,"inputs":[{"name":"_who","type":"address"},{"name":"_field","type":"string"}],"name":"get","outputs":[{"name":"","type":"bytes32"}],"payable":false,"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"}],"name":"Requested","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"},{"indexed":false,"name":"puzzle","type":"bytes32"}],"name":"Puzzled","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"}],"name":"Confirmed","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"who","type":"address"}],"name":"Revoked","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"old","type":"address"},{"indexed":true,"name":"current","type":"address"}],"name":"NewOwner","type":"event"}]

js/src/modals/SMSVerification/Done/done.css

@@ -0,0 +1,30 @@
+/* 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;
+}
+
+.container {
+  margin-top: .5em;
+  display: flex;
+  align-items: center;
+}
+.message {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: .5em;
+}

js/src/modals/SMSVerification/Done/done.js

@@ -0,0 +1,31 @@
+// 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 } from 'react';
+import SuccessIcon from 'material-ui/svg-icons/navigation/check';
+
+import styles from './done.css';
+
+export default class Done extends Component {
+  render () {
+    return (
+      <div className={ styles.container }>
+        <SuccessIcon />
+        <p className={ styles.message }>Congratulations, your account is verified!</p>
+      </div>
+    );
+  }
+}

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

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

@@ -0,0 +1,47 @@
+/* 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/>.
+*/
+
+.list li {
+  padding: .1em 0;
+}
+
+.spacing {
+  margin-top: 1.5em;
+}
+
+.container {
+  margin-top: .5em;
+  display: flex;
+  align-items: center;
+}
+.message {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: .5em;
+}
+
+.terms {
+  line-height: 1.3;
+  opacity: .7;
+}
+.terms ul {
+  padding-left: 1.5em;
+}
+.terms li {
+  margin-top: .2em;
+  margin-bottom: .2em;
+}

js/src/modals/SMSVerification/GatherData/gatherData.js

@@ -0,0 +1,149 @@
+// 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 BigNumber from 'bignumber.js';
+import { Checkbox } from 'material-ui';
+import InfoIcon from 'material-ui/svg-icons/action/info-outline';
+import SuccessIcon from 'material-ui/svg-icons/navigation/check';
+import ErrorIcon from 'material-ui/svg-icons/navigation/close';
+
+import { fromWei } from '../../../api/util/wei';
+import { Form, Input } from '../../../ui';
+
+import terms from '../terms-of-service';
+import styles from './gatherData.css';
+
+const nullable = (type) => PropTypes.oneOfType([ PropTypes.oneOf([ null ]), type ]);
+
+export default class GatherData extends Component {
+  static propTypes = {
+    fee: React.PropTypes.instanceOf(BigNumber),
+    isNumberValid: PropTypes.bool.isRequired,
+    isVerified: nullable(PropTypes.bool.isRequired),
+    hasRequested: nullable(PropTypes.bool.isRequired),
+    setNumber: PropTypes.func.isRequired,
+    setConsentGiven: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { isNumberValid, isVerified } = this.props;
+
+    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>
+        { this.renderFee() }
+        { this.renderCertified() }
+        { this.renderRequested() }
+        <Input
+          label={ 'phone number' }
+          hint={ 'the SMS will be sent to this number' }
+          error={ isNumberValid ? null : 'invalid number' }
+          disabled={ isVerified }
+          onChange={ this.numberOnChange }
+          onSubmit={ this.numberOnSubmit }
+        />
+        <Checkbox
+          className={ styles.spacing }
+          label={ 'I agree to the terms and conditions below.' }
+          disabled={ isVerified }
+          onCheck={ this.consentOnChange }
+        />
+        <div className={ styles.terms }>{ terms }</div>
+      </Form>
+    );
+  }
+
+  renderFee () {
+    const { fee } = this.props;
+
+    if (!fee) {
+      return (<p>Fetching the fee…</p>);
+    }
+    return (
+      <div className={ styles.container }>
+        <InfoIcon />
+        <p className={ styles.message }>The fee is { fromWei(fee).toFixed(3) } ETH.</p>
+      </div>
+    );
+  }
+
+  renderCertified () {
+    const { isVerified } = this.props;
+
+    if (isVerified) {
+      return (
+        <div className={ styles.container }>
+          <ErrorIcon />
+          <p className={ styles.message }>Your account is already verified.</p>
+        </div>
+      );
+    }
+    if (isVerified === false) {
+      return (
+        <div className={ styles.container }>
+          <SuccessIcon />
+          <p className={ styles.message }>Your account is not verified yet.</p>
+        </div>
+      );
+    }
+    return (<p className={ styles.message }>Checking if your account is verified…</p>);
+  }
+
+  renderRequested () {
+    const { isVerified, hasRequested } = this.props;
+
+    // If the account is verified, don't show that it has requested verification.
+    if (isVerified) {
+      return null;
+    }
+
+    if (hasRequested) {
+      return (
+        <div className={ styles.container }>
+          <InfoIcon />
+          <p className={ styles.message }>You already requested verification.</p>
+        </div>
+      );
+    }
+    if (hasRequested === false) {
+      return (
+        <div className={ styles.container }>
+          <SuccessIcon />
+          <p className={ styles.message }>You did not request verification yet.</p>
+        </div>
+      );
+    }
+    return (<p className={ styles.message }>Checking if you requested verification…</p>);
+  }
+
+  numberOnSubmit = (value) => {
+    this.props.setNumber(value);
+  }
+
+  numberOnChange = (_, value) => {
+    this.props.setNumber(value);
+  }
+
+  consentOnChange = (_, consentGiven) => {
+    this.props.setConsentGiven(consentGiven);
+  }
+}

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

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,51 @@
+// 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';
+
+export default class QueryCode extends Component {
+  static propTypes = {
+    number: PropTypes.string.isRequired,
+    isCodeValid: PropTypes.bool.isRequired,
+    setCode: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { number, isCodeValid } = this.props;
+
+    return (
+      <Form>
+        <p>The verification code has been sent to { number }.</p>
+        <Input
+          label={ 'verification code' }
+          hint={ 'Enter the code you received via SMS.' }
+          error={ isCodeValid ? null : 'invalid code' }
+          onChange={ this.onChange }
+          onSubmit={ this.onSubmit }
+        />
+      </Form>
+    );
+  }
+
+  onChange = (_, code) => {
+    this.props.setCode(code.trim());
+  }
+  onSubmit = (code) => {
+    this.props.setCode(code.trim());
+  }
+}