ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.11

package/core/lib/pages/login/login.js

@@ -1,872 +1,872 @@
-import { useContext, useEffect, useState } from 'react';
-
-import { Divider, Form, Input, message, Radio, Typography } from 'antd';
-
-import { Link, withRouter } from 'react-router-dom';
-
-import OTPInput from 'otp-input-react';
-
-import { useOtpTimer } from '../../hooks/use-otp-timer';
-
-import { motion } from 'framer-motion';
-
-import { Button } from '../../elements';
-
-import './login.scss';
-
-// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-// import { faCheck } from "@fortawesome/free-solid-svg-icons";
-
-import FirebaseUtils from '../../../lib/utils/firebase.utils';
-
-import ApiUtils from '../../utils/api/api.utils';
-
-import { GlobalContext } from './../../Store';
-
-import { getAccessToken, getRefreshToken } from '../../utils/http/auth.helper';
-
-import { Location } from '../../utils';
-
-import { checkLicenseStatus, formatMobile, safeJSON } from '../../utils/common/common.utils';
-
-import { MailOutlined, MessageOutlined } from '@ant-design/icons';
-
-import ResetPassword from './reset-password';
-
-const { Text, Title } = Typography;
-
-const layout = {
-  labelCol: { span: 24 },
-
-  wrapperCol: { span: 24 },
-};
-
-const tailLayout = {
-  wrapperCol: { span: 8 },
-};
-
-const LICENSE_EXPIRY = '2026-12-12';
-
-const headers = {
-  db_ptr: 'nuraho',
-};
-
-/**
- *
- * @param {*} param0
- * @returns
- */
-function LoginPhone({ history, appSettings }) {
-  const { brandLogo, heroImage, footerLogo } = appSettings;
-
-  //  Hook for OTP Timer
-  const { expired: otpExpired, formatted, startFromExpiry } = useOtpTimer();
-
-  const { dispatch, state, isMobile } = useContext(GlobalContext);
-  // variabel used for btnloading
-
-  const [loading, setLoading] = useState(false);
-
-  const [ldaploading, setLdapLoading] = useState(false);
-
-  // variable used to show otp generating
-
-  const [otpVisible, setOtpVisible] = useState(false);
-  // variabale used to show otp entering screen
-
-  const [otpVerification, setotpVerification] = useState(false);
-  // otp sucess
-  const [otpSuccess, setOtpSuccess] = useState(false);
-  // otp fail err
-  const [otpError, setOtpError] = useState(false);
-
-  const [otpValue, setOtpValue] = useState('');
-  // setting user credentials
-  const [user, setUser] = useState([]);
-
-  //  for communication mode [mobile,sms,email]
-  const [communicationMode, setCommunicationMode] = useState(null); // default selected email
-  const [modeError, setModeError] = useState(false);
-
-  //for forgot password show
-  const [showResetpassword, setShowResetpassword] = useState(false);
-
-  //for expired password show
-  const [expiredPassword, setExpiredPassword] = useState(false);
-
-  //for default name select when expire case
-  const [defaultUsername, setDefaultUsername] = useState('');
-
-  const isAuthenticated = Boolean(getAccessToken());
-  const isRefreshTokenExist = Boolean(getRefreshToken());
-
-  const path = window.location.pathname;
-
-  /**
-   * handlePasswordExpiryCheck
-   * --------------------------
-   * Validates whether a user's password is expired or nearing expiry.
-   *
-   * - Parses `last_password_change` from user.other_details.
-   * - Calculates expiry using PASSWORD_VALIDITY_DAYS.
-   * - Shows Ant Design warning message if expired or within warning period.
-   * - Warning message includes navigation to `/change-password`.
-   *
-   * Requires:
-   * - PASSWORD_VALIDITY_DAYS constant
-   * - React Router history
-   * - antd message component
-   */
-  const handlePasswordExpiryCheck = (expiryDays) => {
-    if (expiryDays == null) return;
-
-    if (expiryDays <= 0) {
-      message.error('Your password has expired. Please reset it.');
-
-      setExpiredPassword(true);
-      setShowResetpassword(true);
-
-      return;
-    }
-
-    if (expiryDays <= 2) {
-      message.warning(
-        <span>
-          Your password will expire in {expiryDays} day(s). <a onClick={() => history.push('/change-password')}>Click here to update.</a>
-        </span>
-      );
-    }
-  };
-
-  const onFinish = (values) => {
-    setLoading(true);
-
-    const status = checkLicenseStatus(LICENSE_EXPIRY);
-
-    if (!status.valid) {
-      message.error(status.message);
-      setLoading(false);
-      return;
-    }
-
-    if (status.message) {
-      if (status.level === 'error') {
-        message.error(status.message);
-      } else if (status.level === 'warning') {
-        message.warning(status.message);
-      }
-    }
-
-    if (process.env.REACT_APP_PRIMARY_BACKEND === 'SQL') {
-      let formBody = {
-        username: values.email,
-
-        password: values.password,
-      };
-
-      return ApiUtils.post({ url: 'auth/login', formBody, headers })
-
-        .then((result) => {
-          setLoading(false);
-
-          const { user, access_token, refresh_token, insider_token } = result;
-          if (access_token) localStorage.access_token = access_token;
-
-          if (insider_token) localStorage.insider_token = insider_token;
-
-          if (result.success) {
-            handlePasswordExpiryCheck(result.expiry_in_days);
-
-            //two_factor_authentication variable is present then proceed Two factor authentication
-            if (result.data && result.data.two_factor_authentication) {
-              let data;
-
-              // set variable used for otp send screen
-              setOtpVisible(true);
-
-              // set user credentials
-              data = {
-                username: result.data.email,
-                password: values.password,
-                mode: result.data.mode ? result.data.mode : null,
-                mobile: result.data.mobile ? result.data.mobile : null,
-              };
-
-              // set user values
-              setUser(data);
-              //  Set default communication mode automatically
-              if (result.data.mode) {
-                setCommunicationMode(result.data.mode);
-              }
-            } else {
-              let d = user;
-
-              let userInfo = {
-                id: user.id,
-                locations: [],
-                ...d,
-                ...{
-                  loggedCheckDone: true,
-                },
-              };
-
-              dispatch({ type: 'user', payload: userInfo });
-
-              localStorage.setItem('userInfo', JSON.stringify(userInfo));
-              if (refresh_token) localStorage.setItem('refresh_token', refresh_token);
-
-              // Setting DBPTR
-              if (user?.organization_details) {
-                const data = safeJSON(user?.organization_details);
-
-                const defaultBranch = data.branch.find((b) => b.defaultBranch === true);
-
-                const defaultDbptr = defaultBranch?.dbPtr;
-
-                localStorage.setItem('db_ptr', defaultDbptr);
-              }
-
-              history.push('/');
-            }
-          } else {
-            if (result.passwordChange) {
-              message.warning(result.message);
-
-              //time for redirect when expire
-              setTimeout(() => {
-                setExpiredPassword(true);
-                setDefaultUsername(values.email);
-
-                setShowResetpassword(true);
-              }, 1500);
-            } else {
-              message.warning(result.message);
-            }
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-
-          message.error('This operation has failed.');
-
-          setLoading(false);
-        });
-    } else {
-      FirebaseUtils.loginWithEmail(values)
-
-        .then((result) => {
-          setLoading(false);
-
-          if (result.id) {
-            if (result.active) {
-              let d = result;
-
-              let userInfo = {
-                id: result.id,
-                locations: [],
-                ...d,
-                ...{
-                  loggedCheckDone: true,
-                },
-              };
-
-              if (result.role && result.role.name === 'admin') {
-                userInfo.isAdmin = true;
-              }
-
-              dispatch({ type: 'user', payload: userInfo });
-
-              localStorage.setItem('userInfo', JSON.stringify(userInfo));
-
-              history.push('/');
-            } else {
-              message.error('Your account is inactive, Please contact support.');
-            }
-          } else {
-            message.error('No accounts found.');
-          }
-        })
-        .catch((result) => {
-          console.log(result);
-
-          setLoading(false);
-
-          message.error('Login Failed');
-        });
-    }
-  };
-
-  /**
-   *
-   * Function to implement 2 factor authentication on login
-   *
-   */
-  const sendAuthenticationOtp = () => {
-    if (loading) return;
-
-    //  Reset previous error
-    setModeError(false);
-
-    //  Validate communication mode
-    if (!communicationMode) {
-      setModeError(true); // Show error
-      return; // Stop OTP send
-    }
-
-    setLoading(true);
-
-    // set formbody
-    let formBody;
-    formBody = {
-      email: user.username,
-      mode: communicationMode,
-    };
-
-    // api used to send otp corresponding mail address
-    return ApiUtils.post({
-      url: 'auth/send-authentication-otp',
-      formBody,
-      headers,
-    }).then((result) => {
-      // if the api is sucess then go for otpverification step
-      if (result.success) {
-        //  for expiry_time
-        startFromExpiry(result?.expiry_time);
-        // set  button loading false
-        setLoading(false);
-        // if the api is sucess then go for otpverification step
-        setotpVerification(true);
-      } else {
-        setLoading(false);
-        message.error(result.message);
-      }
-    });
-  };
-
-  /**
-   * Function to implement 2 factor authentication verification
-   * @returns
-   */
-
-  const verifyOtp = () => {
-    // If OTP expired, block verification
-    if (otpExpired) {
-      return;
-    }
-
-    setLoading(true);
-
-    const formBody = {
-      username: user.username,
-      password: user.password,
-      mode: communicationMode,
-      mobile: user.mobile,
-      otp: otpValue,
-    };
-    // verifying is otp is correct or not
-    return ApiUtils.post({
-      url: 'auth/verify-authentication-otp',
-      formBody,
-      headers,
-      hideError: true, //  removing unwanted error msg
-    })
-      .then((result) => {
-        if (result.success) {
-          // OTP success
-          setOtpSuccess(true);
-          setOtpError(false);
-          setLoading(false);
-
-          const userInfo = {
-            id: result.user.id,
-            locations: [],
-            ...result.user,
-            loggedCheckDone: true,
-          };
-          // Setting access_token
-          if (result?.access_token) localStorage.access_token = result.access_token;
-          // Setting refresh_token
-          if (result.refresh_token) localStorage.setItem('refresh_token', result.refresh_token);
-
-          // Setting DBPTR
-          if (result?.user?.organization_details) {
-            const data = safeJSON(result?.user?.organization_details);
-
-            const defaultBranch = data.branch.find((b) => b.defaultBranch === true);
-            const defaultDbptr = defaultBranch?.dbPtr;
-
-            localStorage.setItem('db_ptr', defaultDbptr);
-          }
-
-          dispatch({ type: 'user', payload: userInfo });
-          // set user info into local storage
-          localStorage.setItem('userInfo', JSON.stringify(userInfo));
-
-          handlePasswordExpiryCheck(result.expiry_in_days);
-
-          setTimeout(() => history.push('/'), 500);
-        } else {
-          //  OTP FAILED (wrong OTP)
-          setOtpSuccess(false);
-          setOtpError(true);
-          setOtpValue(''); //  Clear OTP
-          setLoading(false);
-        }
-      })
-      .catch((error) => {
-        //  Server error, timeout, network fail → treat as failed OTP
-        setOtpSuccess(false);
-        setOtpError(true);
-
-        setLoading(false);
-      });
-  };
-
-  const onFinishFailed = () => {
-    setLoading(false);
-
-    setOtpVisible(false);
-  };
-
-  /**
-   * otp onange
-   * @param {*} value
-   */
-  const handleOtpChange = (value) => {
-    setOtpValue(value);
-    //  Reset states so correct OTP will work after wrong OTP
-    setOtpError(false);
-    setOtpSuccess(false);
-  };
-
-  // Paste handler runs in capture phase so it pre-empts otp-input-react's
-  // internal handler, which otherwise drops digits when the focused box is
-  // not the first one and does not strip spaces/dashes/surrounding text
-  const handleOtpPaste = (e) => {
-    const raw = e.clipboardData?.getData('text') || '';
-    const digits = raw.replace(/\D/g, '').slice(0, 6);
-    if (!digits) return;
-    e.preventDefault();
-    e.stopPropagation();
-    setOtpValue(digits);
-    setOtpError(false);
-    setOtpSuccess(false);
-  };
-
-  /**
-   * Otp resend Logic
-   */
-  const handleResendOTP = () => {
-    if (loading) return;
-
-    setOtpValue('');
-    setModeError(false);
-    setOtpError(false);
-    setOtpSuccess(false);
-    // resend the OTP automatically
-    sendAuthenticationOtp();
-  };
-
-  /**
-   * Cancel  otp send process
-   */
-  const handlecancel = () => {
-    setOtpVisible(false);
-    setotpVerification(false);
-    setOtpValue('');
-    setModeError(false);
-    setOtpError(false);
-  };
-
-  // Redirect Home Page, When token is exist
-  useEffect(() => {
-    //  Do NOT redirect when OTP is visible or verification is happening
-    if (otpVerification) return;
-    if (isAuthenticated && isRefreshTokenExist && path === '/login') {
-      Location.navigate({ url: '/' });
-    } else {
-      Location.navigate({ url: '/login' });
-    }
-  }, [isAuthenticated, isRefreshTokenExist, path]);
-
-  useEffect(() => {
-    // Dynamically set the CSS variables based on the current theme
-    // document.documentElement.style.setProperty('--custom-text-color', state.theme.colors.colorText);
-    // document.documentElement.style.setProperty('--custom-bg-color', state.theme.colors.primaryButtonBg);
-    // document.documentElement.style.setProperty('--custom-btn-text-color', state.theme.colors.primaryButtonText);
-    // document.documentElement.style.setProperty('--custom-input-bg-color', state.theme.colors.inputBgColor);
-    // document.documentElement.style.setProperty('--custom-input-color', state.theme.colors.inputColor);
-  }, [state.theme]);
-
-  // when otp is expired
-  useEffect(() => {
-    if (otpExpired) {
-      setOtpValue(''); // Clear OTP box
-      setOtpError(false);
-    }
-  }, [otpExpired]);
-
-  // Auto-submit once the user has filled all 6 digits (typed or pasted).
-  // verifyOtp clears otpValue on failure (back to length 0) and sets
-  // otpSuccess on success, both of which prevent this from re-firing.
-  useEffect(() => {
-    if (otpValue.length !== 6) return;
-    if (loading || otpExpired || otpSuccess || !otpVerification) return;
-    verifyOtp();
-    // verifyOtp intentionally omitted from deps — it's redefined every render;
-    // including it would re-fire on every state change.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [otpValue, otpVerification]);
-  /**
-   * Function to get Ldap users
-   * @returns
-   */
-
-  const loggedUser = () => {
-    return fetch('http://localhost:3800/users/logged-user', {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-      .then((response) => {
-        if (!response.ok) {
-          throw message.warning('Client application not running');
-        }
-        return response.json();
-      })
-      .then((data) => {
-        if (data && data.success) {
-          return data.username;
-        } else {
-          message.warning('Client application not running');
-        }
-      })
-      .catch((error) => {
-        console.log(error);
-        message.warning('Client application not running');
-        setLdapLoading(false);
-        return null;
-      });
-  };
-
-  /**
-   *
-   * @returns Function to login with ldap
-   *
-   */
-  const loginWithLdap = async () => {
-    //call function to get the current logged username
-    const username = await loggedUser();
-
-    //formbody consist of username from loggeduser
-    let formBody = {
-      username: username,
-    };
-    //calling ldap-login API
-    return ApiUtils.post({
-      // url: "users/logged-user",
-      url: 'auth/ldap-login',
-      formBody,
-      headers,
-    })
-      .then((result) => {
-        setLdapLoading(false);
-
-        const { user, access_token } = result;
-
-        localStorage.access_token = access_token;
-
-        if (result.success) {
-          //two_factor_authentication variable is present then proceed Two factor authentication
-          if (result.data && result.data.two_factor_authentication) {
-            let data;
-
-            // set variable used for otp send screen
-            setOtpVisible(true);
-
-            // set user credentials
-            data = {
-              username: result.data.email,
-              password: values.password,
-              mode: result.data.mode ? result.data.mode : null,
-              mobile: result.data.mobile ? result.data.mobile : null,
-            };
-
-            // set user values
-            setUser(data);
-          } else {
-            let d = user;
-
-            let userInfo = {
-              id: user.id,
-              locations: [],
-              ...d,
-              ...{
-                loggedCheckDone: true,
-              },
-            };
-
-            dispatch({ type: 'user', payload: userInfo });
-
-            localStorage.setItem('userInfo', JSON.stringify(userInfo));
-
-            history.push('/');
-          }
-        } else {
-          message.error(result.message);
-        }
-      })
-      .catch((error) => {
-        console.log(error);
-
-        message.error('This operation has failed.');
-
-        setLdapLoading(false);
-      });
-  };
-
-  // helper to show contact in OTP verification screen
-  const getOtpDestinationText = () => {
-    if (communicationMode === 'mobile') return formatMobile(user.mobile);
-    // if (communicationMode === 'whatsapp') return user.mobile;
-    return user.username;
-  };
-
-  const { globalCustomerHeader = () => {} } = appSettings;
-
-  const themeName = process.env.REACT_APP_THEME; // e.g., 'purple'
-  const isPurple = themeName === 'purple';
-
-  const sectionStyle = isPurple
-    ? {
-        width: '100%',
-        height: '100vh',
-        backgroundImage: `${state.theme.colors.loginPageBackground}`,
-        backgroundPosition: 'center bottom, center',
-        backgroundRepeat: 'no-repeat, no-repeat',
-        backgroundSize: 'cover, cover',
-      }
-    : {
-        width: '100%',
-        height: '100vh',
-        background: 'linear-gradient(to bottom, #F7F6E3 0%, #EEF1DE 20%, #D5E4DA 45%, #9DBFC8 75%, #4F89A6 100%)',
-        backgroundPosition: 'center bottom, center',
-        backgroundRepeat: 'no-repeat, no-repeat',
-        backgroundSize: 'cover, cover',
-      };
-
-  return (
-    <section className="full-page" style={sectionStyle}>
-      <section className="user-authentication-section">
-        {/* Background Section */}
-        <motion.div
-          className="page-background"
-          initial={{ y: -50, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 1, ease: 'anticipate' }}
-          exit={{ opacity: 0 }}
-        />
-        {/* Background Section Ends */}
-
-        <motion.div
-          className="auth-form-wrapper"
-          initial={{ y: 20 }}
-          animate={{ y: 0 }}
-          transition={{ duration: 1, ease: 'anticipate' }}
-          exit={{ opacity: 0 }}
-        >
-          <div
-            className=" login-form-container"
-            style={{
-              background: state.theme.colors.tableBg,
-              borderStyle: state.theme.colors.tableBorderStyle,
-            }}
-          >
-            <div className="brand-logo">
-              <img className="logo-welcome" src={brandLogo} alt="Logo" />
-            </div>
-
-            <div className="otp-form">
-              {/* OTP Verification Section */}
-
-              {/* OTP Method Selection Section */}
-              {otpVisible && (
-                <div className="otp-input-container">
-                  <div className="form-title">
-                    {otpVerification ? (
-                      <>
-                        {/* <h3>OTP Verification</h3> */}
-                        {/* <p>
-                          Enter the verification code we sent to{' '}
-                          <span className="otp-mode-text">
-                            <strong>{getOtpDestinationText()}</strong>
-                          </span>
-                        </p> */}
-                      </>
-                    ) : (
-                      <>
-                        <Text type="primary">Two Factor Authentication</Text>
-                        <p>
-                          Two-Factor Authentication is enabled for your account. Please verify your account before logging in to enhance security.
-                        </p>
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                      </>
-                    )}
-                  </div>
-
-                  {/* Show Communication Method ONLY IF:
-                - OTP not sent OR
-                - OTP expired
-                 */}
-
-                  {(!otpVerification || otpExpired) && (
-                    <>
-                      <Divider />
-                      <div className="otp-method-section">
-                        <Text type="primary">Select Preferred OTP Verification Method</Text>
-                        <div className="otp-method-group">
-                          <Radio checked={communicationMode === 'email'} onChange={() => setCommunicationMode('email')}>
-                            Email <MailOutlined className="otp-icon" style={{ marginLeft: 6 }} />
-                          </Radio>
-                          <Radio checked={communicationMode === 'mobile'} onChange={() => setCommunicationMode('mobile')}>
-                            SMS <MessageOutlined className="otp-icon" style={{ marginLeft: 6 }} />
-                          </Radio>
-                        </div>
-                        {modeError && <p className="otp-mode-error">Please select a communication mode.</p>}
-                      </div>
-                    </>
-                  )}
-
-                  {!otpVerification ? (
-                    <div className="otp-container">
-                      <Button loading={loading} type="primary" onClick={sendAuthenticationOtp} style={{ marginTop: '6px' }}>
-                        Send OTP
-                      </Button>
-                    </div>
-                  ) : (
-                    <>
-                      {/* <Divider /> */}
-                      <div className="otp-container">
-                        <p>
-                          Enter the verification code we sent to{' '}
-                          <span className="otp-mode-text">
-                            <strong>{getOtpDestinationText()}</strong>
-                          </span>
-                        </p>
-                        <div onPasteCapture={handleOtpPaste}>
-                          <OTPInput
-                            value={otpValue}
-                            onChange={handleOtpChange}
-                            autoFocus
-                            OTPLength={6}
-                            disabled={loading || otpExpired}
-                            inputStyles={{
-                              border: otpSuccess ? '2px solid #52c41a' : otpError ? '2px solid #FF5C5C' : '1px solid #d9d9d9',
-                              borderRadius: 4,
-                              width: isMobile ? 28 : 45,
-                              height: isMobile ? 36 : 40,
-                              margin: isMobile ? '2px' : '0 4px',
-                              fontSize: isMobile ? 16 : 18,
-                              textAlign: 'center',
-                            }}
-                          />
-                        </div>
-                        {/* Timer below OTP */}
-                        <div className="otp-timer">
-                          {/* {!otpExpired ?  */}
-                          {otpSuccess ? null : <span>{formatted}</span>}
-                          {/* {otpError && (
-            <p style={{ color: 'red', marginTop: 8 }}>Invalid OTP, please try again</p>
-                    )} */}
-
-                          {otpSuccess && <p style={{ color: 'green', marginTop: 8 }}>Your OTP has been verified successfully.</p>}
-                        </div>
-                      </div>
-                      {!otpSuccess && (
-                        <Button loading={loading} type="primary" disabled={otpExpired} onClick={verifyOtp} style={{ marginTop: 16 }}>
-                          Verify OTP
-                        </Button>
-                      )}
-                    </>
-                  )}
-                </div>
-              )}
-
-              {/* Login Form Section */}
-              {!otpVerification && !otpVisible && !showResetpassword && (
-                <Form {...layout} layout="vertical" name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
-                  <div className="form-title">
-                    <h4></h4>
-                  </div>
-
-                  {/* {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER && <div className="branch-switcher">{globalCustomerHeader()}</div>} */}
-
-                  {process.env.REACT_APP_ENABLE_LDAP === 'true' && (
-                    <Button loading={ldaploading} type="secondary" className="SubmitBtn" onClick={loginWithLdap}>
-                      Sign in using AD
-                    </Button>
-                  )}
-
-                  <Form.Item label="Email" name="email" rules={[{ required: true, message: 'Please input your email!' }]}>
-                    <Input autoComplete="off" autoFocus />
-                  </Form.Item>
-
-                  <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
-                    <Input.Password autoComplete="off" />
-                  </Form.Item>
-
-                  <Form.Item {...tailLayout} style={{ marginBottom: '0px' }}>
-                    <Button loading={loading} type="primary" htmlType="submit" className="SubmitBtn">
-                      &nbsp;&nbsp; Submit
-                    </Button>
-                    <div className="forgot-password">
-                      <Link onClick={() => setShowResetpassword(true)}>Forgot Password?</Link>
-                    </div>
-                  </Form.Item>
-                </Form>
-              )}
-
-              {/* Forgot Password Section */}
-              {showResetpassword && (
-                <ResetPassword
-                  defaultUsername={expiredPassword ? defaultUsername : undefined}
-                  disabledUserName={expiredPassword}
-                  onBack={() => {
-                    setShowResetpassword(false);
-                    setExpiredPassword(false);
-                  }}
-                  title={expiredPassword ? 'Password Expired!' : 'Forgot Password?'}
-                  // subtitle={
-                  //   expiredPassword
-                  //     ? 'Your password has expired. Select a preferred communication method to receive the One-Time Password (OTP) to continue.'
-                  //     : 'Enter your username and Select a preferred communication method to receive the One-Time Password (OTP) to continue..'
-                  // }
-                  buttonText={expiredPassword ? 'Send Reset Link' : 'Send Reset Link'}
-                />
-              )}
-            </div>
-          </div>
-          {!otpSuccess && otpVerification && (
-            <div className="otp-actions">
-              <div className="resend-action">
-                <Text disabled>Didn't receive OTP?</Text>
-
-                <Link className="resend-otp-link" disabled={!otpExpired} onClick={handleResendOTP}>
-                  Resend OTP
-                </Link>
-              </div>
-
-              <Button size="small" type="default" onClick={handlecancel}>
-                Cancel
-              </Button>
-            </div>
-          )}
-        </motion.div>
-      </section>
-    </section>
-  );
-}
-
-export default withRouter(LoginPhone);
+import { useContext, useEffect, useState } from 'react';
+
+import { Divider, Form, Input, message, Radio, Typography } from 'antd';
+
+import { Link, withRouter } from 'react-router-dom';
+
+import OTPInput from 'otp-input-react';
+
+import { useOtpTimer } from '../../hooks/use-otp-timer';
+
+import { motion } from 'framer-motion';
+
+import { Button } from '../../elements';
+
+import './login.scss';
+
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+// import { faCheck } from "@fortawesome/free-solid-svg-icons";
+
+import FirebaseUtils from '../../../lib/utils/firebase.utils';
+
+import ApiUtils from '../../utils/api/api.utils';
+
+import { GlobalContext } from './../../Store';
+
+import { getAccessToken, getRefreshToken } from '../../utils/http/auth.helper';
+
+import { Location } from '../../utils';
+
+import { checkLicenseStatus, formatMobile, safeJSON } from '../../utils/common/common.utils';
+
+import { MailOutlined, MessageOutlined } from '@ant-design/icons';
+
+import ResetPassword from './reset-password';
+
+const { Text, Title } = Typography;
+
+const layout = {
+  labelCol: { span: 24 },
+
+  wrapperCol: { span: 24 },
+};
+
+const tailLayout = {
+  wrapperCol: { span: 8 },
+};
+
+const LICENSE_EXPIRY = '2026-12-12';
+
+const headers = {
+  db_ptr: 'nuraho',
+};
+
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+function LoginPhone({ history, appSettings }) {
+  const { brandLogo, heroImage, footerLogo } = appSettings;
+
+  //  Hook for OTP Timer
+  const { expired: otpExpired, formatted, startFromExpiry } = useOtpTimer();
+
+  const { dispatch, state, isMobile } = useContext(GlobalContext);
+  // variabel used for btnloading
+
+  const [loading, setLoading] = useState(false);
+
+  const [ldaploading, setLdapLoading] = useState(false);
+
+  // variable used to show otp generating
+
+  const [otpVisible, setOtpVisible] = useState(false);
+  // variabale used to show otp entering screen
+
+  const [otpVerification, setotpVerification] = useState(false);
+  // otp sucess
+  const [otpSuccess, setOtpSuccess] = useState(false);
+  // otp fail err
+  const [otpError, setOtpError] = useState(false);
+
+  const [otpValue, setOtpValue] = useState('');
+  // setting user credentials
+  const [user, setUser] = useState([]);
+
+  //  for communication mode [mobile,sms,email]
+  const [communicationMode, setCommunicationMode] = useState(null); // default selected email
+  const [modeError, setModeError] = useState(false);
+
+  //for forgot password show
+  const [showResetpassword, setShowResetpassword] = useState(false);
+
+  //for expired password show
+  const [expiredPassword, setExpiredPassword] = useState(false);
+
+  //for default name select when expire case
+  const [defaultUsername, setDefaultUsername] = useState('');
+
+  const isAuthenticated = Boolean(getAccessToken());
+  const isRefreshTokenExist = Boolean(getRefreshToken());
+
+  const path = window.location.pathname;
+
+  /**
+   * handlePasswordExpiryCheck
+   * --------------------------
+   * Validates whether a user's password is expired or nearing expiry.
+   *
+   * - Parses `last_password_change` from user.other_details.
+   * - Calculates expiry using PASSWORD_VALIDITY_DAYS.
+   * - Shows Ant Design warning message if expired or within warning period.
+   * - Warning message includes navigation to `/change-password`.
+   *
+   * Requires:
+   * - PASSWORD_VALIDITY_DAYS constant
+   * - React Router history
+   * - antd message component
+   */
+  const handlePasswordExpiryCheck = (expiryDays) => {
+    if (expiryDays == null) return;
+
+    if (expiryDays <= 0) {
+      message.error('Your password has expired. Please reset it.');
+
+      setExpiredPassword(true);
+      setShowResetpassword(true);
+
+      return;
+    }
+
+    if (expiryDays <= 2) {
+      message.warning(
+        <span>
+          Your password will expire in {expiryDays} day(s). <a onClick={() => history.push('/change-password')}>Click here to update.</a>
+        </span>
+      );
+    }
+  };
+
+  const onFinish = (values) => {
+    setLoading(true);
+
+    const status = checkLicenseStatus(LICENSE_EXPIRY);
+
+    if (!status.valid) {
+      message.error(status.message);
+      setLoading(false);
+      return;
+    }
+
+    if (status.message) {
+      if (status.level === 'error') {
+        message.error(status.message);
+      } else if (status.level === 'warning') {
+        message.warning(status.message);
+      }
+    }
+
+    if (process.env.REACT_APP_PRIMARY_BACKEND === 'SQL') {
+      let formBody = {
+        username: values.email,
+
+        password: values.password,
+      };
+
+      return ApiUtils.post({ url: 'auth/login', formBody, headers })
+
+        .then((result) => {
+          setLoading(false);
+
+          const { user, access_token, refresh_token, insider_token } = result;
+          if (access_token) localStorage.access_token = access_token;
+
+          if (insider_token) localStorage.insider_token = insider_token;
+
+          if (result.success) {
+            handlePasswordExpiryCheck(result.expiry_in_days);
+
+            //two_factor_authentication variable is present then proceed Two factor authentication
+            if (result.data && result.data.two_factor_authentication) {
+              let data;
+
+              // set variable used for otp send screen
+              setOtpVisible(true);
+
+              // set user credentials
+              data = {
+                username: result.data.email,
+                password: values.password,
+                mode: result.data.mode ? result.data.mode : null,
+                mobile: result.data.mobile ? result.data.mobile : null,
+              };
+
+              // set user values
+              setUser(data);
+              //  Set default communication mode automatically
+              if (result.data.mode) {
+                setCommunicationMode(result.data.mode);
+              }
+            } else {
+              let d = user;
+
+              let userInfo = {
+                id: user.id,
+                locations: [],
+                ...d,
+                ...{
+                  loggedCheckDone: true,
+                },
+              };
+
+              dispatch({ type: 'user', payload: userInfo });
+
+              localStorage.setItem('userInfo', JSON.stringify(userInfo));
+              if (refresh_token) localStorage.setItem('refresh_token', refresh_token);
+
+              // Setting DBPTR
+              if (user?.organization_details) {
+                const data = safeJSON(user?.organization_details);
+
+                const defaultBranch = data.branch.find((b) => b.defaultBranch === true);
+
+                const defaultDbptr = defaultBranch?.dbPtr;
+
+                localStorage.setItem('db_ptr', defaultDbptr);
+              }
+
+              history.push('/');
+            }
+          } else {
+            if (result.passwordChange) {
+              message.warning(result.message);
+
+              //time for redirect when expire
+              setTimeout(() => {
+                setExpiredPassword(true);
+                setDefaultUsername(values.email);
+
+                setShowResetpassword(true);
+              }, 1500);
+            } else {
+              message.warning(result.message);
+            }
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+
+          message.error('This operation has failed.');
+
+          setLoading(false);
+        });
+    } else {
+      FirebaseUtils.loginWithEmail(values)
+
+        .then((result) => {
+          setLoading(false);
+
+          if (result.id) {
+            if (result.active) {
+              let d = result;
+
+              let userInfo = {
+                id: result.id,
+                locations: [],
+                ...d,
+                ...{
+                  loggedCheckDone: true,
+                },
+              };
+
+              if (result.role && result.role.name === 'admin') {
+                userInfo.isAdmin = true;
+              }
+
+              dispatch({ type: 'user', payload: userInfo });
+
+              localStorage.setItem('userInfo', JSON.stringify(userInfo));
+
+              history.push('/');
+            } else {
+              message.error('Your account is inactive, Please contact support.');
+            }
+          } else {
+            message.error('No accounts found.');
+          }
+        })
+        .catch((result) => {
+          console.log(result);
+
+          setLoading(false);
+
+          message.error('Login Failed');
+        });
+    }
+  };
+
+  /**
+   *
+   * Function to implement 2 factor authentication on login
+   *
+   */
+  const sendAuthenticationOtp = () => {
+    if (loading) return;
+
+    //  Reset previous error
+    setModeError(false);
+
+    //  Validate communication mode
+    if (!communicationMode) {
+      setModeError(true); // Show error
+      return; // Stop OTP send
+    }
+
+    setLoading(true);
+
+    // set formbody
+    let formBody;
+    formBody = {
+      email: user.username,
+      mode: communicationMode,
+    };
+
+    // api used to send otp corresponding mail address
+    return ApiUtils.post({
+      url: 'auth/send-authentication-otp',
+      formBody,
+      headers,
+    }).then((result) => {
+      // if the api is sucess then go for otpverification step
+      if (result.success) {
+        //  for expiry_time
+        startFromExpiry(result?.expiry_time);
+        // set  button loading false
+        setLoading(false);
+        // if the api is sucess then go for otpverification step
+        setotpVerification(true);
+      } else {
+        setLoading(false);
+        message.error(result.message);
+      }
+    });
+  };
+
+  /**
+   * Function to implement 2 factor authentication verification
+   * @returns
+   */
+
+  const verifyOtp = () => {
+    // If OTP expired, block verification
+    if (otpExpired) {
+      return;
+    }
+
+    setLoading(true);
+
+    const formBody = {
+      username: user.username,
+      password: user.password,
+      mode: communicationMode,
+      mobile: user.mobile,
+      otp: otpValue,
+    };
+    // verifying is otp is correct or not
+    return ApiUtils.post({
+      url: 'auth/verify-authentication-otp',
+      formBody,
+      headers,
+      hideError: true, //  removing unwanted error msg
+    })
+      .then((result) => {
+        if (result.success) {
+          // OTP success
+          setOtpSuccess(true);
+          setOtpError(false);
+          setLoading(false);
+
+          const userInfo = {
+            id: result.user.id,
+            locations: [],
+            ...result.user,
+            loggedCheckDone: true,
+          };
+          // Setting access_token
+          if (result?.access_token) localStorage.access_token = result.access_token;
+          // Setting refresh_token
+          if (result.refresh_token) localStorage.setItem('refresh_token', result.refresh_token);
+
+          // Setting DBPTR
+          if (result?.user?.organization_details) {
+            const data = safeJSON(result?.user?.organization_details);
+
+            const defaultBranch = data.branch.find((b) => b.defaultBranch === true);
+            const defaultDbptr = defaultBranch?.dbPtr;
+
+            localStorage.setItem('db_ptr', defaultDbptr);
+          }
+
+          dispatch({ type: 'user', payload: userInfo });
+          // set user info into local storage
+          localStorage.setItem('userInfo', JSON.stringify(userInfo));
+
+          handlePasswordExpiryCheck(result.expiry_in_days);
+
+          setTimeout(() => history.push('/'), 500);
+        } else {
+          //  OTP FAILED (wrong OTP)
+          setOtpSuccess(false);
+          setOtpError(true);
+          setOtpValue(''); //  Clear OTP
+          setLoading(false);
+        }
+      })
+      .catch((error) => {
+        //  Server error, timeout, network fail → treat as failed OTP
+        setOtpSuccess(false);
+        setOtpError(true);
+
+        setLoading(false);
+      });
+  };
+
+  const onFinishFailed = () => {
+    setLoading(false);
+
+    setOtpVisible(false);
+  };
+
+  /**
+   * otp onange
+   * @param {*} value
+   */
+  const handleOtpChange = (value) => {
+    setOtpValue(value);
+    //  Reset states so correct OTP will work after wrong OTP
+    setOtpError(false);
+    setOtpSuccess(false);
+  };
+
+  // Paste handler runs in capture phase so it pre-empts otp-input-react's
+  // internal handler, which otherwise drops digits when the focused box is
+  // not the first one and does not strip spaces/dashes/surrounding text
+  const handleOtpPaste = (e) => {
+    const raw = e.clipboardData?.getData('text') || '';
+    const digits = raw.replace(/\D/g, '').slice(0, 6);
+    if (!digits) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setOtpValue(digits);
+    setOtpError(false);
+    setOtpSuccess(false);
+  };
+
+  /**
+   * Otp resend Logic
+   */
+  const handleResendOTP = () => {
+    if (loading) return;
+
+    setOtpValue('');
+    setModeError(false);
+    setOtpError(false);
+    setOtpSuccess(false);
+    // resend the OTP automatically
+    sendAuthenticationOtp();
+  };
+
+  /**
+   * Cancel  otp send process
+   */
+  const handlecancel = () => {
+    setOtpVisible(false);
+    setotpVerification(false);
+    setOtpValue('');
+    setModeError(false);
+    setOtpError(false);
+  };
+
+  // Redirect Home Page, When token is exist
+  useEffect(() => {
+    //  Do NOT redirect when OTP is visible or verification is happening
+    if (otpVerification) return;
+    if (isAuthenticated && isRefreshTokenExist && path === '/login') {
+      Location.navigate({ url: '/' });
+    } else {
+      Location.navigate({ url: '/login' });
+    }
+  }, [isAuthenticated, isRefreshTokenExist, path]);
+
+  useEffect(() => {
+    // Dynamically set the CSS variables based on the current theme
+    // document.documentElement.style.setProperty('--custom-text-color', state.theme.colors.colorText);
+    // document.documentElement.style.setProperty('--custom-bg-color', state.theme.colors.primaryButtonBg);
+    // document.documentElement.style.setProperty('--custom-btn-text-color', state.theme.colors.primaryButtonText);
+    // document.documentElement.style.setProperty('--custom-input-bg-color', state.theme.colors.inputBgColor);
+    // document.documentElement.style.setProperty('--custom-input-color', state.theme.colors.inputColor);
+  }, [state.theme]);
+
+  // when otp is expired
+  useEffect(() => {
+    if (otpExpired) {
+      setOtpValue(''); // Clear OTP box
+      setOtpError(false);
+    }
+  }, [otpExpired]);
+
+  // Auto-submit once the user has filled all 6 digits (typed or pasted).
+  // verifyOtp clears otpValue on failure (back to length 0) and sets
+  // otpSuccess on success, both of which prevent this from re-firing.
+  useEffect(() => {
+    if (otpValue.length !== 6) return;
+    if (loading || otpExpired || otpSuccess || !otpVerification) return;
+    verifyOtp();
+    // verifyOtp intentionally omitted from deps — it's redefined every render;
+    // including it would re-fire on every state change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [otpValue, otpVerification]);
+  /**
+   * Function to get Ldap users
+   * @returns
+   */
+
+  const loggedUser = () => {
+    return fetch('http://localhost:3800/users/logged-user', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw message.warning('Client application not running');
+        }
+        return response.json();
+      })
+      .then((data) => {
+        if (data && data.success) {
+          return data.username;
+        } else {
+          message.warning('Client application not running');
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+        message.warning('Client application not running');
+        setLdapLoading(false);
+        return null;
+      });
+  };
+
+  /**
+   *
+   * @returns Function to login with ldap
+   *
+   */
+  const loginWithLdap = async () => {
+    //call function to get the current logged username
+    const username = await loggedUser();
+
+    //formbody consist of username from loggeduser
+    let formBody = {
+      username: username,
+    };
+    //calling ldap-login API
+    return ApiUtils.post({
+      // url: "users/logged-user",
+      url: 'auth/ldap-login',
+      formBody,
+      headers,
+    })
+      .then((result) => {
+        setLdapLoading(false);
+
+        const { user, access_token } = result;
+
+        localStorage.access_token = access_token;
+
+        if (result.success) {
+          //two_factor_authentication variable is present then proceed Two factor authentication
+          if (result.data && result.data.two_factor_authentication) {
+            let data;
+
+            // set variable used for otp send screen
+            setOtpVisible(true);
+
+            // set user credentials
+            data = {
+              username: result.data.email,
+              password: values.password,
+              mode: result.data.mode ? result.data.mode : null,
+              mobile: result.data.mobile ? result.data.mobile : null,
+            };
+
+            // set user values
+            setUser(data);
+          } else {
+            let d = user;
+
+            let userInfo = {
+              id: user.id,
+              locations: [],
+              ...d,
+              ...{
+                loggedCheckDone: true,
+              },
+            };
+
+            dispatch({ type: 'user', payload: userInfo });
+
+            localStorage.setItem('userInfo', JSON.stringify(userInfo));
+
+            history.push('/');
+          }
+        } else {
+          message.error(result.message);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+
+        message.error('This operation has failed.');
+
+        setLdapLoading(false);
+      });
+  };
+
+  // helper to show contact in OTP verification screen
+  const getOtpDestinationText = () => {
+    if (communicationMode === 'mobile') return formatMobile(user.mobile);
+    // if (communicationMode === 'whatsapp') return user.mobile;
+    return user.username;
+  };
+
+  const { globalCustomerHeader = () => {} } = appSettings;
+
+  const themeName = process.env.REACT_APP_THEME; // e.g., 'purple'
+  const isPurple = themeName === 'purple';
+
+  const sectionStyle = isPurple
+    ? {
+        width: '100%',
+        height: '100vh',
+        backgroundImage: `${state.theme.colors.loginPageBackground}`,
+        backgroundPosition: 'center bottom, center',
+        backgroundRepeat: 'no-repeat, no-repeat',
+        backgroundSize: 'cover, cover',
+      }
+    : {
+        width: '100%',
+        height: '100vh',
+        background: 'linear-gradient(to bottom, #F7F6E3 0%, #EEF1DE 20%, #D5E4DA 45%, #9DBFC8 75%, #4F89A6 100%)',
+        backgroundPosition: 'center bottom, center',
+        backgroundRepeat: 'no-repeat, no-repeat',
+        backgroundSize: 'cover, cover',
+      };
+
+  return (
+    <section className="full-page" style={sectionStyle}>
+      <section className="user-authentication-section">
+        {/* Background Section */}
+        <motion.div
+          className="page-background"
+          initial={{ y: -50, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ duration: 1, ease: 'anticipate' }}
+          exit={{ opacity: 0 }}
+        />
+        {/* Background Section Ends */}
+
+        <motion.div
+          className="auth-form-wrapper"
+          initial={{ y: 20 }}
+          animate={{ y: 0 }}
+          transition={{ duration: 1, ease: 'anticipate' }}
+          exit={{ opacity: 0 }}
+        >
+          <div
+            className=" login-form-container"
+            style={{
+              background: state.theme.colors.tableBg,
+              borderStyle: state.theme.colors.tableBorderStyle,
+            }}
+          >
+            <div className="brand-logo">
+              <img className="logo-welcome" src={brandLogo} alt="Logo" />
+            </div>
+
+            <div className="otp-form">
+              {/* OTP Verification Section */}
+
+              {/* OTP Method Selection Section */}
+              {otpVisible && (
+                <div className="otp-input-container">
+                  <div className="form-title">
+                    {otpVerification ? (
+                      <>
+                        {/* <h3>OTP Verification</h3> */}
+                        {/* <p>
+                          Enter the verification code we sent to{' '}
+                          <span className="otp-mode-text">
+                            <strong>{getOtpDestinationText()}</strong>
+                          </span>
+                        </p> */}
+                      </>
+                    ) : (
+                      <>
+                        <Text type="primary">Two Factor Authentication</Text>
+                        <p>
+                          Two-Factor Authentication is enabled for your account. Please verify your account before logging in to enhance security.
+                        </p>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                      </>
+                    )}
+                  </div>
+
+                  {/* Show Communication Method ONLY IF:
+                - OTP not sent OR
+                - OTP expired
+                 */}
+
+                  {(!otpVerification || otpExpired) && (
+                    <>
+                      <Divider />
+                      <div className="otp-method-section">
+                        <Text type="primary">Select Preferred OTP Verification Method</Text>
+                        <div className="otp-method-group">
+                          <Radio checked={communicationMode === 'email'} onChange={() => setCommunicationMode('email')}>
+                            Email <MailOutlined className="otp-icon" style={{ marginLeft: 6 }} />
+                          </Radio>
+                          <Radio checked={communicationMode === 'mobile'} onChange={() => setCommunicationMode('mobile')}>
+                            SMS <MessageOutlined className="otp-icon" style={{ marginLeft: 6 }} />
+                          </Radio>
+                        </div>
+                        {modeError && <p className="otp-mode-error">Please select a communication mode.</p>}
+                      </div>
+                    </>
+                  )}
+
+                  {!otpVerification ? (
+                    <div className="otp-container">
+                      <Button loading={loading} type="primary" onClick={sendAuthenticationOtp} style={{ marginTop: '6px' }}>
+                        Send OTP
+                      </Button>
+                    </div>
+                  ) : (
+                    <>
+                      {/* <Divider /> */}
+                      <div className="otp-container">
+                        <p>
+                          Enter the verification code we sent to{' '}
+                          <span className="otp-mode-text">
+                            <strong>{getOtpDestinationText()}</strong>
+                          </span>
+                        </p>
+                        <div onPasteCapture={handleOtpPaste}>
+                          <OTPInput
+                            value={otpValue}
+                            onChange={handleOtpChange}
+                            autoFocus
+                            OTPLength={6}
+                            disabled={loading || otpExpired}
+                            inputStyles={{
+                              border: otpSuccess ? '2px solid #52c41a' : otpError ? '2px solid #FF5C5C' : '1px solid #d9d9d9',
+                              borderRadius: 4,
+                              width: isMobile ? 28 : 45,
+                              height: isMobile ? 36 : 40,
+                              margin: isMobile ? '2px' : '0 4px',
+                              fontSize: isMobile ? 16 : 18,
+                              textAlign: 'center',
+                            }}
+                          />
+                        </div>
+                        {/* Timer below OTP */}
+                        <div className="otp-timer">
+                          {/* {!otpExpired ?  */}
+                          {otpSuccess ? null : <span>{formatted}</span>}
+                          {/* {otpError && (
+            <p style={{ color: 'red', marginTop: 8 }}>Invalid OTP, please try again</p>
+                    )} */}
+
+                          {otpSuccess && <p style={{ color: 'green', marginTop: 8 }}>Your OTP has been verified successfully.</p>}
+                        </div>
+                      </div>
+                      {!otpSuccess && (
+                        <Button loading={loading} type="primary" disabled={otpExpired} onClick={verifyOtp} style={{ marginTop: 16 }}>
+                          Verify OTP
+                        </Button>
+                      )}
+                    </>
+                  )}
+                </div>
+              )}
+
+              {/* Login Form Section */}
+              {!otpVerification && !otpVisible && !showResetpassword && (
+                <Form {...layout} layout="vertical" name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
+                  <div className="form-title">
+                    <h4></h4>
+                  </div>
+
+                  {/* {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER && <div className="branch-switcher">{globalCustomerHeader()}</div>} */}
+
+                  {process.env.REACT_APP_ENABLE_LDAP === 'true' && (
+                    <Button loading={ldaploading} type="secondary" className="SubmitBtn" onClick={loginWithLdap}>
+                      Sign in using AD
+                    </Button>
+                  )}
+
+                  <Form.Item label="Email" name="email" rules={[{ required: true, message: 'Please input your email!' }]}>
+                    <Input autoComplete="off" autoFocus />
+                  </Form.Item>
+
+                  <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
+                    <Input.Password autoComplete="off" />
+                  </Form.Item>
+
+                  <Form.Item {...tailLayout} style={{ marginBottom: '0px' }}>
+                    <Button loading={loading} type="primary" htmlType="submit" className="SubmitBtn">
+                      &nbsp;&nbsp; Submit
+                    </Button>
+                    <div className="forgot-password">
+                      <Link onClick={() => setShowResetpassword(true)}>Forgot Password?</Link>
+                    </div>
+                  </Form.Item>
+                </Form>
+              )}
+
+              {/* Forgot Password Section */}
+              {showResetpassword && (
+                <ResetPassword
+                  defaultUsername={expiredPassword ? defaultUsername : undefined}
+                  disabledUserName={expiredPassword}
+                  onBack={() => {
+                    setShowResetpassword(false);
+                    setExpiredPassword(false);
+                  }}
+                  title={expiredPassword ? 'Password Expired!' : 'Forgot Password?'}
+                  // subtitle={
+                  //   expiredPassword
+                  //     ? 'Your password has expired. Select a preferred communication method to receive the One-Time Password (OTP) to continue.'
+                  //     : 'Enter your username and Select a preferred communication method to receive the One-Time Password (OTP) to continue..'
+                  // }
+                  buttonText={expiredPassword ? 'Send Reset Link' : 'Send Reset Link'}
+                />
+              )}
+            </div>
+          </div>
+          {!otpSuccess && otpVerification && (
+            <div className="otp-actions">
+              <div className="resend-action">
+                <Text disabled>Didn't receive OTP?</Text>
+
+                <Link className="resend-otp-link" disabled={!otpExpired} onClick={handleResendOTP}>
+                  Resend OTP
+                </Link>
+              </div>
+
+              <Button size="small" type="default" onClick={handlecancel}>
+                Cancel
+              </Button>
+            </div>
+          )}
+        </motion.div>
+      </section>
+    </section>
+  );
+}
+
+export default withRouter(LoginPhone);