ui-soxo-bootstrap-core 2.4.24 → 2.4.25-dev.10

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

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react';
 
-import { Form, Input, message, Result } from 'antd';
+import { Form, Input, message, Result, Radio, Divider, Typography } from 'antd';
 
 import { withRouter, Link } from 'react-router-dom';
 
@@ -8,6 +8,8 @@ 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';
@@ -30,6 +32,10 @@ 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 },
 
@@ -50,7 +56,10 @@ const LICENSE_EXPIRY = '2026-12-12';
 function LoginPhone({ history, appSettings }) {
   const { brandLogo, heroImage, footerLogo, headers } = appSettings;
 
-  const { dispatch, state } = useContext(GlobalContext);
+  //  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);
@@ -63,11 +72,19 @@ 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());
 
@@ -125,6 +142,10 @@ 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;
 
@@ -206,12 +227,22 @@ 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: user.mode,
+      mode: communicationMode,
     };
 
     // api used to send otp corresponding mail address
@@ -222,6 +253,8 @@ 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
@@ -239,13 +272,17 @@ function LoginPhone({ history, appSettings }) {
    */
 
   const verifyOtp = () => {
+    // If OTP expired, block verification
+    if (otpExpired) {
+      return;
+    }
+
     setLoading(true);
-    let formBody;
-    // set formBody
-    formBody = {
+
+    const formBody = {
       username: user.username,
       password: user.password,
-      mode: user.mode,
+      mode: communicationMode,
       mobile: user.mobile,
       otp: otpValue,
     };
@@ -254,35 +291,46 @@ function LoginPhone({ history, appSettings }) {
       url: 'auth/verify-authentication-otp',
       formBody,
       headers,
-    }).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,
-          ...{
+      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);
+
+          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 = () => {
@@ -297,18 +345,21 @@ 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();
   };
 
   /**
@@ -317,10 +368,15 @@ 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 {
@@ -336,6 +392,14 @@ 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
@@ -445,6 +509,13 @@ 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'
@@ -469,20 +540,7 @@ function LoginPhone({ history, appSettings }) {
       };
 
   return (
-    <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="full-page" style={sectionStyle}>
       <section className="user-authentication-section">
         {/* Background Section */}
         <motion.div
@@ -491,7 +549,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
@@ -502,112 +560,170 @@ function LoginPhone({ history, appSettings }) {
           exit={{ opacity: 0 }}
         >
           <div
-            className="card card-shadow login-form-container"
-            style={{ background: state.theme.colors.tableBg, borderStyle: state.theme.colors.tableBorderStyle }}
+            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">
-              {/* Two factor authentication section start */}
-              {otpVerification ? (
+              {/* OTP Verification Section */}
+
+              {/* OTP Method Selection Section */}
+              {otpVisible && (
                 <div className="otp-input-container">
                   <div className="form-title">
-                    <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>
-                  <p className="otp-title">ENTER OTP</p>
-                  <div className="otp-container">
-                    <OTPInput value={otpValue} onChange={handleOtpChange} autoFocus OTPLength={6} />
+                    {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>
-                  <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 */}
+
+                  {/* 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>
+                      )}
+                    </>
+                  )}
                 </div>
-              ) : otpVisible ? (
-                <div className="otp-input-container">
-                  {/* Two factor authentication otp verification section start  */}
+              )}
+
+              {/* Login Form Section */}
+              {!otpVerification && !otpVisible && (
+                <Form {...layout} layout="vertical" name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
                   <div className="form-title">
-                    <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;
+                    <h4></h4>
                   </div>
 
-                  <div className="otp-container">
-                    <Button type="primary" className="SubmitBtn" onClick={sendAuthenticationOtp} loading={loading}>
-                      Send OTP
-                    </Button>
-                    <Button type="secondary" onClick={handlecancel}>
-                      Cancel
+                  {!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>
-                  </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>
+                  )}
 
-                    {/** branchswitcher Option  */}
-                    {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? <div className="branch-switcher">{globalCustomerHeader()}</div> : null}
+                  <Form.Item label="Email" name="email" rules={[{ required: true, message: 'Please input your email!' }]}>
+                    <Input autoComplete="off" autoFocus />
+                  </Form.Item>
 
-                    {/* {heroImage && (
-                      <img className="customers" src={heroImage} alt="Logo" />
-                    )} */}
+                  <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
+                    <Input.Password autoComplete="off" />
+                  </Form.Item>
 
-                    <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>
-                </>
+                  <Form.Item {...tailLayout}>
+                    <Button loading={loading} type="primary" htmlType="submit" className="SubmitBtn">
+                      &nbsp;&nbsp; Submit
+                    </Button>
+                  </Form.Item>
+                </Form>
               )}
             </div>
           </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" />} */}
+          {!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>