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

package/src/reset-password/messages.js

@@ -0,0 +1,88 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  'sign.in': {
+    id: 'sign.in',
+    defaultMessage: 'Sign in',
+    description: 'Sign in toggle text',
+  },
+  'reset.password.page.title': {
+    id: 'reset.password.page.title',
+    defaultMessage: 'Reset Password | {siteName}',
+    description: 'page title',
+  },
+  'reset.password': {
+    id: 'reset.password',
+    defaultMessage: 'Reset password',
+    description: 'The page heading and button text for reset password page.',
+  },
+  'reset.password.page.instructions': {
+    id: 'reset.password.page.instructions',
+    defaultMessage: 'Enter and confirm your new password.',
+    description: 'Instructions message for reset password page.',
+  },
+  'new.password.label': {
+    id: 'new.password.label',
+    defaultMessage: 'New password',
+    description: 'New password field label for the reset password page.',
+  },
+  'confirm.password.label': {
+    id: 'confirm.password.label',
+    defaultMessage: 'Confirm password',
+    description: 'Confirm password field label for the reset password page.',
+  },
+  // validation errors
+  'password.validation.message': {
+    id: 'password.validation.message',
+    defaultMessage: 'Password criteria has not been met',
+    description: 'Error message for empty or invalid password',
+  },
+  'passwords.do.not.match': {
+    id: 'passwords.do.not.match',
+    defaultMessage: 'Passwords do not match',
+    description: 'Password format error.',
+  },
+  'confirm.your.password': {
+    id: 'confirm.your.password',
+    defaultMessage: 'Confirm your password',
+    description: 'Field validation message when confirm password is empty',
+  },
+  // alert banner strings
+  'reset.password.failure.heading': {
+    id: 'reset.password.failure.heading',
+    defaultMessage: 'We couldn\'t reset your password.',
+    description: 'Heading for reset password request failure',
+  },
+  'reset.password.form.submission.error': {
+    id: 'reset.password.form.submission.error',
+    defaultMessage: 'Please check your responses and try again.',
+    description: 'Error message for reset password page',
+  },
+  'reset.server.rate.limit.error': {
+    id: 'reset.server.rate.limit.error',
+    defaultMessage: 'Too many requests.',
+    description: 'Too many request at server end point',
+  },
+  'reset.password.success.heading': {
+    id: 'reset.password.success.heading',
+    defaultMessage: 'Password reset complete.',
+    description: 'Heading for alert box when reset password is successful',
+  },
+  'reset.password.success': {
+    id: 'reset.password.success',
+    defaultMessage: 'Your password has been reset. Sign in to your account.',
+    description: 'Reset password success message',
+  },
+  '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',
+  },
+  'rate.limit.error': {
+    id: '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',
+  },
+});
+
+export default messages;

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

