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

package/src/logout/logout.extension.tsx

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, SwitcherItem } from '@carbon/react';
+import { navigate } from '@openmrs/esm-framework';
+import styles from './logout.scss';
+
+const Logout: React.FC = () => {
+  const { t } = useTranslation();
+
+  const handleLogout = useCallback(() => {
+    navigate({ to: '${openmrsSpaBase}/logout' });
+  }, []);
+
+  return (
+    <SwitcherItem aria-label={t('Logout', 'Logout')}>
+      <Button className={styles.logout} onClick={handleLogout} kind="ghost">
+        {t('Logout', 'Logout')}
+      </Button>
+    </SwitcherItem>
+  );
+};
+
+export default Logout;

package/src/logout/logout.scss

@@ -0,0 +1,12 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+button.logout {
+  color: $field-01 !important;
+  font-size: layout.$spacing-05;
+  width: 16rem;
+
+  &:hover {
+    background-color: inherit;
+  }
+}

package/src/otp/otp.component.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Button, InlineNotification, Loading } from '@carbon/react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+import styles from './otp.module.scss';
+import OTPInput from '../common/otp/otp.component';
+import ResendTimer from '../common/resend-timer/resend-timer.component';
+import Logo from '../logo.component';
+import { verifyOtp } from '../resources/otp.resource';
+import { refetchCurrentUser } from '@openmrs/esm-framework';
+
+import image from '../assets/medicine.jpg';
+
+const OtpComponent: React.FC = () => {
+  const [otpValue, setOtpValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const location = useLocation();
+
+  const { username, password } = location.state || {};
+
+  const handleOtpChange = (val: React.SetStateAction<string>) => {
+    setOtpValue(val);
+  };
+
+  const handleVerify = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await verifyOtp(username, password, otpValue);
+
+      if (res.data.success) {
+        const sessionStore = await refetchCurrentUser(username, password);
+        const session = sessionStore.session;
+
+        if (!session.sessionLocation) {
+          navigate('/login/location');
+          return;
+        }
+
+        let to = '/home';
+        if (location.state?.referrer) {
+          to = location.state.referrer.startsWith('/')
+            ? `\${openmrsSpaBase}${location.state.referrer}`
+            : location.state.referrer;
+        }
+
+        navigate(to);
+      } else {
+        setError(res.data.message);
+      }
+    } catch (error) {
+      setError(error?.message || error?.attributes?.error || 'Invalid OTP or credentials');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    const fallback = 'login';
+    if (window.history.length > 1) {
+      navigate(-1);
+    } else {
+      navigate(fallback, { replace: true });
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.wrapperContainer}>
+        <div className={styles.leftSide}>
+          <div className={styles.logo}>
+            <Logo t={t} />
+          </div>
+          <div className={styles.container}>
+            <h2 className={styles.header}>OTP</h2>
+            <p>
+              Please Check your email <br /> and enter your One Time Password
+            </p>
+            <OTPInput length={5} onChange={handleOtpChange} />
+            {error && (
+              <InlineNotification
+                kind="error"
+                title="Error"
+                subtitle={error}
+                lowContrast
+                onClose={() => setError(null)}
+              />
+            )}
+            <Button className={styles.button} onClick={handleVerify}>
+              {isLoading ? <Loading /> : 'Verify'}
+            </Button>
+            <Button className={styles.button} onClick={handleCancel}>
+              Cancel
+            </Button>
+            <ResendTimer username={username} password={password} />
+          </div>
+        </div>
+        <img className={styles.image} src={image} alt="TAIFA CARE" />
+      </div>
+    </>
+  );
+};
+
+export default OtpComponent;

package/src/otp/otp.module.scss

@@ -0,0 +1,44 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-left: 5rem;
+}
+.leftSide {
+  margin-top: 10rem;
+  margin-left: 10rem;
+}
+
+.button {
+  width: 15rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.header {
+  font-weight: bold;
+}
+
+.logo {
+  margin-left: 5rem;
+  width: 15rem;
+}
+
+.wrapperContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 10rem;
+}
+
+.image {
+  width: 54rem;
+  height: 55rem;
+  max-height: 60rem;
+  object-fit: cover;
+  flex-shrink: 0;
+}

package/src/redirect-logout/logout.resource.ts

@@ -0,0 +1,15 @@
+import { mutate } from 'swr';
+import { clearCurrentUser, openmrsFetch, refetchCurrentUser, restBaseUrl } from '@openmrs/esm-framework';
+
+export async function performLogout() {
+  await openmrsFetch(`${restBaseUrl}/session`, {
+    method: 'DELETE',
+  });
+
+  // clear the SWR cache on logout, do not revalidate
+  // taken from the SWR docs
+  mutate(() => true, undefined, { revalidate: false });
+
+  clearCurrentUser();
+  await refetchCurrentUser();
+}

