@openedx/frontend-app-authn 1.0.0-alpha.5 → 1.0.0-alpha.6

package/src/forgot-password/ForgotPasswordAlert.jsx

@@ -1,97 +0,0 @@
-import { FormattedMessage, useAppConfig, useIntl } from '@openedx/frontend-base';
-import { Alert } from '@openedx/paragon';
-import { CheckCircle, Error } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-
-import {
-  COMPLETE_STATE, FORBIDDEN_STATE, FORM_SUBMISSION_ERROR, INTERNAL_SERVER_ERROR,
-} from '../data/constants';
-import { PASSWORD_RESET } from '../reset-password/data/constants';
-import messages from './messages';
-
-const ForgotPasswordAlert = (props) => {
-  const { formatMessage } = useIntl();
-  const { email, emailError } = props;
-  let message = '';
-  let heading = formatMessage(messages['forgot.password.error.alert.title']);
-  let { status } = props;
-
-  if (emailError) {
-    status = FORM_SUBMISSION_ERROR;
-  }
-
-  switch (status) {
-    case COMPLETE_STATE:
-      heading = formatMessage(messages['confirmation.message.title']);
-      message = (
-        <FormattedMessage
-          id="forgot.password.confirmation.message"
-          defaultMessage="We sent an email to {email} with instructions to reset your password.
-          If you do not receive a password reset message after 1 minute, verify that you entered
-          the correct email address, or check your spam folder. If you need further assistance, {supportLink}."
-          description="Forgot password confirmation message"
-          values={{
-            email: <span className="data-hj-suppress">{email}</span>,
-            supportLink: (
-              <Alert.Link href={useAppConfig().PASSWORD_RESET_SUPPORT_LINK} target="_blank">
-                {formatMessage(messages['confirmation.support.link'])}
-              </Alert.Link>
-            ),
-          }}
-        />
-      );
-      break;
-    case INTERNAL_SERVER_ERROR:
-      message = formatMessage(messages['internal.server.error']);
-      break;
-    case FORBIDDEN_STATE:
-      heading = formatMessage(messages['forgot.password.error.message.title']);
-      message = formatMessage(messages['forgot.password.request.in.progress.message']);
-      break;
-    case FORM_SUBMISSION_ERROR:
-      message = formatMessage(messages['extend.field.errors'], { emailError });
-      break;
-    case PASSWORD_RESET.INVALID_TOKEN:
-      heading = formatMessage(messages['invalid.token.heading']);
-      message = formatMessage(messages['invalid.token.error.message']);
-      break;
-    case PASSWORD_RESET.FORBIDDEN_REQUEST:
-      heading = formatMessage(messages['token.validation.rate.limit.error.heading']);
-      message = formatMessage(messages['token.validation.rate.limit.error']);
-      break;
-    case PASSWORD_RESET.INTERNAL_SERVER_ERROR:
-      heading = formatMessage(messages['token.validation.internal.sever.error.heading']);
-      message = formatMessage(messages['token.validation.internal.sever.error']);
-      break;
-    default:
-      break;
-  }
-
-  if (message) {
-    return (
-      <Alert
-        id="validation-errors"
-        className="mb-4"
-        variant={`${status === 'complete' ? 'success' : 'danger'}`}
-        icon={status === 'complete' ? CheckCircle : Error}
-      >
-        <Alert.Heading>{heading}</Alert.Heading>
-        <p>{message}</p>
-      </Alert>
-    );
-  }
-  return null;
-};
-
-ForgotPasswordAlert.defaultProps = {
-  email: '',
-  emailError: '',
-};
-
-ForgotPasswordAlert.propTypes = {
-  status: PropTypes.string.isRequired,
-  email: PropTypes.string,
-  emailError: PropTypes.string,
-};
-
-export default ForgotPasswordAlert;

package/src/forgot-password/ForgotPasswordPage.jsx

