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

package/src/login/login.component.tsx

@@ -1,14 +1,7 @@
-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 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,
@@ -17,45 +10,45 @@ import {
   useConfig,
   useConnectivity,
   useSession,
-} 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";
+} from '@openmrs/esm-framework';
+import { type ConfigSchema } from '../config-schema';
+import Logo from '../logo.component';
+import styles from './login.scss';
+import { getEmailAndPhone, 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 { 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"> & {
+  const location = useLocation() as unknown as Omit<Location, 'state'> & {
     state: LoginReferrer;
   };
   const navigate = useNavigate();
 
-  const [errorMessage, setErrorMessage] = useState("");
+  const [errorMessage, setErrorMessage] = useState('');
   const [isLoggingIn, setIsLoggingIn] = useState(false);
-  const [password, setPassword] = useState("");
-  const [username, setUsername] = useState("");
+  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") {
+      if (loginProvider.type === 'oauth2') {
         openmrsNavigate({ to: loginProvider.loginUrl });
-      } else if (!username && location.pathname === "/login/confirm") {
-        navigate("/login");
+      } else if (!username && location.pathname === '/login/confirm') {
+        navigate('/login');
       }
     }
   }, [username, navigate, location, user, loginProvider]);
@@ -71,6 +64,12 @@ const Login: React.FC = () => {
       }
     }
   }, [showPasswordField, showPasswordOnSeparateScreen]);
+  useEffect(() => {
+    document.body.classList.add('hide-top-nav');
+    return () => {
+      document.body.classList.remove('hide-top-nav');
+    };
+  }, []);
 
   const continueLogin = useCallback(() => {
     const currentUsername = usernameInputRef.current?.value?.trim();
@@ -83,14 +82,8 @@ const Login: React.FC = () => {
     }
   }, []);
 
-  const changeUsername = useCallback(
-    (evt: React.ChangeEvent<HTMLInputElement>) => setUsername(evt.target.value),
-    []
-  );
-  const changePassword = useCallback(
-    (evt: React.ChangeEvent<HTMLInputElement>) => setPassword(evt.target.value),
-    []
-  );
+  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>) => {
@@ -98,9 +91,9 @@ const Login: React.FC = () => {
       evt.stopPropagation();
 
       // If credentials were autofilled, input onChange might not have been called
-      const currentUsername =
-        usernameInputRef.current?.value?.trim() || username;
+      const currentUsername = usernameInputRef.current?.value?.trim() || username;
       const currentPassword = passwordInputRef.current?.value || password;
+      const isOtpEnabled: boolean = await getOtpEnabledStatus();
 
       if (showPasswordOnSeparateScreen && !showPasswordField) {
         continueLogin();
@@ -114,41 +107,86 @@ const Login: React.FC = () => {
 
       try {
         setIsLoggingIn(true);
-        const sessionStore = await refetchCurrentUser(
-          currentUsername,
-          currentPassword
-        );
+        const sessionStore = await refetchCurrentUser(currentUsername, currentPassword);
         const session = sessionStore.session;
         const authenticated = sessionStore?.session?.authenticated;
 
-        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;
+        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, phone } = await getEmailAndPhone(uuid, username, password);
+                const res = await getOtp(username, password, email, phone);
+                navigate('otp', {
+                  state: {
+                    username,
+                    password,
+                    referrer: location?.state?.referrer,
+                    message: res,
+                  },
+                });
+              } catch (err: any) {
+                setErrorMessage(err.message);
+                return;
+              }
+            } else if (!session.sessionLocation) {
+              const uuid = session.user.person.uuid;
+              const { email, phone } = await getEmailAndPhone(uuid, username, password);
+              try {
+                const res = await getOtp(username, password, email, phone);
+                navigate('otp', {
+                  state: {
+                    username,
+                    password,
+                    referrer: location?.state?.referrer,
+                    message: res,
+                  },
+                });
+              } catch (err: any) {
+                setErrorMessage(err.message);
+                return;
               }
             }
-
-            await getOtp(username, password);
-            navigate("otp", {
-              state: {
-                username,
-                password,
-                referrer: location?.state?.referrer,
-              },
-            });
+          } else {
+            setErrorMessage(t('invalidCredentials', 'Invalid username or password'));
+            setUsername('');
+            setPassword('');
+            if (showPasswordOnSeparateScreen) {
+              setShowPasswordField(false);
+            }
           }
         } else {
-          setErrorMessage(
-            t("invalidCredentials", "Invalid username or password")
-          );
-          setUsername("");
-          setPassword("");
-          if (showPasswordOnSeparateScreen) {
-            setShowPasswordField(false);
+          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);
+            }
           }
         }
 
@@ -157,12 +195,10 @@ const Login: React.FC = () => {
         if (error instanceof Error) {
           setErrorMessage(error.message);
         } else {
-          setErrorMessage(
-            t("invalidCredentials", "Invalid username or password")
-          );
+          setErrorMessage(t('invalidCredentials', 'Invalid username or password'));
         }
-        setUsername("");
-        setPassword("");
+        setUsername('');
+        setPassword('');
         if (showPasswordOnSeparateScreen) {
           setShowPasswordField(false);
         }
@@ -180,147 +216,152 @@ const Login: React.FC = () => {
       location,
       t,
       continueLogin,
-    ]
+    ],
   );
 
-  if (!loginProvider || loginProvider.type === "basic") {
+  const handleForgotPassword = () => {
+    navigate('forgot-password');
+  };
+
+  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 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>
-                  {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") + "..."}
-                      />
+                )}
+                <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>
+                        )}
+                      </>
                     ) : (
-                      t("login", "Log in")
+                      <>
+                        <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>
+                          Forgot Password?
+                          <a style={{ textDecoration: 'none', cursor: 'pointer' }} onClick={handleForgotPassword}>
+                            {' '}
+                            Click to Reset
+                          </a>
+                        </div>
+                      </>
                     )}
-                  </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>
-          </form>
-        </Tile>
-        <Footer />
-      </div>
+          </div>
+          <img className={styles.image} src={image} alt="TAIFA CARE" />
+        </div>
+      </>
     );
   }
   return null;