Added reset button on phone verification

This commit is contained in:
Liam Cardenas 2018-01-22 15:26:34 -08:00
parent 23261d0759
commit ca9f67b240
5 changed files with 25 additions and 3 deletions

View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { doUserPhoneVerify } from 'redux/actions/user'; import { doUserPhoneVerify, doUserPhoneReset } from 'redux/actions/user';
import { import {
selectPhoneToVerify, selectPhoneToVerify,
selectPhoneVerifyErrorMessage, selectPhoneVerifyErrorMessage,
@ -15,6 +15,7 @@ const select = state => ({
}); });
const perform = dispatch => ({ const perform = dispatch => ({
resetPhone: () => dispatch(doUserPhoneReset()),
verifyUserPhone: code => dispatch(doUserPhoneVerify(code)), verifyUserPhone: code => dispatch(doUserPhoneVerify(code)),
}); });

View file

@ -22,13 +22,22 @@ class UserPhoneVerify extends React.PureComponent {
this.props.verifyUserPhone(code); this.props.verifyUserPhone(code);
} }
reset() {
const { resetPhone } = this.props;
resetPhone();
}
render() { render() {
const { cancelButton, phoneErrorMessage, phone, countryCode } = this.props; const { cancelButton, phoneErrorMessage, phone, countryCode } = this.props;
return ( return (
<Form onSubmit={this.handleSubmit.bind(this)}> <Form onSubmit={this.handleSubmit.bind(this)}>
<p> <p>
Please enter the verification code sent to {`+${countryCode}`} {__(
{phone}. `Please enter the verification code sent to +${countryCode}${
phone
}. Didn't receive it? `
)}
<Link onClick={this.reset.bind(this)} label="Go back." />
</p> </p>
<FormRow <FormRow
type="text" type="text"

View file

@ -108,6 +108,7 @@ export const USER_EMAIL_NEW_FAILURE = 'USER_EMAIL_NEW_FAILURE';
export const USER_EMAIL_VERIFY_STARTED = 'USER_EMAIL_VERIFY_STARTED'; export const USER_EMAIL_VERIFY_STARTED = 'USER_EMAIL_VERIFY_STARTED';
export const USER_EMAIL_VERIFY_SUCCESS = 'USER_EMAIL_VERIFY_SUCCESS'; export const USER_EMAIL_VERIFY_SUCCESS = 'USER_EMAIL_VERIFY_SUCCESS';
export const USER_EMAIL_VERIFY_FAILURE = 'USER_EMAIL_VERIFY_FAILURE'; export const USER_EMAIL_VERIFY_FAILURE = 'USER_EMAIL_VERIFY_FAILURE';
export const USER_PHONE_RESET = 'USER_PHONE_RESET';
export const USER_PHONE_NEW_STARTED = 'USER_PHONE_NEW_STARTED'; export const USER_PHONE_NEW_STARTED = 'USER_PHONE_NEW_STARTED';
export const USER_PHONE_NEW_SUCCESS = 'USER_PHONE_NEW_SUCCESS'; export const USER_PHONE_NEW_SUCCESS = 'USER_PHONE_NEW_SUCCESS';
export const USER_PHONE_NEW_FAILURE = 'USER_PHONE_NEW_FAILURE'; export const USER_PHONE_NEW_FAILURE = 'USER_PHONE_NEW_FAILURE';

View file

@ -82,6 +82,12 @@ export function doUserFetch() {
}; };
} }
export function doUserPhoneReset() {
return {
type: ACTIONS.USER_PHONE_RESET,
};
}
export function doUserPhoneNew(phone, country_code) { export function doUserPhoneNew(phone, country_code) {
return dispatch => { return dispatch => {
dispatch({ dispatch({

View file

@ -71,6 +71,11 @@ reducers[ACTIONS.USER_PHONE_NEW_SUCCESS] = (state, action) =>
phoneNewIsPending: false, phoneNewIsPending: false,
}); });
reducers[ACTIONS.USER_PHONE_RESET] = state =>
Object.assign({}, state, {
phoneToVerify: null,
});
reducers[ACTIONS.USER_PHONE_NEW_FAILURE] = (state, action) => reducers[ACTIONS.USER_PHONE_NEW_FAILURE] = (state, action) =>
Object.assign({}, state, { Object.assign({}, state, {
phoneNewIsPending: false, phoneNewIsPending: false,