Split userField... into userEmail... and userPhone...

src/renderer/component/userEmailNew/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { doUserEmailNew, doUserInviteNew } from 'redux/actions/user';
+import { selectEmailNewIsPending, selectEmailNewErrorMessage } from 'redux/selectors/user';
+import UserEmailNew from './view';
+
+const select = state => ({
+  isPending: selectEmailNewIsPending(state),
+  errorMessage: selectEmailNewErrorMessage(state),
+});
+
+const perform = dispatch => ({
+  addUserEmail: email => dispatch(doUserEmailNew(email)),
+});
+
+export default connect(select, perform)(UserEmailNew);

src/renderer/component/userEmailNew/view.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Form, FormRow, Submit } from 'component/form.js';
+
+class UserEmailNew extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      email: '',
+    };
+  }
+
+  handleEmailChanged(event) {
+    this.setState({
+      email: event.target.value,
+    });
+  }
+
+  handleSubmit() {
+    const { email } = this.state;
+    this.props.addUserEmail(email);
+  }
+
+  render() {
+    const { cancelButton, errorMessage, isPending } = this.props;
+
+    return (
+      <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="youremail@example.org"
+            name="email"
+            value={this.state.email}
+            errorMessage={errorMessage}
+            onChange={event => {
+              this.handleEmailChanged(event);
+            }}
+          />
+          <div className="form-row-submit">
+            <Submit label="Submit" disabled={isPending} />
+            {cancelButton}
+          </div>
+        </Form>
+      </div>
+    );
+  }
+}
+
+export default UserEmailNew;

src/renderer/component/userEmailVerify/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { doUserEmailVerify, doUserEmailVerifyFailure } from 'redux/actions/user';
+import {
+  selectEmailVerifyIsPending,
+  selectEmailToVerify,
+  selectEmailVerifyErrorMessage,
+} from 'redux/selectors/user';
+import UserEmailVerify from './view';
+
+const select = state => ({
+  isPending: selectEmailVerifyIsPending(state),
+  email: selectEmailToVerify(state),
+  errorMessage: selectEmailVerifyErrorMessage(state),
+});
+
+const perform = dispatch => ({
+  verifyUserEmail: (code, recaptcha) => dispatch(doUserEmailVerify(code, recaptcha)),
+  verifyUserEmailFailure: error => dispatch(doUserEmailVerifyFailure(error)),
+});
+
+export default connect(select, perform)(UserEmailVerify);

src/renderer/component/userEmailVerify/view.jsx

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

src/renderer/component/userFieldNew/index.js

@@ -1,22 +0,0 @@
-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/userFieldVerify/index.js

@@ -1,29 +0,0 @@
-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/userPhoneNew/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { doUserPhoneNew } from 'redux/actions/user';
+import { selectPhoneNewErrorMessage } from 'redux/selectors/user';
+import UserPhoneNew from './view';
+
+const select = state => ({
+  phoneErrorMessage: selectPhoneNewErrorMessage(state),
+});
+
+const perform = dispatch => ({
+  addUserPhone: (phone, country_code) => dispatch(doUserPhoneNew(phone, country_code)),
+});
+
+export default connect(select, perform)(UserPhoneNew);

src/renderer/component/userPhoneNew/view.jsx

@@ -18,13 +18,12 @@ const countryCodes = require('country-data')
     return 0;
   });
 
