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

package/src/reset-password/ResetPasswordPage.jsx

@@ -1,224 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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/reducers.js

@@ -1,44 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,185 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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';