@argusoft/medplat-app-shell 1.0.5 → 1.0.7

package/src/views/feature-components/login/Login.jsx

@@ -0,0 +1,840 @@
+import {
+  getApkInfo,
+  getFeaturesV2,
+  getLoggedInUser,
+  getSystemNotice,
+  loginService,
+} from '@/common/services/AuthenticateService';
+import medplatLogo from '@/assets/img/medplat-highres.png';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import { api } from '@/common/interceptors/AxiosInterceptor';
+import { showToast } from '@/common/toaster/toaster';
+import { setLoggedIn, setMenuItem, setToken, setUserDetails } from '@/store/reducers/AuthenticationReducer';
+import CustomTextField from '@/views/custom-components/CustomTextField';
+import '@/views/feature-components/login/Login.scss';
+import { bahaarJSON, upJSON, phmpJSON, sewaruralJSON, oasisJSON, techoJSON, defaultJSON } from '@/common/constants/app.constant';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Box, Button, Card, CircularProgress, Divider, Link, Typography } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { default as React, startTransition, useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import * as Yup from 'yup';
+import { simplifyMenu } from '@/views/feature-components/login/simplifyMenu';
+import TwoFactorSetupModal from '@/views/feature-components/login/TwoFactorSetupModal';
+import { PasswordField } from '@/views/feature-components/users/PasswordField';
+import { motion, AnimatePresence } from 'framer-motion';
+import ShieldOutlinedIcon from '@mui/icons-material/ShieldOutlined';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import LockClockOutlinedIcon from '@mui/icons-material/LockClockOutlined';
+import bankverification from '@/assets/img/nhm-logo.png';
+import GovOfGujarat from '@/assets/img/govtofgujarat.png';
+import SewaRural from '@/assets/img/sewa-rural.png';
+import lshtmLogo from '@/assets/img/lshtm-logo.jpg';
+import phfiLogo from '@/assets/img/phfi-logo.jpg';
+import dsprudLogo from '@/assets/img/dsprud-logo.png';
+import wbUniLogo from '@/assets/img/wbu-logo.png';
+import oxUniLogo from '@/assets/img/ou-logo.png';
+import ficciLogo from '@/assets/img/ficci.png';
+import wbGovLogo from '@/assets/img/wb-gov-logo.png';
+import ttcLogo from '@/assets/img/ttc.png';
+import { faBookMedical, faDownload, faPassport, faPerson } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import bahaarLogo from '@/assets/img/bahaarNew.png';
+import techoLogo from '@/assets/img/techo4K.png';
+import sewaLogo from '@/assets/img/sewarural4K.png';
+import ekavachLogo from '@/assets/img/up4K.png';
+import dnhddLogo from '@/assets/img/dnhdd4K.png';
+import oasisLogo from '@/assets/img/OASISLogin.png';
+import sathLogo from '@/assets/img/sath.png';
+import techoBrandLogo from '@/assets/img/techo_plus.png';
+import sewaruralBrandLogo from '@/assets/img/sewarural.png';
+import dnhddBrandLogo from '@/assets/img/dnhdd.png';
+import ekavachBrandLogo from '@/assets/img/ekavach.png';
+import oasisBrandLogo from '@/assets/img/oasis-logo.png';
+import GovOfUP from '@/assets/img/govtofup.png';
+
+export const imageMap = {
+  'nhm-logo.png': bankverification,
+  'govtofgujarat.png': GovOfGujarat,
+  'govtofup.png': GovOfUP,
+  'sewa-rural.png': SewaRural,
+  'lshtm-logo.jpg': lshtmLogo,
+  'phfi-logo.jpg': phfiLogo,
+  'dsprud-logo.png': dsprudLogo,
+  'wbu-logo.png': wbUniLogo,
+  'ou-logo.png': oxUniLogo,
+  'ficci.png': ficciLogo,
+  'wb-gov-logo.png': wbGovLogo,
+  'ttc.png': ttcLogo,
+  'medplat-highres.png': medplatLogo,
+  'bahaarNew.png': bahaarLogo,
+  'techo4K.png': techoLogo,
+  'sewarural4K.png': sewaLogo,
+  'up4K.png': ekavachLogo,
+  'dnhdd4K.png': dnhddLogo,
+  'OASISLogin.png': oasisLogo,
+  'sath.png': sathLogo,
+  'techo_plus.png': techoBrandLogo,
+  'sewarural.png': sewaruralBrandLogo,
+  'dnhdd.png': dnhddBrandLogo,
+  'ekavach.png': ekavachBrandLogo,
+  'oasis-logo.png': oasisBrandLogo,
+};
+
+
+const configMap = {
+  bahaar: bahaarJSON,
+  gujarat: techoJSON,
+  gujaratStaging: techoJSON,
+  sewarural: sewaruralJSON,
+  dnhdd: phmpJSON,
+  ekavach: upJSON,
+  oasis: oasisJSON,
+};
+
+const getActiveJSON = () => {
+  const env = import.meta.env.VITE_APP_IMPLEMENTATION || 'gujarat';
+  const localKey = env === 'gujaratStaging' ? 'gujarat' : env;
+  const savedCustom = localStorage.getItem('medplat_login_config_custom');
+  const savedEnv = localStorage.getItem(`medplat_login_config_${localKey}`);
+  const saved = savedCustom || savedEnv;
+  if (saved) {
+    try {
+      return JSON.parse(saved);
+    } catch (e) {
+      console.error('Failed to parse saved config from localStorage', e);
+    }
+  }
+  return configMap[env] || defaultJSON;
+};
+
+
+const iconMap = {
+  PERSON: faPerson,
+  MEDICAL: faBookMedical,
+  PASSPORT: faPassport,
+};
+
+/**
+ * @module Login
+ * @returns {JSX.Element}
+ */
+const Login = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [submitting, setSubmitting] = useState(false);
+
+  // Use state to handle login object
+  const [login, setLogin] = useState({});
+  const [showPassword, setShowPassword] = useState(false);
+  // True once the backend has signalled that this user must supply a 2FA code.
+  const [twoFactorRequired, setTwoFactorRequired] = useState(false);
+  // Toggles the "lost access to your code" helper message on the 2FA challenge step.
+  const [noCodeHelp, setNoCodeHelp] = useState(false);
+  // Holds details for the (skippable) first-time Google Authenticator setup shown after login.
+  const [twoFactorSetup, setTwoFactorSetup] = useState(null);
+  // Holds details for the "login successful" celebration shown after a 2FA code challenge.
+  const [loginSuccess, setLoginSuccess] = useState(null);
+  // Attempts left before lockout (shown after a wrong password/code); null when not applicable.
+  const [attemptsRemaining, setAttemptsRemaining] = useState(null);
+  // Remaining lockout time in seconds (drives the countdown); 0 when not locked.
+  const [lockoutSeconds, setLockoutSeconds] = useState(0);
+
+  // Create refs for navigate, dispatch, and manualRefresh
+  const navigateRef = useRef(navigate);
+  const dispatchRef = useRef(dispatch);
+  const [activeJSON, setActiveJSON] = useState(() => getActiveJSON());
+
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const response = await api.get('login/preference');
+        if (response?.data) {
+          let data = response.data;
+          // Extract the preference string from the backend wrapper structure (e.g. keyValue)
+          if (data && typeof data === 'object') {
+            if ('keyValue' in data) {
+              data = data.keyValue;
+            } else if ('value' in data) {
+              data = data.value;
+            } else if ('preference' in data) {
+              data = data.preference;
+            }
+          }
+          if (typeof data === 'string') {
+            try {
+              data = JSON.parse(data);
+            } catch (err) {
+              console.error('Error parsing config string from API in Login.jsx', err);
+            }
+          }
+          if (data && typeof data === 'object') {
+            setActiveJSON(data);
+          }
+        }
+      } catch (err) {
+        console.error('Failed to load login config from server', err);
+        const env = import.meta.env.VITE_APP_IMPLEMENTATION || 'gujarat';
+        const localKey = env === 'gujaratStaging' ? 'gujarat' : env;
+        const savedCustom = localStorage.getItem('medplat_login_config_custom');
+        const savedEnv = localStorage.getItem(`medplat_login_config_${localKey}`);
+        const saved = savedCustom || savedEnv;
+        if (saved) {
+          try {
+            setActiveJSON(JSON.parse(saved));
+          } catch (e) {
+            console.error('Failed to parse saved config from localStorage in catch block', e);
+          }
+        }
+      }
+    };
+    fetchConfig();
+  }, []);
+
+  /**
+   * Handles the local login process for a user. This function performs authentication, updates
+   * application state, stores login information in local storage, and redirects the user to the
+   * home page upon successful login.
+   *  @async
+   * @function doLoginLocal
+   * @param {Object} user - The user object containing login credentials.
+   * @param {string} user.username - The username of the user trying to log in.
+   * @param {string} user.password - The password of the user trying to log in.
+   * @throws {Error} Throws an error if any part of the login process fails.
+   * @returns {Promise<void>} A promise that resolves when the login process is complete.
+   */
+
+  const doLoginLocal = async (user) => {
+    try {
+      setSubmitting(true);
+      setAttemptsRemaining(null);
+      const loginResponse = await loginService(user.username, user.password, undefined, user.totpCode);
+      dispatchRef.current(setToken(loginResponse.data));
+
+      const loginTime = new Date();
+      localStorage.setItem('loginTime', JSON.stringify(loginTime));
+      const loggedInUserResponse = await getLoggedInUser();
+      if (loggedInUserResponse.data.roleId) {
+        const features = await getFeaturesV2();
+        loggedInUserResponse.data.features = features?.data;
+        let linearMenuItems = {};
+        Object.entries(features?.data || {}).forEach((element) => {
+          simplifyMenu(element, linearMenuItems);
+        });
+        dispatch(setMenuItem(linearMenuItems));
+        // Call simplifyMenu with the menuItem and linearMenuItems
+      } else {
+        loggedInUserResponse.roles = [];
+      }
+
+      dispatchRef.current(setUserDetails(loggedInUserResponse.data));
+      dispatchRef.current(setLoggedIn());
+
+      const webTask = loggedInUserResponse?.data?.features?.manage
+        ? loggedInUserResponse?.data?.features?.manage.find((item) => item.name === 'Web Tasks')
+        : false;
+      sessionStorage.setItem('isTecho', true);
+      setSubmitting(false);
+      const redirectTo = webTask ? `/ui/medplat/dashboard/webtasks` : '/ui';
+      // Role requires 2FA but enrolment isn't done yet: show the skippable setup step before continuing.
+      if (loggedInUserResponse?.data?.twoFactorSetupRequired) {
+        setTwoFactorSetup({
+          userId: loggedInUserResponse.data.id,
+          userName: loggedInUserResponse.data.userName,
+          redirectTo,
+        });
+        return;
+      }
+      // Celebrate every successful login (simple or after a 2FA code challenge) before continuing.
+      setLoginSuccess({ redirectTo, name: loggedInUserResponse?.data?.name });
+    } catch (error) {
+      console.error(error);
+      setSubmitting(false);
+      const data = error.response?.data;
+      const errorCode = data?.error;
+      const errorMessage = data?.error_description;
+      const remaining = data?.attempts_remaining != null ? parseInt(data.attempts_remaining, 10) : null;
+      const lockedMinutes = data?.locked_for_minutes != null ? parseInt(data.locked_for_minutes, 10) : null;
+
+      if (errorCode === '2fa_required') {
+        // First step succeeded (valid password) but the user needs to supply an authenticator code.
+        setTwoFactorRequired(true);
+        showToast({ message: 'Enter the 6 digit code from your authenticator app', type: 'info' });
+      } else if (lockedMinutes != null) {
+        // Too many failed attempts: show the lockout countdown inline.
+        setAttemptsRemaining(null);
+        setLockoutSeconds(lockedMinutes * 60);
+      } else if (remaining != null) {
+        // Wrong password or code: show how many attempts are left inline. Stay on the code step if 2FA.
+        if (errorCode === 'invalid_2fa_code') setTwoFactorRequired(true);
+        setAttemptsRemaining(remaining);
+      } else if (errorMessage === 'Bad credentials') {
+        showToast({ message: 'Invalid username or password', type: 'error' });
+      } else {
+        showToast({ message: errorMessage ? errorMessage : 'Error in login', type: 'error' });
+      }
+    }
+  };
+
+  const LoginSchema = Yup.object().shape({
+    username: Yup.string().required('Username is required'),
+    password: Yup.string().required('Password is required'),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      username: '',
+      password: '',
+      totpCode: '',
+    },
+    resolver: yupResolver(LoginSchema),
+    mode: 'onChange', // Trigger validation on change
+  });
+
+  /**
+   * Submits the login form by invoking the `doLoginLocal` function with the provided user credentials.
+   * This function is typically used as a callback for form submission to handle user authentication.
+   * @function submit
+   * @param {Object} values - The form values containing user credentials.
+   * @param {string} values.username - The username of the user trying to log in.
+   * @param {string} values.password - The password of the user trying to log in.
+   *
+   * @returns {void}
+   */
+
+  const submit = async (values) => {
+    try {
+      await doLoginLocal({
+        username: values.username,
+        password: values.password,
+        totpCode: twoFactorRequired ? values.totpCode : undefined,
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  /**
+   * React effect hook that performs initialization tasks when the component mounts.
+   * This hook checks for an existing token in local storage, retrieves encryption keys,
+   * and updates the login state with system notices and APK information.
+   * @function  useEffect
+   * @returns {void}
+   */
+
+  useEffect(() => {
+    const tokenString = localStorage.getItem('token');
+    if (tokenString) {
+      const isTecho = sessionStorage.getItem('isTecho');
+      if (!isTecho) {
+        navigate('/ui/unauthorized');
+        return;
+      }
+      navigateRef.current('/ui/medplat/dashboard/webtasks');
+      return;
+    }
+
+    // Only clear if we are genuinely on the login page without a token
+    localStorage.removeItem('theme_config');
+    localStorage.removeItem('theme_existence');
+    // getKeyAndIV();
+
+    const initializeLogin = async () => {
+      const updatedLogin = { ...login };
+
+      try {
+        const systemNoticeResponse = await getSystemNotice();
+        if (systemNoticeResponse.data?.keyValue) {
+          updatedLogin.showSystemNotice = true;
+          updatedLogin.systemNotice = systemNoticeResponse.data.keyValue;
+        }
+      } catch (error) {
+        GeneralUtil.showMessageOnApiCallFailure(error);
+      }
+
+      try {
+        const apkInfoResponse = await getApkInfo();
+        if (apkInfoResponse.data.length === 0) {
+          updatedLogin.hideAppLink = true;
+        } else {
+          updatedLogin.link = apkInfoResponse.data[0];
+          updatedLogin.version = apkInfoResponse.data[1];
+          updatedLogin.release_date = apkInfoResponse.data[2];
+        }
+      } catch (error) {
+        GeneralUtil.showMessageOnApiCallFailure(error);
+      }
+
+      setLogin(updatedLogin); // Update login state
+    };
+
+    initializeLogin();
+  }, []);
+
+  // After the "login successful" celebration, continue into the app.
+  useEffect(() => {
+    if (!loginSuccess) return undefined;
+    const timer = setTimeout(() => navigateRef.current(loginSuccess.redirectTo), 1900);
+    return () => clearTimeout(timer);
+  }, [loginSuccess]);
+
+  // Silently re-enable the form once the lockout window has passed (no visible countdown).
+  useEffect(() => {
+    if (lockoutSeconds <= 0) return undefined;
+    const id = setTimeout(() => setLockoutSeconds(0), lockoutSeconds * 1000);
+    return () => clearTimeout(id);
+  }, [lockoutSeconds > 0]);
+
+  const jsonRenderer = () => {
+    return <>
+      <Grid size={{ xs: 12 }} className="flex flex-col items-center">
+        <img src={imageMap[activeJSON.brandLogo]} className="h-[70px] mb-4" alt="logo" />
+        <Box className="flex items-center w-[80%] my-2">
+          <Divider className="flex-1" />
+          <Typography className="px-3 text-xl font-semibold text-gray-700">
+            {twoFactorRequired ? 'VERIFY' : 'LOGIN'}
+          </Typography>
+          <Divider className="flex-1" />
+        </Box>
+        <AnimatePresence mode="wait" initial={false}>
+          {!twoFactorRequired ? (
+            <motion.div
+              key="credentials"
+              className="w-full flex flex-col items-center"
+              initial={{ opacity: 0, x: -24 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -24 }}
+              transition={{ duration: 0.25 }}
+            >
+              <Box className="w-[85%] mt-3">
+                <CustomTextField
+                  className={activeJSON.inputFieldClass}
+                  control={control}
+                  name="username"
+                  placeholder="Username"
+                  errors={errors}
+                  size="medium"
+                  fullWidth
+                  autoComplete="off"
+                  autoFocus
+                />
+              </Box>
+              <Box className="w-[85%] mt-3">
+                <PasswordField
+                  className={activeJSON.inputFieldClass}
+                  control={control}
+                  showPassword={showPassword}
+                  togglePasswordVisibility={() => setShowPassword((cur) => !cur)}
+                  name="password"
+                  placeholder="Password"
+                  errors={errors}
+                  autoComplete="new-password"
+                />
+              </Box>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="twofactor"
+              className="w-[85%] mt-2 flex flex-col items-center"
+              initial={{ opacity: 0, x: 24 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 24 }}
+              transition={{ duration: 0.25 }}
+            >
+              <motion.div
+                initial={{ scale: 0.5, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ type: 'spring', stiffness: 260, damping: 18 }}
+                className="flex items-center justify-center w-14 h-14 rounded-full bg-blue-50 text-[#007ACC] mb-2"
+              >
+                <ShieldOutlinedIcon fontSize="medium" />
+              </motion.div >
+              <Typography className="text-base font-semibold text-gray-800">
+                Two-Factor Authentication
+              </Typography>
+              <Typography className="text-sm text-gray-500 text-center mt-1 mb-3">
+                Enter the 6-digit code from your authenticator app to continue.
+              </Typography>
+              <Box className="w-full">
+                <CustomTextField
+                  control={control}
+                  name="totpCode"
+                  placeholder="••••••"
+                  errors={errors}
+                  size="medium"
+                  fullWidth
+                  autoComplete="off"
+                  autoFocus
+                  inputProps={{
+                    maxLength: 6,
+                    inputMode: 'numeric',
+                    pattern: '[0-9]*',
+                    style: {
+                      textAlign: 'center',
+                      letterSpacing: '0.5em',
+                      fontSize: '1.2rem',
+                      fontWeight: 600,
+                    },
+                    onInput: (e) => {
+                      e.target.value = e.target.value.replace(/\D/g, '');
+                    },
+                  }}
+                />
+              </Box>
+              <Box className="w-full flex flex-col items-center mt-3">
+                <Link
+                  component="button"
+                  type="button"
+                  onClick={() => setNoCodeHelp((cur) => !cur)}
+                  className="text-[#007ACC] no-underline text-sm"
+                >
+                  Don&apos;t have access to your code?
+                </Link>
+                <AnimatePresence>
+                  {noCodeHelp && (
+                    <motion.div
+                      initial={{ opacity: 0, height: 0 }}
+                      animate={{ opacity: 1, height: 'auto' }}
+                      exit={{ opacity: 0, height: 0 }}
+                      transition={{ duration: 0.2 }}
+                      className="overflow-hidden w-full"
+                    >
+                      <Box className="mt-2 rounded-xl bg-amber-50 border border-amber-200 px-4 py-3">
+                        <Typography className="text-xs text-amber-800 text-center leading-relaxed">
+                          Please contact your administrator to reset your authenticator. You&apos;ll be able to
+                          scan a new QR code and set it up again on your next login.
+                        </Typography>
+                      </Box>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+                <Link
+                  component="button"
+                  type="button"
+                  onClick={() => {
+                    setTwoFactorRequired(false);
+                    setNoCodeHelp(false);
+                    setValue('totpCode', '');
+                  }}
+                  className="text-gray-400 no-underline text-xs mt-3"
+                >
+                  ← Back to login
+                </Link>
+              </Box>
+            </motion.div >
+          )}
+        </AnimatePresence >
+
+        {/* Attempts-remaining / lockout feedback */}
+        < AnimatePresence mode="wait" >
+          {lockoutSeconds > 0 ? (
+            <motion.div
+              key="locked"
+              initial={{ opacity: 0, y: -8 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -8 }}
+              transition={{ duration: 0.2 }}
+              className="w-[85%] mt-3"
+            >
+              <Box className="flex items-center gap-3 rounded-xl bg-red-50 border border-red-200 px-4 py-3">
+                <LockClockOutlinedIcon className="text-red-500" />
+                <div className="text-left">
+                  <Typography className="text-sm font-semibold text-red-700">
+                    Account locked
+                  </Typography>
+                  <Typography className="text-xs text-red-600">
+                    Too many failed attempts. Please try again later.
+                  </Typography>
+                </div>
+              </Box>
+            </motion.div>
+          ) : attemptsRemaining != null ? (
+            <motion.div
+              key="attempts"
+              initial={{ opacity: 0, y: -8 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -8 }}
+              transition={{ duration: 0.2 }}
+              className="w-[85%] mt-3"
+            >
+              <Box className="flex items-center gap-3 rounded-xl bg-amber-50 border border-amber-200 px-4 py-3">
+                <WarningAmberRoundedIcon className="text-amber-500" />
+                <Typography className="text-sm text-amber-800 text-left">
+                  {twoFactorRequired ? 'Incorrect code.' : 'Incorrect username or password.'}{' '}
+                  <strong>{attemptsRemaining}</strong>{' '}
+                  {attemptsRemaining === 1 ? 'attempt' : 'attempts'} remaining before your account is locked.
+                </Typography>
+              </Box>
+            </motion.div>
+          ) : null}
+        </AnimatePresence >
+
+        <Button
+          type="submit"
+          variant="contained"
+          className={`mt-5 w-[85%] h-11 rounded-full shadow-md normal-case text-base font-medium ${!submitting ? activeJSON.submitButtonClass : ''}`}
+          data-testid="login-submit-button"
+          disabled={submitting || lockoutSeconds > 0}
+        >
+          {submitting ? (
+            <CircularProgress size={24} color="inherit" />
+          ) : lockoutSeconds > 0 ? (
+            'Locked'
+          ) : twoFactorRequired ? (
+            'VERIFY'
+          ) : (
+            'LOGIN'
+          )}
+        </Button>
+
+        <Link
+          href="/ui/forgotpassword"
+          className="mt-3 text-[#007ACC] no-underline"
+          onClick={(e) => {
+            e.preventDefault();
+            startTransition(() => {
+              navigate('/ui/forgotpassword');
+            });
+          }}
+        >
+          Forgot Password?
+        </Link>
+
+        {
+          activeJSON.isDownloadLink &&
+          (!login.hideAppLink || login.version != null) && (
+            <Link href={login.link} download className="mt-1 text-[#007ACC] no-underline hover:underline" >
+              <span className="text-red-600 font-bold" > (New) </span>&nbsp;
+              <FontAwesomeIcon icon={faDownload} />
+              &nbsp; Download Mobile App {login.version ? `(${login.version})` : ''} {' '}
+              {login.release_date ? `(${login.release_date})` : ''}
+            </Link>
+          )
+        }
+
+        {
+          activeJSON.footerSections && activeJSON.footerSections.length > 0 && (
+            <Box className="w-full flex flex-col items-center" >
+              {
+                activeJSON.footerSections.map((section, idx) => {
+                  const isButtons = section.type === 'buttons';
+                  const showDivider = idx === 0 || (idx > 0 && activeJSON.footerSections[idx - 1].type !== 'buttons');
+
+                  return (
+                    <React.Fragment key={idx} >
+                      {showDivider && (
+                        <Divider className={isButtons ? 'w-[85%] opacity-40' : 'w-full mt-2 mb-2'} />
+                      )
+                      }
+
+                      {
+                        section.type === 'buttons' && (
+                          <Box className="flex justify-between gap-4 mt-6 w-full px-2" >
+                            {
+                              section.buttons.map((btn, btnIdx) => {
+                                const icon = iconMap[btn.icon];
+                                const displayText = btn.text.replace('{{CURRENT_YEAR}}', new Date().getFullYear());
+                                return (
+                                  <Box
+                                    key={btnIdx}
+                                    className="flex-1 flex flex-col items-center justify-center py-4 bg-[#eef4fa] rounded-[2rem] border border-[#e2efe2] cursor-pointer hover:bg-[#e5f3ff] transition-colors"
+                                    onClick={() => window.open(btn.href, '_blank')
+                                    }
+                                  >
+                                    {icon && <FontAwesomeIcon icon={icon} size="2x" className="text-[#00685b]" />}
+                                    < Typography className={`${icon ? 'text-[14px]' : 'text-[16px]'} font-extrabold text-[#00685b] ${icon ? 'mt-3' : ''} tracking-tighter uppercase whitespace-nowrap`
+                                    }>
+                                      {displayText}
+                                    </Typography>
+                                  </Box>
+                                );
+                              })}
+                          </Box>
+                        )}
+
+                      {
+                        section.type === 'logos' && (
+                          <Box className="w-full mt-6 mb-2 flex items-center justify-center gap-6 px-4" >
+                            {
+                              section.logos.map((logo, logoIdx) => {
+                                const isMedplatLogo = logo.image === 'medplat-highres.png';
+                                const showVerticalDivider = isMedplatLogo && logoIdx > 0 && section.logos[logoIdx - 1].image !== 'medplat-highres.png' && activeJSON.showLogoDivider;
+                                const heightClass = activeJSON.logoHeightClass || (isMedplatLogo ? 'h-12 w-auto' : 'h-10 w-auto');
+                                return (
+                                  <React.Fragment key={logoIdx} >
+                                    {showVerticalDivider && <Divider orientation="vertical" flexItem className="h-8 mx-1 opacity-50" />}
+                                    <a href={logo.href} target="_blank" rel="noreferrer" >
+                                      <img
+                                        src={imageMap[logo.image]}
+                                        alt={logo.alt}
+                                        className={heightClass}
+                                      />
+                                    </a>
+                                  </React.Fragment>
+                                );
+                              })
+                            }
+                          </Box>
+                        )}
+
+                      {
+                        section.type === 'textWithLogo' && (
+                          <Box className="w-full mt-2 flex items-center justify-center gap-6 px-4" >
+                            <a href={section.href} target="_blank" rel="noreferrer" >
+                              <span className="flex items-center gap-2" >
+                                {section.text} < img src={imageMap[section.image]} alt={section.alt} className="h-14 w-auto" />
+                              </span>
+                            </a>
+                          </Box>
+                        )
+                      }
+
+                      {
+                        section.type === 'logosWithText' && (
+                          <Box className="w-full mt-2 flex items-center justify-center gap-6 px-4" >
+                            {
+                              section.items.map((item, itemIdx) => {
+                                const hasText = !!item.text;
+                                return (
+                                  <React.Fragment key={itemIdx} >
+                                    {hasText && <Divider orientation="vertical" flexItem />}
+                                    <a href={item.href} target="_blank" rel="noreferrer" >
+                                      {
+                                        hasText ? (
+                                          <span className="flex items-center gap-2" >
+                                            <img src={imageMap[item.image]} alt={item.alt} className="h-16 w-auto" /> {' '}
+                                            {item.text
+                                            }
+                                          </span>
+                                        ) : (
+                                          <img src={imageMap[item.image]} alt={item.alt} className="h-8 w-auto" />
+                                        )
+                                      }
+                                    </a>
+                                  </React.Fragment>
+                                );
+                              })}
+                          </Box>
+                        )}
+                    </React.Fragment>
+                  );
+                })}
+            </Box>
+          )}
+
+        {
+          activeJSON.bottomLogos && activeJSON.bottomLogos.map((logo, idx) => (
+            <React.Fragment key={idx} >
+              <Divider className="w-full mt-2 mb-2" />
+              <div className="flex items-center" >
+                <a href={logo.href} target="_blank" rel="noreferrer" border="0" >
+                  <img src={imageMap[logo.image]} alt={logo.alt} height="50" className="h-12 w-auto" />
+                </a>
+              </div>
+            </React.Fragment>
+          ))
+        }
+      </Grid>
+    </>
+  }
+
+  return (
+    <>
+      <AnimatePresence>
+        {loginSuccess && (
+          <motion.div
+            key="login-success"
+            className="fixed inset-0 z-[200] flex items-center justify-center bg-gradient-to-br from-slate-100 to-slate-300 p-4"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <motion.div
+              initial={{ scale: 0.95, opacity: 0, y: 16 }}
+              animate={{ scale: 1, opacity: 1, y: 0 }}
+              transition={{ type: 'spring', stiffness: 220, damping: 22 }}
+              className="bg-white rounded-2xl shadow-2xl px-10 py-12 flex flex-col items-center text-center max-w-sm w-full"
+            >
+              <div className="relative flex items-center justify-center mb-5">
+                <motion.span
+                  className="absolute inline-flex h-20 w-20 rounded-full bg-green-200"
+                  initial={{ scale: 0.6, opacity: 0.7 }}
+                  animate={{ scale: 1.6, opacity: 0 }}
+                  transition={{ duration: 1.1, repeat: Infinity }}
+                />
+                <motion.div
+                  initial={{ scale: 0, rotate: -20 }}
+                  animate={{ scale: 1, rotate: 0 }}
+                  transition={{ type: 'spring', stiffness: 260, damping: 14 }}
+                  className="relative text-green-500"
+                >
+                  <CheckCircleRoundedIcon sx={{ fontSize: 80 }} />
+                </motion.div>
+              </div>
+              <Typography className="text-xl font-bold text-gray-800">Login successful</Typography>
+              <Typography className="text-sm text-gray-500 mt-2">
+                Welcome back{loginSuccess.name ? `, ${loginSuccess.name}` : ''}! Taking you to your dashboard…
+              </Typography>
+              <div className="flex items-center gap-2 mt-5 text-gray-400">
+                <CircularProgress size={14} color="inherit" />
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      {twoFactorSetup && (
+        <TwoFactorSetupModal
+          open={!!twoFactorSetup}
+          userId={twoFactorSetup.userId}
+          userName={twoFactorSetup.userName}
+          onSkip={() => {
+            const target = twoFactorSetup.redirectTo;
+            setTwoFactorSetup(null);
+            navigateRef.current(target);
+          }}
+          onVerified={() => {
+            const target = twoFactorSetup.redirectTo;
+            setTwoFactorSetup(null);
+            navigateRef.current(target);
+          }}
+        />
+      )}
+      {activeJSON.centerLogin ? (
+        /* ── Centered Card layout (centerLogin: true) ── */
+        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-100 to-slate-300 pt-2 pb-2">
+          <Card elevation={6} className="rounded-2xl px-0 py-5 w-full max-w-lg">
+            <Grid component="form" onSubmit={handleSubmit(submit)} container justifyContent="center" className="w-full">
+              {jsonRenderer()}
+            </Grid>
+          </Card>
+        </div>
+      ) : (
+        /* ── Split-panel layout (centerLogin: false) ── */
+        <div className="login-split-container">
+          {/* Left Panel - Image Area */}
+          <div className="login-left-panel">
+            <img src={imageMap[activeJSON.implementationImage]} className="login-image" />
+          </div>
+          {/* Right Panel - Form Area */}
+          <div className="login-right-panel">
+            <div className="login-form-container">
+              <form onSubmit={handleSubmit(submit)} className="w-full">
+                {jsonRenderer()}
+              </form>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Login;