package/src/redirect-logout/redirect-logout.component.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { navigate, setUserLanguage, useConfig, useConnectivity, useSession } from '@openmrs/esm-framework';
+import { clearHistory } from '@openmrs/esm-framework/src/internal';
+import { type ConfigSchema } from '../config-schema';
+import { performLogout } from './logout.resource';
+
+const RedirectLogout: React.FC = () => {
+  const config = useConfig<ConfigSchema>();
+  const isLoginEnabled = useConnectivity();
+  const session = useSession();
+
+  useEffect(() => {
+    clearHistory();
+    if (!session.authenticated || !isLoginEnabled) {
+      if (config.provider.type !== 'oauth2') {
+        navigate({ to: '${openmrsSpaBase}/login' });
+      }
+    } else {
+      performLogout()
+        .then(() => {
+          const defaultLanguage = document.documentElement.getAttribute('data-default-lang');
+
+          setUserLanguage({
+            locale: defaultLanguage,
+            authenticated: false,
+            sessionId: '',
+          });
+
+          if (config.provider.type !== 'oauth2') {
+            navigate({ to: '${openmrsSpaBase}/login' });
+          }
+        })
+        .catch((error) => {
+          console.error('Logout failed:', error);
+        });
+    }
+  }, [config, isLoginEnabled, session]);
+
+  return null;
+};
+
+export default RedirectLogout;

package/src/redirect-logout/redirect-logout.test.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { mutate } from 'swr';
+import { render, waitFor } from '@testing-library/react';
+import {
+  type FetchResponse,
+  type Session,
+  clearCurrentUser,
+  navigate,
+  openmrsFetch,
+  refetchCurrentUser,
+  restBaseUrl,
+  setUserLanguage,
+  useConfig,
+  useConnectivity,
+  useSession,
+} from '@openmrs/esm-framework';
+import RedirectLogout from './redirect-logout.component';
+
+jest.mock('swr', () => ({
+  mutate: jest.fn(),
+}));
+
+const mockClearCurrentUser = jest.mocked(clearCurrentUser);
+const mockNavigate = jest.mocked(navigate);
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockRefetchCurrentUser = jest.mocked(refetchCurrentUser);
+const mockSetUserLanguage = jest.mocked(setUserLanguage);
+const mockUseConfig = jest.mocked(useConfig);
+const mockUseConnectivity = jest.mocked(useConnectivity);
+const mockUseSession = jest.mocked(useSession);
+
+describe('RedirectLogout', () => {
+  beforeEach(() => {
+    mockUseConnectivity.mockReturnValue(true);
+    mockOpenmrsFetch.mockResolvedValue({} as FetchResponse<unknown>);
+
+    mockUseSession.mockReturnValue({
+      authenticated: true,
+      sessionId: 'xyz',
+    } as Session);
+
+    mockUseConfig.mockReturnValue({
+      provider: {
+        type: '',
+      },
+    });
+
+    Object.defineProperty(document, 'documentElement', {
+      configurable: true,
+      value: {
+        getAttribute: jest.fn().mockReturnValue('km'),
+      },
+    });
+  });
+
+  it('should redirect to login page upon logout', async () => {
+    render(<RedirectLogout />);
+
+    expect(mockOpenmrsFetch).toHaveBeenCalledWith(`${restBaseUrl}/session`, {
+      method: 'DELETE',
+    });
+
+    await waitFor(() => expect(mutate).toHaveBeenCalled());
+
+    expect(mockClearCurrentUser).toHaveBeenCalled();
+    expect(mockRefetchCurrentUser).toHaveBeenCalled();
+    expect(mockSetUserLanguage).toHaveBeenCalledWith({
+      locale: 'km',
+      authenticated: false,
+      sessionId: '',
+    });
+    expect(mockNavigate).toHaveBeenCalledWith({ to: '${openmrsSpaBase}/login' });
+  });
+
+  it('should not redirect if the configured provider is `oauth2`', async () => {
+    mockUseConfig.mockReturnValue({
+      provider: {
+        type: 'oauth2',
+      },
+    });
+
+    render(<RedirectLogout />);
+
+    expect(mockOpenmrsFetch).toHaveBeenCalledWith(`${restBaseUrl}/session`, {
+      method: 'DELETE',
+    });
+
+    await waitFor(() => expect(mutate).toHaveBeenCalled());
+
+    expect(mockClearCurrentUser).toHaveBeenCalled();
+    expect(mockRefetchCurrentUser).toHaveBeenCalled();
+    expect(mockSetUserLanguage).toHaveBeenCalledWith({
+      locale: 'km',
+      authenticated: false,
+      sessionId: '',
+    });
+    expect(mockNavigate).toHaveBeenCalledTimes(0);
+  });
+
+  it('should redirect to login if the session is already unauthenticated', async () => {
+    mockUseSession.mockReturnValue({
+      authenticated: false,
+    } as Session);
+
+    render(<RedirectLogout />);
+
+    expect(mockNavigate).toHaveBeenCalledWith({ to: '${openmrsSpaBase}/login' });
+  });
+
+  it('should redirect to login if the application is offline', async () => {
+    mockUseConnectivity.mockReturnValue(false);
+
+    render(<RedirectLogout />);
+
+    expect(mockNavigate).toHaveBeenCalledWith({ to: '${openmrsSpaBase}/login' });
+  });
+
+  it('should handle logout failure gracefully', async () => {
+    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mockOpenmrsFetch.mockRejectedValue(new Error('Logout failed'));
+
+    render(<RedirectLogout />);
+
+    await waitFor(() => {
+      expect(consoleError).toHaveBeenCalledWith('Logout failed:', new Error('Logout failed'));
+    });
+
+    consoleError.mockRestore();
+  });
+
+  it('should handle missing default language attribute', async () => {
+    Object.defineProperty(document, 'documentElement', {
+      configurable: true,
+      value: {
+        getAttribute: jest.fn().mockReturnValue(null),
+      },
+    });
+
+    render(<RedirectLogout />);
+
+    await waitFor(() => {
+      expect(mockSetUserLanguage).toHaveBeenCalledWith({
+        locale: null,
+        authenticated: false,
+        sessionId: '',
+      });
+    });
+  });
+
+  it('should handle config changes appropriately', async () => {
+    const { rerender } = render(<RedirectLogout />);
+
+    mockUseConfig.mockReturnValue({
+      provider: {
+        type: 'testProvider',
+      },
+    });
+
+    rerender(<RedirectLogout />);
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith({ to: '${openmrsSpaBase}/login' });
+    });
+  });
+
+  it('should not redirect to login if user is not authenticated and the provider is oauth2', async () => {
+    mockUseSession.mockReturnValue({
+      authenticated: false,
+    } as Session);
+    mockUseConfig.mockReturnValue({
+      provider: {
+        type: 'oauth2',
+      },
+    });
+
+    render(<RedirectLogout />);
+
+    expect(mockNavigate).toHaveBeenCalledTimes(0);
+  });
+});