-class UserFieldNew extends React.PureComponent {
+class UserPhoneNew extends React.PureComponent {
   constructor(props) {
     super(props);
 
     this.state = {
       phone: '',
-      email: '',
       country_code: '+1',
     };
 
@@ -50,21 +49,9 @@ class UserFieldNew extends React.PureComponent {
     return value;
   }
 
-  formatCountryCode(value) {
+  handleChanged(event) {
-    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),
+      phone: this.formatPhone(event.target.value),
     });
   }
 
@@ -73,18 +60,14 @@ class UserFieldNew extends React.PureComponent {
   }
 
   handleSubmit() {
-    const { email, phone, country_code } = this.state;
+    const { phone, country_code } = this.state;
-    if (phone) {
+    this.props.addUserPhone(phone.replace(/\D/g, ''), country_code.substring(1));
-      this.props.addUserPhone(phone.replace(/\D/g, ''), country_code.substring(1));
-    } else {
-      this.props.addUserEmail(email);
-    }
   }
 
   render() {
-    const { cancelButton, emailErrorMessage, phoneErrorMessage, isPending, fieldType } = this.props;
+    const { cancelButton, phoneErrorMessage, isPending } = this.props;
 
-    return fieldType === 'phone' ? (
+    return (
       <div>
         <p>
           {__(
@@ -107,7 +90,7 @@ class UserFieldNew extends React.PureComponent {
               value={this.state.phone}
               errorMessage={phoneErrorMessage}
               onChange={event => {
-                this.handleChanged(event, 'phone');
+                this.handleChanged(event);
               }}
             />
           </div>
@@ -117,32 +100,8 @@ class UserFieldNew extends React.PureComponent {
           </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="youremail@example.org"
-            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;
+export default UserPhoneNew;

src/renderer/component/userPhoneVerify/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { doUserPhoneVerify } from 'redux/actions/user';
+import {
+  selectPhoneToVerify,
+  selectPhoneVerifyErrorMessage,
+  selectUserCountryCode,
+} from 'redux/selectors/user';
+import UserPhoneVerify from './view';
+
+const select = state => ({
+  phone: selectPhoneToVerify(state),
+  countryCode: selectUserCountryCode(state),
+  phoneErrorMessage: selectPhoneVerifyErrorMessage(state),
+});
+
+const perform = dispatch => ({
+  verifyUserPhone: code => dispatch(doUserPhoneVerify(code)),
+});
+
+export default connect(select, perform)(UserPhoneVerify);

src/renderer/component/userPhoneVerify/view.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import Link from 'component/link';
+import { Form, FormRow, Submit } from 'component/form.js';
+
+class UserPhoneVerify extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      code: '',
+    };
+  }
+
+  handleCodeChanged(event) {
+    this.setState({
+      code: String(event.target.value).trim(),
+    });
+  }
+
+  handleSubmit() {
+    const { code } = this.state;
+    this.props.verifyUserPhone(code);
+  }
+
+  render() {
+    const { cancelButton, phoneErrorMessage, phone, countryCode } = this.props;
+    return (
+      <Form onSubmit={this.handleSubmit.bind(this)}>
+        <p>
+          Please enter the verification code sent to {`+${countryCode}`}
+          {phone}.
+        </p>
+        <FormRow
+          type="text"
+          label={__('Verification Code')}
+          name="code"
+          value={this.state.code}
+          onChange={event => {
+            this.handleCodeChanged(event);
+          }}
+          errorMessage={phoneErrorMessage}
+        />
+        {/* render help separately so it always shows */}
+        <div className="form-field__helper">
+          <p>
+            {__('Email')} <Link href="mailto:help@lbry.io" label="help@lbry.io" /> or join our{' '}
+            <Link href="https://chat.lbry.io" label="chat" />{' '}
+            {__('if you encounter any trouble with your code.')}
+          </p>
+        </div>
+        <div className="form-row-submit">
+          <Submit label={__('Verify')} />
+          {cancelButton}
+        </div>
+      </Form>
+    );
+  }
+}
+
+export default UserPhoneVerify;

src/renderer/modal/modalPhoneCollection/view.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Link from 'component/link/index';
-import UserFieldNew from 'component/userFieldNew';
+import UserPhoneNew from 'component/userPhoneNew';
-import UserFieldVerify from 'component/userFieldVerify';
+import UserPhoneVerify from 'component/userPhoneVerify';
 
 class ModalPhoneCollection extends React.PureComponent {
   renderInner() {
@@ -11,9 +11,9 @@ class ModalPhoneCollection extends React.PureComponent {
     const cancelButton = <Link button="text" onClick={closeModal} label={__('Not Now')} />;
 
     if (!user.phone_number && !phone) {
-      return <UserFieldNew cancelButton={cancelButton} fieldType="phone" />;
+      return <UserPhoneNew cancelButton={cancelButton} />;
     } else if (!user.phone_number) {
-      return <UserFieldVerify cancelButton={cancelButton} fieldType="phone" />;
+      return <UserPhoneVerify cancelButton={cancelButton} />;
     }
     closeModal();
   }

src/renderer/page/auth/view.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { BusyMessage } from 'component/common';
 import Link from 'component/link';
-import UserFieldNew from 'component/userFieldNew';
+import UserEmailNew from 'component/userEmailNew';
-import UserFieldVerify from 'component/userFieldVerify';
+import UserEmailVerify from 'component/userEmailVerify';
 import UserVerify from 'component/userVerify';
 
 export class AuthPage extends React.PureComponent {
@@ -45,9 +45,9 @@ export class AuthPage extends React.PureComponent {
     if (isPending) {
       return [<BusyMessage message={__('Authenticating')} />, true];
     } else if (user && !user.has_verified_email && !email) {
-      return [<UserFieldNew />, true];
+      return [<UserEmailNew />, true];
     } else if (user && !user.has_verified_email) {
-      return [<UserFieldVerify />, true];
+      return [<UserEmailVerify />, true];
     } else if (user && !user.is_identity_verified) {
       return [<UserVerify />, false];
     }