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

package/src/login/login.scss

@@ -2,6 +2,12 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
+/* Hide OpenMRS top nav on login */
+:global(.hide-top-nav #omrs-top-nav-app-container) {
+  display: none;
+  height: 0;
+}
+
 .bodyShort01 {
   @include type.type-style('body-compact-01');
 }
@@ -34,10 +40,12 @@
 
 .container {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  flex-direction: row;
+  justify-content: flex-start;
   align-items: center;
   position: relative;
+  margin-left: 10rem;
+  min-height: 100vh;
 }
 
 .center {
@@ -45,13 +53,13 @@
 }
 
 .logo {
-  margin-bottom: layout.$spacing-08;
+  // margin-bottom: layout.$spacing-08;
   height: layout.$spacing-11;
   width: 16rem;
 }
 
 .logoImg {
-  margin-bottom: layout.$spacing-09;
+  // margin-bottom: layout.$spacing-03;
   max-width: 100%;
 }
 
@@ -165,3 +173,101 @@
   position: absolute;
   pointer-events: none;
 }
+
+.wrapperContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 10rem;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  max-width: 100vw;
+  max-height: 100vh;
+  object-fit: cover;
+}
+
+@media (max-width: 1024px) {
+  .image {
+    max-width: 40rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .image {
+    max-width: 100%;
+  }
+}
+
+.logoContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.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: clamp(8rem, 27vw, 26rem);
+}
+
+.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/logo.component.tsx

@@ -3,20 +3,21 @@ 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 logo.src ? (
-    <img
-      alt={logo.alt ? t(logo.alt) : t('openmrsLogo', 'OpenMRS logo')}
-      className={styles.logoImg}
-      src={interpolateUrl(logo.src)}
-    />
-  ) : (
-    <svg role="img" className={styles.logo}>
-      <title>{t('openmrsLogo', 'OpenMRS logo')}</title>
-      <use href="#omrs-logo-full-color"></use>
-    </svg>
+  return (
+    <div className={styles.logoContainer}>
+      <img alt={logo.alt ? t(logo.alt) : t('openmrsLogo', 'OpenMRS logo')} className={styles.logoImg} src={taifaCare} />
+      <div>
+        <span className={styles.poweredBy}>
+          {t('poweredBy', 'Powered by AMRS')}{' '}
+          <img src={amrsLogo} alt={t('taifaCare', 'TAIFA CARE logo')} className={styles.poweredByLogo} />
+        </span>
+      </div>
+    </div>
   );
 };
 

package/src/otp/otp.component.tsx