package/src/resources/otp.resource.ts

@@ -0,0 +1,90 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl, getSubDomain } from '../utils/get-base-url';
+
+const EMAIL_ATTRIBUTE_TYPE_UUID = 'ecabe213-160b-11ef-ad65-a0d3c1fcd41c';
+
+export async function getEmail(uuid: string, username: string, password: string): Promise<string> {
+  const subDomain = await getSubDomain();
+  const credentials = window.btoa(`${username}:${password}`);
+  try {
+    if (!uuid) return;
+
+    const url = `${subDomain}/amrs/ws/rest/v1/person/${uuid}?v=custom:attributes`;
+
+    const res = await openmrsFetch(url, {
+      method: 'GET',
+      headers: {
+        Authorization: `Basic ${credentials}`,
+      },
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      throw new Error(data.message);
+    }
+
+    const emailAttr = data.attributes?.find(
+      (attr) =>
+        !attr.voided && attr.attributeType?.uuid === EMAIL_ATTRIBUTE_TYPE_UUID && typeof attr.value === 'string',
+    );
+
+    const email = emailAttr?.value;
+
+    if (email) {
+      return email;
+    } else {
+      throw new Error('Your email has not been configured. Please contact system administrator for assistance.');
+    }
+  } catch (error) {
+    throw new Error(error.message ?? 'Failed to fetch email');
+  }
+}
+
+export async function getOtp(username: string, password: string, email: string) {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const params = new URLSearchParams({ username, email });
+  const credentials = window.btoa(`${username}:${password}`);
+
+  try {
+    const url = `${etlBaseUrl}/otp?${params.toString()}`;
+
+    const res = await openmrsFetch(url, {
+      method: 'GET',
+      headers: {
+        Authorization: `Basic ${credentials}`,
+      },
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      throw new Error(data.message);
+    }
+
+    return data.data.message;
+  } catch (error) {
+    throw new Error(error.message);
+  }
+}
+
+export async function verifyOtp(username: string, password: string, otp: string) {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const url = etlBaseUrl + '/verify-otp';
+  const credentials = window.btoa(`${username}:${password}`);
+
+  const body = { username, otp };
+
+  const res = await openmrsFetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'Application/json',
+      Authorization: `Basic ${credentials}`,
+    },
+    body: JSON.stringify(body),
+  });
+
+  const data = await res.json();
+
+  return data;
+}