@@ -1,193 +0,0 @@
-import { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
-
-import {
-  useAppConfig,
-  getSiteConfig, sendPageEvent, sendTrackEvent, useIntl
-} from '@openedx/frontend-base';
-import {
-  Form,
-  Hyperlink,
-  Icon,
-  StatefulButton,
-  Tab,
-  Tabs,
-} from '@openedx/paragon';
-import { ChevronLeft } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
-import { useNavigate } from 'react-router-dom';
-
-import BaseContainer from '../base-container';
-import { FormGroup } from '../common-components';
-import { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
-import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';
-import { forgotPassword, setForgotPasswordFormData } from './data/actions';
-import { forgotPasswordResultSelector } from './data/selectors';
-import ForgotPasswordAlert from './ForgotPasswordAlert';
-import messages from './messages';
-
-const ForgotPasswordPage = (props) => {
-  const platformName = getSiteConfig().siteName;
-  const emailRegex = new RegExp(VALID_EMAIL_REGEX, 'i');
-  const {
-    status, submitState, emailValidationError,
-  } = props;
-
-  const { formatMessage } = useIntl();
-  const [email, setEmail] = useState(props.email);
-  const [bannerEmail, setBannerEmail] = useState('');
-  const [formErrors, setFormErrors] = useState('');
-  const [validationError, setValidationError] = useState(emailValidationError);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    sendPageEvent('login_and_registration', 'reset');
-    sendTrackEvent('edx.bi.password_reset_form.viewed', { category: 'user-engagement' });
-  }, []);
-
-  useEffect(() => {
-    setValidationError(emailValidationError);
-  }, [emailValidationError]);
-
-  useEffect(() => {
-    if (status === 'complete') {
-      setEmail('');
-    }
-  }, [status]);
-
-  const getValidationMessage = (value) => {
-    let error = '';
-
-    if (value === '') {
-      error = formatMessage(messages['forgot.password.empty.email.field.error']);
-    } else if (!emailRegex.test(value)) {
-      error = formatMessage(messages['forgot.password.page.invalid.email.message']);
-    }
-
-    return error;
-  };
-
-  const handleBlur = () => {
-    props.setForgotPasswordFormData({ email, emailValidationError: getValidationMessage(email) });
-  };
-
-  const handleFocus = () => props.setForgotPasswordFormData({ emailValidationError: '' });
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    setBannerEmail(email);
-
-    const error = getValidationMessage(email);
-    if (error) {
-      setFormErrors(error);
-      props.setForgotPasswordFormData({ email, emailValidationError: error });
-      windowScrollTo({ left: 0, top: 0, behavior: 'smooth' });
-    } else {
-      props.forgotPassword(email);
-    }
-  };
-
-  const tabTitle = (
-    <div className="d-inline-flex flex-wrap align-items-center">
-      <Icon src={ChevronLeft} />
-      <span className="ml-2">{formatMessage(messages['sign.in.text'])}</span>
-    </div>
-  );
-
-  return (
-    <BaseContainer>
-      <Helmet>
-        <title>
-          {formatMessage(
-            messages['forgot.password.page.title'],
-            { siteName: getSiteConfig().siteName }
-          )}
-        </title>
-      </Helmet>
-      <div>
-        <Tabs activeKey="" id="controlled-tab" onSelect={(key) => navigate(updatePathWithQueryParams(key))}>
-          <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
-        </Tabs>
-        <div id="main-content" className="main-content">
-          <Form id="forget-password-form" name="forget-password-form" className="mw-xs">
-            <ForgotPasswordAlert email={bannerEmail} emailError={formErrors} status={status} />
-            <h2 className="h4">
-              {formatMessage(messages['forgot.password.page.heading'])}
-            </h2>
-            <p className="mb-4">
-              {formatMessage(messages['forgot.password.page.instructions'])}
-            </p>
-            <FormGroup
-              floatingLabel={formatMessage(messages['forgot.password.page.email.field.label'])}
-              name="email"
-              value={email}
-              autoComplete="on"
-              errorMessage={validationError}
-              handleChange={(e) => setEmail(e.target.value)}
-              handleBlur={handleBlur}
-              handleFocus={handleFocus}
-              helpText={[formatMessage(messages['forgot.password.email.help.text'], { platformName })]}
-            />
-            <StatefulButton
-              id="submit-forget-password"
-              name="submit-forget-password"
-              type="submit"
-              variant="brand"
-              className="forgot-password--button"
-              state={submitState}
-              labels={{
-                default: formatMessage(messages['forgot.password.page.submit.button']),
-                pending: '',
-              }}
-              onClick={handleSubmit}
-              onMouseDown={(e) => e.preventDefault()}
-            />
-            {(useAppConfig().LOGIN_ISSUE_SUPPORT_LINK) && (
-              <Hyperlink
-                id="forgot-password"
-                name="forgot-password"
-                className="ml-4 font-weight-500 text-body"
-                destination={useAppConfig().LOGIN_ISSUE_SUPPORT_LINK}
-                target="_blank"
-                showLaunchIcon={false}
-              >
-                {formatMessage(messages['need.help.sign.in.text'])}
-              </Hyperlink>
-            )}
-            <p className="mt-5.5 small text-gray-700">
-              {formatMessage(messages['additional.help.text'], { platformName })}
-              <span>
-                <Hyperlink isInline destination={`mailto:${useAppConfig().INFO_EMAIL}`}>{useAppConfig().INFO_EMAIL}</Hyperlink>
-              </span>
-            </p>
-          </Form>
-        </div>
-      </div>
-    </BaseContainer>
-  );
-};
-
-ForgotPasswordPage.propTypes = {
-  email: PropTypes.string,
-  emailValidationError: PropTypes.string,
-  forgotPassword: PropTypes.func.isRequired,
-  setForgotPasswordFormData: PropTypes.func.isRequired,
-  status: PropTypes.string,
-  submitState: PropTypes.string,
-};
-
-ForgotPasswordPage.defaultProps = {
-  email: '',
-  emailValidationError: '',
-  status: null,
-  submitState: DEFAULT_STATE,
-};
-
-export default connect(
-  forgotPasswordResultSelector,
-  {
-    forgotPassword,
-    setForgotPasswordFormData,
-  },
-)(ForgotPasswordPage);

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

