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

package/src/location-picker/location-picker.test.tsx

@@ -0,0 +1,341 @@
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  openmrsFetch,
+  setSessionLocation,
+  setUserProperties,
+  showSnackbar,
+  useConfig,
+  useSession,
+  type LoggedInUser,
+  type Session,
+  type FetchResponse,
+} from '@openmrs/esm-framework';
+import {
+  mockLoginLocations,
+  validatingLocationFailureResponse,
+  validatingLocationSuccessResponse,
+} from '../../__mocks__/locations.mock';
+import { mockConfig } from '../../__mocks__/config.mock';
+import renderWithRouter from '../test-helpers/render-with-router';
+import LocationPickerView from './location-picker-view.component';
+
+const fistLocation = {
+  uuid: 'uuid_1',
+  name: 'location_1',
+};
+
+const secondLocation = {
+  uuid: 'uuid_2',
+  name: 'location_2',
+};
+
+const invalidLocationUuid = '2gf1b7d4-c865-4178-82b0-5932e51503d6';
+const userUuid = '90bd24b3-e700-46b0-a5ef-c85afdfededd';
+
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockUseConfig = jest.mocked(useConfig);
+const mockUseSession = jest.mocked(useSession);
+const mockSetSessionLocation = jest.mocked(setSessionLocation);
+const mockSetUserProperties = jest.mocked(setUserProperties);
+const mockShowSnackbar = jest.mocked(showSnackbar);
+
+describe('LocationPickerView', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue(mockConfig);
+
+    mockUseSession.mockReturnValue({
+      user: {
+        display: 'Testy McTesterface',
+        uuid: '90bd24b3-e700-46b0-a5ef-c85afdfededd',
+        userProperties: {},
+      } as LoggedInUser,
+    } as Session);
+
+    const urlResponseMap: Record<string, FetchResponse<unknown>> = {
+      [`/ws/fhir2/R4/Location?_id=${fistLocation.uuid}`]: validatingLocationSuccessResponse as FetchResponse<unknown>,
+      [`/ws/fhir2/R4/Location?_id=${invalidLocationUuid}`]: validatingLocationFailureResponse as FetchResponse<unknown>,
+    };
+
+    mockOpenmrsFetch.mockImplementation(
+      async (url) => urlResponseMap[url] ?? (mockLoginLocations as FetchResponse<unknown>),
+    );
+
+    mockSetSessionLocation.mockResolvedValue(undefined);
+  });
+
+  it('renders the welcome message and location selection form', () => {
+    renderWithRouter(LocationPickerView, {
+      currentLocationUuid: 'some-location-uuid',
+      hideWelcomeMessage: false,
+    });
+
+    expect(screen.getByText(/welcome testy mctesterface/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/select your location from the list below. use the search bar to find your location/i),
+    ).toBeInTheDocument();
+  });
+
+  it('disables the confirm button when no location is selected', () => {
+    renderWithRouter(LocationPickerView, {});
+
+    const confirmButton = screen.getByRole('button', { name: /confirm/i });
+    expect(confirmButton).toBeDisabled();
+  });
+
+  it('enables the confirm button when a location is selected', async () => {
+    const user = userEvent.setup();
+    renderWithRouter(LocationPickerView, {});
+
+    const confirmButton = screen.getByRole('button', { name: /confirm/i });
+    expect(confirmButton).toBeDisabled();
+
+    const location = await screen.findByRole('radio', { name: fistLocation.name });
+    await user.click(location);
+
+    expect(confirmButton).toBeEnabled();
+  });
+
+  describe('Saving location preference', () => {
+    it('allows user to save their preferred location for future logins', async () => {
+      const user = userEvent.setup();
+
+      renderWithRouter(LocationPickerView, {});
+
+      const location = await screen.findByRole('radio', { name: fistLocation.name });
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
+      const submitButton = screen.getByRole('button', { name: /confirm/i });
+
+      await user.click(location);
+      expect(submitButton).toBeEnabled();
+
+      await user.click(checkbox);
+      expect(checkbox).toBeChecked();
+
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).toHaveBeenCalledWith(userUuid, {
+        defaultLocation: fistLocation.uuid,
+      });
+
+      await waitFor(() => {
+        expect(mockShowSnackbar).toHaveBeenCalledWith(
+          expect.objectContaining({
+            kind: 'success',
+            title: 'Location saved',
+            subtitle: 'Your preferred location has been saved for future logins',
+          }),
+        );
+      });
+    });
+
+    it('does not save preference when user submits without checking the checkbox', async () => {
+      const user = userEvent.setup();
+
+      renderWithRouter(LocationPickerView, {});
+
+      const location = await screen.findByRole('radio', { name: fistLocation.name });
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
+      const submitButton = screen.getByRole('button', { name: /confirm/i });
+
+      await user.click(location);
+      expect(checkbox).not.toBeChecked();
+
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).not.toHaveBeenCalled();
+      expect(mockShowSnackbar).not.toHaveBeenCalled();
+    });
+
+    it('automatically redirects when user has a valid saved location preference', async () => {
+      const validLocationUuid = fistLocation.uuid;
+      mockUseSession.mockReturnValue({
+        user: {
+          display: 'Testy McTesterface',
+          uuid: userUuid,
+          userProperties: {
+            defaultLocation: validLocationUuid,
+          },
+        } as LoggedInUser,
+      } as Session);
+
+      renderWithRouter(LocationPickerView, {});
+
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(validLocationUuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).not.toHaveBeenCalled();
+    });
+
+    it('shows location picker when saved location preference is invalid', async () => {
+      mockUseSession.mockReturnValue({
+        user: {
+          display: 'Testy McTesterface',
+          uuid: userUuid,
+          userProperties: {
+            defaultLocation: invalidLocationUuid,
+          },
+        } as LoggedInUser,
+      } as Session);
+
+      renderWithRouter(LocationPickerView, {});
+
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
+      expect(checkbox).toBeChecked();
+
+      expect(screen.getByRole('button', { name: /confirm/i })).toBeInTheDocument();
+      expect(mockSetSessionLocation).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Updating location preference', () => {
+    it('shows location picker when update=true is in URL params', () => {
+      mockUseSession.mockReturnValue({
+        user: {
+          display: 'Testy McTesterface',
+          uuid: userUuid,
+          userProperties: {
+            defaultLocation: fistLocation.uuid,
+          },
+        } as LoggedInUser,
+      } as Session);
+
+      renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
+
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
+      expect(checkbox).toBeChecked();
+
+      expect(screen.getByRole('button', { name: /confirm/i })).toBeInTheDocument();
+      expect(mockSetSessionLocation).not.toHaveBeenCalled();
+    });
+
+    it('allows user to remove saved preference by unchecking the checkbox', async () => {
+      const user = userEvent.setup();
+
+      mockUseSession.mockReturnValue({
+        user: {
+          display: 'Testy McTesterface',
+          uuid: userUuid,
+          userProperties: {
+            defaultLocation: '1ce1b7d4-c865-4178-82b0-5932e51503d6',
+          },
+        } as LoggedInUser,
+      } as Session);
+
+      renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
+
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
+      expect(checkbox).toBeChecked();
+
+      const location = screen.getByRole('radio', { name: fistLocation.name });
+      await user.click(location);
+
+      expect(mockSetSessionLocation).not.toHaveBeenCalled();
+
+      await user.click(checkbox);
+      expect(checkbox).not.toBeChecked();
+
+      const submitButton = screen.getByRole('button', { name: /confirm/i });
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).toHaveBeenCalledWith(userUuid, {});
+
+      await waitFor(() => {
+        expect(mockShowSnackbar).toHaveBeenCalledWith(
+          expect.objectContaining({
+            kind: 'success',
+            title: 'Location preference removed',
+            subtitle: 'You will need to select a location on each login',
+          }),
+        );
+      });
+    });
+
+    it('allows user to update their preferred location', async () => {
+      const user = userEvent.setup();
+
+      mockUseSession.mockReturnValue({
+        user: {
+          display: 'Testy McTesterface',
+          uuid: userUuid,
+          userProperties: {
+            defaultLocation: fistLocation.uuid,
+          },
+        } as LoggedInUser,
+      } as Session);
+
+      renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
+
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
+      expect(checkbox).toBeChecked();
+
+      const location = await screen.findByRole('radio', { name: secondLocation.name });
+      const submitButton = screen.getByRole('button', { name: /confirm/i });
+
+      await user.click(location);
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(secondLocation.uuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).toHaveBeenCalledWith(userUuid, {
+        defaultLocation: secondLocation.uuid,
+      });
+
+      await waitFor(() => {
+        expect(mockShowSnackbar).toHaveBeenCalledWith(
+          expect.objectContaining({
+            kind: 'success',
+            title: 'Location updated',
+            subtitle: 'Your preferred login location has been updated',
+          }),
+        );
+      });
+    });
+
+    it('does not update preference when user selects the same location', async () => {
+      const user = userEvent.setup();
+
+      mockUseSession.mockReturnValue({
+        user: {
+          display: 'Testy McTesterface',
+          uuid: userUuid,
+          userProperties: {
+            defaultLocation: fistLocation.uuid,
+          },
+        } as LoggedInUser,
+      } as Session);
+
+      renderWithRouter(LocationPickerView, {}, { routes: ['?update=true'] });
+
+      const checkbox = screen.getByLabelText(/remember my location for future logins/i);
+      expect(checkbox).toBeChecked();
+
+      const location = await screen.findByRole('radio', { name: fistLocation.name });
+      const submitButton = screen.getByRole('button', { name: /confirm/i });
+
+      await user.click(location);
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockSetSessionLocation).toHaveBeenCalledWith(fistLocation.uuid, expect.anything());
+      });
+
+      expect(mockSetUserProperties).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/login/login.component.tsx

