Add error messages in phone verification modal

src/renderer/component/userFieldNew/index.js

@@ -1,12 +1,17 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { doUserEmailNew, doUserPhoneNew, doUserInviteNew } from 'redux/actions/user';
-import { selectEmailNewIsPending, selectEmailNewErrorMessage } from 'redux/selectors/user';
+import {
+  selectEmailNewIsPending,
+  selectEmailNewErrorMessage,
+  selectPhoneNewErrorMessage,
+} from 'redux/selectors/user';
 import UserFieldNew from './view';
 
 const select = state => ({
   isPending: selectEmailNewIsPending(state),
-  errorMessage: selectEmailNewErrorMessage(state),
+  emailErrorMessage: selectEmailNewErrorMessage(state),
+  phoneErrorMessage: selectPhoneNewErrorMessage(state),
 });
 
 const perform = dispatch => ({

src/renderer/component/userFieldNew/view.jsx

@@ -27,7 +27,7 @@ class UserFieldNew extends React.PureComponent {
   }
 
   render() {
-    const { cancelButton, errorMessage, isPending, fieldType } = this.props;
+    const { cancelButton, emailErrorMessage, phoneErrorMessage, isPending, fieldType } = this.props;
 
     return fieldType === 'phone' ? (
       <div>
@@ -43,7 +43,7 @@ class UserFieldNew extends React.PureComponent {
             placeholder="(555) 555-5555"
             name="phone"
             value={this.state.phone}
-            errorMessage={errorMessage}
+            errorMessage={phoneErrorMessage}
             onChange={event => {
               this.handleChanged(event, 'phone');
             }}
@@ -67,7 +67,7 @@ class UserFieldNew extends React.PureComponent {
             placeholder="youremail@example.org"
             name="email"
             value={this.state.email}
-            errorMessage={errorMessage}
+            errorMessage={emailErrorMessage}
             onChange={event => {
               this.handleChanged(event, 'email');
             }}

src/renderer/component/userFieldVerify/index.js

@@ -6,6 +6,7 @@ import {
   selectEmailToVerify,
   selectPhoneToVerify,
   selectEmailVerifyErrorMessage,
+  selectPhoneVerifyErrorMessage,
 } from 'redux/selectors/user';
 import UserFieldVerify from './view';
 
@@ -13,7 +14,8 @@ const select = state => ({
   isPending: selectEmailVerifyIsPending(state),
   email: selectEmailToVerify(state),
   phone: selectPhoneToVerify(state),
-  errorMessage: selectEmailVerifyErrorMessage(state),
+  emailErrorMessage: selectEmailVerifyErrorMessage(state),
+  phoneErrorMessage: selectPhoneVerifyErrorMessage(state),
 });
 
 const perform = dispatch => ({

src/renderer/component/userFieldVerify/view.jsx

@@ -33,7 +33,14 @@ class UserFieldVerify extends React.PureComponent {
   }
 
   render() {
-    const { cancelButton, errorMessage, email, isPending, phone } = this.props;
+    const {
+      cancelButton,
+      emailErrorMessage,
+      phoneErrorMessage,
+      email,
+      isPending,
+      phone,
+    } = this.props;
     return (
       <Form onSubmit={this.handleSubmit.bind(this)}>
         <p>Please enter the verification code sent to {phone || email}.</p>
@@ -45,7 +52,7 @@ class UserFieldVerify 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">

src/renderer/redux/actions/user.js

@@ -92,10 +92,10 @@ export function doUserPhoneNew(phone) {
       });
     };
 
-    const failure = error => {
+    const failure = () => {
       dispatch({
         type: ACTIONS.USER_PHONE_NEW_FAILURE,
-        data: { error },
+        data: { error: 'An error occurred while processing this phone number.' },
       });
     };
 

src/renderer/redux/selectors/user.js

@@ -48,6 +48,11 @@ export const selectEmailNewErrorMessage = createSelector(
   state => state.emailNewErrorMessage
 );
 
+export const selectPhoneNewErrorMessage = createSelector(
+  selectState,
+  state => state.phoneNewErrorMessage
+);
+
 export const selectEmailVerifyIsPending = createSelector(
   selectState,
   state => state.emailVerifyIsPending
@@ -58,6 +63,11 @@ export const selectEmailVerifyErrorMessage = createSelector(
   state => state.emailVerifyErrorMessage
 );
 
+export const selectPhoneVerifyErrorMessage = createSelector(
+  selectState,
+  state => state.phoneVerifyErrorMessage
+);
+
 export const selectIdentityVerifyIsPending = createSelector(
   selectState,
   state => state.identityVerifyIsPending