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

package/core/lib/pages/change-password/change-password.js

@@ -39,7 +39,7 @@ function ChangePassword({ history }) {
 
 	const [loading, setLoading] = useState(false);
 
-	console.log(user);
+
 
 	const onFinish = (values) => {
 
@@ -55,34 +55,27 @@ function ChangePassword({ history }) {
 					confirm_password: values.conpassword
 				}
 
-				ApiUtils.post({
-					url: `users/change-password`,
-					formBody,
-					hideError: true
-				}).then((result) => {
-
-					var msg = Object.values(result)
-
-					if (msg[0] === 'INCORRECT PASSWORD') {
-						//If current Password is entered wrong
-						message.error('Incorrect Password')
-						setLoading(false);
-						return false
-					}
-					else {
+        ApiUtils.post({
+          url: `users/change-password`,
+		  headers: {
+			 db_ptr: 'nuraho'
+		  },
+          formBody,
+          hideError: true
+        })
+          .then((result) => {          
 
 						setLoading(false);
 
 						history.goBack();
 
-						// Update successful.
-						message.success('Your password has been updated!')
-					}
-
-				}).catch(function (error) {
-
-					// An error happened.
-					message.error(error.result || error.message)
+              // Update successful.
+              message.success(result.result || 'Your password has been updated!');
+          
+            }).catch(function (error) {
+			
+				// An error happened.
+            	message.warning(error.result || error.message);
 
 					setLoading(false);
 

package/core/lib/pages/change-password/change-password.scss

@@ -1,63 +1,51 @@
-.change-password {
-  margin: 15px;
-  min-height: 90vh;
-  display: flex;
-  // margin: 10px 3%;
-  // align-items: center;
-
-  @media only screen and (min-width: 768px) {
-    justify-content: left;
-    align-items: left;
+.change-password.card {
+  margin: -6px 8px;
+  .ant-card-body {
+    padding: 16px;
   }
 
-  .homescreen{
-    width: 100%;
-    margin: 10px 0px;
-    border-radius: 4px;
-    background-color: aliceblue;
-    padding:10px;
-    height: 40px;
-  }
   .auth-form-wrapper {
-    padding: 0px;
-    width: 100%;
-    box-sizing: border-box;
-    @media only screen and (max-width: 768px) {
-      padding: 0;
-      // min-width: 275px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .form-title {
+    h4 {
+      margin-bottom: 6px;
+      font-weight: 600;
+      color: #111827;
     }
 
-    .form-title {
-      h3 {
-        color: #071822;
-        font-weight: 600;
-        size: 18px;
+    p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.6;
+      color: #6b7280;
+    }
+  }
 
-        margin: 20px 0px;
-        font-size: 32px;
-      }
+  .ant-form-item {
+    margin-bottom: 18px;
+
+    .ant-form-item-label > label {
+      font-weight: 500;
+      font-size: 14px;
+      color: #374151;
     }
 
-    .ant-form {
-      // height: 100%;
-      .ant-form-item {
-        margin: 30px 0px;
-        .ant-form-item-label {
-          margin: 0 0 8px 0;
-          line-height: 020px;
-          padding: 0px;
-        }
-      }
-      .ant-btn-primary {
-        margin-top: 0px;
-      }
+    .ant-input-password {
+      border-radius: 6px;
+      padding: 10px 12px;
+      transition: border 0.2s ease, box-shadow 0.2s ease;
+
     }
 
-    .ant-form-explain {
-      position: absolute;
+    .ant-form-item-explain-error {
       font-size: 12px;
-      margin-left: 2px;
+      margin-top: 4px;
     }
+  }
 
     .ant-btn-primary {
       width: 110px;
@@ -70,6 +58,15 @@
     .ant-btn-secondary {
       width: 100px;
     }
+
+  @media (max-width: 768px) {
+    margin: 0px ;
+    .ant-card-body {
+      padding: 24px;
+    }
+  }
+  @media only screen and (max-width: 1024px) {
+    margin: 60px 8px;
   }
 
 }

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'} disabled 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, safeJSON } from '../../utils/common/common.utils';
+import { checkLicenseStatus, formatMobile, checkExpiryStatus, safeJSON } 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,6 +50,9 @@ const tailLayout = {
 
 const LICENSE_EXPIRY = '2026-12-12';
 
+//password valdity expire
+const PASSWORD_VALIDITY_DAYS = 90;
+
 const headers = {
   db_ptr: 'nuraho',
 };
@@ -89,11 +94,71 @@ 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 onlyDate = new Date(lastPasswordChange).toISOString().split('T')[0];
+      const passwordExpiryDate = new Date(onlyDate);
+      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);
 
@@ -131,6 +196,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;
@@ -183,7 +250,19 @@ function LoginPhone({ history, appSettings }) {
               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) => {
@@ -272,10 +351,10 @@ function LoginPhone({ history, appSettings }) {
       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
         setLoading(false);
+        // if the api is sucess then go for otpverification step
+        setotpVerification(true);
       } else {
         setLoading(false);
         message.error(result.message);
@@ -332,7 +411,7 @@ function LoginPhone({ history, appSettings }) {
           if (result?.user?.organization_details) {
             const data = safeJSON(result?.user?.organization_details);
 
-            const defaultBranch = data.branch.find((b) => b.defaultBranch === 'true');
+            const defaultBranch = data.branch.find((b) => b.defaultBranch === true);
             const defaultDbptr = defaultBranch?.dbPtr;
 
             localStorage.setItem('db_ptr', defaultDbptr);
@@ -342,6 +421,8 @@ function LoginPhone({ history, appSettings }) {
           // set user info into local storage
           localStorage.setItem('userInfo', JSON.stringify(userInfo));
 
+          handlePasswordExpiryCheck(result.user);
+
           setTimeout(() => history.push('/'), 500);
         } else {
           //  OTP FAILED (wrong OTP)
@@ -543,28 +624,28 @@ function LoginPhone({ history, appSettings }) {
     return user.username;
   };
 
-  const { globalCustomerHeader = () => {} } = appSettings;
+  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',
+      backgroundImage: `${state.theme.colors.loginPageBackground}`,
+      backgroundPosition: 'center bottom, center',
+      backgroundRepeat: 'no-repeat, no-repeat',
+      backgroundSize: 'cover, cover',
+    }
     : {
-        width: '100%',
-        height: '100vh',
-        backgroundImage: `url(${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}>
@@ -706,7 +787,7 @@ 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>
@@ -728,19 +809,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">
+                      <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>