@@ -0,0 +1,350 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button, InlineLoading, InlineNotification, PasswordInput, TextInput, Tile } from '@carbon/react';
+import {
+  ArrowRightIcon,
+  getCoreTranslation,
+  refetchCurrentUser,
+  navigate as openmrsNavigate,
+  useConfig,
+  useConnectivity,
+  useSession,
+} from '@openmrs/esm-framework';
+import { type ConfigSchema } from '../config-schema';
+import Logo from '../logo.component';
+import styles from './login.scss';
+import { getEmail, getOtp } from '../resources/otp.resource';
+import { getOtpEnabledStatus } from '../utils/get-base-url';
+import image from '../assets/medicine.jpg';
+import openmrsLogo from '../assets/openmrs.jpg';
+import dhaLogo from '../assets/dha.png';
+import gokLogo from '../assets/gok.png';
+
+export interface LoginReferrer {
+  referrer?: string;
+}
+
+const Login: React.FC = () => {
+  const { showPasswordOnSeparateScreen, provider: loginProvider, links: loginLinks } = useConfig<ConfigSchema>();
+  const isLoginEnabled = useConnectivity();
+  const { t } = useTranslation();
+  const { user } = useSession();
+  const location = useLocation() as unknown as Omit<Location, 'state'> & {
+    state: LoginReferrer;
+  };
+  const navigate = useNavigate();
+
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState('');
+  const [showPasswordField, setShowPasswordField] = useState(false);
+  const passwordInputRef = useRef<HTMLInputElement>(null);
+  const usernameInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!user) {
+      if (loginProvider.type === 'oauth2') {
+        openmrsNavigate({ to: loginProvider.loginUrl });
+      } else if (!username && location.pathname === '/login/confirm') {
+        navigate('/login');
+      }
+    }
+  }, [username, navigate, location, user, loginProvider]);
+
+  useEffect(() => {
+    if (showPasswordOnSeparateScreen) {
+      if (showPasswordField) {
+        if (!passwordInputRef.current?.value) {
+          passwordInputRef.current?.focus();
+        }
+      } else {
+        usernameInputRef.current?.focus();
+      }
+    }
+  }, [showPasswordField, showPasswordOnSeparateScreen]);
+
+  const continueLogin = useCallback(() => {
+    const currentUsername = usernameInputRef.current?.value?.trim();
+    if (currentUsername) {
+      // If credentials were autofilled, input onChange might not have been called
+      setUsername(currentUsername);
+      setShowPasswordField(true);
+    } else {
+      usernameInputRef.current?.focus();
+    }
+  }, []);
+
+  const changeUsername = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => setUsername(evt.target.value), []);
+  const changePassword = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => setPassword(evt.target.value), []);
+
+  const handleSubmit = useCallback(
+    async (evt: React.FormEvent<HTMLFormElement>) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+
+      // If credentials were autofilled, input onChange might not have been called
+      const currentUsername = usernameInputRef.current?.value?.trim() || username;
+      const currentPassword = passwordInputRef.current?.value || password;
+      const isOtpEnabled: boolean = await getOtpEnabledStatus();
+
+      if (showPasswordOnSeparateScreen && !showPasswordField) {
+        continueLogin();
+        return false;
+      }
+
+      if (!currentPassword || !currentPassword.trim()) {
+        passwordInputRef.current?.focus();
+        return false;
+      }
+
+      try {
+        setIsLoggingIn(true);
+        const sessionStore = await refetchCurrentUser(currentUsername, currentPassword);
+        const session = sessionStore.session;
+        const authenticated = sessionStore?.session?.authenticated;
+
+        if (isOtpEnabled === true) {
+          if (authenticated) {
+            if (session.sessionLocation) {
+              let to = loginLinks?.loginSuccess || '/home';
+              if (location?.state?.referrer) {
+                if (location.state.referrer.startsWith('/')) {
+                  to = `\${openmrsSpaBase}${location.state.referrer}`;
+                } else {
+                  to = location.state.referrer;
+                }
+              }
+              const uuid = session.user.person.uuid;
+              try {
+                const email = await getEmail(uuid, username, password);
+                await getOtp(username, password, email);
+                navigate('otp', {
+                  state: {
+                    username,
+                    password,
+                    referrer: location?.state?.referrer,
+                  },
+                });
+              } catch (err: any) {
+                setErrorMessage(err.message);
+                return;
+              }
+            } else if (!session.sessionLocation) {
+              const uuid = session.user.person.uuid;
+              try {
+                await getOtp(username, password, uuid);
+                navigate('otp', {
+                  state: {
+                    username,
+                    password,
+                    referrer: location?.state?.referrer,
+                  },
+                });
+              } catch (err: any) {
+                setErrorMessage(err.message);
+                return;
+              }
+            }
+          } else {
+            setErrorMessage(t('invalidCredentials', 'Invalid username or password'));
+            setUsername('');
+            setPassword('');
+            if (showPasswordOnSeparateScreen) {
+              setShowPasswordField(false);
+            }
+          }
+        } else {
+          if (authenticated) {
+            if (session.sessionLocation) {
+              let to = loginLinks?.loginSuccess || '/home';
+              if (location?.state?.referrer) {
+                if (location.state.referrer.startsWith('/')) {
+                  to = `\${openmrsSpaBase}${location.state.referrer}`;
+                } else {
+                  to = location.state.referrer;
+                }
+              }
+
+              openmrsNavigate({ to });
+            } else {
+              navigate('/login/location');
+            }
+          } else {
+            setErrorMessage(t('invalidCredentials', 'Invalid username or password'));
+            setUsername('');
+            setPassword('');
+            if (showPasswordOnSeparateScreen) {
+              setShowPasswordField(false);
+            }
+          }
+        }
+
+        return true;
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          setErrorMessage(error.message);
+        } else {
+          setErrorMessage(t('invalidCredentials', 'Invalid username or password'));
+        }
+        setUsername('');
+        setPassword('');
+        if (showPasswordOnSeparateScreen) {
+          setShowPasswordField(false);
+        }
+      } finally {
+        setIsLoggingIn(false);
+      }
+    },
+    [
+      username,
+      password,
+      navigate,
+      showPasswordOnSeparateScreen,
+      showPasswordField,
+      loginLinks,
+      location,
+      t,
+      continueLogin,
+    ],
+  );
+
+  if (!loginProvider || loginProvider.type === 'basic') {
+    return (
+      <>
+        <div className={styles.wrapperContainer}>
+          <div className={styles.logoContainer}>
+            <div className={styles.container}>
+              <Tile className={styles.loginCard}>
+                {errorMessage && (
+                  <div className={styles.errorMessage}>
+                    <InlineNotification
+                      kind="error"
+                      subtitle={errorMessage}
+                      title={getCoreTranslation('error')}
+                      onClick={() => setErrorMessage('')}
+                    />
+                  </div>
+                )}
+                <div className={styles.center}>
+                  <Logo t={t} />
+                </div>
+                <form onSubmit={handleSubmit}>
+                  <div className={styles.inputGroup}>
+                    <TextInput
+                      id="username"
+                      type="text"
+                      name="username"
+                      autoComplete="username"
+                      labelText={t('username', 'Username')}
+                      value={username}
+                      onChange={changeUsername}
+                      ref={usernameInputRef}
+                      required
+                      autoFocus
+                    />
+                    {showPasswordOnSeparateScreen ? (
+                      <>
+                        <div className={showPasswordField ? undefined : styles.hiddenPasswordField}>
+                          <PasswordInput
+                            id="password"
+                            labelText={t('password', 'Password')}
+                            name="password"
+                            autoComplete="current-password"
+                            onChange={changePassword}
+                            ref={passwordInputRef}
+                            required
+                            value={password}
+                            showPasswordLabel={t('showPassword', 'Show password')}
+                            invalidText={t('validValueRequired', 'A valid value is required')}
+                            aria-hidden={!showPasswordField}
+                            tabIndex={showPasswordField ? 0 : -1}
+                          />
+                        </div>
+                        {showPasswordField ? (
+                          <Button
+                            type="submit"
+                            className={styles.continueButton}
+                            renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
+                            iconDescription={t('loginButtonIconDescription', 'Log in button')}
+                            disabled={!isLoginEnabled || isLoggingIn}
+                          >
+                            {isLoggingIn ? (
+                              <InlineLoading
+                                className={styles.loader}
+                                description={t('loggingIn', 'Logging in') + '...'}
+                              />
+                            ) : (
+                              t('login', 'Log in')
+                            )}
+                          </Button>
+                        ) : (
+                          <Button
+                            type="submit"
+                            className={styles.continueButton}
+                            renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
+                            iconDescription="Continue to password"
+                            onClick={(evt) => {
+                              evt.preventDefault();
+                              continueLogin();
+                            }}
+                            disabled={!isLoginEnabled}
+                          >
+                            {t('continue', 'Continue')}
+                          </Button>
+                        )}
+                      </>
+                    ) : (
+                      <>
+                        <PasswordInput
+                          id="password"
+                          labelText={t('password', 'Password')}
+                          name="password"
+                          autoComplete="current-password"
+                          onChange={changePassword}
+                          ref={passwordInputRef}
+                          required
+                          value={password}
+                          showPasswordLabel={t('showPassword', 'Show password')}
+                          invalidText={t('validValueRequired', 'A valid value is required')}
+                        />
+                        <Button
+                          type="submit"
+                          className={styles.continueButton}
+                          renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
+                          iconDescription="Log in"
+                          disabled={!isLoginEnabled || isLoggingIn}
+                        >
+                          {isLoggingIn ? (
+                            <InlineLoading
+                              className={styles.loader}
+                              description={t('loggingIn', 'Logging in') + '...'}
+                            />
+                          ) : (
+                            t('login', 'Log in')
+                          )}
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </form>
+              </Tile>
+            </div>
+            <div className={styles.logoSection}>
+              <div className={styles.leftLogos}>
+                <img src={gokLogo} alt="GOK logo" className={styles.supportingLogos} />
+                <img src={dhaLogo} alt="DHA logo" className={styles.dhaLogo} />
+              </div>
+              <img src={openmrsLogo} alt="OpenMRS logo" className={styles.openmsrsLogo} />
+            </div>
+          </div>
+          <img className={styles.image} src={image} alt="TAIFA CARE" />
+        </div>
+      </>
+    );
+  }
+  return null;
+};
+
+export default Login;