@ampath/esm-login-app 8.0.0-next.5 → 8.0.0-next.6

package/dist/routes.json

@@ -1 +1 @@
-{"$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"}],"version":"8.0.0-next.5"}
+{"$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"}],"version":"8.0.0-next.6"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampath/esm-login-app",
-  "version": "8.0.0-next.5",
+  "version": "8.0.0-next.6",
   "license": "MPL-2.0",
   "description": "The login microfrontend for the OpenMRS SPA",
   "browser": "dist/esm-login-app.js",

package/src/common/resend-timer/resend-timer.component.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styles from './resend-timer.scss';
 import { getOtp } from '../../resources/otp.resource';
+import { useSession } from '@openmrs/esm-framework';
 
 interface ResendTimerProps {
   username: string;
@@ -10,6 +11,9 @@ interface ResendTimerProps {
 const ResendTimer: React.FC<ResendTimerProps> = ({ username, password }) => {
   const RESEND_SECONDS = 30;
   const [secondsLeft, setSecondsLeft] = useState(RESEND_SECONDS);
+  const session = useSession();
+
+  const uuid = session.user.person.uuid;
 
   useEffect(() => {
     if (secondsLeft === 0) return;
@@ -27,7 +31,7 @@ const ResendTimer: React.FC<ResendTimerProps> = ({ username, password }) => {
   };
 
   const handleResend = async () => {
-    await getOtp(username, password);
+    await getOtp(username, password, uuid);
     setSecondsLeft(RESEND_SECONDS);
   };
   return (

package/src/config-schema.ts

@@ -1,27 +1,25 @@
-import { validators, Type, validator } from "@openmrs/esm-framework";
+import { validators, Type, validator } from '@openmrs/esm-framework';
 
 export const configSchema = {
   provider: {
     type: {
       _type: Type.String,
-      _default: "basic",
+      _default: 'basic',
       _description:
         "Selects the login mechanism to use. Choices are 'basic' and 'oauth2'. " +
         "For 'oauth2' you'll also need to set the 'loginUrl'",
-      _validators: [validators.oneOf(["basic", "oauth2"])],
+      _validators: [validators.oneOf(['basic', 'oauth2'])],
     },
     loginUrl: {
       _type: Type.String,
-      _default: "${openmrsSpaBase}/login",
-      _description:
-        "The URL to use to login. This is only needed if you are using OAuth2.",
+      _default: '${openmrsSpaBase}/login',
+      _description: 'The URL to use to login. This is only needed if you are using OAuth2.',
       _validators: [validators.isUrl],
     },
     logoutUrl: {
       _type: Type.String,
-      _default: "${openmrsSpaBase}/logout",
-      _description:
-        "The URL to use to login. This is only needed if you are using OAuth2.",
+      _default: '${openmrsSpaBase}/logout',
+      _description: 'The URL to use to login. This is only needed if you are using OAuth2.',
       _validators: [validators.isUrl],
     },
   },
@@ -36,25 +34,14 @@ export const configSchema = {
     numberToShow: {
       _type: Type.Number,
       _default: 8,
-      _description: "The number of locations displayed in the location picker.",
-      _validators: [
-        validator(
-          (v: unknown) => typeof v === "number" && v > 0,
-          "Must be greater than zero"
-        ),
-      ],
+      _description: 'The number of locations displayed in the location picker.',
+      _validators: [validator((v: unknown) => typeof v === 'number' && v > 0, 'Must be greater than zero')],
     },
     locationsPerRequest: {
       _type: Type.Number,
       _default: 50,
-      _description:
-        "The number of results to fetch in each cycle of infinite scroll.",
-      _validators: [
-        validator(
-          (v: unknown) => typeof v === "number" && v > 0,
-          "Must be greater than zero"
-        ),
-      ],
+      _description: 'The number of results to fetch in each cycle of infinite scroll.',
+      _validators: [validator((v: unknown) => typeof v === 'number' && v > 0, 'Must be greater than zero')],
     },
     useLoginLocationTag: {
       _type: Type.Boolean,
@@ -66,24 +53,23 @@ export const configSchema = {
   links: {
     loginSuccess: {
       _type: Type.String,
-      _default: "${openmrsSpaBase}/home",
-      _description: "The URL to redirect the user to after a successful login.",
+      _default: '${openmrsSpaBase}/home',
+      _description: 'The URL to redirect the user to after a successful login.',
       _validators: [validators.isUrl],
     },
   },
   logo: {
     src: {
       _type: Type.String,
-      _default: "",
+      _default: '',
       _description:
-        "The path or URL to the logo image. If set to an empty string, the default OpenMRS SVG sprite will be used.",
+        'The path or URL to the logo image. If set to an empty string, the default OpenMRS SVG sprite will be used.',
       _validators: [validators.isUrl],
     },
     alt: {
       _type: Type.String,
-      _default: "Logo",
-      _description:
-        "The alternative text for the logo image, displayed when the image cannot be loaded or on hover.",
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
     },
   },
   footer: {
@@ -94,25 +80,24 @@ export const configSchema = {
         src: {
           _type: Type.String,
           _required: true,
-          _description: "The source URL of the logo image",
+          _description: 'The source URL of the logo image',
           _validators: [validators.isUrl],
         },
         alt: {
           _type: Type.String,
           _required: true,
-          _description: "The alternative text for the logo image",
+          _description: 'The alternative text for the logo image',
         },
       },
       _default: [],
-      _description:
-        "An array of logos to be displayed in the footer next to the OpenMRS logo.",
+      _description: 'An array of logos to be displayed in the footer next to the OpenMRS logo.',
     },
   },
   showPasswordOnSeparateScreen: {
     _type: Type.Boolean,
     _default: false,
     _description:
-      "Whether to show the password field on a separate screen. If false, the password field will be shown on the same screen.",
+      'Whether to show the password field on a separate screen. If false, the password field will be shown on the same screen.',
   },
 };
 
@@ -139,7 +124,7 @@ export interface ConfigSchema {
   provider: {
     loginUrl: string;
     logoutUrl: string;
-    type: "basic" | "oauth2";
+    type: 'basic' | 'oauth2';
   };
   showPasswordOnSeparateScreen: boolean;
 }

package/src/declarations.d.ts

@@ -1 +1,5 @@
 declare module '*.scss';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';

package/src/login/login.component.tsx

@@ -13,11 +13,10 @@ import {
 } from '@openmrs/esm-framework';
 import { type ConfigSchema } from '../config-schema';
 import Logo from '../logo.component';
-import Footer from '../footer.component';
 import styles from './login.scss';
-import { getOtp } from '../resources/otp.resource';
+import { getEmail, getOtp } from '../resources/otp.resource';
 import { getOtpEnabledStatus } from '../utils/get-base-url';
-import { boolean } from 'zod';
+import image from '../assets/medicine.jpg';
 
 export interface LoginReferrer {
   referrer?: string;
@@ -103,7 +102,7 @@ const Login: React.FC = () => {
         const session = sessionStore.session;
         const authenticated = sessionStore?.session?.authenticated;
 
-        if (isOtpEnabled === true) {
+        if (isOtpEnabled !== true) {
           if (authenticated) {
             if (session.sessionLocation) {
               let to = loginLinks?.loginSuccess || '/home';
@@ -114,7 +113,15 @@ const Login: React.FC = () => {
                   to = location.state.referrer;
                 }
               }
-              await getOtp(username, password);
+              const uuid = session.user.person.uuid;
+              try {
+                const email = await getEmail(uuid, username, password);
+                await getOtp(username, password, email);
+              } catch (err: any) {
+                setErrorMessage(err.message);
+                return;
+              }
+
               navigate('otp', {
                 state: {
                   username,
@@ -123,7 +130,13 @@ const Login: React.FC = () => {
                 },
               });
             } else if (!session.sessionLocation) {
-              await getOtp(username, password);
+              const uuid = session.user.person.uuid;
+              try {
+                await getOtp(username, password, uuid);
+              } catch (err: any) {
+                setErrorMessage(err.message);
+                return;
+              }
               navigate('otp', {
                 state: {
                   username,
@@ -197,117 +210,124 @@ const Login: React.FC = () => {
 
   if (!loginProvider || loginProvider.type === 'basic') {
     return (
-      <div className={styles.container}>
-        <Tile className={styles.loginCard}>
-          {errorMessage && (
-            <div className={styles.errorMessage}>
-              <InlineNotification
-                kind="error"
-                subtitle={t(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') + '...'} />
+      <>
+        <div className={styles.wrapperContainer}>
+          <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>
                       ) : (
-                        t('login', 'Log in')
+                        <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>
                       )}
-                    </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>
+                    </>
                   )}
-                </>
-              ) : (
-                <>
-                  <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>
-        <Footer />
-      </div>
+                </div>
+              </form>
+            </Tile>
+          </div>
+          <img className={styles.image} src={image} alt="TAIFA CARE" />
+        </div>
+      </>
     );
   }
   return null;

package/src/login/login.scss

@@ -34,10 +34,11 @@
 
 .container {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  flex-direction: row;
+  justify-content: flex-start;
   align-items: center;
   position: relative;
+  margin-left: 10rem;
 }
 
 .center {
@@ -165,3 +166,16 @@
   position: absolute;
   pointer-events: none;
 }
+
+.wrapperContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 10rem;
+}
+
+.image {
+  width: 50rem;
+  height: 55rem;
+  max-height: 60rem;
+  object-fit: cover;
+}

package/src/otp/otp.component.tsx

@@ -1,18 +1,19 @@
-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, { 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();
@@ -36,13 +37,13 @@ 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("/")
+          to = location.state.referrer.startsWith('/')
             ? `\${openmrsSpaBase}${location.state.referrer}`
             : location.state.referrer;
         }
@@ -52,23 +53,25 @@ const OtpComponent: React.FC = () => {
         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>
@@ -88,15 +91,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.scss → otp.module.scss}

@@ -8,6 +8,10 @@
   gap: 1rem;
   margin-left: 5rem;
 }
+.leftSide {
+  margin-top: 10rem;
+  margin-left: 10rem;
+}
 
 .button {
   width: 15rem;
@@ -27,20 +31,14 @@
 
 .wrapperContainer {
   display: flex;
-  gap: 5rem;
-}
-
-.rightSide {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 50rem;
+  flex-direction: row;
+  gap: 10rem;
 }
 
 .image {
-  width: 60rem;
-  height: 40rem;
-  border-radius: 5px;
-  // max-height: 40rem;
-  // object-fit: contain;
+  width: 54rem;
+  height: 55rem;
+  max-height: 60rem;
+  object-fit: cover;
+  flex-shrink: 0;
 }