ui-soxo-bootstrap-core 2.6.18 → 2.6.19

package/core/lib/elements/basic/country-phone-input/country-phone-input.js

@@ -6,79 +6,53 @@
  * Ensure to follow a minimal standard
  */
 import React, { useState, useEffect, useRef } from 'react';
-
 import PhoneInput from 'react-phone-input-2';
-
 import 'react-phone-input-2/lib/style.css';
-
-import PropTypes from "prop-types";
-
+import PropTypes from 'prop-types';
 import './phone-input.scss';
 
-
-export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur, onKeyDown }) {
-
-  let inputRef = useRef();
-
-  const [phone, setPhone] = useState();
-
+export default function CountryPhoneInput({
+  value,
+  onChange,
+  disabled,
+  disableCountryCode,
+  required,
+  defaultCountryCode,
+  onBlur,
+  className,
+  onKeyDown,
+}) {
+  const inputRef = useRef();
+  const hasInitializedRef = useRef(false); // IMPORTANT
+
+  const [phone, setPhone] = useState('');
+  /**
+   * run ONLY ONCE when initial value has dial code
+   */
   useEffect(() => {
-    if (value && value.code && value.code.dialCode !== null) {
-      // To prepopulate phone number ,concat dialCode and phone number
+    if (!hasInitializedRef.current && value?.code?.dialCode && value?.value) {
       setPhone(value.code.dialCode + value.value);
-
-      // In case of update , to identify the country code that is getting selected
-      // We are setting a timeout
-      setTimeout(() => {
-        // Using the reference , we get the internal state of the library component
-        let selectedCountry = null;
-
-        let selectedCode = null;
-
-        if (
-          inputRef.current &&
-          inputRef.current.state &&
-          inputRef.current.state.selectedCountry
-        ) {
-          selectedCountry = inputRef.current.state.selectedCountry;
-
-          // Once we get the selected country ,we format it to the form that is received for normal onChange
-          selectedCode = {
-            countryCode: selectedCountry.iso2,
-            dialCode: selectedCountry.dialCode,
-            name: selectedCountry.name,
-          };
-        }
-
-        // Below being the format expected , we trigger the onChange to manually update the form
-        let updatedValue = {
-          value: value.code.dialCode + value.value,
-          code: selectedCode,
-        };
-
-        onChange(updatedValue);
-      }, 0);
+      hasInitializedRef.current = true; // 👈 mark as done
     }
-  }, []);
+  }, [value]);
 
   /**
-   * To get value in parent component
-   * @param {*} value
+   * handle user input
    */
-  function handleInput(value, code) {
-    if (code.dialCode) {
-      value = value.substring(code.dialCode.length);
-    }
-    // To get country code with phone number in parent component
-    value = {
-      value,
+  function handleInput(inputValue, code) {
+    if (!code?.dialCode) return;
+
+    const phoneNumber = inputValue.slice(code.dialCode.length);
+
+    // remove autofill class when user edits field (if you use it)
+    onChange({
+      value: phoneNumber,
       code,
-    };
-    onChange(value);
+    });
   }
 
   return (
-    <div className="phone-input">
+    <div className={`phone-input ${className || ''}`}>
       <PhoneInput
         ref={inputRef}
         country={defaultCountryCode || 'in'}
@@ -104,4 +78,4 @@ CountryPhoneInput.propTypes = {
   disableCountryCode: PropTypes.bool,
   /** A boolean indicating whether the input is required or not. This prop is optional. */
   required: PropTypes.bool,
-};
+};

package/core/lib/elements/basic/country-phone-input/phone-input.scss

@@ -12,6 +12,20 @@
     // }
   }
   
+  .autofilled-field {
+  .react-tel-input {
+    .form-control {
+      border-color: #fa8c16 !important; // AntD warning orange
+      background-color: #fff7e6;
+      box-shadow: none;
+    }
+
+    .flag-dropdown {
+      border-color: #fa8c16 !important;
+      background-color: #fff7e6;
+    }
+  }
+}
 //   /* For tablets and smaller screens (max-width: 1024px) */
 //   @media (max-width: 1024px) {
 //     .phone-input {

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

@@ -30,7 +30,7 @@ import { getAccessToken, getRefreshToken } from '../../utils/http/auth.helper';
 
 import { Location } from '../../utils';
 
-import { checkLicenseStatus, formatMobile, checkExpiryStatus, safeJSON } from '../../utils/common/common.utils';
+import { checkLicenseStatus, formatMobile, safeJSON } from '../../utils/common/common.utils';
 
 import { MailOutlined, MessageOutlined, WhatsAppOutlined } from '@ant-design/icons';
 
@@ -50,8 +50,6 @@ const tailLayout = {
 
 const LICENSE_EXPIRY = '2026-12-12';
 
-//password valdity expire
-const PASSWORD_VALIDITY_DAYS = 90;
 
 const headers = {
   db_ptr: 'nuraho',
@@ -115,47 +113,32 @@ function LoginPhone({ history, appSettings }) {
    *
    * - 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>
-        ),
-      });
+  const handlePasswordExpiryCheck = (expiryDays) => {
+    if (expiryDays == null) return;
 
-      if (passwordStatus.message) {
-        message.warning(passwordStatus.message);
-      }
+    if (expiryDays <= 0) {
+      message.error('Your password has expired. Please reset it.');
+
+      setExpiredPassword(true);
+      setShowResetpassword(true);
+
+      return;
+    }
+
+    if (expiryDays <= 2) {
+      message.warning(
+        <span>
+          Your password will expire in {expiryDays} day(s). <a onClick={() => history.push('/change-password')}>Click here to update.</a>
+        </span>
+      );
     }
   };
 
@@ -196,7 +179,7 @@ function LoginPhone({ history, appSettings }) {
           if (insider_token) localStorage.insider_token = insider_token;
 
           if (result.success) {
-            handlePasswordExpiryCheck(user);
+            handlePasswordExpiryCheck(result.expiry_in_days);
 
             //two_factor_authentication variable is present then proceed Two factor authentication
             if (result.data && result.data.two_factor_authentication) {
@@ -421,7 +404,7 @@ function LoginPhone({ history, appSettings }) {
           // set user info into local storage
           localStorage.setItem('userInfo', JSON.stringify(userInfo));
 
-          handlePasswordExpiryCheck(result.user);
+          handlePasswordExpiryCheck(result.expiry_in_days);
 
           setTimeout(() => history.push('/'), 500);
         } else {

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

@@ -123,41 +123,6 @@ 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`.

package/package.json

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