ui-soxo-bootstrap-core 2.6.0 → 2.6.1-dev.2

package/core/lib/pages/login/commnication-mode-selection.js

@@ -0,0 +1,46 @@
+/**
+ * CommunicationModeSelection Component
+ *
+ * Renders radio options for selecting OTP delivery method.
+ * Supports Email and SMS modes.
+ *
+ * Props:
+ * @param {string} communicationMode - Currently selected mode ('email' | 'mobile')
+ * @param {Function} setCommunicationMode - Updates selected mode
+ * @param {boolean} modeError - Displays validation error if true
+ */
+
+import React from 'react';
+import { Radio, Divider, Typography } from 'antd';
+import { MailOutlined, MessageOutlined } from '@ant-design/icons';
+
+import './communication-mode-selection.scss';
+
+const { Text } = Typography;
+
+function CommunicationModeSelection({ communicationMode, setCommunicationMode, modeError }) {
+  return (
+    <>
+      <div className="otp-method-section">
+        <Text type="primary">Select Preferred OTP Verification Method</Text>
+        <div className="otp-method-group">
+
+          {/* Email Option */}
+          <Radio checked={communicationMode === 'email'} onChange={() => setCommunicationMode('email')}>
+            Email <MailOutlined className="otp-icon" style={{ marginLeft: 6 }} />
+          </Radio>
+
+          {/* SMS Option */}
+          <Radio checked={communicationMode === 'mobile'} onChange={() => setCommunicationMode('mobile')}>
+            SMS <MessageOutlined className="otp-icon" style={{ marginLeft: 6 }} />
+          </Radio>
+        </div>
+        
+        {/* Validation Error */}
+        {modeError && <p className="otp-mode-error">Please select a communication mode.</p>}
+      </div>
+    </>
+  );
+}
+
+export default CommunicationModeSelection;

package/core/lib/pages/login/communication-mode-selection.scss

@@ -0,0 +1,60 @@
+$error-color: red;
+
+.otp-method-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  .otp-method-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+
+  .otp-method-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    gap: 30px;
+    font-size: 12px;
+
+    .ant-radio-wrapper {
+      display: flex;
+      gap: 6px;
+
+      svg {
+        font-size: 18px;
+        opacity: 0.8;
+      }
+    }
+
+    @media only screen and (max-width: 600px) {
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 12px !important;
+    }
+
+    @media only screen and (min-width: 601px) and (max-width: 1024px) {
+      flex-direction: row !important;
+      align-items: center !important;
+      justify-content: space-between !important;
+      gap: 20px !important;
+      width: 100%;
+
+      .ant-radio-wrapper {
+        flex: 1;
+      }
+    }
+  }
+
+  .otp-mode-error {
+    margin: 5px;
+    font-size: 13px;
+    color: $error-color;
+  }
+
+  .otp-icon {
+    position: relative;
+    top: 2px;
+  }
+}

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

@@ -30,10 +30,12 @@ import { getAccessToken, getRefreshToken } from '../../utils/http/auth.helper';
 
 import { Location } from '../../utils';
 
-import { checkLicenseStatus, formatMobile } from '../../utils/common/common.utils';
+import { checkLicenseStatus, formatMobile, safeJSON ,checkExpiryStatus} from '../../utils/common/common.utils';
 
 import { MailOutlined, MessageOutlined, WhatsAppOutlined } from '@ant-design/icons';
 
