@modernman00/shared-js-lib 1.2.75 → 1.2.81

package/AcctMgt/code.js

@@ -18,7 +18,8 @@ export function createCodeSubmitHandler({
     redirect,
     theme,
     lengthLimit: lengthLimitArray,
-    optionalFields: [inputId],
+    optionalFields: [],
     recaptchaAction
   });
 }
+// testing

package/AcctMgt/forgot.js

@@ -18,7 +18,7 @@ export function forgotSubmitHandler({
     redirect,
     theme,
     lengthLimit: lengthLimitArray,
-    optionalFields: [inputId],
+    optionalFields: [],
     recaptchaAction
   });
 }

package/AcctMgt/processAll.js

@@ -18,6 +18,11 @@ export const loginSubmission = async ({
   optionalFields = [],
   recaptchaToken = null    // { token, action } or null
 }) => {
+  let loaderClasses = "loader";
+  if (css === 'tailwind') {
+    loaderClasses = "animate-spin mx-auto block w-10 h-10 border-4 border-blue-600 border-t-transparent rounded-full";
+  }
+
   try {
     const formInput = id(formId);
 
@@ -37,14 +42,17 @@ export const loginSubmission = async ({
     formData.massValidate(optionalFields, { email: 'email', password: 'password' });
 
     if (formData.result !== 1) {
-      alert('The form cannot be submitted. Please check the errors');
+      const firstError = document.querySelector('[id$="_error"]:not(:empty)');
+      if (firstError) {
+          firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
       return;
     }
 
        const notificationElement = id(`${formId}_notification`) || formInput;
     notificationElement.scrollIntoView({ behavior: 'smooth' });
 
-    showLoader();
+    showLoader('setLoader', loaderClasses);
     localStorage.setItem('redirect', redirect);
 
     await postFormData(loginURL, formId, redirect, css, recaptchaToken);
@@ -52,6 +60,6 @@ export const loginSubmission = async ({
   } catch (err) {
     showError(err);
   } finally {
-    clearLoader();
+    clearLoader('setLoader', loaderClasses);
   }
 };

package/Cookie.js

@@ -7,7 +7,7 @@
  */
 export const setCookie = (cname, cvalue, exdays = 365) => {
     const d = new Date(Date.now() + exdays * 864e5);
-    document.cookie = `${cname}=${cvalue}; expires=${d.toUTCString()}; path=/`;
+    document.cookie = `${cname}=${cvalue}; expires=${d.toUTCString()}; path=/; SameSite=Lax`;
 }
 
 /**

package/DateTime.js

@@ -45,8 +45,10 @@ let element = document.querySelectorAll('time[data-time]')
  */
 export const updateTimeRealTime = () => {
     for (const entry of element) {
-        const seconds = (Date.now() - new Date(entry.dataset.time).getTime()) / 1000;
-        entry.textContent = getDuration(seconds);
+        try {
+            const seconds = (Date.now() - new Date(entry.dataset.time).getTime()) / 1000;
+            entry.textContent = getDuration(seconds);
+        } catch (_) { /* skip malformed entry, continue updating others */ }
     }
     setTimeout(updateTimeRealTime, 1000 * 60);
 };
@@ -93,9 +95,11 @@ const getDuration = (timeAgoInSeconds) => {
  */
 export const timeAgo = (date) => {
     const timeAgoInSeconds = Math.floor((new Date() - new Date(date)) / 1000);
-    const { interval, epoch } = getDuration(timeAgoInSeconds);
+    const duration = getDuration(timeAgoInSeconds);
+    if (!duration) return '0 seconds ago';
+    const { interval, epoch } = duration;
     const suffix = interval === 1 ? '' : 's';
     return `${interval} ${epoch}${suffix} ago`;
 };
 
-export const date2String = (date) => new Date().toDateString(date)
+export const date2String = (date) => new Date(date).toDateString()

package/FileUpload.js

@@ -9,8 +9,11 @@ import { id } from './UtilityHtml.js';
  * @param {string} fileName - the id of the element where the selected file names will be displayed.
  */
 export const showImageFileUploadFn = (uploadBtn, inputId, fileName) => {
+  const btn = id(uploadBtn);
   const input = id(inputId);
   const fileNamesEl = id(fileName);
-  id(uploadBtn).addEventListener('click', () => input.click());
+  if (!btn || !input || !fileNamesEl) return;
+
+  btn.addEventListener('click', () => input.click());
   input.addEventListener('change', () => fileNamesEl.innerText = Array.from(input.files).map(file => file.name).join(', '));
 };

package/FormHelper.js

@@ -114,10 +114,15 @@ export default class FormHelper {
                 !id || 
                 ['submit', 'button', 'g-recaptcha-response', 'cancel'].includes(name) ||
                 ['button', 'showPassword', 'token', 'g-recaptcha-response'].includes(id) ||
-                type === 'button' || optionalFields.includes(id) ||
-                id === 'checkbox'
+                type === 'button' || optionalFields.includes(id)
             ) continue;
 
+            // Skip hidden elements (if the user can't see it, they can't fill it)
+            const el = this.id(id);
+            if (el && (el.offsetParent === null || window.getComputedStyle(el).display === 'none')) {
+                continue;
+            }
+
      
          
          
@@ -131,7 +136,7 @@ export default class FormHelper {
             }
 
             // Required field check
-            if (val === '' || val === 'select') {
+            if (val === '' || val === 'select' || (type === 'checkbox' && !input.checked)) {
                 if (errorEl) errorEl.innerHTML = `<li style="color:red;">${id} cannot be left empty.</li>`;
                 this.error.push(`${id.toUpperCase()} cannot be left empty.`);
                 continue;

package/Http.js

@@ -96,6 +96,7 @@ export const postFormData = async (url, formId, redirect = null, css = null, rec
 const processFormDataAction = (cssClass, message, formNotificationId) => {
     if (formNotificationId) {
         formNotificationId.style.display = 'block';
+        formNotificationId.classList.add('notification');
         formNotificationId.classList.add(cssClass);
         
         const errorElement = id('error');
@@ -103,7 +104,12 @@ const processFormDataAction = (cssClass, message, formNotificationId) => {
             errorElement.scrollIntoView({ behavior: 'smooth' });
             errorElement.style.color = 'white';
             errorElement.innerHTML = message;
+        } else {
+            // Ensure we scroll to the notification if no specific error element exists
+            formNotificationId.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
+        formNotificationId.innerHTML = message;
+
         const loader = id('setLoader');
         if (loader) loader.classList.remove('loader');
     } else {

package/Loader.js

@@ -24,14 +24,17 @@ export const clearLoader = (elementId = 'setLoader', loaderClass = "loader") =>
     }
 
     loader.style.display = "none";
-    loader.classList.remove(loaderClass);
-
+    loaderClass.split(' ').forEach(cls => {
+        if (cls) loader.classList.remove(cls);
+    });
 }
 export const showLoader = (elementId ='setLoader', loaderClass = "loader") => {
     const loader = id(elementId);
     if (!loader) {
         throw new Error(`Element  not found`);
     }
-    loader.classList.add(loaderClass);
+    loaderClass.split(' ').forEach(cls => {
+        if (cls) loader.classList.add(cls);
+    });
     loader.style.display = "block";
 };

package/ShowResponse.js

@@ -22,16 +22,22 @@ export const showNotification = (
   message,
   timer = 5000,
 ) => {
-  // display the success information for 10sec
-  id(`${elementId}`).style.display = 'block'; // unblock the notification
-  id(`${elementId}`).classList.add(addClass); // add the success class
-  id(`${elementId}`).innerHTML = message; // error element
-  id('loader').classList.remove('loader'); // remove loader
+  const el = id(`${elementId}`);
+  if (!el) return;
+
+  el.style.display = 'block';
+  el.classList.add(addClass);
+  el.innerHTML = message;
+
+  const loaderEl = id('loader');
+  if (loaderEl) loaderEl.classList.remove('loader');
 
   setTimeout(() => {
-    id(`${elementId}`).style.backgroundColor = '';
-    id(`${elementId}`).style.color = '';
-    id(`${elementId}`).innerHTML = '';
+    const target = id(`${elementId}`);
+    if (!target) return;
+    target.style.backgroundColor = '';
+    target.style.color = '';
+    target.innerHTML = '';
   }, timer);
 };
 
@@ -39,10 +45,10 @@ export const showNotification = (
 
 export const showResponse = (theId, message, status) => {
   const responseEl = id(theId);
-  const col = status ? 'green' : 'red';
+  if (!responseEl) return;
 
+  const col = status ? 'green' : 'red';
   responseEl.innerHTML = message;
-  responseEl.style.color = 'green';
   responseEl.style.backgroundColor = col;
   responseEl.style.color = 'white';
   setTimeout(() => {

package/axiosWrapper.js

@@ -4,16 +4,14 @@ import axiosRetry from 'axios-retry';
 
 axiosRetry(axios, { retries: 3 });
 
-const csrfToken = getCookieValue('XSRF-TOKEN');
-
 axios.interceptors.request.use(config => {
     config.headers['X-Requested-With'] = 'XMLHttpRequest';
-    // config.headers['Accept'] = 'application/json';
 
+    const csrfToken = getCookieValue('XSRF-TOKEN');
     if (csrfToken) {
         config.headers['X-XSRF-TOKEN'] = csrfToken;
     }
-    
+
     return config;
 });
 

package/config/version.php

@@ -1,3 +1,3 @@
 <?php
-define('APP_VERSION', 'v1.2.74');
+define('APP_VERSION', 'v1.2.75');
 

package/general.js

@@ -14,6 +14,8 @@ export const matchInput = (first, second, err) => {
     firstInput = id(first);
     secondInput = id(second);
 
+    if (!error || !firstInput || !secondInput) return;
+
     secondInput.addEventListener('keyup', () => {
 
         if (secondInput.value !== firstInput.value) {
@@ -61,10 +63,12 @@ export const parseErrorResponse = (error) => {
 
 export const showFileName = (fileCss) => {
     const fileInput = document.querySelector(`#${fileCss} input[type=file]`);
+    if (!fileInput) return;
+
     fileInput.onchange = () => {
         if (fileInput.files.length > 0) {
             const fileName = document.querySelector(`#${fileCss} .file-name`);
-            fileName.textContent = fileInput.files[0].name;
+            if (fileName) fileName.textContent = fileInput.files[0].name;
         }
     };
 }

package/index.js

@@ -4,7 +4,6 @@ export * from './Utility.js';
 export * from './Loader.js';
 export * from './Cookie.js';
 export * from './FormHelper.js'
-export * from './Loader.js';
 export * from './ShowResponse.js';
 export * from './DateTime.js';
 export * from './CountryCode.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernman00/shared-js-lib",
-  "version": "1.2.75",
+  "version": "1.2.81",
   "description": "Reusable JS utilities for numerous js problems",
   "homepage": "https://github.com/modernman00/shared-js-lib#readme",
   "keywords": [