@openedx/frontend-app-authn 1.0.0-alpha.0

package/src/reset-password/ResetPasswordPage.jsx

@@ -0,0 +1,224 @@
+import { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+
+import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import {
+  Form,
+  Icon,
+  Spinner,
+  StatefulButton,
+  Tab,
+  Tabs,
+} from '@openedx/paragon';
+import { ChevronLeft } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import BaseContainer from '../base-container';
+import { PasswordField } from '../common-components';
+import {
+  LETTER_REGEX, LOGIN_PAGE, NUMBER_REGEX, RESET_PAGE,
+} from '../data/constants';
+import { getAllPossibleQueryParams, updatePathWithQueryParams, windowScrollTo } from '../data/utils';
+import { resetPassword, validateToken } from './data/actions';
+import {
+  FORM_SUBMISSION_ERROR, PASSWORD_RESET_ERROR, PASSWORD_VALIDATION_ERROR, TOKEN_STATE,
+} from './data/constants';
+import { resetPasswordResultSelector } from './data/selectors';
+import { validatePassword } from './data/service';
+import messages from './messages';
+import ResetPasswordFailure from './ResetPasswordFailure';
+
+const ResetPasswordPage = (props) => {
+  const { formatMessage } = useIntl();
+  const newPasswordError = formatMessage(messages['password.validation.message']);
+
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [formErrors, setFormErrors] = useState({});
+  const [errorCode, setErrorCode] = useState(null);
+  const { token } = useParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (props.status === PASSWORD_RESET_ERROR) {
+      navigate(updatePathWithQueryParams(RESET_PAGE));
+    }
+    if (props.status === 'success') {
+      navigate(updatePathWithQueryParams(LOGIN_PAGE));
+    }
+    if (props.status !== TOKEN_STATE.PENDING) {
+      setErrorCode(props.status);
+    }
+    if (props.status === PASSWORD_VALIDATION_ERROR) {
+      setFormErrors({ newPassword: newPasswordError });
+    }
+  }, [props.status]);
+
+  const validatePasswordFromBackend = async (password) => {
+    let errorMessage = '';
+    try {
+      const payload = {
+        reset_password_page: true,
+        password,
+      };
+      errorMessage = await validatePassword(payload);
+    } catch (err) {
+      errorMessage = '';
+    }
+    setFormErrors({ ...formErrors, newPassword: errorMessage });
+  };
+
+  const validateInput = (name, value) => {
+    switch (name) {
+      case 'newPassword':
+        if (!value || !LETTER_REGEX.test(value) || !NUMBER_REGEX.test(value) || value.length < 8) {
+          formErrors.newPassword = formatMessage(messages['password.validation.message']);
+        } else {
+          validatePasswordFromBackend(value);
+        }
+        break;
+      case 'confirmPassword':
+        if (!value) {
+          formErrors.confirmPassword = formatMessage(messages['confirm.your.password']);
+        } else if (value !== newPassword) {
+          formErrors.confirmPassword = formatMessage(messages['passwords.do.not.match']);
+        } else {
+          formErrors.confirmPassword = '';
+        }
+        break;
+      default:
+        break;
+    }
+    setFormErrors({ ...formErrors });
+    return !Object.values(formErrors).some(x => (x !== ''));
+  };
+
+  const handleOnBlur = (event) => {
+    const { name, value } = event.target;
+    validateInput(name, value);
+  };
+
+  const handleConfirmPasswordChange = (e) => {
+    const { value } = e.target;
+
+    setConfirmPassword(value);
+    validateInput('confirmPassword', value);
+  };
+
+  const handleOnFocus = (e) => {
+    setFormErrors({ ...formErrors, [e.target.name]: '' });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const isPasswordValid = validateInput('newPassword', newPassword);
+    const isPasswordConfirmed = validateInput('confirmPassword', confirmPassword);
+
+    if (isPasswordValid && isPasswordConfirmed) {
+      const formPayload = {
+        new_password1: newPassword,
+        new_password2: confirmPassword,
+      };
+      const params = getAllPossibleQueryParams();
+      props.resetPassword(formPayload, props.token, params);
+    } else {
+      setErrorCode(FORM_SUBMISSION_ERROR);
+      windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
+    }
+  };
+
+  const tabTitle = (
+    <div className="d-inline-flex flex-wrap align-items-center">
+      <Icon src={ChevronLeft} />
+      <span className="ml-2">{formatMessage(messages['sign.in'])}</span>
+    </div>
+  );
+
+  if (props.status === TOKEN_STATE.PENDING && token) {
+    props.validateToken(token);
+    return (
+      <Spinner animation="border" variant="primary" className="spinner--position-centered" />
+    );
+  } else {
+    return (
+      <BaseContainer>
+        <div>
+          <Helmet>
+            <title>
+              {formatMessage(messages['reset.password.page.title'], { siteName: getSiteConfig().siteName })}
+            </title>
+          </Helmet>
+          <Tabs activeKey="" id="controlled-tab" onSelect={(key) => navigate(updatePathWithQueryParams(key))}>
+            <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
+          </Tabs>
+          <div id="main-content" className="main-content">
+            <div className="mw-xs">
+              <ResetPasswordFailure errorCode={errorCode} errorMsg={props.errorMsg} />
+              <h4>{formatMessage(messages['reset.password'])}</h4>
+              <p className="mb-4">{formatMessage(messages['reset.password.page.instructions'])}</p>
+              <Form id="set-reset-password-form" name="set-reset-password-form">
+                <PasswordField
+                  name="newPassword"
+                  value={newPassword}
+                  handleChange={(e) => setNewPassword(e.target.value)}
+                  handleBlur={handleOnBlur}
+                  handleFocus={handleOnFocus}
+                  errorMessage={formErrors.newPassword}
+                  floatingLabel={formatMessage(messages['new.password.label'])}
+                />
+                <PasswordField
+                  name="confirmPassword"
+                  value={confirmPassword}
+                  handleChange={handleConfirmPasswordChange}
+                  handleFocus={handleOnFocus}
+                  errorMessage={formErrors.confirmPassword}
+                  showRequirements={false}
+                  floatingLabel={formatMessage(messages['confirm.password.label'])}
+                />
+                <StatefulButton
+                  id="submit-new-password"
+                  name="submit-new-password"
+                  type="submit"
+                  variant="brand"
+                  className="reset-password--button"
+                  state={props.status}
+                  labels={{
+                    default: formatMessage(messages['reset.password']),
+                    pending: '',
+                  }}
+                  onClick={e => handleSubmit(e)}
+                  onMouseDown={(e) => e.preventDefault()}
+                />
+              </Form>
+            </div>
+          </div>
+        </div>
+      </BaseContainer>
+    );
+  }
+};
+
+ResetPasswordPage.defaultProps = {
+  status: null,
+  token: null,
+  errorMsg: null,
+};
+
+ResetPasswordPage.propTypes = {
+  resetPassword: PropTypes.func.isRequired,
+  validateToken: PropTypes.func.isRequired,
+  token: PropTypes.string,
+  status: PropTypes.string,
+  errorMsg: PropTypes.string,
+};
+
+export default connect(
+  resetPasswordResultSelector,
+  {
+    resetPassword,
+    validateToken,
+  },
+)(ResetPasswordPage);

