Merge pull request #226 from edx/waheed/PROD-1427-handle-403-password-reset-response

Handle 403 password reset response.

src/account-settings/data/reducers.js

@@ -196,6 +196,7 @@ const reducer = (state = defaultState, action) => {
 
     case RESET_PASSWORD.BEGIN:
     case RESET_PASSWORD.SUCCESS:
+    case RESET_PASSWORD.FORBIDDEN:
       return {
         ...state,
         resetPassword: resetPasswordReducer(state.resetPassword, action),

src/account-settings/data/utils/reduxUtils.js

@@ -27,6 +27,10 @@ export class AsyncActionType {
   get RESET() {
     return `${this.topic}__${this.name}__RESET`;
   }
+
+  get FORBIDDEN() {
+    return `${this.topic}__${this.name}__FORBIDDEN`;
+  }
 }
 
 /**

src/account-settings/data/utils/reduxUtils.test.js

@@ -12,6 +12,7 @@ describe('AsyncActionType', () => {
     expect(actionType.SUCCESS).toBe('HOUSE_CATS__START_THE_RACE__SUCCESS');
     expect(actionType.FAILURE).toBe('HOUSE_CATS__START_THE_RACE__FAILURE');
     expect(actionType.RESET).toBe('HOUSE_CATS__START_THE_RACE__RESET');
+    expect(actionType.FORBIDDEN).toBe('HOUSE_CATS__START_THE_RACE__FORBIDDEN');
   });
 });
 

src/account-settings/reset-password/RequestInProgressAlert.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+
+import Alert from '../Alert';
+
+const RequestInProgressAlert = (props) => {
+
+  return (
+    <Alert
+      className="alert-warning mt-n2"
+      icon={<FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />}
+    >
+      <FormattedMessage
+        id="account.settings.editable.field.password.reset.button.forbidden"
+        defaultMessage="Your previous request is in progress, please try again in few moments."
+        description="A message displayed when a previous password reset request is still in progress."
+      />
+    </Alert>
+  );
+};
+
+export default RequestInProgressAlert;

src/account-settings/reset-password/ResetPassword.jsx

@@ -7,6 +7,7 @@ import { StatefulButton } from '@edx/paragon';
 import { resetPassword } from './data/actions';
 import messages from './messages';
 import ConfirmationAlert from './ConfirmationAlert';
+import RequestInProgressAlert from './RequestInProgressAlert';
 
 const ResetPassword = (props) => {
   const { email, intl, status } = props;
@@ -43,6 +44,7 @@ const ResetPassword = (props) => {
         />
       </p>
       {status === 'complete' ? <ConfirmationAlert email={email} /> : null}
+      {status === 'forbidden' ? <RequestInProgressAlert /> : null}
     </div>
   );
 };

src/account-settings/reset-password/data/actions.js

@@ -18,3 +18,7 @@ export const resetPasswordSuccess = () => ({
 export const resetPasswordReset = () => ({
   type: RESET_PASSWORD.RESET,
 });
+
+export const resetPasswordForbidden = () => ({
+  type: RESET_PASSWORD.FORBIDDEN,
+});

src/account-settings/reset-password/data/reducers.js

@@ -17,6 +17,11 @@ const reducer = (state = defaultState, action = null) => {
           ...state,
           status: 'complete',
         };
+      case RESET_PASSWORD.FORBIDDEN:
+        return {
+          ...state,
+          status: 'forbidden',
+        };
 
       default:
     }

src/account-settings/reset-password/data/sagas.js

@@ -1,12 +1,20 @@
 import { put, call, takeEvery } from 'redux-saga/effects';
 
-import { resetPasswordBegin, resetPasswordSuccess, RESET_PASSWORD } from './actions';
+import { resetPasswordBegin, resetPasswordForbidden, resetPasswordSuccess, RESET_PASSWORD } from './actions';
 import { postResetPassword } from './service';
 
 function* handleResetPassword(action) {
   yield put(resetPasswordBegin());
-  const response = yield call(postResetPassword, action.payload.email);
-  yield put(resetPasswordSuccess(response));
+  try {
+    const response = yield call(postResetPassword, action.payload.email);
+    yield put(resetPasswordSuccess(response));
+  } catch (error) {
+    if (error.response && error.response.status === 403) {
+      yield put(resetPasswordForbidden(error));
+    } else {
+      throw error;
+    }
+  }
 }
 
 export default function* saga() {