Add error messages in phone verification modal
This commit is contained in:
parent
247859a1dd
commit
fa7d265cc0
6 changed files with 34 additions and 10 deletions
|
@ -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 => ({
|
||||
|
|
|
@ -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');
|
||||
}}
|
||||
|
|
|
@ -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 => ({
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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.' },
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue