Add error messages in phone verification modal

This commit is contained in:
Liam Cardenas 2018-01-15 06:30:10 -08:00
parent 247859a1dd
commit fa7d265cc0
6 changed files with 34 additions and 10 deletions

View file

@ -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 => ({

View file

@ -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');
}}

View file

@ -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 => ({

View file

@ -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">

View file

@ -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.' },
});
};

View file

@ -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