ui-soxo-bootstrap-core 2.6.1-dev.1 → 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, safeJSON } 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 = {
@@ -51,6 +53,8 @@ const LICENSE_EXPIRY = '2026-12-12';
 const headers = {
   db_ptr: 'nuraho',
 };
+//password valdity expire
+const PASSWORD_VALIDITY_DAYS = 90;
 
 /**
  *
@@ -89,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);
 
@@ -131,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;
@@ -183,7 +248,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) => {
@@ -342,6 +419,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)
@@ -560,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',
@@ -706,7 +785,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 +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>

package/core/lib/pages/login/login.scss

@@ -1,17 +1,35 @@
+// Variables
+$primary-color: #0c66e4;
+$bg-color-light: #f5f5f5;
+$border-color-light: #e8e8e8;
+$border-color-medium: #e0e0e0;
+$border-color-dark: #d9d9d9;
+$text-color-dark: #071822;
+$white: #ffffff;
+$error-color: red;
+
 body {
   overflow: hidden;
 }
 
+.full-page {
+  height: 100vh;
+  min-height: 100vh;
+  width: 100%;
+  background-repeat: no-repeat;
+  background-position: bottom center;
+  background-size: 100% auto;
+}
+
 .user-authentication-section {
   min-height: 90vh;
   display: flex;
-  // margin: 0px 15%;
   justify-content: center;
-  padding: 0px 15%;
-  // align-items: center;
+  padding: 0 15%;
 
   @media (max-width: 1200px) {
     margin: 0 5%;
+    padding: 0 5%;
   }
 
   @media (max-width: 768px) {
@@ -21,63 +39,22 @@ body {
     align-items: center;
   }
 
+  @media only screen and (min-width: 608px) {
+    justify-content: center;
+    align-items: center;
+  }
+
   .page-background {
     position: absolute;
-    left: 0px;
-    top: 0px;
+    left: 0;
+    top: 0;
     height: 40vh;
     width: 100%;
-
-    // background-image:url("./../../../assets/images/vector.png"); /* Set Image */ ;
-    // background: url("./../../../assets/images/vector.png"),
-    //             linear-gradient(to right, #D5F1FB, #24AEB8);
-    // background-size: cover;
-    // background-position: center;
-    // background: linear-gradient(to right, #7ddafac2, #24AEB8); /* Gradient */
-    // url("./../../../assets/images/vector.png"),
-    // /* Background image */ linear-gradient(to right, #7ddafac2, #10c7ef61); /* Gradient */
-
-    // background: #00b4db; /* fallback for old browsers */
-    // background: -webkit-linear-gradient(to right, #0083b0, #00b4db); /* Chrome 10-25, Safari 5.1-6 */
-    // background: linear-gradient(
-    //   to right,
-    //   #0083b0,
-    //   #00b4db
-    // ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-
-    // background: rgb(131, 58, 180);
-    // background: -moz-linear-gradient(
-    //   90deg,
-    //   rgba(131, 58, 180, 1) 0%,
-    //   rgba(253, 29, 29, 1) 50%,
-    //   rgba(252, 176, 69, 1) 100%
-    // );
-    // background: -webkit-linear-gradient(
-    //   90deg,
-    //   rgba(131, 58, 180, 1) 0%,
-    //   rgba(253, 29, 29, 1) 50%,
-    //   rgba(252, 176, 69, 1) 100%
-    // );
-
-    // background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
-    // filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#833ab4",endColorstr="#fcb045",GradientType=1);
-
-    // background-image: linear-gradient(to right top, #051937, #384164, #6b6e95, #a09ec9, #d9d1ff);
-    // background: #BAD7FF;
-  }
-
-  @media screen and (max-width: 1200px) {
-    margin: 0px 5%;
-  }
-
-  @media only screen and (min-width: 608px) {
-    justify-content: center;
-    align-items: center;
   }
 
   .homescreen {
     width: 100%;
-    margin: 10px 0px;
+    margin: 10px 0;
     border-radius: 4px;
     background-color: aliceblue;
     padding: 10px;
@@ -85,222 +62,267 @@ body {
     overflow: hidden;
   }
 
-  .customers {
+  .customers,
+  .customers2 {
     width: 50%;
-    margin: 20px 0px;
+    margin: 20px 0;
 
     @media only screen and (min-width: 768px) {
       width: 50%;
-      /* margin: 20px 0px; */
-      /* float: right; */
-      // position: absolute;
-      // right: 0px;
-      // top: 20%;
     }
+    @media only screen and (max-width: 768px) {
+      width: 85%;
+    }
+  }
 
+  .customers {
     @media only screen and (min-width: 769px) {
       display: none;
     }
-
-    @media only screen and (max-width: 768px) {
-      width: 85%;
-    }
   }
 
   .customers2 {
-    width: 50%;
-    margin: 20px 0px;
     padding: 0 20px;
-
     @media only screen and (min-width: 768px) {
       width: 40%;
-      /* margin: 20px 0px; */
-      /* float: right; */
-      // position: absolute;
-      // right: 0px;
-      // top: 20%;
     }
-
     @media only screen and (max-width: 768px) {
       display: none;
     }
   }
-  .brand-logo {
-    width: 80px;
-    box-shadow:
-      1px 0 8px 0 rgba(0, 0, 0, 0.05),
-      8px 8px 18px 0 rgba(0, 0, 0, 0.05);
-    border: 1px solid #b7b7b7;
-    text-align: center;
-    border-radius: 2px;
-    margin: 22px 0px;
-    padding: 4px;
-
-    img {
-      width: 80px;
-    }
-  }
-
-  .footer-logo {
-    width: 180px;
-    // box-shadow: 1px 0 8px 0 rgba(0, 0, 0, 0.05), 8px 8px 18px 0 rgba(0, 0, 0, 0.05);
-    // border: 1px solid #b7b7b7;
-    padding: 4px;
-    border-radius: 2px;
-    margin: 20px 0px 30px;
-  }
 
   .auth-form-wrapper {
-    // padding: 15px 10px;
     box-sizing: border-box;
-    // box-shadow: 0 2px 4px rgba(104, 97, 97, 0.5);
-    // display: flex;
-    // align-items: center;
     border-radius: 16px;
-    background-color: white;
+    background-color: $white;
     overflow: hidden;
-    border: 1px solid #e8e8e8;
-
-    width: 42%;
+    // border: 1px solid $border-color-light;
+    width: 40%;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 
     @media only screen and (max-width: 768px) {
       width: 100%;
       padding: 0 16px;
-
-      // display: flex;
-      // flex-direction: column;
-      // justify-content: center;
-      // text-align: center;
-      // align-items: center;
+      flex-direction: column;
     }
 
     .login-form-container {
-      border: 1px solid #e0e0e0;
+      // border: 1px solid $border-color-medium;
       flex-basis: 50%;
-      // border: none !important;
-      // box-shadow: none !important;
-      // padding: 20px 30px;
       padding: 20px;
-      padding-top: 2px;
+      // padding-top: 2px;
 
       @media only screen and (max-width: 768px) {
         padding: 16px;
-        // display: flex;
-        // flex-direction: column;
-        // justify-content: center;
-        // text-align: center;
-        // align-items: center;
       }
 
-      .branch-switcher {
-        .branches {
-          .ant-select {
-            min-width: auto !important;
-            width: 100%;
+      .branch-switcher .branches .ant-select {
+        min-width: auto !important;
+        width: 100%;
+      }
+
+      .brand-logo {
+        width: 80px;
+        box-shadow:
+          1px 0 8px 0 rgba(0, 0, 0, 0.05),
+          8px 8px 18px 0 rgba(0, 0, 0, 0.05);
+        border: 1px solid #b7b7b7;
+        text-align: center;
+        border-radius: 2px;
+        // margin: 22px 0;
+        padding: 4px;
+
+        img {
+          width: 80px;
+        }
+      }
+
+      .otp-form {
+        margin-top: 20px;
+        .otp-input-container {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+
+          p {
+            margin: 12px 0 0 0;
+            font-size: 12px;
+          }
+
+          .otp-title {
+            @media only screen and (max-width: 768px) {
+              text-align: left;
+            }
+          }
+
+          .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;
+            }
+          }
+
+          .otp-container {
+            display: flex;
+            flex-direction: column;
+            gap: 7px;
+
+            input[type='text']:focus {
+              border-color: $white !important;
+            }
+          }
+
+          .otp-mode-text {
+            text-transform: capitalize;
           }
         }
       }
     }
 
-    .center-line {
-      border-left: 2px solid #d9d9d9;
-      height: 180px;
+    .otp-actions {
+      background-color: $bg-color-light;
+      padding: 12px 16px;
+      display: flex;
+      justify-content: space-between;
+      gap: 6px;
+
+      .resend-action {
+        margin-bottom: 8px;
+        display: flex;
+        gap: 6px;
+
+        .resend-otp-link {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          color: $primary-color;
+          margin-bottom: 10px;
+          margin: auto;
+        }
+      }
     }
 
     .center-line {
+      border-left: 2px solid $border-color-dark;
+      height: 180px;
+
       @media only screen and (max-width: 768px) {
         display: none;
       }
     }
-
-    @media only screen and (max-width: 768px) {
-      padding: 0;
-      // min-width: 275px;
-      flex-direction: column;
-    }
-    .form-title {
-      // h4 {
-      //   color: #071822;
-      //   font-weight: 600;
-      //   // size: 13px;
-      //   margin: 10px 0px;
-      //   font-size: 20px;
-
-      //   @media only screen and (max-width: 1400px) {
-      //     line-height: 30px;
-      //   }
-    }
   }
+
+  // Scoped Ant Design Overrides
   .ant-form {
-    // height: 100%;
+    .ant-form-item:not(:last-child) {
+      margin: 20px 0;
+    }
     .ant-form-item {
-      margin: 20px 0px;
+      margin: 20px 0;
+
       .ant-form-item-label {
         margin: 0 0 8px 0;
         line-height: 0;
         padding: 0;
+
+        > label {
+          color: var(--custom-text-color);
+        }
       }
     }
-    .ant-btn-primary {
-      margin-top: 10px;
+
+    .ant-form-explain {
+      position: absolute;
+      font-size: 12px;
+      margin-left: 2px;
     }
   }
-  .ant-form-explain {
-    position: absolute;
-    font-size: 12px;
-    margin-left: 2px;
+
+  .ant-form-vertical .ant-form-item .ant-form-item-control {
+    min-width: 100%;
   }
+
   .ant-btn-primary {
-    // width: 100%;
-    background-color: #0c66e4;
-    // height: 35px;
+    margin-top: 10px;
+    background-color: $primary-color;
     border-radius: 4px;
     width: 100%;
-    @media only screen and (max-width: 768px) {
-      width: 100%;
-      background-color: #0c66e4;
-      // min-width: 275px;
-    }
   }
+
   .ant-btn-secondary {
     width: 100%;
   }
-}
-.otp-container {
-  display: flex;
-}
 
-.otp-input-container p {
-  margin: 12px 0 0 0;
-  font-size: 12px;
-}
-
-.otp-input-container .otp-title {
-  @media only screen and (max-width: 768px) {
-    text-align: left;
+  .ant-divider-horizontal {
+    margin-bottom: 16px;
+    margin-top: 2px;
   }
-}
-.ant-divider-horizontal {
-  margin-bottom: 16px;
-  margin-top: 2px;
-}
 
-.otp-input-container .resend-otp-link {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  // margin-top: -10px;
-  color: #0c66e4;
-  margin-bottom: 10px;
-}
+  .ant-input {
+    background-color: transparent !important;
+  }
 
-.ant-form-vertical .ant-form-item .ant-form-item-control {
-  min-width: 100%;
-}
+  input {
+    border: 1px solid $border-color-dark;
+    border-radius: 2px;
 
-.resend-otp-link {
-  margin: auto;
+    &:focus {
+      border-color: $white !important;
+    }
+  }
 }
 
 .footer {
@@ -312,147 +334,11 @@ body {
   @media only screen and (max-width: 768px) {
     display: none;
   }
-}
-
-.otp-input-container {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.otp-actions {
-  background-color: #f5f5f5; // light gray
-  padding: 12px 16px;
-  display: flex;
-  justify-content: space-between;
-  gap: 6px;
-  // margin-top: 6px;
-}
-.resend-action {
-  margin-bottom: 8px;
-  display: flex;
-  gap: 6px;
-}
-.otp-method-section {
-  // margin-top: 10px;
-
-  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;
-  }
-  .otp-icon {
-  position: relative;
-  top: 2px;
-}
-
-  .ant-radio-wrapper {
-    display: flex;
-    // align-items: center;
-    gap: 6px;
-
-    svg {
-      font-size: 18px;
-      opacity: 0.8;
-    }
-  }
-
-  .otp-mode-error {
-    margin: 5px;
-    font-size: 13px;
-    color: red;
-  }
-}
-
-.otp-mode-text {
-  text-transform: capitalize;
-}
-
-input {
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  // padding: 30px;
-}
-
-input:focus {
-  border-color: #fff !important;
-}
-.otp-container {
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-}
 
-.otp-container input[type='text']:focus {
-  border-color: #fff !important;
-}
-
-.full-page {
-  height: 100vh;
-  background-color: 'cover'; // Ensures full coverage
-  background-position: 'bottom center'; // Aligns image at the bottom
-  background-size: '100% auto'; // image spans full width
-  background-repeat: no-repeat;
-
-  min-height: 100vh; // Ensures full height
-  width: 100%; // Covers the full width
-}
-.ant-input {
-  background-color: transparent !important;
-}
-
-.ant-form-item-label > label {
-  color: var(--custom-text-color);
-}
-
-// .user-authentication-section .auth-form-wrapper .ant-btn-primary {
-//   background-color: var(--custom-bg-color);
-//   color: var(--custom-btn-text-color);
-// }
-// .ant-input {
-//   background-color: var(--custom-input-bg-color);
-//   color: var(--custom-input-color);
-// }
-/* Mobile: stack OTP radio options in separate rows */
-/* Mobile phones (iPhone) – stack in one column */
-@media only screen and (max-width: 600px) {
-  .otp-method-group {
-    flex-direction: column !important;
-    align-items: flex-start !important;
-    gap: 12px !important;
-  }
-}
-
-/* iPad Mini + Tablets (600px to 1024px) – show in row */
-@media only screen and (min-width: 601px) and (max-width: 1024px) {
-  .otp-method-group {
-    flex-direction: row !important;
-    align-items: center !important;
-    justify-content: space-between !important;
-    gap: 20px !important;
-    width: 100%;
-  }
-
-  .otp-method-group .ant-radio-wrapper {
-    flex: 1; /* evenly spaced columns */
-  }
-}
-
-/* Desktop – normal layout */
-@media only screen and (min-width: 1025px) {
-  .otp-method-group {
-    flex-direction: row;
-    gap: 30px;
+  .footer-logo {
+    width: 180px;
+    padding: 4px;
+    border-radius: 2px;
+    margin: 20px 0 30px;
   }
 }

package/core/lib/pages/login/reset-password.js

@@ -0,0 +1,124 @@
+/**
+ * ResetPassword Component
+ *
+ * Handles staff password reset flow:
+ * - Accepts username
+ * - Selects communication mode (email/SMS)
+ * - Calls API to send reset link
+ * - Displays success/error messages
+ * - Allows navigation back to login
+ *
+ * Props:
+ * @param {Function} onBack - Triggered when "Back to Login" is clicked
+ * @param {string} title - Page title
+ * @param {string} subtitle - Page subtitle
+ * @param {string} buttonText - Submit button text
+ * @param {string} defaultUsername - Pre-filled username
+ * @param {boolean} disabledUserName - Disable username field
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Divider, Form, Input, message } from 'antd';
+import { Button } from '../../elements';
+import CommunicationModeSelection from './commnication-mode-selection';
+import { motion } from 'framer-motion';
+import './reset-password.scss';
+import { UsersAPI } from '../../../models';
+
+function ResetPassword({ onBack, title, subtitle, buttonText, defaultUsername, disabledUserName }) {
+  //  Selected communication mode (default: email) */
+  const [communicationMode, setCommunicationMode] = useState('email');
+
+  const [modeError, setModeError] = useState(false);
+
+  // Loading state for submit button */
+  const [loading, setLoading] = useState(false);
+
+  const [form] = Form.useForm();
+
+  // Pre-fills username if provided and disabled.
+  useEffect(() => {
+    if (disabledUserName && defaultUsername) {
+      form.setFieldsValue({ username: defaultUsername });
+    }
+  }, [disabledUserName, defaultUsername]);
+
+  /**
+   * Sends forgot password request to backend.
+   * Payload: { mode, username, user_type: 'staff' }
+   */
+  const handleSendForgetPassword = async (values) => {
+    const payload = {
+      mode: communicationMode,
+      username: values.username,
+      user_type: 'staff',
+    };
+    setLoading(true);
+
+    try {
+      const res = await UsersAPI.createForgotePassword(payload);
+
+      if (!res?.success) {
+        throw new Error(res?.message || 'Reset password failed');
+      }
+
+      message.success(res?.message || 'Reset password link sent');
+    } catch (err) {
+      message.warning(err?.message || 'Reset password failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * Clears auth storage and navigates back.
+   */
+  const handleBackToLogin = () => {
+    localStorage.removeItem('access_token');
+    localStorage.removeItem('refresh_token');
+    sessionStorage.clear();
+    onBack();
+  };
+
+  return (
+    <motion.div
+      className="forgot-password-container"
+      initial={{ opacity: 0, y: 70 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -50 }}
+      transition={{
+        y: {
+          duration: 1,
+          ease: [0.22, 0.08, 0.26, 1],
+        },
+        opacity: {
+          duration: 0.45,
+          ease: 'easeOut',
+        },
+      }}
+    >
+      <h3 className="password-title">{title}</h3>
+      <p className="password-subtitle">{subtitle}</p>
+      <Divider />
+      <Form layout="vertical" form={form} onFinish={handleSendForgetPassword}>
+        <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username' }]}>
+          <Input placeholder="Enter your username" disabled={disabledUserName} />
+        </Form.Item>
+
+        <CommunicationModeSelection communicationMode={communicationMode} setCommunicationMode={setCommunicationMode} modeError={modeError} />
+
+        <Button type="primary" htmlType="submit" loading={loading}>
+          {buttonText}
+        </Button>
+
+        <div style={{ marginTop: '10px', textAlign: 'center' }}>
+          <a style={{ cursor: 'pointer' }} onClick={handleBackToLogin}>
+            Back to Login
+          </a>
+        </div>
+      </Form>
+    </motion.div>
+  );
+}
+
+export default ResetPassword;

package/core/lib/pages/login/reset-password.scss

@@ -0,0 +1,22 @@
+.forgot-password-container {
+
+    padding: 4px;
+  .password-title{
+    color: #1f1f1f;
+    margin: 0 0 8px;
+  }
+
+  .password-subtitle {
+    font-size: 14px;
+    font-weight: 400;
+    color: #6b7280;
+    line-height: 1.5;
+    margin: 0 0 20px;
+  }
+
+  .ant-divider {
+    margin: 0;
+    border-top: 1px solid #e5e7eb;
+  }
+}
+

package/core/lib/utils/common/common.utils.js

@@ -122,6 +122,42 @@ export const checkLicenseStatus = (expiryDate) => {
   return { valid: true, daysLeft, message: null, level: null };
 };
 
+/**
+ * Checks password expiry status.
+ *
+ * @param {string|Date} expiryDate
+ * @param {number} warningDays
+ * @param {string} expiredMessage
+ * @param {(daysLeft: number) => string} warningMessage
+ *
+ * @returns {{ valid: boolean, daysLeft: number, message: string|null, level: "error"|"warning"|null }}
+ */
+
+export const checkExpiryStatus = ({ expiryDate, warningDays, expiredMessage, warningMessage }) => {
+  const expiry = new Date(expiryDate);
+
+  if (isNaN(expiry)) {
+    return { valid: false, daysLeft: 0, message: 'Invalid date', level: 'error' };
+  }
+
+  expiry.setHours(0, 0, 0, 0);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const msDiff = expiry.getTime() - today.getTime();
+  const daysLeft = Math.ceil(msDiff / (1000 * 60 * 60 * 24));
+
+  if (daysLeft < 0) {
+    return { valid: false, daysLeft, message: expiredMessage, level: 'error' };
+  }
+
+  if (daysLeft <= warningDays) {
+    return { valid: true, daysLeft, message: warningMessage(daysLeft), level: 'warning' };
+  }
+
+  return { valid: true, daysLeft, message: null, level: null };
+};
+
 /**
  * Masks a mobile number by hiding all but the last `visibleDigits`.
  * Adds spacing only to the masked portion (groups of 3),

package/core/models/users/users.js

@@ -359,6 +359,13 @@ class Users extends Base {
       url: 'staff/get-all-staff',
     });
   };
+
+  createForgotePassword = (formBody) => {
+    return ApiUtils.post({
+      url: `bookings/trigger-reset-password-link`,
+      formBody,
+    });
+  };
 }
 
 export default Users;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.1-dev.1",
+  "version": "2.6.1-dev.2",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"