@modernman00/shared-js-lib 1.2.81 → 1.2.83

package/AcctMgt/AdminAuthForm.js

@@ -0,0 +1,26 @@
+import { setButtonLoading, clearButtonLoading } from '../ButtonLoader.js';
+
+/**
+ * Universal Admin Auth Form Helper for @modernman00/shared-js-lib
+ * Handles non-blocking submit button states with spinner animation
+ * without interrupting browser event packaging.
+ */
+export const initAdminAuthForm = (formSelector = 'form') => {
+  if (typeof document === 'undefined') return;
+
+  const form = document.querySelector(formSelector);
+  if (!form) return;
+
+  form.addEventListener('submit', (evt) => {
+    const submitBtn = form.querySelector('button[type="submit"]');
+    if (!submitBtn) return;
+
+    // Use non-blocking delay so browser packages POST payload before disabling
+    const loadingText = submitBtn.dataset.loadingText || 'Processing...';
+    setTimeout(() => {
+      setButtonLoading(submitBtn, loadingText);
+    }, 50);
+  });
+};
+
+export default initAdminAuthForm;

package/AcctMgt/createFormHandler.js

@@ -1,7 +1,10 @@
 // createFormHandler.js
+'use strict';
 import { bindEvent } from '../Utility.js';
 import { recaptchaToken } from './recaptchaToken.js';
 import { loginSubmission } from './processAll.js';