@@ -1,58 +0,0 @@
-import { FORGOT_PASSWORD, FORGOT_PASSWORD_PERSIST_FORM_DATA } from './actions';
-import { INTERNAL_SERVER_ERROR, PENDING_STATE } from '../../data/constants';
-import { PASSWORD_RESET_FAILURE } from '../../reset-password/data/actions';
-
-export const defaultState = {
-  status: '',
-  submitState: '',
-  email: '',
-  emailValidationError: '',
-};
-
-const reducer = (state = defaultState, action = null) => {
-  if (action !== null) {
-    switch (action.type) {
-      case FORGOT_PASSWORD.BEGIN:
-        return {
-          email: state.email,
-          status: 'pending',
-          submitState: PENDING_STATE,
-        };
-      case FORGOT_PASSWORD.SUCCESS:
-        return {
-          ...defaultState,
-          status: 'complete',
-        };
-      case FORGOT_PASSWORD.FORBIDDEN:
-        return {
-          email: state.email,
-          status: 'forbidden',
-        };
-      case FORGOT_PASSWORD.FAILURE:
-        return {
-          email: state.email,
-          status: INTERNAL_SERVER_ERROR,
-        };
-      case PASSWORD_RESET_FAILURE:
-        return {
-          status: action.payload.errorCode,
-        };
-      case FORGOT_PASSWORD_PERSIST_FORM_DATA: {
-        const { forgotPasswordFormData } = action.payload;
-        return {
-          ...state,
-          ...forgotPasswordFormData,
-        };
-      }
-      default:
-        return {
-          ...defaultState,
-          email: state.email,
-          emailValidationError: state.emailValidationError,
-        };
-    }
-  }
-  return state;
-};
-
-export default reducer;

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

@@ -1,35 +0,0 @@
-import { logError, logInfo } from '@openedx/frontend-base';
-import { call, put, takeEvery } from 'redux-saga/effects';
-
-// Actions
-import {
-  FORGOT_PASSWORD,
-  forgotPasswordBegin,
-  forgotPasswordForbidden,
-  forgotPasswordServerError,
-  forgotPasswordSuccess,
-} from './actions';
-import { forgotPassword } from './service';
-
-// Services
-export function* handleForgotPassword(action) {
-  try {
-    yield put(forgotPasswordBegin());
-
-    yield call(forgotPassword, action.payload.email);
-
-    yield put(forgotPasswordSuccess(action.payload.email));
-  } catch (e) {
-    if (e.response?.status === 403) {
-      yield put(forgotPasswordForbidden());
-      logInfo(e);
-    } else {
-      yield put(forgotPasswordServerError());
-      logError(e);
-    }
-  }
-}
-
-export default function* saga() {
-  yield takeEvery(FORGOT_PASSWORD.BASE, handleForgotPassword);
-}

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

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

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