@@ -0,0 +1,241 @@
+import { Provider } from 'react-redux';
+
+import { CurrentAppProvider, configureI18n, getSiteConfig, injectIntl, IntlProvider } from '@openedx/frontend-base';
+import {
+  fireEvent, render, screen,
+} from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { MemoryRouter, useParams } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+
+import { appId } from '../../constants';
+import { initializeMockServices } from '../../setupTest';
+import { LOGIN_PAGE, RESET_PAGE } from '../../data/constants';
+import { resetPassword, validateToken } from '../data/actions';
+import {
+  PASSWORD_RESET, PASSWORD_RESET_ERROR, SUCCESS, TOKEN_STATE,
+} from '../data/constants';
+import ResetPasswordPage from '../ResetPasswordPage';
+
+const mockNavigate = jest.fn();
+const mockParams = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+  useParams: jest.fn(),
+}));
+
+initializeMockServices();
+const IntlResetPasswordPage = injectIntl(ResetPasswordPage);
+const mockStore = configureStore();
+const token = '1c-bmjdkc-5e60e084cf8113048ca7';
+
+describe('ResetPasswordPage', () => {
+  let props = {};
+  let store = {};
+
+  const reduxWrapper = children => (
+    <IntlProvider locale="en">
+      <MemoryRouter>
+        <CurrentAppProvider appId={appId}>
+          <Provider store={store}>{children}</Provider>
+        </CurrentAppProvider>
+      </MemoryRouter>
+    </IntlProvider>
+  );
+
+  const initialState = {
+    register: {
+      validationApiRateLimited: false,
+    },
+    resetPassword: {},
+  };
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+    configureI18n({
+      messages: { 'es-419': {}, de: {}, 'en-us': {} },
+    });
+    props = {
+      resetPassword: jest.fn(),
+      status: null,
+      token: null,
+      errors: null,
+      match: {
+        params: {},
+      },
+    };
+    useParams.mockReturnValue({ token: null });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  // ******** form submission tests ********
+
+  it('with valid inputs resetPassword action is dispatched', async () => {
+    const password = 'test-password-1';
+
+    store = mockStore({
+      ...initialState,
+      resetPassword: {
+        status: TOKEN_STATE.VALID,
+      },
+    });
+
+    store.dispatch = jest.fn(store.dispatch);
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    const newPasswordInput = screen.getByLabelText('New password');
+    const confirmPasswordInput = screen.getByLabelText('Confirm password');
+
+    fireEvent.change(newPasswordInput, { target: { value: password } });
+    fireEvent.change(confirmPasswordInput, { target: { value: password } });
+
+    const resetPasswordButton = screen.getByRole('button', { name: /Reset password/i, id: 'submit-new-password' });
+    await act(async () => {
+      fireEvent.click(resetPasswordButton);
+    });
+    expect(store.dispatch).toHaveBeenCalledWith(
+      resetPassword({ new_password1: password, new_password2: password }, props.token, {}),
+    );
+  });
+
+  // ******** test reset password field validations ********
+
+  it('should show error messages for required fields on empty form submission', () => {
+    store = mockStore({
+      ...initialState,
+      resetPassword: {
+        status: TOKEN_STATE.VALID,
+      },
+    });
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    const resetPasswordButton = screen.getByRole('button', { name: /Reset password/i, id: 'submit-new-password' });
+    fireEvent.click(resetPasswordButton);
+
+    expect(screen.queryByText(/We couldn't reset your password./i)).toBeTruthy();
+    expect(screen.queryByText('Password criteria has not been met')).toBeTruthy();
+    expect(screen.queryByText('Confirm your password')).toBeTruthy();
+
+    const newPasswordInput = screen.getByLabelText('New password');
+    fireEvent.focus(newPasswordInput);
+    expect(screen.queryByText('Password criteria has not been met')).toBeNull();
+
+    const confirmPasswordInput = screen.getByLabelText('Confirm password');
+    fireEvent.focus(confirmPasswordInput);
+    expect(screen.queryByText('Confirm your password')).toBeNull();
+  });
+
+  it('should show error message when new and confirm password do not match', () => {
+    store = mockStore({
+      ...initialState,
+      resetPassword: {
+        status: TOKEN_STATE.VALID,
+      },
+    });
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    const confirmPasswordInput = screen.getByLabelText('Confirm password');
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password-mismatch' } });
+
+    const passwordsDoNotMatchError = screen.queryByText('Passwords do not match');
+    expect(passwordsDoNotMatchError).toBeTruthy();
+  });
+
+  // ******** alert message tests ********
+
+  it('should show reset password rate limit error', () => {
+    const validationMessage = 'Too many requests.An error has occurred because of too many requests. Please try again after some time.';
+    store = mockStore({
+      ...initialState,
+      resetPassword: {
+        status: PASSWORD_RESET.FORBIDDEN_REQUEST,
+      },
+    });
+
+    const { container } = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+
+    const alertElements = container.querySelectorAll('.alert-danger');
+    const rateLimitError = alertElements[0].textContent;
+    expect(rateLimitError).toBe(validationMessage);
+  });
+
+  it('should show reset password internal server error', () => {
+    const validationMessage = 'We couldn\'t reset your password.An error has occurred. Try refreshing the page, or check your internet connection.';
+    store = mockStore({
+      ...initialState,
+      resetPassword: {
+        status: PASSWORD_RESET.INTERNAL_SERVER_ERROR,
+      },
+    });
+
+    const { container } = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    const alertElements = container.querySelectorAll('.alert-danger');
+    const internalServerError = alertElements[0].textContent;
+    expect(internalServerError).toBe(validationMessage);
+  });
+
+  // ******** miscellaneous tests ********
+
+  it('should call validation on password field when blur event fires', () => {
+    const resetPasswordPage = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    const expectedText = 'Password criteria has not been metPassword must contain at least 8 characters, at least one letter, and at least one number';
+    const newPasswordInput = resetPasswordPage.container.querySelector('input#newPassword');
+    newPasswordInput.value = 'test-password';
+    fireEvent.change(newPasswordInput);
+
+    fireEvent.blur(newPasswordInput);
+
+    const feedbackDiv = resetPasswordPage.container.querySelector('div[feedback-for="newPassword"]');
+    expect(feedbackDiv.textContent).toEqual(expectedText);
+  });
+
+  it('show spinner when api call is pending', () => {
+    store.dispatch = jest.fn(store.dispatch);
+    props = {
+      status:
+        TOKEN_STATE.PENDING,
+    };
+    useParams.mockReturnValue({ token });
+
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+
+    expect(store.dispatch).toHaveBeenCalledWith(validateToken(token));
+
+    useParams.mockClear();
+  });
+  it('should redirect the user to Reset password email screen ', async () => {
+    props = {
+      status:
+        PASSWORD_RESET_ERROR,
+    };
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    expect(mockNavigate).toHaveBeenCalledWith(RESET_PAGE);
+  });
+  it('should redirect the user to root url of the application ', async () => {
+    props = {
+      status: SUCCESS,
+    };
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    expect(mockNavigate).toHaveBeenCalledWith(LOGIN_PAGE);
+  });
+
+  it('shows spinner during token validation', () => {
+    render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+    const spinnerElement = document.getElementsByClassName('div.spinner-header');
+
+    expect(spinnerElement).toBeTruthy();
+  });
+
+  // ******** redirection tests ********
+
+  it('by clicking on sign in tab should redirect onto login page', async () => {
+    const { getByText } = render(reduxWrapper(<IntlResetPasswordPage {...props} />));
+
+    const signInTab = getByText('Sign in');
+
+    fireEvent.click(signInTab);
+
+    expect(mockNavigate).toHaveBeenCalledWith(LOGIN_PAGE);
+  });
+});

package/src/routes.jsx

@@ -0,0 +1,79 @@
+import { Navigate } from 'react-router';
+
+import { EmbeddedRegistrationRoute, NotFoundPage, UnAuthOnlyRoute } from './common-components';
+import { LOGIN_PAGE } from './data/constants';
+import { ForgotPasswordPage } from './forgot-password';
+import Logistration from './logistration/Logistration';
+import { ProgressiveProfiling } from './progressive-profiling';
+import { RegistrationPage } from './register';
+import { ResetPasswordPage } from './reset-password';
+
+import Main from './Main';
+
+const routes = [
+  {
+    id: 'org.openedx.frontend.route.authn.main',
+    Component: Main,
+    children: [
+      {
+        path: 'register-embedded',
+        element: (
+          <EmbeddedRegistrationRoute><RegistrationPage /></EmbeddedRegistrationRoute>
+        ),
+      },
+      {
+        path: 'login',
+        handle: {
+          role: 'org.openedx.frontend.role.login',
+        },
+        element: (
+          <UnAuthOnlyRoute><Logistration selectedPage={LOGIN_PAGE} /></UnAuthOnlyRoute>
+        ),
+      },
+      {
+        path: 'register',
+        handle: {
+          role: 'org.openedx.frontend.role.register',
+        },
+        element: (
+          <UnAuthOnlyRoute><Logistration /></UnAuthOnlyRoute>
+        ),
+      },
+      {
+        path: 'reset',
+        handle: {
+          role: 'org.openedx.frontend.role.resetPassword',
+        },
+        element: (
+          <UnAuthOnlyRoute><ForgotPasswordPage /></UnAuthOnlyRoute>
+        ),
+      },
+      {
+        path: 'password_reset_confirm/:token',
+        handle: {
+          role: 'org.openedx.frontend.role.confirmPassword',
+        },
+        element: (
+          <ResetPasswordPage />
+        ),
+      },
+      {
+        path: 'welcome',
+        handle: {
+          role: 'org.openedx.frontend.role.welcome',
+        },
+        element: (
+          <ProgressiveProfiling />
+        ),
+      },
+      {
+        path: 'notfound',
+        element: (
+          <NotFoundPage />
+        ),
+      },
+    ]
+  }
+];
+
+export default routes;

package/src/sass/_base_component.scss

@@ -0,0 +1,202 @@
+@use "@openedx/paragon/scss/core/core" as paragon;
+
+.layout {
+  display: flex;
+
+  @include paragon.media-breakpoint-down('lg') {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include paragon.media-breakpoint-up('xl') {
+    justify-content: space-between;
+  }
+}
+
+.content {
+  @include paragon.media-breakpoint-up('xl') {
+    display: flex;
+    justify-content: center;
+    width: 50vw;
+    margin-top: 4rem;
+  }
+}
+
+.logo-small {
+  width: 44.67px;
+  margin-top: 1.25rem;
+  margin-left: 1.5rem;
+}
+
+.logo {
+  width: 71px;
+  margin-top: 2rem;
+  margin-left: 1.5rem;
+}
+
+.mw-320 {
+  max-width: 320px;
+}
+
+.main-heading {
+  position: relative;
+  z-index: 2;
+}
+
+.complete-your-profile {
+  font-weight: 700;
+  line-height: 1;
+
+  @include paragon.media-breakpoint-down('xl') {
+    font-size: 3.75rem;
+  }
+
+  @media (min-width: 1400px) {
+    font-size: 4.875rem;
+  }
+}
+
+.welcome-to-platform {
+  margin-bottom: 0.5rem;
+  font-weight: 700;
+
+  @include paragon.media-breakpoint-down('xl') {
+    font-size: 1.375rem;
+    line-height: 1.75rem;
+  }
+
+  @media (min-width: 1400px) {
+    font-size: 2rem;
+    line-height: 2.25rem;
+  }
+}
+
+.large-screen-left-container {
+  @include paragon.media-breakpoint-down('xl') {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+
+  @media (min-width: 1400px) {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%;
+  }
+}
+
+.small-screen-top-stripe {
+  height: 0.25rem;
+  background-image: linear-gradient(102.02deg,
+      paragon.$brand-700,
+      paragon.$brand-700 20%,
+      paragon.$brand 20%,
+    );
+  background-repeat: no-repeat;
+}
+
+@include paragon.media-breakpoint-only('md') {
+  .medium-screen-top-stripe {
+    display: flex;
+    height: 0.5rem;
+    background-image: linear-gradient(102.02deg,
+        paragon.$brand-700,
+        paragon.$brand-700 10%,
+        paragon.$brand 10%,
+        paragon.$brand 90%,
+        paragon.$primary-700 90%,
+        paragon.$primary-700 100%,
+      );
+    background-repeat: no-repeat;
+  }
+}
+
+@include paragon.media-breakpoint-only('lg') {
+  .medium-screen-top-stripe {
+    display: flex;
+    height: 0.5rem;
+    background-image: linear-gradient(102.02deg,
+        paragon.$brand-700 10%,
+        paragon.$brand 10%,
+        paragon.$brand 65%,
+        paragon.$primary-700 65%,
+        paragon.$primary-700 75%,
+        paragon.$accent-a 75%,
+        paragon.$accent-a 75%);
+    background-repeat: no-repeat;
+  }
+}
+
+.extra-large-screen-top-stripe {
+  display: none;
+}
+
+@include paragon.media-breakpoint-up('xl') {
+  .extra-large-screen-top-stripe {
+    display: flex;
+    height: 0.5rem;
+    background-image: linear-gradient(102.02deg,
+        paragon.$brand-700 10%,
+        paragon.$brand 10%,
+        paragon.$brand 45%,
+        paragon.$primary-700 45%,
+        paragon.$primary-700 55%,
+        paragon.$accent-a 55%,
+        paragon.$accent-a 75%,
+        paragon.$info-200 75%,
+      );
+    background-repeat: no-repeat;
+  }
+}
+
+.large-screen-svg-light,
+.large-screen-svg-primary {
+  fill: paragon.$light-200;
+  overflow: hidden;
+  position: absolute;
+}
+
+.large-screen-svg-primary {
+  fill: paragon.$primary-400;
+}
+
+.medium-screen-svg-light,
+.medium-screen-svg-primary {
+  fill: paragon.$light-200;
+  overflow: inherit;
+  position: absolute;
+}
+
+.medium-screen-svg-primary {
+  fill: paragon.$primary-400;
+}
+
+[dir=rtl] {
+
+  .medium-screen-svg-light,
+  .medium-screen-svg-primary,
+  .large-screen-svg-light,
+  .large-screen-svg-primary {
+    transform: scaleX(-1);
+  }
+}
+
+.small-yellow-line {
+  width: 80px;
+  height: 0;
+  border: 2px solid paragon.$accent-b;
+  transform: rotate(102.02deg);
+}
+
+.medium-yellow-line {
+  width: 120px;
+  height: 0;
+  border: 3px solid paragon.$accent-b;
+  transform: rotate(102.02deg);
+}
+
+.large-yellow-line {
+  width: 240px;
+  height: 0;
+  border: 3px solid paragon.$accent-b;
+  transform: rotate(102.02deg);
+}

package/src/sass/_forgot_password.scss

@@ -0,0 +1,3 @@
+.forgot-password--button {
+  min-width: 6rem;
+}

package/src/sass/_login_page.scss

@@ -0,0 +1,3 @@
+.login-button-width {
+    min-width: 6rem;
+}

package/src/sass/_progressive_profiling_page.scss

@@ -0,0 +1,30 @@
+@use "@openedx/paragon/scss/core/core" as paragon;
+
+.pp-page__button-width {
+  min-width: 6rem;
+}
+
+.pp-page__support-link {
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
+.pp-page__heading {
+  line-height: 1.75rem;
+  font-size: 1.375rem;
+  margin-bottom: 0.5rem;
+  font-weight: 700;
+
+  @include paragon.media-breakpoint-down('md') {
+    line-height: 1.5rem;
+    font-size: 1.125rem;
+  }
+}
+
+@media (max-width: 464px) {
+  .pp-page__support-link {
+    font-size: 0.688rem;
+    font-weight: normal;
+    line-height: 0.938rem;
+  }
+}