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

package/src/otp/otp.component.tsx

@@ -0,0 +1,105 @@
+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.scss";
+import OTPInput from "../common/otp/otp.component";
+import ResendTimer from "../common/resend-timer/resend-timer.component";
+import Footer from "../footer.component";
+import Logo from "../logo.component";
+import { verifyOtp } from "../resources/otp.resource";
+import { refetchCurrentUser } from "@openmrs/esm-framework";
+
+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 = () => {
+    navigate(-1);
+  };
+  return (
+    <>
+      <div className={styles.wrapperContainer}>
+        <div>
+          <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} />
+            <Footer />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default OtpComponent;

package/src/otp/otp.scss

@@ -0,0 +1,46 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-left: 5rem;
+}
+
+.button {
+  width: 15rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.header {
+  font-weight: bold;
+}
+
+.logo {
+  margin-left: 5rem;
+  width: 15rem;
+}
+
+.wrapperContainer {
+  display: flex;
+  gap: 5rem;
+}
+
+.rightSide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50rem;
+}
+
+.image {
+  width: 60rem;
+  height: 40rem;
+  border-radius: 5px;
+  // max-height: 40rem;
+  // object-fit: contain;
+}

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,51 @@
+import { getEtlBaseUrl } from "../utils/get-base-url";
+
+const etlBaseUrl = "https://staging.ampath.or.ke/etl-staging/etl/";
+
+export async function getOtp(username: string, password: string) {
+  // const etlBaseUrl = await getEtlBaseUrl();
+  const params = new URLSearchParams({ username });
+  const credentials = window.btoa(`${username}:${password}`);
+
+  const url = `${etlBaseUrl}otp?${params.toString()}`;
+
+  const res = await fetch(url, {
+    method: "GET",
+    headers: {
+      Authorization: `Basic ${credentials}`,
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch OTP");
+  }
+
+  const data = await res.json();
+
+  return data;
+}
+
+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 fetch(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,7 @@
+import { getConfig } from "@openmrs/esm-framework";
+import { moduleName } from "../..";
+
+export async function getEtlBaseUrl() {
+  const { etlBaseUrl } = await getConfig(moduleName);
+  return etlBaseUrl ?? null;
+}

package/translations/am.json

@@ -0,0 +1,41 @@
+{
+  "builtWith": "Built with",
+  "cancel": "ሰርዝ",
+  "change": "Change",
+  "changeLocation": "Change location",
+  "changePassword": "Change password",
+  "changingPassword": "Changing password",
+  "confirmPassword": "Confirm new password",
+  "continue": "Continue",
+  "errorChangingPassword": "Error changing password",
+  "footerlogo": "Footer Logo",
+  "invalidCredentials": "Invalid username or password",
+  "learnMore": "Learn more",
+  "locationPreferenceRemoved": "Login location preference removed",
+  "locationPreferenceRemovedMessage": "You will need to select a location on each login",
+  "locationSaved": "Location saved",
+  "locationSaveMessage": "Your preferred location has been saved for future logins",
+  "locationUpdated": "Location updated",
+  "locationUpdateMessage": "Your preferred login location has been updated",
+  "loggingIn": "Logging in",
+  "login": "Log in",
+  "loginButtonIconDescription": "Log in button",
+  "Logout": "Logout",
+  "newPassword": "New password",
+  "newPasswordRequired": "New password is required",
+  "oldPassword": "Old password",
+  "oldPasswordRequired": "Old password is required",
+  "openmrsLogo": "OpenMRS logo",
+  "password": "Password",
+  "passwordChangedSuccessfully": "Password changed successfully",
+  "passwordConfirmationRequired": "Password confirmation is required",
+  "passwordsDoNotMatch": "Passwords do not match",
+  "poweredBySubtext": "An open-source medical record system and global community",
+  "rememberLocationForFutureLogins": "Remember my location for future logins",
+  "selectYourLocation": "Select your location from the list below. Use the search bar to find your location.",
+  "showPassword": "Show password",
+  "submitting": "Submitting",
+  "username": "Username",
+  "validValueRequired": "A valid value is required",
+  "welcome": "Welcome"
+}