Phone verification

src/renderer/component/userFieldNew/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { doUserEmailNew, doUserPhoneNew, doUserInviteNew } from 'redux/actions/user';
+import {
+  selectEmailNewIsPending,
+  selectEmailNewErrorMessage,
+  selectPhoneNewErrorMessage,
+} from 'redux/selectors/user';
+import UserFieldNew from './view';
+
+const select = state => ({
+  isPending: selectEmailNewIsPending(state),
+  emailErrorMessage: selectEmailNewErrorMessage(state),
+  phoneErrorMessage: selectPhoneNewErrorMessage(state),
+});
+
+const perform = dispatch => ({
+  addUserEmail: email => dispatch(doUserEmailNew(email)),
+  addUserPhone: (phone, country_code) => dispatch(doUserPhoneNew(phone, country_code)),
+});
+
+export default connect(select, perform)(UserFieldNew);

src/renderer/component/userFieldNew/view.jsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Form, FormRow, Submit } from 'component/form.js';
+
+class UserFieldNew extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      phone: '',
+      email: '',
+      country_code: '+1',
+    };
+
+    this.formatPhone = this.formatPhone.bind(this);
+  }
+
+  formatPhone(value) {
+    const { country_code } = this.state;
+    value = value.replace(/\D/g, '');
+    if (country_code === '+1') {
+      if (!value) {
+        return '';
+      } else if (value.length < 4) {
+        return value;
+      } else if (value.length < 7) {
+        return `(${value.substring(0, 3)}) ${value.substring(3)}`;
+      }
+      const fullNumber = `(${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(
+        6
+      )}`;
+      return fullNumber.length <= 14 ? fullNumber : fullNumber.substring(0, 14);
+    }
+    return value;
+  }
+
+  formatCountryCode(value) {
+    if (value) {
+      return `+${value.replace(/\D/g, '')}`;
+    }
+    return '+1';
+  }
+
+  handleChanged(event, fieldType) {
+    const formatter = {
+      email: _ => _,
+      phone: this.formatPhone,
+      country_code: this.formatCountryCode,
+    };
+    this.setState({
+      [fieldType]: formatter[fieldType](event.target.value),
+    });
+  }
+
+  handleSubmit() {
+    const { email, phone, country_code } = this.state;
+    if (phone) {
+      this.props.addUserPhone(phone.replace(/\D/g, ''), country_code.replace(/\D/g, ''));
+    } else {
+      this.props.addUserEmail(email);
+    }
+  }
+
+  render() {
+    const { cancelButton, emailErrorMessage, phoneErrorMessage, isPending, fieldType } = this.props;
+
+    return fieldType === 'phone' ? (
+      <div>
+        <p>
+          {__(
+            'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
+          )}
+        </p>
+        <Form onSubmit={this.handleSubmit.bind(this)}>
+          <FormRow
+            type="text"
+            label="Country Code"
+            name="country_code"
+            value={this.state.country_code}
+            errorMessage={phoneErrorMessage}
+            onChange={event => {
+              this.handleChanged(event, 'country_code');
+            }}
+          />
+          <FormRow
+            type="text"
+            label="Phone"
+            placeholder={this.state.country_code === '+1' ? '(555) 555-5555' : '5555555555'}
+            name="phone"
+            value={this.state.phone}
+            errorMessage={phoneErrorMessage}
+            onChange={event => {
+              this.handleChanged(event, 'phone');
+            }}
+          />
+          <div className="form-row-submit">
+            <Submit label="Submit" disabled={isPending} />
+            {cancelButton}
+          </div>
+        </Form>
+      </div>
+    ) : (
+      <div>
+        <p>
+          {__("We'll let you know about LBRY updates, security issues, and great new content.")}
+        </p>
+        <p>{__("We'll never sell your email, and you can unsubscribe at any time.")}</p>
+        <Form onSubmit={this.handleSubmit.bind(this)}>
+          <FormRow
+            type="text"
+            label="Email"
+            placeholder="[email protected]"
+            name="email"
+            value={this.state.email}
+            errorMessage={emailErrorMessage}
+            onChange={event => {
+              this.handleChanged(event, 'email');
+            }}
+          />
+          <div className="form-row-submit">
+            <Submit label="Submit" disabled={isPending} />
+            {cancelButton}
+          </div>
+        </Form>
+      </div>
+    );
+  }
+}
+
+export default UserFieldNew;