package/src/root.component.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import ChangePassword from "./change-password/change-password.component";
+import LocationPickerView from "./location-picker/location-picker-view.component";
+import Login from "./login/login.component";
+import RedirectLogout from "./redirect-logout/redirect-logout.component";
+import OtpComponent from "./otp/otp.component";
+
+const Root: React.FC = () => {
+  return (
+    <BrowserRouter basename={window.getOpenmrsSpaBase()}>
+      <Routes>
+        <Route path="login" element={<Login />} />
+        <Route path="login/confirm" element={<Login />} />
+        <Route path="login/location" element={<LocationPickerView />} />
+        <Route path="logout" element={<RedirectLogout />} />
+        <Route path="change-password" element={<ChangePassword />} />
+        <Route path="login/otp" element={<OtpComponent />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/routes.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": ">=2.2.0"
+  },
+  "pages": [
+    {
+      "component": "root",
+      "route": "login",
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "root",
+      "route": "logout",
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "root",
+      "route": "change-password",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "extensions": [
+    {
+      "name": "location-picker",
+      "slot": "location-picker",
+      "component": "locationPicker",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "logout-button",
+      "slot": "user-panel-bottom-slot",
+      "component": "logoutButton",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "password-changer",
+      "slot": "user-panel-slot",
+      "component": "changePasswordLink",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "location-changer",
+      "slot": "top-nav-info-slot",
+      "component": "changeLocationLink",
+      "online": true,
+      "offline": true,
+      "order": 1
+    }
+  ],
+  "modals": [
+    {
+      "name": "change-password-modal",
+      "component": "changePasswordModal"
+    }
+  ]
+}

package/src/setupTests.ts

@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom';
+
+declare global {
+  interface Window {
+    openmrsBase: string;
+    spaBase: string;
+  }
+}
+
+const { getComputedStyle } = window;
+window.getComputedStyle = (element) => getComputedStyle(element);
+window.openmrsBase = '/openmrs';
+window.spaBase = '/spa';
+window.getOpenmrsSpaBase = () => '/openmrs/spa/';
+window.HTMLElement.prototype.scrollIntoView = jest.fn();

package/src/test-helpers/render-with-router.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+
+export default function renderWithRouter<T = unknown>(
+  Component: React.JSXElementConstructor<T>,
+  props: T = {} as unknown as T,
+  { route = '/', routes = [route], routeParams = {} } = {},
+) {
+  return {
+    ...render(
+      <MemoryRouter initialEntries={routes} initialIndex={(route && routes?.indexOf(route)) || undefined}>
+        <Component {...props} />
+      </MemoryRouter>,
+    ),
+  };
+}

package/src/types.ts

@@ -0,0 +1,34 @@
+import { type FHIRLocationResource } from '@openmrs/esm-framework';
+
+export interface LocationResponse {
+  type: string;
+  total: number;
+  resourceType: string;
+  meta: {
+    lastUpdated: string;
+  };
+  link: Array<{
+    relation: string;
+    url: string;
+  }>;
+  id: string;
+  entry: Array<FHIRLocationResource>;
+}
+
+export interface LocationEntry {
+  resource: Resource;
+}
+
+export interface Resource {
+  id: string;
+  name: string;
+  resourceType: string;
+  status: 'active' | 'inactive';
+  meta?: {
+    tag?: Array<{
+      code: string;
+      display: string;
+      system: string;
+    }>;
+  };
+}

package/src/utils/get-base-url.ts

@@ -0,0 +1,17 @@
+import { getConfig } from '@openmrs/esm-framework';
+import { moduleName } from '../';
+
+export async function getEtlBaseUrl() {
+  const { etlBaseUrl } = await getConfig(moduleName);
+  return etlBaseUrl ?? null;
+}
+
+export async function getOtpEnabledStatus() {
+  const { enabled } = await getConfig(moduleName);
+  return enabled ?? null;
+}
+
+export async function getSubDomain() {
+  const { subDomain } = await getConfig(moduleName);
+  return subDomain ?? null;
+}