fix: reset password redesign bugs (#321)

src/_style.scss

@@ -20,7 +20,7 @@ $accent-a-light: #c9f2f5;
   min-width: 464px !important;
 }
 
-.register-button-width {
+.stateful-button-width {
   width: 12rem;
 }
 

src/forgot-password/messages.js

@@ -105,8 +105,8 @@ const messages = defineMessages({
   },
   'invalid.token.error.message': {
     id: 'invalid.token.error.message',
-    defaultMessage: 'This link has expired. Enter your email below to receive a new link.',
-    description: 'Alert message when reset password link has expired',
+    defaultMessage: 'This password reset link is invalid. It may have been used already. Enter your email below to receive a new link.',
+    description: 'Alert message when reset password link has expired or is invalid',
   },
   'token.validation.rate.limit.error.heading': {
     id: 'token.validation.rate.limit.error.heading',

src/forgot-password/tests/ForgotPasswordPage.test.jsx

@@ -1,16 +1,19 @@
 import React from 'react';
+
+import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
-import { mount } from 'enzyme';
 import configureStore from 'redux-mock-store';
+
+import * as analytics from '@edx/frontend-platform/analytics';
+import CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner';
 import { mergeConfig } from '@edx/frontend-platform';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
-import CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner';
-import * as analytics from '@edx/frontend-platform/analytics';
 
 import ForgotPasswordPage from '../ForgotPasswordPage';
 import { INTERNAL_SERVER_ERROR } from '../../data/constants';
+import { PASSWORD_RESET } from '../../reset-password/data/constants';
 
 jest.mock('@edx/frontend-platform/analytics');
 
@@ -20,7 +23,7 @@ const IntlForgotPasswordPage = injectIntl(ForgotPasswordPage);
 const mockStore = configureStore();
 const initialState = {
   forgotPassword: {
-    status: null,
+    status: '',
   },
 };
 
@@ -138,7 +141,7 @@ describe('ForgotPasswordPage', () => {
     expect(forgotPage.find(<CookiePolicyBanner />)).toBeTruthy();
   });
 
-  it('should display success message after email is sent', async () => {
+  it('should display success message after email is sent', () => {
     store = mockStore({
       ...initialState,
       forgotPassword: {
@@ -152,4 +155,19 @@ describe('ForgotPasswordPage', () => {
     const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
     expect(wrapper.find('.alert-success').text()).toEqual(successMessage);
   });
+
+  it('should display invalid password reset link error', () => {
+    store = mockStore({
+      ...initialState,
+      forgotPassword: {
+        status: PASSWORD_RESET.INVALID_TOKEN,
+      },
+    });
+    const successMessage = 'Invalid password reset link'
+                            + 'This password reset link is invalid. It may have been used already. '
+                            + 'Enter your email below to receive a new link.';
+
+    const wrapper = mount(reduxWrapper(<IntlForgotPasswordPage {...props} />));
+    expect(wrapper.find('.alert-danger').text()).toEqual(successMessage);
+  });
 });

src/login/tests/LoginPage.test.jsx

@@ -450,7 +450,7 @@ describe('LoginPage', () => {
       },
     });
 
-    renderer.create(reduxWrapper(<IntlLoginPage />));
+    renderer.create(reduxWrapper(<IntlLoginPage {...props} />));
     expect(document.cookie).toMatch(`${getConfig().USER_SURVEY_COOKIE_NAME}=login`);
   });
 

src/register/RegistrationPage.jsx

@@ -548,7 +548,7 @@ class RegistrationPage extends React.Component {
             <StatefulButton
               type="submit"
               variant="brand"
-              className="register-button-width mt-4 mb-4"
+              className="stateful-button-width mt-4 mb-4"
               state={submitState}
               labels={{
                 default: intl.formatMessage(messages['create.account.button']),

src/reset-password/ResetPasswordPage.jsx

@@ -157,9 +157,11 @@ const ResetPasswordPage = (props) => {
               <StatefulButton
                 type="submit"
                 variant="brand"
+                className="stateful-button-width"
                 state={props.status}
                 labels={{
                   default: intl.formatMessage(messages['reset.password']),
+                  pending: '',
                 }}
                 icons={{ pending: <FontAwesomeIcon icon={faSpinner} spin /> }}
                 onClick={e => handleSubmit(e)}

src/reset-password/tests/ResetPasswordPage.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
@@ -30,15 +31,6 @@ describe('ResetPasswordPage', () => {
     </IntlProvider>
   );
 
-  const submitForm = (password) => {
-    const resetPasswordPage = mount(reduxWrapper(<IntlResetPasswordPage {...props} />));
-    resetPasswordPage.find('input#newPassword').simulate('change', { target: { value: password, name: 'newPassword' } });
-    resetPasswordPage.find('input#confirmPassword').simulate('change', { target: { value: password, name: 'confirmPassword' } });
-    resetPasswordPage.find('button.btn-brand').simulate('click');
-
-    return resetPasswordPage;
-  };
-
   beforeEach(() => {
     store = mockStore();
     props = {
@@ -75,7 +67,13 @@ describe('ResetPasswordPage', () => {
     }));
 
     store.dispatch = jest.fn(store.dispatch);
-    const resetPasswordPage = submitForm(password);
+    const resetPasswordPage = mount(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    resetPasswordPage.find('input#newPassword').simulate('change', { target: { value: password, name: 'newPassword' } });
+    resetPasswordPage.find('input#confirmPassword').simulate('change', { target: { value: password, name: 'confirmPassword' } });
+
+    await act(async () => {
+      await resetPasswordPage.find('button.btn-brand').simulate('click');
+    });
 
     expect(store.dispatch).toHaveBeenCalledWith(resetPassword(
       { new_password1: password, new_password2: password }, props.token, {},