@@ -1,30 +1,38 @@
-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 React, { useEffect, 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";
+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 [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 { username, password, message } = location.state || {};
 
   const handleOtpChange = (val: React.SetStateAction<string>) => {
     setOtpValue(val);
   };
 
+  useEffect(() => {
+    document.body.classList.add('hide-top-nav');
+    return () => {
+      document.body.classList.remove('hide-top-nav');
+    };
+  }, []);
+
   const handleVerify = async () => {
     setIsLoading(true);
     setError(null);
@@ -36,47 +44,50 @@ const OtpComponent: React.FC = () => {
         const session = sessionStore.session;
 
         if (!session.sessionLocation) {
-          navigate("/login/location");
+          navigate('/login/location');
           return;
         }
 
-        let to = "/home";
+        let to = '/home';
         if (location.state?.referrer) {
-          to = location.state.referrer.startsWith("/")
-            ? `\${openmrsSpaBase}${location.state.referrer}`
-            : location.state.referrer;
+          to = location.state.referrer;
         }
+        // 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"
-      );
+      setError(error?.message || error?.attributes?.error || 'Invalid OTP or credentials');
     } finally {
       setIsLoading(false);
     }
   };
 
   const handleCancel = () => {
-    navigate(-1);
+    const fallback = 'login';
+    if (window.history.length > 1) {
+      navigate(-1);
+    } else {
+      navigate(fallback, { replace: true });
+    }
   };
+
   return (
     <>
       <div className={styles.wrapperContainer}>
-        <div>
+        <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>
+            <p>{message || 'Enter the OTP sent to your registered email and phone number to complete login.'}</p>
             <OTPInput length={5} onChange={handleOtpChange} />
             {error && (
               <InlineNotification
@@ -88,15 +99,15 @@ const OtpComponent: React.FC = () => {
               />
             )}
             <Button className={styles.button} onClick={handleVerify}>
-              {isLoading ? <Loading /> : "Verify"}
+              {isLoading ? <Loading /> : 'Verify'}
             </Button>
             <Button className={styles.button} onClick={handleCancel}>
               Cancel
             </Button>
             <ResendTimer username={username} password={password} />
-            <Footer />
           </div>
         </div>
+        <img className={styles.image} src={image} alt="TAIFA CARE" />
       </div>
     </>
   );

package/src/otp/otp.module.scss

@@ -0,0 +1,61 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+:global(.hide-top-nav #omrs-top-nav-app-container) {
+  display: none;
+  height: 0;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-left: 5rem;
+}
+.leftSide {
+  margin-top: clamp(5rem, 10vw, 20rem);
+  margin-left: clamp(2rem, 5vw, 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: 100%;
+  height: 100%;
+  max-width: 100vw;
+  max-height: 100vh;
+  object-fit: cover;
+}
+
+@media (max-width: 1024px) {
+  .image {
+    max-width: 40rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .image {
+    max-width: 100%;
+  }
+}

package/src/resources/otp.resource.ts

@@ -1,45 +1,96 @@
-import { getEtlBaseUrl } from "../utils/get-base-url";
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl, getOtpKey, getSubDomain } from '../utils/get-base-url';
 
-const etlBaseUrl = "https://staging.ampath.or.ke/etl-staging/etl/";
+const EMAIL_ATTRIBUTE_TYPE_UUID = 'ecabe213-160b-11ef-ad65-a0d3c1fcd41c';
+const PHONE_NUMBER_ATTRIBUTE_TYPE_UUID = '72a759a8-1359-11df-a1f1-0026b9348838';
 
-export async function getOtp(username: string, password: string) {
-  // const etlBaseUrl = await getEtlBaseUrl();
-  const params = new URLSearchParams({ username });
+type ContactInfo = {
+  email?: string | null;
+  phone?: string | null;
+};
+
+export async function getEmailAndPhone(uuid: string, username: string, password: string): Promise<ContactInfo> {
+  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 url = `${etlBaseUrl}otp?${params.toString()}`;
+    const res = await openmrsFetch(url, {
+      method: 'GET',
+      headers: {
+        Authorization: `Basic ${credentials}`,
+      },
+    });
 
-  const res = await fetch(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 phoneAttr = data.attributes?.find(
+      (attr) => !attr.voided && attr.attributeType?.uuid === PHONE_NUMBER_ATTRIBUTE_TYPE_UUID,
+    );
+    const email = emailAttr?.value ?? null;
+    const phone = phoneAttr?.value ?? null;
+
+    if (!email && !phone) {
+      throw new Error(
+        'Neither email nor phone number has been configured. Please contact system administrator for assistance.',
+      );
+    }
 
-  if (!res.ok) {
-    throw new Error("Failed to fetch OTP");
+    return { email, phone };
+  } catch (error) {
+    throw new Error(error.message ?? 'Failed to fetch contact info');
   }
+}
 
-  const data = await res.json();
+export async function getOtp(username: string, password: string, email: string, phone: string) {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const key = await getOtpKey();
+  const params = new URLSearchParams({ username, email, phone, key });
+  const credentials = window.btoa(`${username}:${password}`);
 
-  return data;
+  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;
+  } 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";
+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",
+  const res = await openmrsFetch(url, {
+    method: 'POST',
     headers: {
-      "Content-Type": "Application/json",
+      'Content-Type': 'Application/json',
       Authorization: `Basic ${credentials}`,
     },
     body: JSON.stringify(body),

package/src/root.component.tsx

@@ -5,6 +5,8 @@ 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";
+import ForgotPassword from "./forgot-password/forgot-password.component";
+import ResetPassword from "./forgot-password/reset-password/reset-password.component";
 
 const Root: React.FC = () => {
   return (
@@ -16,6 +18,8 @@ const Root: React.FC = () => {
         <Route path="logout" element={<RedirectLogout />} />
         <Route path="change-password" element={<ChangePassword />} />
         <Route path="login/otp" element={<OtpComponent />} />
+        <Route path="login/forgot-password" element={<ForgotPassword />} />
+        <Route path="login/reset-password/:activationKey" element={<ResetPassword />} />
       </Routes>
     </BrowserRouter>
   );

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

@@ -1,7 +1,22 @@
-import { getConfig } from "@openmrs/esm-framework";
-import { moduleName } from "../..";
+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;
+}
+
+export async function getOtpKey() {
+  const { otpKey } = await getConfig(moduleName);
+  return otpKey ?? null;
+}

package/yarnrc.yml

@@ -4,11 +4,11 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-npmPublishRegistry: "https://registry.npmjs.org"
+npmPublishRegistry: 'https://registry.npmjs.org'
 
 plugins:
   - checksum: c13ed363e15a826d9f779e7e7aca9dbee1d6d54813261d6f495da2fa94b01fa7579e516587ae2df5834f5d63d5d90cb392135190e8878b81dbd830c3c9f57809
     path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
-    spec: "https://go.mskelton.dev/yarn-outdated/v4"
+    spec: 'https://go.mskelton.dev/yarn-outdated/v4'
 
 yarnPath: .yarn/releases/yarn-4.10.3.cjs