@@ -1,21 +0,0 @@
-import { getAuthenticatedHttpClient, getSiteConfig } from '@openedx/frontend-base';
-import formurlencoded from 'form-urlencoded';
-
-export async function forgotPassword(email) {
-  const requestConfig = {
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    isPublic: true,
-  };
-
-  const { data } = await getAuthenticatedHttpClient()
-    .post(
-      `${getSiteConfig().lmsBaseUrl}/account/password`,
-      formurlencoded({ email }),
-      requestConfig,
-    )
-    .catch((e) => {
-      throw (e);
-    });
-
-  return data;
-}

package/src/forgot-password/data/tests/reducers.test.js

@@ -1,34 +0,0 @@
-import {
-  FORGOT_PASSWORD_PERSIST_FORM_DATA,
-} from '../actions';
-import reducer from '../reducers';
-
-describe('forgot password reducer', () => {
-  it('should set email and emailValidationError', () => {
-    const state = {
-      status: '',
-      submitState: '',
-      email: '',
-      emailValidationError: '',
-    };
-    const forgotPasswordFormData = {
-      email: 'test@gmail',
-      emailValidationError: 'Enter a valid email address',
-    };
-    const action = {
-      type: FORGOT_PASSWORD_PERSIST_FORM_DATA,
-      payload: { forgotPasswordFormData },
-    };
-
-    expect(
-      reducer(state, action),
-    ).toEqual(
-      {
-        status: '',
-        submitState: '',
-        email: 'test@gmail',
-        emailValidationError: 'Enter a valid email address',
-      },
-    );
-  });
-});

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

@@ -1,67 +0,0 @@
-import { runSaga } from 'redux-saga';
-
-import { initializeMockServices } from '../../../setupTest';
-import * as actions from '../actions';
-import { handleForgotPassword } from '../sagas';
-import * as api from '../service';
-
-const { loggingService } = initializeMockServices();
-
-describe('handleForgotPassword', () => {
-  const params = {
-    payload: {
-      forgotPasswordFormData: {
-        email: 'test@test.com',
-      },
-    },
-  };
-
-  beforeEach(() => {
-    loggingService.logError.mockReset();
-    loggingService.logInfo.mockReset();
-  });
-
-  it('should handle 500 error code', async () => {
-    const passwordErrorResponse = { response: { status: 500 } };
-
-    const forgotPasswordRequest = jest.spyOn(api, 'forgotPassword').mockImplementation(
-      () => Promise.reject(passwordErrorResponse),
-    );
-
-    const dispatched = [];
-    await runSaga(
-      { dispatch: (action) => dispatched.push(action) },
-      handleForgotPassword,
-      params,
-    );
-
-    expect(loggingService.logError).toHaveBeenCalled();
-    expect(dispatched).toEqual([
-      actions.forgotPasswordBegin(),
-      actions.forgotPasswordServerError(),
-    ]);
-    forgotPasswordRequest.mockClear();
-  });
-
-  it('should handle rate limit error', async () => {
-    const forbiddenErrorResponse = { response: { status: 403 } };
-
-    const forbiddenPasswordRequest = jest.spyOn(api, 'forgotPassword').mockImplementation(
-      () => Promise.reject(forbiddenErrorResponse),
-    );
-
-    const dispatched = [];
-    await runSaga(
-      { dispatch: (action) => dispatched.push(action) },
-      handleForgotPassword,
-      params,
-    );
-
-    expect(loggingService.logInfo).toHaveBeenCalled();
-    expect(dispatched).toEqual([
-      actions.forgotPasswordBegin(),
-      actions.forgotPasswordForbidden(null),
-    ]);
-    forbiddenPasswordRequest.mockClear();
-  });
-});

package/src/forgot-password/messages.js