src/renderer/component/userFieldVerify/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { doUserEmailVerify, doUserPhoneVerify, doUserEmailVerifyFailure } from 'redux/actions/user';
+import {
+  selectEmailVerifyIsPending,
+  selectEmailToVerify,
+  selectPhoneToVerify,
+  selectEmailVerifyErrorMessage,
+  selectPhoneVerifyErrorMessage,
+  selectUserCountryCode,
+} from 'redux/selectors/user';
+import UserFieldVerify from './view';
+
+const select = state => ({
+  isPending: selectEmailVerifyIsPending(state),
+  email: selectEmailToVerify(state),
+  phone: selectPhoneToVerify(state),
+  countryCode: selectUserCountryCode(state),
+  emailErrorMessage: selectEmailVerifyErrorMessage(state),
+  phoneErrorMessage: selectPhoneVerifyErrorMessage(state),
+});
+
+const perform = dispatch => ({
+  verifyUserEmail: (code, recaptcha) => dispatch(doUserEmailVerify(code, recaptcha)),
+  verifyUserPhone: code => dispatch(doUserPhoneVerify(code)),
+  verifyUserEmailFailure: error => dispatch(doUserEmailVerifyFailure(error)),
+});
+
+export default connect(select, perform)(UserFieldVerify);

src/renderer/component/userEmailVerify/view.jsx → src/renderer/component/userFieldVerify/view.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Link from 'component/link';
 import { Form, FormRow, Submit } from 'component/form.js';
 
-class UserEmailVerify extends React.PureComponent {
+class UserFieldVerify extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -19,19 +19,35 @@ class UserEmailVerify extends React.PureComponent {
 
   handleSubmit() {
     const { code } = this.state;
-    try {
-      const verification = JSON.parse(atob(code));
-      this.props.verifyUserEmail(verification.token, verification.recaptcha);
-    } catch (error) {
-      this.props.verifyUserEmailFailure('Invalid Verification Token');
+    const { fieldType } = this.props;
+    if (fieldType === 'phone') {
+      this.props.verifyUserPhone(code);
+    } else {
+      try {
+        const verification = JSON.parse(atob(code));
+        this.props.verifyUserEmail(verification.token, verification.recaptcha);
+      } catch (error) {
+        this.props.verifyUserEmailFailure('Invalid Verification Token');
+      }
     }
   }
 
   render() {
-    const { cancelButton, errorMessage, email, isPending } = this.props;
+    const {
+      cancelButton,
+      emailErrorMessage,
+      phoneErrorMessage,
+      email,
+      isPending,
+      phone,
+      countryCode,
+    } = this.props;
     return (
       <Form onSubmit={this.handleSubmit.bind(this)}>
-        <p>Please enter the verification code emailed to {email}.</p>
+        <p>
+          Please enter the verification code sent to {countryCode ? `+${countryCode}` : ''}
+          {phone || email}.
+        </p>
         <FormRow
           type="text"
           label={__('Verification Code')}
@@ -40,7 +56,7 @@ class UserEmailVerify extends React.PureComponent {
           onChange={event => {
             this.handleCodeChanged(event);
           }}
-          errorMessage={errorMessage}
+          errorMessage={emailErrorMessage || phoneErrorMessage}
         />
         {/* render help separately so it always shows */}
         <div className="form-field__helper">
@@ -59,4 +75,4 @@ class UserEmailVerify extends React.PureComponent {
   }
 }
 
-export default UserEmailVerify;
+export default UserFieldVerify;

src/renderer/component/userVerify/index.js

@@ -9,6 +9,9 @@ import {
   selectIdentityVerifyErrorMessage,
 } from 'redux/selectors/user';
 import UserVerify from './view';
+import { selectCurrentModal } from 'redux/selectors/app';
+import { doOpenModal } from 'redux/actions/app';
+import { PHONE_COLLECTION } from 'constants/modal_types';
 
 const select = (state, props) => {
   const selectReward = makeSelectRewardByType();
@@ -17,12 +20,14 @@ const select = (state, props) => {
     isPending: selectIdentityVerifyIsPending(state),
     errorMessage: selectIdentityVerifyErrorMessage(state),
     reward: selectReward(state, { reward_type: rewards.TYPE_NEW_USER }),
+    modal: selectCurrentModal(state),
   };
 };
 
 const perform = dispatch => ({
   navigate: uri => dispatch(doNavigate(uri)),
   verifyUserIdentity: token => dispatch(doUserIdentityVerify(token)),
+  verifyPhone: () => dispatch(doOpenModal(PHONE_COLLECTION)),
 });
 
 export default connect(select, perform)(UserVerify);