ui-soxo-bootstrap-core 2.4.25-dev.9 → 2.4.25

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

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react';
 
-import { Form, Input, message, Result, Radio, Divider, Typography } from 'antd';
+import { Form, Input, message, Result } from 'antd';
 
 import { withRouter, Link } from 'react-router-dom';
 
@@ -8,8 +8,6 @@ import backgroundImage from './../../../assets/images/vector.png';
 
 import OTPInput from 'otp-input-react';
 
-import { useOtpTimer } from '../../hooks/use-otp-timer';
-
 import { motion } from 'framer-motion';
 
 import { Button } from '../../elements';
@@ -32,10 +30,6 @@ import { Location } from '../../utils';
 
 import { checkLicenseStatus } from '../../utils/common/common.utils';
 
-import { MailOutlined, MessageOutlined, WhatsAppOutlined } from '@ant-design/icons';
-
-const { Text, Title } = Typography;
-
 const layout = {
   labelCol: { span: 24 },
 
@@ -56,10 +50,7 @@ const LICENSE_EXPIRY = '2026-12-12';
 function LoginPhone({ history, appSettings }) {
   const { brandLogo, heroImage, footerLogo, headers } = appSettings;
 
-  //  Hook for OTP Timer
-  const { expired: otpExpired, formatted, startFromExpiry } = useOtpTimer();
-
-  const { dispatch, state, isMobile } = useContext(GlobalContext);
+  const { dispatch, state } = useContext(GlobalContext);
   // variabel used for btnloading
 
   const [loading, setLoading] = useState(false);
@@ -72,19 +63,11 @@ function LoginPhone({ history, appSettings }) {
   // 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);
-
   const isAuthenticated = Boolean(getAccessToken());
   const isRefreshTokenExist = Boolean(getRefreshToken());
 
@@ -142,10 +125,6 @@ function LoginPhone({ history, appSettings }) {
 
               // set user values
               setUser(data);
-              //  Set default communication mode automatically
-              if (result.data.mode) {
-                setCommunicationMode(result.data.mode); // <--- fix
-              }
             } else {
               let d = user;
 
@@ -227,22 +206,12 @@ function LoginPhone({ history, appSettings }) {
    *
    */
   const sendAuthenticationOtp = () => {
-    //  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,
+      mode: user.mode,
     };
 
     // api used to send otp corresponding mail address
@@ -253,8 +222,6 @@ function LoginPhone({ history, appSettings }) {
     }).then((result) => {
       // if the api is sucess then go for otpverification step
       if (result.success) {
-        //  for expiry_time
-        startFromExpiry(result?.expiry_time);
         // if the api is sucess then go for otpverification step
         setotpVerification(true);
         // set  button loading false
@@ -272,17 +239,13 @@ function LoginPhone({ history, appSettings }) {
    */
 
   const verifyOtp = () => {
-    // If OTP expired, block verification
-    if (otpExpired) {
-      return;
-    }
-
     setLoading(true);
-
-    const formBody = {
+    let formBody;
+    // set formBody
+    formBody = {
       username: user.username,
       password: user.password,
-      mode: communicationMode,
+      mode: user.mode,
       mobile: user.mobile,
       otp: otpValue,
     };
@@ -291,46 +254,35 @@ function LoginPhone({ history, appSettings }) {
       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,
+    }).then((result) => {
+      if (result.success) {
+        setLoading(false);
+        let d = result.user;
+
+        // 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);
+
+        // set user info
+        let userInfo = {
+          id: result.user.id,
+          locations: [],
+          ...d,
+          ...{
             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);
-
-          dispatch({ type: 'user', payload: userInfo });
-          // set user info into local storage
-          localStorage.setItem('userInfo', JSON.stringify(userInfo));
-
-          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);
+          },
+        };
 
+        dispatch({ type: 'user', payload: userInfo });
+        // set user info into local storage
+        localStorage.setItem('userInfo', JSON.stringify(userInfo));
+        history.push('/');
+      } else {
         setLoading(false);
-      });
+        message.error(result.message);
+      }
+    });
   };
 
   const onFinishFailed = () => {
@@ -345,21 +297,18 @@ function LoginPhone({ history, appSettings }) {
    */
   const handleOtpChange = (value) => {
     setOtpValue(value);
-    //  Reset states so correct OTP will work after wrong OTP
-    setOtpError(false);
-    setOtpSuccess(false);
   };
 
   /**
    * Otp resend Logic
    */
   const handleResendOTP = () => {
+    // Resend OTP logic
+    setOtpVisible(true);
+    setotpVerification(false);
+
+    // when resend the otp . otpvalue reset
     setOtpValue('');
-    setModeError(false);
-    setOtpError(false);
-    setOtpSuccess(false);
-    // resend the OTP automatically
-    sendAuthenticationOtp();
   };
 
   /**
@@ -368,15 +317,10 @@ function LoginPhone({ history, appSettings }) {
   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 {
@@ -392,14 +336,6 @@ function LoginPhone({ history, appSettings }) {
     // 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]);
   /**
    * Function to get Ldap users
    * @returns
@@ -509,13 +445,6 @@ function LoginPhone({ history, appSettings }) {
       });
   };
 
-  // helper to show contact in OTP verification screen
-  const getOtpDestinationText = () => {
-    if (communicationMode === 'mobile') return user.mobile;
-    // if (communicationMode === 'whatsapp') return user.mobile;
-    return user.username;
-  };
-
   const { globalCustomerHeader = () => {} } = appSettings;
 
   const themeName = process.env.REACT_APP_THEME; // e.g., 'purple'
@@ -540,7 +469,20 @@ function LoginPhone({ history, appSettings }) {
       };
 
   return (
-    <section className="full-page" style={sectionStyle}>
+    <section
+      className="full-page"
+      style={
+        sectionStyle
+        // {
+        //     width: '100%',
+        //     height: '100vh',
+        //     backgroundImage: `url(${backgroundImage}), ${state.theme.colors.loginPageBackground}`,
+        //     backgroundPosition: 'center bottom, center',
+        //     backgroundRepeat: 'no-repeat, no-repeat',
+        //     backgroundSize: 'cover, cover',
+        //   }
+      }
+    >
       <section className="user-authentication-section">
         {/* Background Section */}
         <motion.div
@@ -549,7 +491,7 @@ function LoginPhone({ history, appSettings }) {
           animate={{ y: 0, opacity: 1 }}
           transition={{ duration: 1, ease: 'anticipate' }}
           exit={{ opacity: 0 }}
-        />
+        ></motion.div>
         {/* Background Section Ends */}
 
         <motion.div
@@ -560,170 +502,112 @@ function LoginPhone({ history, appSettings }) {
           exit={{ opacity: 0 }}
         >
           <div
-            className=" login-form-container"
-            style={{
-              background: state.theme.colors.tableBg,
-              borderStyle: state.theme.colors.tableBorderStyle,
-            }}
+            className="card card-shadow 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 && (
+              {/* Two factor authentication section start */}
+              {otpVerification ? (
                 <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;
-                      </>
-                    )}
+                    <h3>Verify your account</h3>
+                    <p>
+                      An OTP has been sent to your <span className="otp-mode-text">{user.mode ? user.mode : 'Email'}</span>
+                      <br />
+                    </p>
                   </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 style={{ marginLeft: 6 }} />
-                          </Radio>
-                          <Radio checked={communicationMode === 'mobile'} onChange={() => setCommunicationMode('mobile')}>
-                            SMS <MessageOutlined style={{ marginLeft: 6 }} />
-                          </Radio>
-                        </div>
-                        {modeError && <p className="otp-mode-error">Please select a communication mode.</p>}
-                      </div>
-                    </>
-                  )}
-
-                  {!otpVerification ? (
-                    <div className="otp-container">
-                      <Button 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>
-                        <OTPInput
-                          value={otpValue}
-                          onChange={handleOtpChange}
-                          autoFocus
-                          OTPLength={6}
-                          disabled={loading || otpExpired}
-                          inputStyles={{
-                            border: otpSuccess
-                              ? '2px solid #52c41a' // green
-                              : otpError
-                                ? '2px solid #FF5C5C' // red
-                                : '1px solid #d9d9d9', // default
-                            borderRadius: 4,
-                            width: isMobile ? 28 : 45, //  MOBILE FIX
-                            height: isMobile ? 36 : 40, //  MOBILE FIX
-                            margin: isMobile ? '2px' : '0 4px',
-                            fontSize: isMobile ? 16 : 18,
-                            textAlign: 'center',
-                          }}
-                        />
-                        {/* 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 type="primary" disabled={otpExpired} onClick={verifyOtp} style={{ marginTop: 16 }}>
-                          Verify OTP
-                        </Button>
-                      )}
-                    </>
-                  )}
+                  <p className="otp-title">ENTER OTP</p>
+                  <div className="otp-container">
+                    <OTPInput value={otpValue} onChange={handleOtpChange} autoFocus OTPLength={6} />
+                  </div>
+                  <Button type="primary" className="SubmitBtn" onClick={verifyOtp}>
+                    <i className="fa-regular fa-circle-check"></i> Verify OTP
+                  </Button>
+                  <Link className="resend-otp-link" onClick={handleResendOTP}>
+                    <i className="fa-solid fa-arrows-rotate"></i> Resend OTP
+                  </Link>
+                  {/* Two factor authentication section end */}
                 </div>
-              )}
-
-              {/* Login Form Section */}
-              {!otpVerification && !otpVisible && (
-                <Form {...layout} layout="vertical" name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
+              ) : otpVisible ? (
+                <div className="otp-input-container">
+                  {/* Two factor authentication otp verification section start  */}
                   <div className="form-title">
-                    <h4></h4>
+                    <h4>Two Factor Authentication</h4>
+                    <p>
+                      Two-Factor Authentication is enabled for your account . Please verify your account before your login to enhance the security of
+                      your account.
+                      <br></br>
+                    </p>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   </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
+                  <div className="otp-container">
+                    <Button type="primary" className="SubmitBtn" onClick={sendAuthenticationOtp} loading={loading}>
+                      Send OTP
+                    </Button>
+                    <Button type="secondary" onClick={handlecancel}>
+                      Cancel
                     </Button>
-                  )}
+                  </div>
+                  {/* Two factor authentication otp verification section end  */}
+                </div>
+              ) : (
+                <>
+                  <Form {...layout} layout="vertical" name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
+                    <div className="form-title">
+                      <h4></h4>
+                      {/* <p>Your work assistant for the day!</p> */}
+                    </div>
 
-                  <Form.Item label="Email" name="email" rules={[{ required: true, message: 'Please input your email!' }]}>
-                    <Input autoComplete="off" autoFocus />
-                  </Form.Item>
+                    {/** branchswitcher Option  */}
+                    {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? <div className="branch-switcher">{globalCustomerHeader()}</div> : null}
 
-                  <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
-                    <Input.Password autoComplete="off" />
-                  </Form.Item>
+                    {/* {heroImage && (
+                      <img className="customers" src={heroImage} alt="Logo" />
+                    )} */}
 
-                  <Form.Item {...tailLayout}>
-                    <Button loading={loading} type="primary" htmlType="submit" className="SubmitBtn">
-                      &nbsp;&nbsp; Submit
-                    </Button>
-                  </Form.Item>
-                </Form>
+                    <br></br>
+                    <div>
+                      {process.env.REACT_APP_ENABLE_LDAP == 'true' && (
+                        <Button loading={ldaploading} type="secondary" className="SubmitBtn" onClick={loginWithLdap}>
+                          Sign in using AD
+                        </Button>
+                      )}
+                    </div>
+                    <Form.Item label="Email" name="email" rules={[{ required: true, message: 'Please input your email!' }]}>
+                      <Input autoComplete="off" />
+                    </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}>
+                      <Button loading={loading} type="primary" htmlType="submit" className="SubmitBtn">
+                        {/* <FontAwesomeIcon icon={faCheck} /> */}
+                        &nbsp;&nbsp;
+                        {/* <span>
+                      <img src="../assets/tick-icon.png" alt="Tick Icon" />
+                    </span> */}
+                        Submit
+                      </Button>
+                    </Form.Item>
+                  </Form>
+                </>
               )}
             </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>
-          )}
+
+          {/* <div className="center-line"> */}
+          {/* <Link to="/register">Create Account</Link> */}
+          {/* <img className="footer-logo" src={footerLogo} alt={'user photograph'} /> */}
+          {/* </div> */}
+
+          {/* {heroImage && <img className="customers2" src={heroImage} alt="Logo" />} */}
         </motion.div>
       </section>
     </section>