@ampath/esm-login-app 8.0.0-next.10

package/src/login/login.scss

@@ -0,0 +1,246 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyShort01 {
+  @include type.type-style('body-compact-01');
+}
+
+.productiveHeading03 {
+  @include type.type-style('heading-03');
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.caption01 {
+  @include type.type-style('legal-01');
+}
+
+.backButton {
+  height: layout.$spacing-09;
+  padding-left: 0;
+
+  svg {
+    margin-right: layout.$spacing-03;
+    order: 1;
+  }
+
+  span {
+    order: 2;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  margin-left: 10rem;
+}
+
+.center {
+  text-align: center;
+}
+
+.logo {
+  // margin-bottom: layout.$spacing-08;
+  height: layout.$spacing-11;
+  width: 16rem;
+}
+
+.logoImg {
+  // margin-bottom: layout.$spacing-03;
+  max-width: 100%;
+}
+
+.poweredByTxt {
+  @extend .caption01;
+  text-align: center;
+  color: $color-gray-70;
+  color: $text-02;
+}
+
+.needHelp {
+  display: flex;
+  width: 23rem;
+}
+
+.needHelpText {
+  @extend .bodyShort01;
+  text-align: left;
+  color: $text-02;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: layout.$spacing-05 0;
+}
+
+.link {
+  text-decoration-line: none;
+  margin-left: layout.$spacing-03;
+}
+
+.loginCard {
+  border-radius: 0;
+  border: 1px solid $ui-03;
+  background-color: $ui-02;
+  width: 23rem;
+  padding: layout.$spacing-08;
+  border-radius: layout.$spacing-03;
+  position: relative;
+  min-height: fit-content;
+}
+
+@media only screen and (min-width: 481px) {
+  .container {
+    height: 100vh;
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .container {
+    height: 100vh;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .container {
+    height: 100vh;
+  }
+}
+
+.inputGroup {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  width: 18rem;
+  gap: layout.$spacing-05;
+
+  :global(.cds--text-input) {
+    height: layout.$spacing-09;
+    @extend .label01;
+  }
+
+  :global(.cds--text-input__field-outer-wrapper) {
+    width: 18rem;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: layout.$spacing-05;
+  }
+}
+
+.continueButton {
+  margin-top: layout.$spacing-06;
+  width: 18rem;
+}
+
+.backButtonDiv {
+  width: 23rem;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+}
+
+.loader {
+  min-height: fit-content;
+}
+
+.errorMessage {
+  width: 23rem;
+  margin-bottom: layout.$spacing-09;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+}
+
+// Keep password field in DOM for browser autofill
+.hiddenPasswordField {
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  pointer-events: none;
+}
+
+.wrapperContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 10rem;
+}
+
+.image {
+  width: 50rem;
+  height: 55rem;
+  max-height: 60rem;
+  object-fit: cover;
+}
+
+.poweredBy {
+  display: flex;
+  align-items: center;
+  justify-self: flex-end;
+  font-size: 0.75rem;
+  color: blue;
+  opacity: 0.85;
+  white-space: nowrap;
+  font-weight: bold;
+  margin-bottom: layout.$spacing-08;
+}
+
+.poweredByLogo {
+  margin-left: 0.5rem;
+  width: 2rem;
+  height: auto;
+  object-fit: contain;
+  border-radius: 0.5rem;
+}
+
+.logoContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.logoSection {
+  position: fixed;
+  bottom: layout.$spacing-01;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 layout.$spacing-04;
+  gap: 24rem;
+}
+
+.leftLogos {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  border: 2px solid lightgray;
+  border-radius: 0.5rem;
+}
+
+.supportingLogos {
+  margin-left: 0.5rem;
+  width: 3rem;
+  height: auto;
+  object-fit: contain;
+  border-radius: 0.5rem;
+}
+.dhaLogo {
+  margin-left: 0.5rem;
+  width: 4rem;
+  height: auto;
+  object-fit: contain;
+  border-radius: 0.5rem;
+}
+.openmsrsLogo {
+  margin-left: 0.5rem;
+  width: 6rem;
+  height: auto;
+  object-fit: contain;
+  border-radius: 0.5rem;
+}

package/src/login/login.test.tsx

@@ -0,0 +1,288 @@
+import { useState } from 'react';
+import { waitFor, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getSessionStore, refetchCurrentUser, type SessionStore, useConfig, useSession } from '@openmrs/esm-framework';
+import { mockConfig } from '../../__mocks__/config.mock';
+import renderWithRouter from '../test-helpers/render-with-router';
+import Login from './login.component';
+
+const mockGetSessionStore = jest.mocked(getSessionStore);
+const mockLogin = jest.mocked(refetchCurrentUser);
+const mockUseConfig = jest.mocked(useConfig);
+const mockUseSession = jest.mocked(useSession);
+
+mockLogin.mockResolvedValue({} as SessionStore);
+mockGetSessionStore.mockImplementation(() => {
+  return {
+    getState: jest.fn().mockReturnValue({
+      loaded: true,
+      session: {
+        authenticated: true,
+      },
+    }),
+    setState: jest.fn(),
+    getInitialState: jest.fn(),
+    subscribe: jest.fn(),
+    destroy: jest.fn(),
+  };
+});
+
+const loginLocations = [
+  { uuid: '111', display: 'Earth' },
+  { uuid: '222', display: 'Mars' },
+];
+
+mockUseSession.mockReturnValue({ authenticated: false, sessionId: '123' });
+mockUseConfig.mockReturnValue(mockConfig);
+
+describe('Login', () => {
+  it('renders the login form', () => {
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+
+    expect(screen.getAllByRole('img', { name: /OpenMRS logo/i })).toHaveLength(2);
+    expect(screen.queryByAltText(/^logo$/i)).not.toBeInTheDocument();
+    screen.getByRole('textbox', { name: /Username/i });
+    screen.getByRole('button', { name: /Continue/i });
+  });
+
+  it('renders a configurable logo', () => {
+    const customLogoConfig = {
+      src: 'https://some-image-host.com/foo.png',
+      alt: 'Custom logo',
+    };
+    mockUseConfig.mockReturnValue({
+      ...mockConfig,
+      logo: customLogoConfig,
+    });
+
+    renderWithRouter(Login);
+
+    const logo = screen.getByAltText(customLogoConfig.alt);
+
+    expect(screen.queryByTitle(/openmrs logo/i)).not.toBeInTheDocument();
+    expect(logo).toHaveAttribute('src', customLogoConfig.src);
+    expect(logo).toHaveAttribute('alt', customLogoConfig.alt);
+  });
+
+  it('should return user focus to username input when input is invalid', async () => {
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+    const user = userEvent.setup();
+
+    expect(screen.getByRole('textbox', { name: /username/i })).toBeInTheDocument();
+    // no input to username
+    const continueButton = screen.getByRole('button', { name: /Continue/i });
+    await user.click(continueButton);
+    expect(screen.getByRole('textbox', { name: /username/i })).toHaveFocus();
+    await user.type(screen.getByRole('textbox', { name: /username/i }), 'yoshi');
+    await user.click(continueButton);
+    await screen.findByLabelText(/^password$/i);
+    await user.type(screen.getByLabelText(/^password$/i), 'no-tax-fraud');
+    expect(screen.getByLabelText(/^password$/i)).toHaveFocus();
+  });
+
+  it('makes an API request when you submit the form', async () => {
+    mockLogin.mockResolvedValue({ some: 'data' } as unknown as SessionStore);
+
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+    const user = userEvent.setup();
+
+    mockLogin.mockClear();
+    await user.type(screen.getByRole('textbox', { name: /Username/i }), 'yoshi');
+    await user.click(screen.getByRole('button', { name: /Continue/i }));
+
+    const loginButton = screen.getByRole('button', { name: /log in/i });
+    await screen.findByLabelText(/^password$/i);
+    await user.type(screen.getByLabelText(/^password$/i), 'no-tax-fraud');
+    await user.click(loginButton);
+    await waitFor(() => expect(refetchCurrentUser).toHaveBeenCalledWith('yoshi', 'no-tax-fraud'));
+  });
+
+  // TODO: Complete the test
+  it('sends the user to the location select page on login if there is more than one location', async () => {
+    let refreshUser = (user: any) => {};
+    mockLogin.mockImplementation(() => {
+      refreshUser({
+        display: 'my name',
+      });
+      return Promise.resolve({ data: { authenticated: true } } as unknown as SessionStore);
+    });
+    mockUseSession.mockImplementation(() => {
+      const [user, setUser] = useState();
+      refreshUser = setUser;
+      return { user, authenticated: !!user, sessionId: '123' };
+    });
+
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+
+    const user = userEvent.setup();
+
+    await user.type(screen.getByRole('textbox', { name: /Username/i }), 'yoshi');
+    await user.click(screen.getByRole('button', { name: /Continue/i }));
+    await screen.findByLabelText(/^password$/i);
+    await user.type(screen.getByLabelText(/^password$/i), 'no-tax-fraud');
+    await user.click(screen.getByRole('button', { name: /log in/i }));
+  });
+
+  it('should render the both the username and password fields when the showPasswordOnSeparateScreen config is false', async () => {
+    mockUseConfig.mockReturnValue({
+      ...mockConfig,
+      showPasswordOnSeparateScreen: false,
+    });
+
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+
+    const usernameInput = screen.queryByRole('textbox', { name: /username/i });
+    const continueButton = screen.queryByRole('button', { name: /Continue/i });
+    const passwordInput = screen.queryByLabelText(/^password$/i);
+    const loginButton = screen.queryByRole('button', { name: /log in/i });
+
+    expect(usernameInput).toBeInTheDocument();
+    expect(continueButton).not.toBeInTheDocument();
+    expect(passwordInput).toBeInTheDocument();
+    expect(loginButton).toBeInTheDocument();
+  });
+
+  it('should render password field hidden but present for autofill when showPasswordOnSeparateScreen config is true (default)', async () => {
+    mockUseConfig.mockReturnValue({
+      ...mockConfig,
+    });
+
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+
+    const usernameInput = screen.queryByRole('textbox', { name: /username/i });
+    const continueButton = screen.queryByRole('button', { name: /Continue/i });
+    const passwordInput = screen.queryByLabelText(/^password$/i);
+    const loginButton = screen.queryByRole('button', { name: /log in/i });
+
+    expect(usernameInput).toBeInTheDocument();
+    expect(continueButton).toBeInTheDocument();
+    expect(passwordInput).toBeInTheDocument();
+    expect(passwordInput).toHaveAttribute('aria-hidden', 'true');
+    expect(passwordInput).toHaveAttribute('tabIndex', '-1');
+    expect(loginButton).not.toBeInTheDocument();
+  });
+
+  it('should be able to login when the showPasswordOnSeparateScreen config is false', async () => {
+    mockLogin.mockResolvedValue({ some: 'data' } as unknown as SessionStore);
+    mockUseConfig.mockReturnValue({
+      ...mockConfig,
+      showPasswordOnSeparateScreen: false,
+    });
+    const user = userEvent.setup();
+    mockLogin.mockClear();
+
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+
+    const usernameInput = screen.getByRole('textbox', { name: /username/i });
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    const loginButton = screen.getByRole('button', { name: /log in/i });
+
+    await user.type(usernameInput, 'yoshi');
+    await user.type(passwordInput, 'no-tax-fraud');
+    await user.click(loginButton);
+
+    await waitFor(() => expect(refetchCurrentUser).toHaveBeenCalledWith('yoshi', 'no-tax-fraud'));
+  });
+
+  it('should focus the username input', async () => {
+    mockUseConfig.mockReturnValue({
+      ...mockConfig,
+    });
+
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+
+    const usernameInput = screen.getByRole('textbox', { name: /username/i });
+    expect(usernameInput).toHaveFocus();
+  });
+
+  it('should focus the password input in the password screen', async () => {
+    const user = userEvent.setup();
+    mockUseConfig.mockReturnValue({
+      ...mockConfig,
+    });
+
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+
+    const usernameInput = screen.getByRole('textbox', { name: /username/i });
+    const continueButton = screen.getByRole('button', { name: /Continue/i });
+
+    await user.type(usernameInput, 'yoshi');
+    await user.click(continueButton);
+
+    const passwordInput = screen.getByLabelText(/^password$/i);
+    expect(passwordInput).toHaveFocus();
+  });
+
+  it('should focus the username input when the showPasswordOnSeparateScreen config is false', async () => {
+    mockUseConfig.mockReturnValue({
+      ...mockConfig,
+      showPasswordOnSeparateScreen: false,
+    });
+
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+
+    const usernameInput = screen.getByRole('textbox', { name: /username/i });
+
+    expect(usernameInput).toHaveFocus();
+  });
+});

package/src/login.resource.ts

@@ -0,0 +1,147 @@
+import { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import useSwrInfinite, { type SWRInfiniteResponse } from 'swr/infinite';
+import useSwrImmutable from 'swr/immutable';
+import {
+  fhirBaseUrl,
+  openmrsFetch,
+  refetchCurrentUser,
+  restBaseUrl,
+  type FetchResponse,
+  type Session,
+  useDebounce,
+} from '@openmrs/esm-framework';
+import type { LocationEntry, LocationResponse } from './types';
+
+// "swr/infinite" doesn't export InfiniteKeyedMutator directly
+type InfiniteKeyedMutator<T> = SWRInfiniteResponse<T extends (infer I)[] ? I : T>['mutate'];
+
+interface LoginLocationData {
+  error: Error;
+  hasMore: boolean;
+  isLoading: boolean;
+  loadingNewData: boolean;
+  locations: Array<LocationEntry>;
+  mutate: InfiniteKeyedMutator<FetchResponse<LocationResponse>[]>;
+  setPage: (size: number | ((_size: number) => number)) => Promise<FetchResponse<LocationResponse>[]>;
+  totalResults: number;
+}
+
+export function useLoginLocations(
+  count: number = 0,
+  searchQuery: string = '',
+  useLoginLocationTag: boolean,
+): LoginLocationData {
+  const { t } = useTranslation();
+  const debouncedSearchQuery = useDebounce(searchQuery);
+
+  function constructUrl(page: number, prevPageData: FetchResponse<LocationResponse>) {
+    if (prevPageData) {
+      const nextLink = prevPageData.data?.link?.find((link) => link.relation === 'next');
+
+      if (!nextLink) {
+        return null;
+      }
+
+      const nextUrl = new URL(nextLink.url);
+      // default for production
+      if (nextUrl.origin === window.location.origin) {
+        return nextLink.url;
+      }
+
+      // in development, the request should be funnelled through the local proxy
+      return new URL(
+        `${nextUrl.pathname}${nextUrl.search ? `?${nextUrl.search}` : ''}`,
+        window.location.origin,
+      ).toString();
+    }
+
+    let url = `${fhirBaseUrl}/Location?`;
+    let urlSearchParameters = new URLSearchParams();
+    urlSearchParameters.append('_summary', 'data');
+
+    if (count) {
+      urlSearchParameters.append('_count', '' + count);
+    }
+
+    if (page) {
+      urlSearchParameters.append('_getpagesoffset', '' + page * count);
+    }
+
+    if (useLoginLocationTag) {
+      urlSearchParameters.append('_tag', 'Login Location');
+    }
+
+    if (typeof debouncedSearchQuery === 'string' && debouncedSearchQuery != '') {
+      urlSearchParameters.append('name:contains', debouncedSearchQuery);
+    }
+
+    return url + urlSearchParameters.toString();
+  }
+
+  const { data, isLoading, isValidating, setSize, error, mutate } = useSwrInfinite<
+    FetchResponse<LocationResponse>,
+    Error
+  >(constructUrl, openmrsFetch);
+
+  useEffect(() => {
+    if (error) {
+      console.error(error);
+    }
+  }, [error]);
+
+  const memoizedLocations = useMemo(() => {
+    return {
+      locations: data?.length ? data?.flatMap((entries) => entries?.data?.entry ?? []) : null,
+      isLoading,
+      totalResults: data?.[0]?.data?.total ?? null,
+      hasMore: data?.length ? data?.[data.length - 1]?.data?.link?.some((link) => link.relation === 'next') : false,
+      loadingNewData: isValidating,
+      setPage: setSize,
+      error,
+      mutate,
+    };
+  }, [isLoading, data, isValidating, setSize, error, mutate]);
+
+  return memoizedLocations;
+}
+
+export async function performLogin(username: string, password: string): Promise<{ data: Session }> {
+  const abortController = new AbortController();
+  const token = window.btoa(`${username}:${password}`);
+  const url = `${restBaseUrl}/session`;
+
+  return openmrsFetch(url, {
+    headers: {
+      Authorization: `Basic ${token}`,
+    },
+    signal: abortController.signal,
+  }).then((res) => {
+    refetchCurrentUser();
+    return res;
+  });
+}
+export function useValidateLocationUuid(userPreferredLocationUuid: string) {
+  const url = userPreferredLocationUuid ? `${fhirBaseUrl}/Location?_id=${userPreferredLocationUuid}` : null;
+  const { data, error, isLoading } = useSwrImmutable<FetchResponse<LocationResponse>>(url, openmrsFetch, {
+    shouldRetryOnError(err) {
+      if (err?.response?.status) {
+        return err.response.status >= 500;
+      }
+
+      return false;
+    },
+  });
+
+  const results = useMemo(
+    () => ({
+      isLocationValid: data?.ok && data?.data.total > 0,
+      defaultLocation: data?.data?.entry ?? [],
+      error,
+      isLoading,
+    }),
+    [data, isLoading, error],
+  );
+
+  return results;
+}

package/src/logo.component.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { interpolateUrl, useConfig } from '@openmrs/esm-framework';
+import { type TFunction } from 'i18next';
+import { type ConfigSchema } from './config-schema';
+import styles from './login/login.scss';
+import taifaCare from './assets/Taifa-Care.png';
+import amrsLogo from './assets/ampath-logo.png';
+
+const Logo: React.FC<{ t: TFunction }> = ({ t }) => {
+  const { logo } = useConfig<ConfigSchema>();
+  return (
+    <>
+      <img alt={logo.alt ? t(logo.alt) : t('openmrsLogo', 'OpenMRS logo')} className={styles.logoImg} src={taifaCare} />
+      <span className={styles.poweredBy}>
+        {t('poweredBy', 'Powered by AMRS')}{' '}
+        <img src={amrsLogo} alt={t('taifaCare', 'TAIFA CARE logo')} className={styles.poweredByLogo} />
+      </span>
+    </>
+  );
+};
+
+export default Logo;