package/src/reset-password/ResetPasswordSuccess.jsx

@@ -0,0 +1,19 @@
+import { useIntl } from '@openedx/frontend-base';
+import { Alert } from '@openedx/paragon';
+
+import messages from './messages';
+
+const ResetPasswordSuccess = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Alert id="reset-password-success" variant="success" className="mb-5">
+      <Alert.Heading>
+        {formatMessage(messages['reset.password.success.heading'])}
+      </Alert.Heading>
+      <p>{formatMessage(messages['reset.password.success'])}</p>
+    </Alert>
+  );
+};
+
+export default ResetPasswordSuccess;

package/src/reset-password/data/actions.js

@@ -0,0 +1,50 @@
+import { AsyncActionType } from '../../data/utils';
+
+export const RESET_PASSWORD = new AsyncActionType('RESET', 'PASSWORD');
+export const VALIDATE_TOKEN = new AsyncActionType('VALIDATE', 'TOKEN');
+export const PASSWORD_RESET_FAILURE = 'PASSWORD_RESET_FAILURE';
+
+export const passwordResetFailure = (errorCode) => ({
+  type: PASSWORD_RESET_FAILURE,
+  payload: { errorCode },
+});
+
+// Validate confirmation token
+export const validateToken = (token) => ({
+  type: VALIDATE_TOKEN.BASE,
+  payload: { token },
+});
+
+export const validateTokenBegin = () => ({
+  type: VALIDATE_TOKEN.BEGIN,
+});
+
+export const validateTokenSuccess = (tokenStatus, token) => ({
+  type: VALIDATE_TOKEN.SUCCESS,
+  payload: { tokenStatus, token },
+});
+
+export const validateTokenFailure = errorCode => ({
+  type: VALIDATE_TOKEN.FAILURE,
+  payload: { errorCode },
+});
+
+// Reset Password
+export const resetPassword = (formPayload, token, params) => ({
+  type: RESET_PASSWORD.BASE,
+  payload: { formPayload, token, params },
+});
+
+export const resetPasswordBegin = () => ({
+  type: RESET_PASSWORD.BEGIN,
+});
+
+export const resetPasswordSuccess = data => ({
+  type: RESET_PASSWORD.SUCCESS,
+  payload: { data },
+});
+
+export const resetPasswordFailure = (errorCode, errorMsg = null) => ({
+  type: RESET_PASSWORD.FAILURE,
+  payload: { errorCode, errorMsg: errorMsg ?? errorCode },
+});