@@ -1,128 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  'forgot.password.page.title': {
-    id: 'forgot.password.page.title',
-    defaultMessage: 'Forgot Password | {siteName}',
-    description: 'forgot password page title',
-  },
-  'forgot.password.page.heading': {
-    id: 'forgot.password.page.heading',
-    defaultMessage: 'Reset password',
-    description: 'The page heading for the forgot password page.',
-  },
-  'forgot.password.page.instructions': {
-    id: 'forgot.password.page.instructions',
-    defaultMessage: 'Please enter your email address below and we will send you an email with instructions on how to reset your password.',
-    description: 'Instructions message for forgot password page.',
-  },
-  'forgot.password.page.invalid.email.message': {
-    id: 'forgot.password.page.invalid.email.message',
-    defaultMessage: 'Enter a valid email address',
-    description: 'Invalid email address message for input field.',
-  },
-  'forgot.password.page.email.field.label': {
-    id: 'forgot.password.page.email.field.label',
-    defaultMessage: 'Email',
-    description: 'Email field label for the forgot password page.',
-  },
-  'forgot.password.page.submit.button': {
-    id: 'forgot.password.page.submit.button',
-    defaultMessage: 'Submit',
-    description: 'Submit button text for the forgot password page.',
-  },
-  'forgot.password.error.alert.title': {
-    id: 'forgot.password.error.alert.title.',
-    defaultMessage: 'We were unable to contact you.',
-    description: 'Failed to send password recovery email.',
-  },
-  'forgot.password.error.message.title': {
-    id: 'forgot.password.error.message.title',
-    defaultMessage: 'An error occurred.',
-    description: 'Title for message that appears when error occurs for password assistance page',
-  },
-  'forgot.password.request.in.progress.message': {
-    id: 'forgot.password.request.in.progress.message',
-    defaultMessage: 'Your previous request is in progress, please try again in a few moments.',
-    description: 'Message displayed when previous password reset request is still in progress.',
-  },
-  'forgot.password.empty.email.field.error': {
-    id: 'forgot.password.empty.email.field.error',
-    defaultMessage: 'Enter your email',
-    description: 'Error message that appears when user tries to submit empty email field',
-  },
-  'forgot.password.email.help.text': {
-    id: 'forgot.password.email.help.text',
-    defaultMessage: 'The email address you used to register with {platformName}',
-    description: 'text help for the email',
-  },
-  // Confirmation Alert Message
-  'confirmation.message.title': {
-    id: 'confirmation.message.title',
-    defaultMessage: 'Check your email',
-    description: 'Forgot password confirmation message title',
-  },
-  'confirmation.support.link': {
-    id: 'confirmation.support.link',
-    defaultMessage: 'contact technical support',
-    description: 'Technical support link text',
-  },
-  'need.help.sign.in.text': {
-    id: 'need.help.sign.in.text',
-    defaultMessage: 'Need help signing in?',
-    description: 'Sign in help link on forgot password page',
-  },
-  'additional.help.text': {
-    id: 'additional.help.text',
-    defaultMessage: 'For additional help, contact {platformName} support at ',
-    description: 'additional help text on forgot password page',
-  },
-  'sign.in.text': {
-    id: 'sign.in.text',
-    defaultMessage: 'Sign in',
-    description: 'login page link on password page',
-  },
-  'extend.field.errors': {
-    id: 'extend.field.errors',
-    defaultMessage: '{emailError} below.',
-    description: 'extends the field error for alert message',
-  },
-  // Reset password token validation failure
-  'invalid.token.heading': {
-    id: 'invalid.token.heading',
-    defaultMessage: 'Invalid password reset link',
-    description: 'Alert heading when reset password link is invalid',
-  },
-  'invalid.token.error.message': {
-    id: 'invalid.token.error.message',
-    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',
-    defaultMessage: 'Too many requests',
-    description: 'Too many request at server end point',
-  },
-  'token.validation.rate.limit.error': {
-    id: 'token.validation.rate.limit.error',
-    defaultMessage: 'An error has occurred because of too many requests. Please try again after some time.',
-    description: 'Error message that appears when server responds with 429 error code',
-  },
-  'token.validation.internal.sever.error.heading': {
-    id: 'token.validation.internal.sever.error.heading',
-    defaultMessage: 'Token validation failure',
-    description: 'Failed to validate reset password token error message.',
-  },
-  'token.validation.internal.sever.error': {
-    id: 'token.validation.internal.sever.error',
-    defaultMessage: 'An error has occurred. Try refreshing the page, or check your internet connection.',
-    description: 'Error message that appears when server responds with 500 error code',
-  },
-  // Error messages
-  'internal.server.error': {
-    id: 'internal.server.error',
-    defaultMessage: 'An error has occurred. Try refreshing the page, or check your internet connection.',
-    description: 'Error message that appears when server responds with 500 error code',
-  },
-});
-export default messages;