sms verification modal

js/package.json

@@ -139,6 +139,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/index.js

@@ -23,6 +23,7 @@ import githubhint from './githubhint.json';
 import owned from './owned.json';
 import registry from './registry.json';
 import signaturereg from './signaturereg.json';
+import smsverification from './sms-verification.json';
 import tokenreg from './tokenreg.json';
 import wallet from './wallet.json';
 
@@ -36,6 +37,7 @@ export {
   owned,
   registry,
   signaturereg,
+  smsverification,
   tokenreg,
   wallet
 };

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/contracts/contracts.js

@@ -19,6 +19,7 @@ import Registry from './registry';
 import SignatureReg from './signaturereg';
 import TokenReg from './tokenreg';
 import GithubHint from './githubhint';
+import smsVerification from './sms-verification';
 
 let instance = null;
 
@@ -54,6 +55,10 @@ export default class Contracts {
     return this._githubhint;
   }
 
+  get smsVerification () {
+    return smsVerification;
+  }
+
   static create (api) {
     return new Contracts(api);
   }

js/src/contracts/sms-verification.js

@@ -0,0 +1,52 @@
+// 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 { stringify } from 'querystring';
+
+export const checkIfVerified = (contract, account) => {
+  return contract.instance.certified.call({}, [account]);
+};
+
+export const checkIfRequested = (contract, account) => {
+  return new Promise((resolve, reject) => {
+    contract.subscribe('Requested', {
+      fromBlock: 0, toBlock: 'pending'
+    }, (err, logs) => {
+      if (err) {
+        return reject(err);
+      }
+      const e = logs.find((l) => {
+        return l.type === 'mined' && l.params.who && l.params.who.value === account;
+      });
+      resolve(e ? e.transactionHash : false);
+    });
+  });
+};
+
+export const postToServer = (query) => {
+  query = stringify(query);
+  return fetch('https://sms-verification.parity.io/?' + query, {
+    method: 'POST', mode: 'cors', cache: 'no-store'
+  })
+  .then((res) => {
+    return res.json().then((data) => {
+      if (res.ok) {
+        return data.message;
+      }
+      throw new Error(data.message || 'unknown error');
+    });
+  });
+};

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

@@ -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/>.
+*/
+.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,49 @@
+/* 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;
+
+  ul {
+    padding-left: 1.5em;
+  }
+
+  li {
+    margin-top: .2em;
+    margin-bottom: .2em;
+  }
+}

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

@@ -0,0 +1,151 @@
+// 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 nullable from '../../../util/nullable-proptype';
+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';
+
+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>
+      );
+    } else 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';