+import ResetPassword from './reset-password';
+
 const { Text, Title } = Typography;
 
 const layout = {
@@ -48,13 +50,19 @@ const tailLayout = {
 
 const LICENSE_EXPIRY = '2026-12-12';
 
+const headers = {
+  db_ptr: 'nuraho',
+};
+//password valdity expire
+const PASSWORD_VALIDITY_DAYS = 90;
+
 /**
  *
  * @param {*} param0
  * @returns
  */
 function LoginPhone({ history, appSettings }) {
-  const { brandLogo, heroImage, footerLogo, headers } = appSettings;
+  const { brandLogo, heroImage, footerLogo } = appSettings;
 
   //  Hook for OTP Timer
   const { expired: otpExpired, formatted, startFromExpiry } = useOtpTimer();
@@ -85,11 +93,70 @@ function LoginPhone({ history, appSettings }) {
   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.
+   * - Uses `checkExpiryStatus()` to determine status.
+   * - Shows Ant Design warning message if expired or within warning period.
+   * - Warning message includes navigation to `/change-password`.
+   *
+   * Requires:
+   * - PASSWORD_VALIDITY_DAYS constant
+   * - checkExpiryStatus utility
+   * - React Router history
+   * - antd message component
+   */
+  const handlePasswordExpiryCheck = (user) => {
+    const otherDetails = user?.other_details ? JSON.parse(user.other_details) : null;
+
+    const lastPasswordChange = otherDetails?.last_password_change;
+
+    if (lastPasswordChange) {
+      const passwordExpiryDate = new Date(lastPasswordChange);
+      passwordExpiryDate.setDate(passwordExpiryDate.getDate() + PASSWORD_VALIDITY_DAYS);
+
+      const passwordStatus = checkExpiryStatus({
+        expiryDate: passwordExpiryDate,
+        warningDays: 2,
+        expiredMessage: 'Your password has expired. Please reset it.',
+        warningMessage: (d) => (
+          <span>
+            Your password will expire in {d} day(s).{' '}
+            <a
+              onClick={() => {
+                history.push('/change-password');
+              }}
+            >
+              Click here to update.
+            </a>
+          </span>
+        ),
+      });
+
+      if (passwordStatus.message) {
+        message.warning(passwordStatus.message);
+      }
+    }
+  };
+
   const onFinish = (values) => {
     setLoading(true);
 
@@ -127,6 +194,8 @@ function LoginPhone({ history, appSettings }) {
           if (insider_token) localStorage.insider_token = insider_token;
 
           if (result.success) {
+            handlePasswordExpiryCheck(user);
+
             //two_factor_authentication variable is present then proceed Two factor authentication
             if (result.data && result.data.two_factor_authentication) {
               let data;
@@ -146,7 +215,7 @@ function LoginPhone({ history, appSettings }) {
               setUser(data);
               //  Set default communication mode automatically
               if (result.data.mode) {
-                setCommunicationMode(result.data.mode); // <--- fix
+                setCommunicationMode(result.data.mode);
               }
             } else {
               let d = user;
@@ -165,10 +234,33 @@ function LoginPhone({ history, appSettings }) {
               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 {
-            message.error(result.message);
+            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) => {
@@ -313,10 +405,22 @@ function LoginPhone({ history, appSettings }) {
           // 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.user);
+
           setTimeout(() => history.push('/'), 500);
         } else {
           //  OTP FAILED (wrong OTP)
@@ -535,7 +639,7 @@ function LoginPhone({ history, appSettings }) {
     : {
         width: '100%',
         height: '100vh',
-        backgroundImage: `url(${backgroundImage}), ${state.theme.colors.loginPageBackground}`,
+        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',
@@ -681,13 +785,13 @@ function LoginPhone({ history, appSettings }) {
               )}
 
               {/* Login Form Section */}
-              {!otpVerification && !otpVisible && (
+              {!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_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}>
@@ -703,19 +807,42 @@ function LoginPhone({ history, appSettings }) {
                     <Input.Password autoComplete="off" />
                   </Form.Item>
 
-                  <Form.Item {...tailLayout}>
+                  <Form.Item {...tailLayout} style={{ marginBottom: '0px' }}>
                     <Button loading={loading} type="primary" htmlType="submit" className="SubmitBtn">
                       &nbsp;&nbsp; Submit
                     </Button>
+                    <div className="forgot-password" style={{ marginTop: '8px', textAlign: 'center' }}>
+                      <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
+                      ? 'Enter your username and choose your preferred OTP method to receive a reset link.'
+                      : 'Enter your username to reset your password and select your preferred OTP method.'
+                  }
+                  buttonText={expiredPassword ? 'Send Reset Link' : 'Reset Password'}
+                />
+              )}
             </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>