+import { swalError } from '../Alert.js';
+import { clearButtonLoading } from '../ButtonLoader.js';
 
 export function createFormHandler({
   formId,
@@ -16,20 +19,29 @@ export function createFormHandler({
   const handler = async (e) => {
     e.preventDefault();
 
-    const token = await recaptchaToken(recaptchaAction);
+    try {
+      const token = await recaptchaToken(recaptchaAction);
 
-    await loginSubmission({
-      formId,
-      loginURL: route,
-      redirect,
-      css: theme,
-      lengthLimit,
-      optionalFields,
-      recaptchaToken: token
-        ? { token, action: recaptchaAction }
-        : null
-    });
+      await loginSubmission({
+        formId,
+        loginURL: route,
+        redirect,
+        buttonId,
+        css: theme,
+        lengthLimit,
+        optionalFields,
+        recaptchaToken: token
+          ? { token, action: recaptchaAction }
+          : null
+      });
+    } catch (err) {
+      console.error('createFormHandler Error:', err);
+      swalError(err.message || 'Form submission encountered an unexpected error.', true);
+      clearButtonLoading(buttonId);
+    }
   };
-  // 🔹 This is the click binding you’re referring to
+
+  // 🔹 Click binding with defensive execution
   bindEvent({ id: buttonId, handler });
 }
+

package/AcctMgt/processAll.js

@@ -5,6 +5,8 @@ import { showLoader, clearLoader } from '../Loader.js';
 import { id } from '../UtilityHtml.js';
 import { showError } from '../ShowResponse.js';
 import FormHelper from '../FormHelper.js';
+import { setButtonLoading, clearButtonLoading } from '../ButtonLoader.js';
+import { swalError } from '../Alert.js';
 
 /**
  * Handles the submission of a form and redirects the user.
@@ -13,6 +15,7 @@ export const loginSubmission = async ({
   formId,
   loginURL,
   redirect,
+  buttonId = 'button',
   css = null,
   lengthLimit = null,      // { id: [...], max: [...] } or null
   optionalFields = [],
@@ -23,6 +26,9 @@ export const loginSubmission = async ({
     loaderClasses = "animate-spin mx-auto block w-10 h-10 border-4 border-blue-600 border-t-transparent rounded-full";
   }
 
+  // Resolve target button (by provided buttonId, or finding submit button within form)
+  let targetButton = id(buttonId);
+
   try {
     const formInput = id(formId);
 
@@ -30,6 +36,10 @@ export const loginSubmission = async ({
       throw new Error(`Form ${formId} not found`);
     }
 
+    if (!targetButton) {
+      targetButton = formInput.querySelector('button[type="submit"], input[type="submit"], button');
+    }
+
     const formInputArr = Array.from(formInput.elements);
     const formData = new FormHelper(formInputArr);
 
@@ -49,9 +59,15 @@ export const loginSubmission = async ({
       return;
     }
 
-       const notificationElement = id(`${formId}_notification`) || formInput;
+    const notificationElement = id(`${formId}_notification`) || formInput;
     notificationElement.scrollIntoView({ behavior: 'smooth' });
 
+    // Enable button spinner on the submit button itself
+    if (targetButton) {
+      setButtonLoading(targetButton);
+    }
+
+    // Keep external loader for backward compatibility
     showLoader('setLoader', loaderClasses);
     localStorage.setItem('redirect', redirect);
 
@@ -59,7 +75,13 @@ export const loginSubmission = async ({
 
   } catch (err) {
     showError(err);
+    swalError(err.message || 'An error occurred while submitting the form.', true);
   } finally {
+    // Guaranteed cleanup: remove button spinner & external loader
+    if (targetButton) {
+      clearButtonLoading(targetButton);
+    }
     clearLoader('setLoader', loaderClasses);
   }
 };
+

package/AcctMgt/recaptchaToken.js

@@ -1,19 +1,34 @@
 // recaptchaToken.js
+'use strict';
 import { showError } from '../ShowResponse.js';
 
+/**
+ * Retrieves a reCAPTCHA v3 or Enterprise token safely.
+ * Checks for both grecaptcha.enterprise and standard grecaptcha v3.
+ * 
+ * @param {string} [action='SUBMIT'] - The action name for the score.
+ * @returns {Promise<string|null>} Token string or null if unavailable.
+ */
 export const recaptchaToken = async (action = 'SUBMIT') => {
-  let token = null;
+  if (typeof window === 'undefined') return null;
+  const siteKey = window.RECAPTCHA_SITE_KEY || window.recaptchaSiteKey || null;
+  if (!siteKey || !window.grecaptcha) return null;
 
-  if (window.RECAPTCHA_SITE_KEY && window.grecaptcha && window.grecaptcha.enterprise) {
-    try {
-      token = await window.grecaptcha.enterprise.execute(
-        window.RECAPTCHA_SITE_KEY,
-        { action }
-      );
-    } catch (err) {
-      showError(err);
+  try {
+    // 1. Check Google Cloud reCAPTCHA Enterprise
+    if (window.grecaptcha.enterprise && typeof window.grecaptcha.enterprise.execute === 'function') {
+      return await window.grecaptcha.enterprise.execute(siteKey, { action });
     }
+
+    // 2. Fallback to standard reCAPTCHA v3
+    if (typeof window.grecaptcha.execute === 'function') {
+      return await window.grecaptcha.execute(siteKey, { action });
+    }
+  } catch (err) {
+    showError(err);
+    console.warn('reCAPTCHA execution skipped due to error:', err.message);
   }
 
-  return token;
+  return null;
 };
+

package/AcctMgt/update.js

@@ -1,14 +1,17 @@
 // update.js
+'use strict';
 import { id } from '../UtilityHtml.js';
 import { bindEvent } from '../Utility.js';
 import { msgException, showError } from '../ShowResponse.js';
-import axios from 'axios';
+import axios from '../axiosWrapper.js';
 import { redirectAfterDelay, parseErrorResponse } from '../general.js';
 import { recaptchaToken } from './recaptchaToken.js';
+import { setButtonLoading, clearButtonLoading } from '../ButtonLoader.js';
+import { swalSuccess, swalError } from '../Alert.js';
 
 export function update({
   formId,
-  buttonId,
+  buttonId = 'button',
   route,
   redirect,
   recaptchaAction = 'SUBMIT'
@@ -16,53 +19,83 @@ export function update({
   const handler = async (e) => {
     e.preventDefault();
 
-    const token = await recaptchaToken(recaptchaAction);
+    let btnEl = id(buttonId) || (typeof formId === 'string' ? id(formId)?.querySelector('button') : null);
 
-    const form = id(formId);
-    if (!form) {
-      msgException(`Form with ID "${formId}" not found.`);
-      return;
-    }
+    try {
+      if (btnEl) {
+        setButtonLoading(btnEl);
+      }
 
-    const formData = new FormData();
-    const inputs = form.querySelectorAll('[name]');
+      const token = await recaptchaToken(recaptchaAction);
 
-    if (token) {
-      formData.append('recaptchaTokenV3', token);
-    }
+      const form = id(formId);
+      if (!form) {
+        msgException(`Form with ID "${formId}" not found.`);
+        return;
+      }
 
-    inputs.forEach(input => {
-      const name = input.name;
-      const original = input.getAttribute('data-original');
-      const current = input.type === 'file' ? input.files[0] : input.value;
+      const formData = new FormData();
+      const inputs = form.querySelectorAll('[name]');
 
-      if (input.type === 'file') {
-        if (current) formData.append(name, current);
-      } else if (current !== original) {
-        formData.append(name, current);
+      if (token) {
+        formData.append('recaptchaTokenV3', token);
       }
-    });
 
-    try {
-      const response = await axios.post(route, formData);
-      const message = response.data.message;
+      inputs.forEach(input => {
+        const name = input.name;
+        const original = input.getAttribute('data-original');
+        const current = input.type === 'file' ? input.files[0] : input.value;
+
+        if (input.type === 'file') {
+          if (current) formData.append(name, current);
+        } else if (current !== original) {
+          formData.append(name, current);
+        }
+      });
+
+      const response = await axios.post(route, formData, {
+        baseURL: '/',
+        withCredentials: true,
+      });
+
+      const message = response?.data?.message || 'Updated successfully';
+      const cleanMessage = typeof message === 'string' ? message : 'Updated successfully';
 
-      const notificationId = id(`${formId}_notification`) || formId;
-      notificationId.style.display = 'block';
-      notificationId.innerHTML = message;
-      notificationId.scrollIntoView({ behavior: 'smooth' });
+      // Modern SweetAlert2 toast
+      swalSuccess(cleanMessage, true);
+
+      // Fallback DOM notification if element exists
+      const notificationId = id(`${formId}_notification`);
+      if (notificationId) {
+        notificationId.style.display = 'block';
+        notificationId.innerHTML = cleanMessage;
+        notificationId.scrollIntoView({ behavior: 'smooth' });
+      }
 
       if (redirect) {
-        redirectAfterDelay(redirect, 2000);
+        redirectAfterDelay(redirect, 1500);
       }
 
     } catch (error) {
-      const errorMsg = parseErrorResponse(error);
+      const errorMsg = parseErrorResponse(error) || 'An error occurred during update.';
+      showError(error);
+
+      // Modern SweetAlert2 error modal
+      swalError(errorMsg, true);
+
+      // Fallback DOM notification if element exists
       const notificationId = id(`${formId}_notification`);
-      notificationId.style.display = 'block';
-      notificationId.innerHTML = `<li style="color:white; background-color:red">${errorMsg}</li>`;
+      if (notificationId) {
+        notificationId.style.display = 'block';
+        notificationId.innerHTML = `<li style="color:white; background-color:red">${errorMsg}</li>`;
+      }
+    } finally {
+      if (btnEl) {
+        clearButtonLoading(btnEl);
+      }
     }
   };
 
   bindEvent({ id: buttonId, handler });
 }
+

package/Alert.js

@@ -0,0 +1,158 @@
+'use strict';
+import Swal from 'sweetalert2';
+
+/**
+ * Checks if running in browser environment (SSR safety guard).
+ */
+const isBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined';
+
+/**
+ * SweetAlert2 Toast Mixin with sensible modern defaults.
+ */
+const Toast = Swal.mixin({
+  toast: true,
+  position: 'top-end',
+  showConfirmButton: false,
+  timer: 3500,
+  timerProgressBar: true,
+  didOpen: (toast) => {
+    toast.addEventListener('mouseenter', Swal.stopTimer);
+    toast.addEventListener('mouseleave', Swal.resumeTimer);
+  }
+});
+
+/**
+ * Display a modern SweetAlert2 toast notification.
+ * 
+ * @param {string} message - Toast message to display
+ * @param {'success'|'error'|'warning'|'info'|'question'} [icon='success'] - Toast icon
+ * @param {number} [timer=3500] - Duration in ms
+ * @returns {Promise<any>}
+ */
+export const swalToast = async (message, icon = 'success', timer = 3500) => {
+  if (!isBrowser()) return null;
+  try {
+    return await Toast.fire({
+      icon,
+      title: message,
+      timer
+    });
+  } catch (err) {
+    console.error('SwalToast Error:', err);
+    return null;
+  }
+};
+
+/**
+ * Display a success alert (toast by default, or modal if specified).
+ * 
+ * @param {string} message - Success message
+ * @param {boolean} [asToast=true] - Whether to show as toast or modal
+ * @param {string} [title='Success'] - Modal title (only used when asToast=false)
+ * @returns {Promise<any>}
+ */
+export const swalSuccess = async (message, asToast = true, title = 'Success') => {
+  if (!isBrowser()) return null;
+  try {
+    if (asToast) {
+      return await swalToast(message, 'success');
+    }
+    return await Swal.fire({
+      icon: 'success',
+      title,
+      text: message,
+      confirmButtonColor: '#3085d6',
+      confirmButtonText: 'OK'
+    });
+  } catch (err) {
+    console.error('SwalSuccess Error:', err);
+    return null;
+  }
+};
+
+/**
+ * Display an error alert (modal dialog by default for high visibility).
+ * 
+ * @param {string} message - Error description/message
+ * @param {boolean} [isModal=true] - true for prominent modal, false for toast
+ * @param {string} [title='Error'] - Modal title
+ * @returns {Promise<any>}
+ */
+export const swalError = async (message, isModal = true, title = 'Error') => {
+  if (!isBrowser()) return null;
+  try {
+    if (!isModal) {
+      return await swalToast(message, 'error');
+    }
+    return await Swal.fire({
+      icon: 'error',
+      title,
+      text: message,
+      confirmButtonColor: '#d33',
+      confirmButtonText: 'Dismiss'
+    });
+  } catch (err) {
+    console.error('SwalError Error:', err);
+    return null;
+  }
+};
+
+/**
+ * Display a warning alert modal or toast.
+ * 
+ * @param {string} message - Warning message
+ * @param {string} [title='Warning'] - Modal title
+ * @returns {Promise<any>}
+ */
+export const swalWarning = async (message, title = 'Warning') => {
+  if (!isBrowser()) return null;
+  try {
+    return await Swal.fire({
+      icon: 'warning',
+      title,
+      text: message,
+      confirmButtonColor: '#f39c12',
+      confirmButtonText: 'Understood'
+    });
+  } catch (err) {
+    console.error('SwalWarning Error:', err);
+    return null;
+  }
+};
+
+/**
+ * Display an interactive confirmation modal dialog.
+ * 
+ * @param {string} title - Prompt title
+ * @param {string} text - Detailed prompt text or warning
+ * @param {string} [confirmButtonText='Yes, proceed'] - Label for confirm action
+ * @param {string} [cancelButtonText='Cancel'] - Label for cancel action
+ * @returns {Promise<boolean>} Resolves to true if user confirmed, false otherwise
+ */
+export const swalConfirm = async (
+  title,
+  text,
+  confirmButtonText = 'Yes, proceed',
+  cancelButtonText = 'Cancel'
+) => {
+  if (!isBrowser()) return false;
+  try {
+    const result = await Swal.fire({
+      title,
+      text,
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#3085d6',
+      cancelButtonColor: '#d33',
+      confirmButtonText,
+      cancelButtonText,
+      reverseButtons: true
+    });
+    return !!result.isConfirmed;
+  } catch (err) {
+    console.error('SwalConfirm Error:', err);
+    return false;
+  }
+};
+
+export { Swal };

package/AuthInterceptor.js

@@ -0,0 +1,56 @@
+'use strict';
+import axios from './axiosWrapper.js';
+import { swalConfirm } from './Alert.js';
+
+let isInterceptorInstalled = false;
+
+/**
+ * Installs an Axios response interceptor that automatically handles HTTP 401 Unauthorized errors.
+ * Prompts user with SweetAlert2 modal and redirects to login if confirmed.
+ * 
+ * @param {Object} [options={}]
+ * @param {string} [options.loginUrl='/login'] - Redirect destination on 401
+ * @param {string} [options.message='Your session has expired. Please log in again to continue.']
+ * @param {string} [options.title='Session Expired']
+ */
+export const setupAuthExpiryInterceptor = (options = {}) => {
+  if (typeof window === 'undefined' || isInterceptorInstalled) return;
+  isInterceptorInstalled = true;
+
+  const {
+    loginUrl = '/login',
+    message = 'Your session has expired. Please log in again to continue.',
+    title = 'Session Expired'
+  } = options;
+
+  axios.interceptors.response.use(
+    (response) => response,
+    async (error) => {
+      const status = error?.response?.status;
+
+      if (status === 401) {
+        try {
+          const confirmed = await swalConfirm(
+            title,
+            message,
+            'Log In',
+            'Stay on Page'
+          );
+
+          if (confirmed) {
+            // Save current page URL so caller can redirect back after login
+            try {
+              sessionStorage.setItem('post_login_redirect', window.location.href);
+            } catch (_) {}
+
+            window.location.href = loginUrl;
+          }
+        } catch (err) {
+          console.error('setupAuthExpiryInterceptor Error:', err);
+        }
+      }
+
+      return Promise.reject(error);
+    }
+  );
+};

package/ButtonLoader.js

@@ -0,0 +1,133 @@
+'use strict';
+import { id } from './UtilityHtml.js';
+
+/**
+ * Universal SVG Spinner markup (framework agnostic, responsive, lightweight).
+ */
+const DEFAULT_SPINNER_SVG = `
+<svg class="mmlib-btn-spinner" style="display:inline-block; vertical-align:middle; width:1.15em; height:1.15em; animation:mmlib-spin 0.75s linear infinite; margin-right:0.5em;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" stroke-opacity="0.25"/>
+  <path d="M12 2C6.47715 2 2 6.47715 2 12" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+</svg>
+`;
+
+/**
+ * Inject required spinner keyframe animation once into document head if not present.
+ */
+const ensureSpinnerStyles = () => {
+  if (typeof document === 'undefined') return;
+  const styleId = 'mmlib-button-spinner-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      @keyframes mmlib-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+    `;
+    document.head?.appendChild(style);
+  }
+};
+
+/**
+ * Resolve target button element by ID, CSS selector, or Element reference.
+ * Supports any button type (type="button", type="submit", etc.)
+ * @param {HTMLElement|string} btn
+ * @returns {HTMLElement|null}
+ */
+export const resolveButton = (btn) => {
+  if (typeof btn === 'string') {
+    const trimmed = btn.trim();
+    return id(trimmed.replace(/^#/, '')) || (typeof document !== 'undefined' ? document.querySelector(trimmed) : null);
+  }
+  return btn instanceof HTMLElement ? btn : null;
+};
+
+/**
+ * Sets a button into a loading state:
+ * - Disables the button to prevent duplicate submissions
+ * - Injects a smooth spinning SVG
+ * - Preserves original text/HTML for later restoration
+ * 
+ * @param {HTMLElement|string} btn - Button element or ID string
+ * @param {string} [loadingText=''] - Optional text to display next to spinner
+ * @returns {boolean} True if successfully set to loading state
+ */
+export const setButtonLoading = (btn, loadingText = '') => {
+  try {
+    const el = resolveButton(btn);
+    if (!el) return false;
+
+    ensureSpinnerStyles();
+
+    // Avoid overriding if already in loading state
+    if (!el.hasAttribute('data-mmlib-loading')) {
+      el.setAttribute('data-mmlib-loading', 'true');
+      el.setAttribute('data-original-html', el.innerHTML);
+      el.setAttribute('data-original-disabled', el.disabled ? 'true' : 'false');
+    }
+
+    el.disabled = true;
+    el.setAttribute('aria-busy', 'true');
+
+    const displayText = loadingText ? `<span>${loadingText}</span>` : el.getAttribute('data-original-html') || '';
+    el.innerHTML = `${DEFAULT_SPINNER_SVG}${displayText}`;
+
+    return true;
+  } catch (err) {
+    console.error('setButtonLoading Error:', err);
+    return false;
+  }
+};
+
+/**
+ * Restores a button from its loading state back to its original HTML and state.
+ * 
+ * @param {HTMLElement|string} btn - Button element or ID string
+ * @returns {boolean} True if successfully restored
+ */
+export const clearButtonLoading = (btn) => {
+  try {
+    const el = resolveButton(btn);
+    if (!el) return false;
+
+    if (el.hasAttribute('data-mmlib-loading')) {
+      const originalHtml = el.getAttribute('data-original-html');
+      const wasDisabledBefore = el.getAttribute('data-original-disabled') === 'true';
+
+      if (originalHtml !== null) {
+        el.innerHTML = originalHtml;
+      }
+
+      el.disabled = wasDisabledBefore;
+      el.removeAttribute('aria-busy');
+      el.removeAttribute('data-mmlib-loading');
+      el.removeAttribute('data-original-html');
+      el.removeAttribute('data-original-disabled');
+      return true;
+    }
+
+    return false;
+  } catch (err) {
+    console.error('clearButtonLoading Error:', err);
+    return false;
+  }
+};
+
+/**
+ * Helper to wrap any async action with automatic button loading state and guaranteed cleanup.
+ * 
+ * @param {HTMLElement|string} btn - Button element or ID
+ * @param {() => Promise<any>} asyncAction - Async callback function to execute
+ * @param {string} [loadingText=''] - Optional loading text
+ * @returns {Promise<any>} Result of asyncAction
+ */
+export const withButtonSpinner = async (btn, asyncAction, loadingText = '') => {
+  setButtonLoading(btn, loadingText);
+  try {
+    return await asyncAction();
+  } finally {
+    clearButtonLoading(btn);
+  }
+};