fix lag on password reset form

This commit is contained in:
Cassie Tarakajian 2016-10-19 11:34:08 -04:00
parent 8b35951ba4
commit 4ff6ac1021
3 changed files with 11 additions and 7 deletions

View File

@ -13,7 +13,7 @@ function ResetPasswordForm(props) {
{...email} {...email}
/> />
</p> </p>
<input type="submit" disabled={submitting || invalid || pristine} value="Send password reset email" aria-label="Send email to reset password" /> <input type="submit" disabled={submitting || invalid || pristine || props.user.resetPasswordInitiate} value="Send password reset email" aria-label="Send email to reset password" />
</form> </form>
); );
} }
@ -26,7 +26,10 @@ ResetPasswordForm.propTypes = {
initiateResetPassword: PropTypes.func.isRequired, initiateResetPassword: PropTypes.func.isRequired,
submitting: PropTypes.bool, submitting: PropTypes.bool,
invalid: PropTypes.bool, invalid: PropTypes.bool,
pristine: PropTypes.bool pristine: PropTypes.bool,
user: PropTypes.shape({
resetPasswordInitiate: PropTypes.bool
})
}; };
export default ResetPasswordForm; export default ResetPasswordForm;

View File

@ -107,11 +107,12 @@ export function logoutUser() {
export function initiateResetPassword(formValues) { export function initiateResetPassword(formValues) {
return (dispatch) => { return (dispatch) => {
dispatch({
type: ActionTypes.RESET_PASSWORD_INITIATE
});
axios.post(`${ROOT_URL}/reset-password`, formValues, { withCredentials: true }) axios.post(`${ROOT_URL}/reset-password`, formValues, { withCredentials: true })
.then(() => { .then(() => {
dispatch({ // do nothing
type: ActionTypes.RESET_PASSWORD_INITIATE
});
}) })
.catch(response => dispatch({ .catch(response => dispatch({
type: ActionTypes.ERROR, type: ActionTypes.ERROR,

View File

@ -59,12 +59,12 @@
border: 1px solid getThemifyVariable('button-border-color'); border: 1px solid getThemifyVariable('button-border-color');
border-radius: 2px; border-radius: 2px;
padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem; padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
&:hover { &:enabled:hover {
border-color: getThemifyVariable('button-background-hover-color'); border-color: getThemifyVariable('button-background-hover-color');
background-color: getThemifyVariable('button-background-hover-color'); background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color'); color: getThemifyVariable('button-hover-color');
} }
&:active { &:enabled:active {
border-color: getThemifyVariable('button-background-active-color'); border-color: getThemifyVariable('button-background-active-color');
background-color: getThemifyVariable('button-background-active-color'); background-color: getThemifyVariable('button-background-active-color');
color: getThemifyVariable('button-active-color'); color: getThemifyVariable('button-active-color');