package/src/reset-password/data/constants.js

@@ -0,0 +1,16 @@
+export const TOKEN_STATE = {
+  PENDING: 'token-pending',
+  VALID: 'token-valid',
+};
+
+// password reset error codes
+export const FORM_SUBMISSION_ERROR = 'form-submission-error';
+export const PASSWORD_RESET_ERROR = 'password-reset-error';
+export const SUCCESS = 'success';
+export const PASSWORD_VALIDATION_ERROR = 'password-validation-failure';
+
+export const PASSWORD_RESET = {
+  INVALID_TOKEN: 'invalid-token',
+  INTERNAL_SERVER_ERROR: 'password-reset-internal-server-error',
+  FORBIDDEN_REQUEST: 'password-reset-rate-limit-error',
+};

package/src/reset-password/data/reducers.js

@@ -0,0 +1,44 @@
+import { PASSWORD_RESET_FAILURE, RESET_PASSWORD, VALIDATE_TOKEN } from './actions';
+import { PASSWORD_RESET_ERROR, TOKEN_STATE } from './constants';
+
+export const defaultState = {
+  status: TOKEN_STATE.PENDING,
+  token: null,
+  errorMsg: null,
+};
+
+const reducer = (state = defaultState, action = null) => {
+  switch (action.type) {
+    case VALIDATE_TOKEN.SUCCESS:
+      return {
+        ...state,
+        status: TOKEN_STATE.VALID,
+        token: action.payload.token,
+      };
+    case PASSWORD_RESET_FAILURE:
+      return {
+        ...state,
+        status: PASSWORD_RESET_ERROR,
+      };
+    case RESET_PASSWORD.BEGIN:
+      return {
+        ...state,
+        status: 'pending',
+      };
+    case RESET_PASSWORD.SUCCESS:
+      return {
+        ...state,
+        status: 'success',
+      };
+    case RESET_PASSWORD.FAILURE:
+      return {
+        ...state,
+        status: action.payload.errorCode,
+        errorMsg: action.payload.errorMsg,
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/reset-password/data/sagas.js

@@ -0,0 +1,67 @@
+import { logError, logInfo } from '@openedx/frontend-base';
+import { call, put, takeEvery } from 'redux-saga/effects';
+
+import {
+  passwordResetFailure,
+  RESET_PASSWORD,
+  resetPasswordBegin,
+  resetPasswordFailure,
+  resetPasswordSuccess,
+  VALIDATE_TOKEN,
+  validateTokenBegin,
+  validateTokenSuccess,
+} from './actions';
+import { PASSWORD_RESET, PASSWORD_VALIDATION_ERROR } from './constants';
+import { resetPassword, validateToken } from './service';
+
+// Services
+export function* handleValidateToken(action) {
+  try {
+    yield put(validateTokenBegin());
+    const data = yield call(validateToken, action.payload.token);
+    const isValid = data.is_valid;
+    if (isValid) {
+      yield put(validateTokenSuccess(isValid, action.payload.token));
+    } else {
+      yield put(passwordResetFailure(PASSWORD_RESET.INVALID_TOKEN));
+    }
+  } catch (err) {
+    if (err.response && err.response.status === 429) {
+      yield put(passwordResetFailure(PASSWORD_RESET.FORBIDDEN_REQUEST));
+      logInfo(err);
+    } else {
+      yield put(passwordResetFailure(PASSWORD_RESET.INTERNAL_SERVER_ERROR));
+      logError(err);
+    }
+  }
+}
+
+export function* handleResetPassword(action) {
+  try {
+    yield put(resetPasswordBegin());
+    const data = yield call(resetPassword, action.payload.formPayload, action.payload.token, action.payload.params);
+    const resetStatus = data.reset_status;
+    const resetErrors = data.err_msg;
+
+    if (resetStatus) {
+      yield put(resetPasswordSuccess(resetStatus));
+    } else if (data.token_invalid) {
+      yield put(passwordResetFailure(PASSWORD_RESET.INVALID_TOKEN));
+    } else {
+      yield put(resetPasswordFailure(PASSWORD_VALIDATION_ERROR, resetErrors));
+    }
+  } catch (err) {
+    if (err.response && err.response.status === 429) {
+      yield put(resetPasswordFailure(PASSWORD_RESET.FORBIDDEN_REQUEST));
+      logInfo(err);
+    } else {
+      yield put(resetPasswordFailure(PASSWORD_RESET.INTERNAL_SERVER_ERROR));
+      logError(err);
+    }
+  }
+}
+
+export default function* saga() {
+  yield takeEvery(RESET_PASSWORD.BASE, handleResetPassword);
+  yield takeEvery(VALIDATE_TOKEN.BASE, handleValidateToken);
+}

package/src/reset-password/data/selectors.js

@@ -0,0 +1,10 @@
+import { createSelector } from 'reselect';
+
+export const storeName = 'resetPassword';
+
+export const resetPasswordSelector = state => ({ ...state[storeName] });
+
+export const resetPasswordResultSelector = createSelector(
+  resetPasswordSelector,
+  resetPassword => resetPassword,
+);

package/src/reset-password/data/service.js

@@ -0,0 +1,61 @@
+import { getSiteConfig, getHttpClient } from '@openedx/frontend-base';
+import formurlencoded from 'form-urlencoded';
+
+export async function validateToken(token) {
+  const requestConfig = {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  };
+
+  const { data } = await getHttpClient()
+    .post(
+      `${getSiteConfig().lmsBaseUrl}/user_api/v1/account/password_reset/token/validate/`,
+      formurlencoded({ token }),
+      requestConfig,
+    )
+    .catch((e) => {
+      throw (e);
+    });
+  return data;
+}
+
+export async function resetPassword(payload, token, queryParams) {
+  const requestConfig = {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  };
+  const url = new URL(`${getSiteConfig().lmsBaseUrl}/password/reset/${token}/`);
+
+  if (queryParams.is_account_recovery) {
+    url.searchParams.append('is_account_recovery', true);
+  }
+
+  const { data } = await getHttpClient()
+    .post(url.href, formurlencoded(payload), requestConfig)
+    .catch((e) => {
+      throw (e);
+    });
+  return data;
+}
+
+export async function validatePassword(payload) {
+  const requestConfig = {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  };
+  const { data } = await getHttpClient()
+    .post(
+      `${getSiteConfig().lmsBaseUrl}/api/user/v1/validation/registration`,
+      formurlencoded(payload),
+      requestConfig,
+    )
+    .catch((e) => {
+      throw (e);
+    });
+
+  let errorMessage = '';
+  // Be careful about grabbing this message, since we could have received an HTTP error or the
+  // endpoint didn't give us what we expect. We only care if we get a clear error message.
+  if (data.validation_decisions?.password) {
+    errorMessage = data.validation_decisions.password;
+  }
+
+  return errorMessage;
+}

package/src/reset-password/data/tests/sagas.test.js

@@ -0,0 +1,185 @@
+import { runSaga } from 'redux-saga';
+
+import { initializeMockServices } from '../../../setupTest';
+import {
+  passwordResetFailure,
+  resetPasswordBegin,
+  resetPasswordFailure,
+  resetPasswordSuccess, validateTokenBegin,
+} from '../actions';
+import { PASSWORD_RESET } from '../constants';
+import { handleResetPassword, handleValidateToken } from '../sagas';
+import * as api from '../service';
+
+const { loggingService } = initializeMockServices();
+
+describe('handleResetPassword', () => {
+  const params = {
+    payload: {
+      formPayload: {
+        new_password1: 'new_password1',
+        new_password2: 'new_password1',
+      },
+      token: 'token',
+      params: {},
+    },
+  };
+
+  const responseData = {
+    reset_status: true,
+    err_msg: '',
+  };
+
+  beforeEach(() => {
+    loggingService.logError.mockReset();
+    loggingService.logInfo.mockReset();
+  });
+
+  it('should call service and dispatch success action', async () => {
+    const resetPassword = jest.spyOn(api, 'resetPassword')
+      .mockImplementation(() => Promise.resolve(responseData));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleResetPassword,
+      params,
+    );
+
+    expect(resetPassword).toHaveBeenCalledTimes(1);
+    expect(dispatched).toEqual([resetPasswordBegin(), resetPasswordSuccess(true)]);
+    resetPassword.mockClear();
+  });
+
+  it('should call service and dispatch internal server error action', async () => {
+    const errorResponse = {
+      response: {
+        status: 500,
+        data: {
+          errorCode: PASSWORD_RESET.INTERNAL_SERVER_ERROR,
+        },
+      },
+    };
+    const resetPassword = jest.spyOn(api, 'resetPassword')
+      .mockImplementation(() => Promise.reject(errorResponse));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleResetPassword,
+      params,
+    );
+
+    expect(loggingService.logError).toHaveBeenCalled();
+    expect(resetPassword).toHaveBeenCalledTimes(1);
+    expect(dispatched).toEqual([resetPasswordBegin(), resetPasswordFailure(PASSWORD_RESET.INTERNAL_SERVER_ERROR)]);
+    resetPassword.mockClear();
+  });
+
+  it('should call service and dispatch invalid token error', async () => {
+    responseData.reset_status = false;
+    responseData.token_invalid = true;
+
+    const resetPassword = jest.spyOn(api, 'resetPassword')
+      .mockImplementation(() => Promise.resolve(responseData));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleResetPassword,
+      params,
+    );
+
+    expect(resetPassword).toHaveBeenCalledTimes(1);
+    expect(dispatched).toEqual([resetPasswordBegin(), passwordResetFailure(PASSWORD_RESET.INVALID_TOKEN)]);
+    resetPassword.mockClear();
+  });
+
+  it('should call service and dispatch ratelimit error', async () => {
+    const errorResponse = {
+      response: {
+        status: 429,
+        data: {
+          errorCode: PASSWORD_RESET.FORBIDDEN_REQUEST,
+        },
+      },
+    };
+    const resetPassword = jest.spyOn(api, 'resetPassword')
+      .mockImplementation(() => Promise.reject(errorResponse));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleResetPassword,
+      params,
+    );
+
+    expect(loggingService.logInfo).toHaveBeenCalled();
+    expect(resetPassword).toHaveBeenCalledTimes(1);
+    expect(dispatched).toEqual([resetPasswordBegin(), resetPasswordFailure(PASSWORD_RESET.FORBIDDEN_REQUEST)]);
+    resetPassword.mockClear();
+  });
+});
+
+describe('handleValidateToken', () => {
+  const params = {
+    payload: {
+      token: 'token',
+      params: {},
+    },
+  };
+
+  beforeEach(() => {
+    loggingService.logError.mockReset();
+    loggingService.logInfo.mockReset();
+  });
+
+  it('check internal server error on api failure', async () => {
+    const errorResponse = {
+      response: {
+        status: 500,
+        data: {
+          errorCode: PASSWORD_RESET.INTERNAL_SERVER_ERROR,
+        },
+      },
+    };
+    const validateToken = jest.spyOn(api, 'validateToken')
+      .mockImplementation(() => Promise.reject(errorResponse));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleValidateToken,
+      params,
+    );
+
+    expect(validateToken).toHaveBeenCalledTimes(1);
+    expect(dispatched).toEqual([validateTokenBegin(), passwordResetFailure(PASSWORD_RESET.INTERNAL_SERVER_ERROR)]);
+    validateToken.mockClear();
+  });
+
+  it('should call service and dispatch rate limit error', async () => {
+    const errorResponse = {
+      response: {
+        status: 429,
+        data: {
+          errorCode: PASSWORD_RESET.FORBIDDEN_REQUEST,
+        },
+      },
+    };
+    const validateToken = jest.spyOn(api, 'validateToken')
+      .mockImplementation(() => Promise.reject(errorResponse));
+
+    const dispatched = [];
+    await runSaga(
+      { dispatch: (action) => dispatched.push(action) },
+      handleValidateToken,
+      params,
+    );
+
+    expect(loggingService.logInfo).toHaveBeenCalled();
+    expect(validateToken).toHaveBeenCalledTimes(1);
+    expect(dispatched).toEqual([validateTokenBegin(), passwordResetFailure(PASSWORD_RESET.FORBIDDEN_REQUEST)]);
+    validateToken.mockClear();
+  });
+});

package/src/reset-password/index.js

@@ -0,0 +1,5 @@
+export { default as ResetPasswordPage } from './ResetPasswordPage';
+export { default as reducer } from './data/reducers';
+export { RESET_PASSWORD } from './data/actions';
+export { default as saga } from './data/sagas';
+export { storeName } from './data/selectors';