@modernman00/shared-js-lib 1.2.66 → 1.2.68

package/AcctMgt/changePassword.js

@@ -1,47 +1,8 @@
-import { loginSubmission } from './processAll.js';
+// setupPasswordChange.js
 import { id } from '../UtilityHtml.js';
 import { bindEvent, showPassword } from '../Utility.js';
 import { matchInput } from '../general.js';
-import { showError } from '../ShowResponse.js';
-
-
-/**
- * Initializes password change functionality with accessibility, validation, and submission logic.
- *
- * This function sets up:
- * - ARIA attributes for accessibility
- * - Input matching between password and confirmation fields
- * - Max length enforcement
- * - Event bindings for submit and password visibility toggle
- * - Form submission via `loginSubmission`
- *
- * @function setupPasswordChange
- * @param {Object} [config] - Configuration object for customizing behavior.
- * @param {string} [config.buttonId='button'] - ID of the submit button.
- * @param {string} [config.passwordId='password'] - ID of the password input field.
- * @param {string} [config.confirmId='confirm_password'] - ID of the confirm password input field.
- * @param {string} [config.showToggleId='showPassword'] - ID of the toggle button to show/hide password.
- * @param {string} [config.errorId='confirm_password_error'] - ID of the element to display mismatch errors.
- * @param {string} [config.helpId='password_help'] - ID of the helper text element for password guidance.
- * @param {string} [config.route] - API endpoint for password change submission.
- * @param {string} [config.redirect] - URL to redirect to after successful password change.
- * @param {string} [config.theme='bulma'] - UI theme identifier passed to `loginSubmission`.
- * @param {number} [config.maxLength=50] - Maximum allowed length for password fields.
- * @param {Object} [config.recaptchaV3=null] - reCAPTCHA v3 configuration ({ siteKey: 'xxx', action: 'CHANGE_PASSWORD' }).
- *
- * @example
- * setupPasswordChange(); // Uses default IDs and routes
- *
- * @example
- * setupPasswordChange({
- *   buttonId: 'submitBtn',
- *   passwordId: 'new_password',
- *   confirmId: 'confirm_new_password',
- *   route: '/api/change-password',
- *   redirect: '/dashboard'
- * });
- */
-
+import { createFormHandler } from './createFormHandler.js';
 
 export const setupPasswordChange = ({
   formId = 'changePassword',
@@ -53,57 +14,43 @@ export const setupPasswordChange = ({
   helpId = 'password_help',
   route,
   redirect,
+  lengthLimitArray = null,   // { id: [...], max: [...] } or null
+  optionalFields = [],
   theme = 'bulma',
-  maxLength = 50,
-  recaptchaV3 = null // { siteKey: 'xxx', action: 'CHANGE_PASSWORD' }
+  recaptchaAction = 'CHANGE_PASSWORD'
 } = {}) => {
-  // Accessibility & input attributes
   const passwordInput = id(passwordId);
   const showToggle = id(showToggleId);
   const helperText = id(helpId);
 
-  passwordInput.setAttribute('autocomplete', 'current-password');
-  showToggle.setAttribute('aria-label', 'Warning: this will display your password on the screen.');
-  helperText.setAttribute('aria-live', 'polite');
-  helperText.textContent =
-    'Password must be at least 8 characters long, contain at least one uppercase letter, one lowercase letter, one number, and one special character.';
-
-    
-
-  // Length limit object
-  const lengthLimit = {
-    maxLength: {
-      id: [passwordId, confirmId],
-      max: [maxLength, maxLength]
-    }
-  };
-
-  // Submission handler
-  const handleSubmit = async (e) => {
-    e.preventDefault();
+  if (passwordInput) {
+    passwordInput.setAttribute('autocomplete', 'current-password');
+  }
 
-    let recaptchaToken = null;
-    // Only run v3 if configured AND grecaptcha is available 
-    if (recaptchaV3?.siteKey && window.grecaptcha && window.grecaptcha.enterprise) {
-      try {
-        recaptchaToken = await grecaptcha.enterprise.execute(
-          recaptchaV3.siteKey,
-          { action: recaptchaV3.action || 'CHANGE_PASSWORD' });
-      } catch (err) {
-        showError(err);
-      }
-    }
+  if (showToggle) {
+    showToggle.setAttribute(
+      'aria-label',
+      'Warning: this will display your password on the screen.'
+    );
+  }
 
-    loginSubmission(formId, route, redirect, theme, lengthLimit, [], recaptchaToken);
+  if (helperText) {
+    helperText.setAttribute('aria-live', 'polite');
+    helperText.textContent =
+      'Password must be at least 8 characters long, contain at least one uppercase letter, one lowercase letter, one number, and one special character.';
+  }
 
-    
-  };
-
-  // Bind events
-  bindEvent({ id: buttonId, handler: handleSubmit });
   bindEvent({ id: showToggleId, handler: () => showPassword(passwordId) });
   matchInput(passwordId, confirmId, errorId);
-};
-
-
 
+  createFormHandler({
+    formId,
+    buttonId,
+    route,
+    redirect,
+    theme,
+    lengthLimit: lengthLimitArray,
+    optionalFields,
+    recaptchaAction
+  });
+};

package/AcctMgt/code.js

@@ -1,30 +1,6 @@
-import { loginSubmission } from './processAll.js';
-import { bindEvent } from '../Utility.js';
-import { showError } from '../ShowResponse.js';
+// createCodeSubmitHandler.js
+import { createFormHandler } from './createFormHandler.js';
 
-/**
- * Creates a reusable form submission handler for code-based forms.
- *
- * @function createCodeSubmitHandler
- * @param {Object} options - Configuration for the handler.
- * @param {string} options.formId - ID of the form element.
- * @param {string} options.inputId - ID of the input field to validate.
- * @param {string} options.buttonId - ID of the submit button.
- * @param {string} options.route - API endpoint for submission.
- * @param {string} options.redirect - URL to redirect to after success.
- * @param {string} [options.theme='bulma'] - UI theme identifier.
- * @param {number} [options.maxLength=50] - Max input length.
- * @param {Object} [options.recaptchaV3=null] - reCAPTCHA v3 configuration ({ siteKey: 'OUR_ENTERPRISE_SITE_KEYx', action: 'TOKEN' }).
- *
- * @example
- * createCodeSubmitHandler({
- *   formId: 'codeForm',
- *   inputId: 'code',
- *   buttonId: 'button',
- *   route: appTestRoutes.appTestCode,
- *   redirect: appTestRoutes.appTestCodeRedirect
- * });
- */
 export function createCodeSubmitHandler({
   formId,
   inputId = 'code',
@@ -32,34 +8,17 @@ export function createCodeSubmitHandler({
   route,
   redirect,
   theme = 'bulma',
-  maxLength = 50,
-  recaptchaV3 = null // { siteKey: 'xxx', action: 'LOGIN' }
+  lengthLimitArray = null,   // { id: [...], max: [...] } or null
+  recaptchaAction = 'SUBMIT'
 }) {
-  const handler = async (e) => {
-    e.preventDefault();
-
-    let recaptchaToken = null;
-    // Only run v3 if configured AND grecaptcha is available 
-    if (recaptchaV3?.siteKey && window.grecaptcha && window.grecaptcha.enterprise) {
-      try {
-        recaptchaToken = await grecaptcha.enterprise.execute(
-          recaptchaV3.siteKey,
-          { action: recaptchaV3.action || 'LOGIN' });
-      } catch (err) {
-        showError(err);
-      }
-    }
-
-    const lengthLimit = {
-      maxLength: {
-        id: [inputId],
-        max: [maxLength]
-      }
-    };
-
-    loginSubmission(formId, route, redirect, theme, lengthLimit);
-  };
-
-  bindEvent({ id: buttonId, handler });
+  createFormHandler({
+    formId,
+    buttonId,
+    route,
+    redirect,
+    theme,
+    lengthLimit: lengthLimitArray,
+    optionalFields: [inputId],
+    recaptchaAction
+  });
 }
-

package/AcctMgt/createFormHandler.js

@@ -0,0 +1,35 @@
+// createFormHandler.js
+import { bindEvent } from '../Utility.js';
+import { recaptchaToken } from './recaptchaToken.js';
+import { loginSubmission } from './processAll.js';
+
+export function createFormHandler({
+  formId,
+  buttonId = 'button',
+  route,
+  redirect,
+  theme = 'bulma',
+  lengthLimit = null,      // { id: [...], max: [...] } or null
+  optionalFields = [],     // ['remember_me', 'captcha'] etc.
+  recaptchaAction = 'SUBMIT'
+}) {
+  const handler = async (e) => {
+    e.preventDefault();
+
+    const token = await recaptchaToken(recaptchaAction);
+
+    await loginSubmission({
+      formId,
+      loginURL: route,
+      redirect,
+      css: theme,
+      lengthLimit,
+      optionalFields,
+      recaptchaToken: token
+        ? { token, action: recaptchaAction }
+        : null
+    });
+  };
+  // 🔹 This is the click binding you’re referring to
+  bindEvent({ id: buttonId, handler });
+}

package/AcctMgt/forgot.js

@@ -1,36 +1,6 @@
-import { loginSubmission } from './processAll.js';
-import { bindEvent } from '../Utility.js';
-import { showError } from '../ShowResponse.js';
+// forgotSubmitHandler.js
+import { createFormHandler } from './createFormHandler.js';
 
-
-/**
- * Creates a reusable form submission handler for email-based forms.
- *
- * This function:
- * - Prevents default form submission
- * - Applies max length validation to the email input
- * - Submits the form using `loginSubmission` with route and redirect logic
- *
- * @function createEmailSubmitHandler
- * @param {Object} options - Configuration for the handler.
- * @param {string} options.formId - ID of the form element.
- * @param {string} options.inputId - ID of the email input field.
- * @param {string} options.buttonId - ID of the submit button.
- * @param {string} options.route - API endpoint for submission.
- * @param {string} options.redirect - URL to redirect to after success.
- * @param {string} [options.theme='bulma'] - UI theme identifier.
- * @param {number} [options.maxLength=50] - Max input length.
- * @param {Object} [options.recaptchaV3=null] - reCAPTCHA v3 configuration ({ siteKey: 'OUR_ENTERPRISE_SITE_KEYx', action: 'FORGOT' }).
- *
- * @example
- * createEmailSubmitHandler({
- *   formId: 'forgotPassword',
- *   inputId: 'email',
- *   buttonId: 'button',
- *   route: appTestRoutes.appTestForgot,
- *   redirect: appTestRoutes.appTestForgotRedirect
- * });
- */
 export function forgotSubmitHandler({
   formId,
   inputId = 'email',
@@ -38,35 +8,19 @@ export function forgotSubmitHandler({
   route,
   redirect,
   theme = 'bulma',
-  maxLength = 50,
-  recaptchaV3 = null // { siteKey: 'xxx', action: 'LOGIN' }
+  lengthLimitArray = null,   // { id: [...], max: [...] } or null
+  recaptchaAction = 'FORGOT'
 }) {
-  const handler = async (e) => {
-    e.preventDefault();
-
-    let recaptchaToken = null;
-    // Only run v3 if configured AND grecaptcha is available 
-    if (recaptchaV3?.siteKey && window.grecaptcha && window.grecaptcha.enterprise) {
-      try {
-        recaptchaToken = await grecaptcha.enterprise.execute(
-          recaptchaV3.siteKey,
-          { action: recaptchaV3.action || 'LOGIN' });
-      } catch (err) {
-        showError(err);
-      }
-    }
-
-    const lengthLimit = {
-      maxLength: {
-        id: [inputId],
-        max: [maxLength]
-      }
-    };
-
-    loginSubmission(formId, route, redirect, theme, lengthLimit);
-  };
-
-  bindEvent({ id: buttonId, handler });
+  createFormHandler({
+    formId,
+    buttonId,
+    route,
+    redirect,
+    theme,
+    lengthLimit: lengthLimitArray,
+    optionalFields: [inputId],
+    recaptchaAction
+  });
 }
 
 

package/AcctMgt/login.js

@@ -1,42 +1,8 @@
-import { loginSubmission } from './processAll.js';
-import { id} from '../UtilityHtml.js';
+// createAdminLoginHandler.js
+import { id } from '../UtilityHtml.js';
 import { bindEvent, showPassword } from '../Utility.js';
-import { showError } from '../ShowResponse.js';
+import { createFormHandler } from './createFormHandler.js';
 
-
-/**
- * Creates a reusable admin login handler with password visibility and accessibility support.
- *
- * This function:
- * - Binds form submission to `loginSubmission`
- * - Applies max length validation to email and password fields
- * - Enables password visibility toggle
- * - Sets accessibility attributes for screen readers and autocomplete
- *
- * @function createAdminLoginHandler
- * @param {Object} options - Configuration for the login handler.
- * @param {string} options.formId - ID of the login form.
- * @param {string} options.emailId - ID of the email input field.
- * @param {string} options.passwordId - ID of the password input field.
- * @param {string} options.buttonId - ID of the submit button.
- * @param {string} options.showToggleId - ID of the password visibility toggle button.
- * @param {string} options.route - API endpoint for login submission.
- * @param {string} options.redirect - URL to redirect to after successful login.
- * @param {string} [options.theme='bootstrap'] - UI theme identifier.
- * @param {number[]} [options.maxLength=[30, 50]] - Max lengths for password and email respectively.
- * @param {Object} [options.recaptchaV3=null] - reCAPTCHA v3 configuration ({ siteKey: 'OUR_ENTERPRISE_SITE_KEY', action: 'LOGIN' }).
- *
- * @example
- * createAdminLoginHandler({
- *   formId: 'managed',
- *   emailId: 'email',
- *   passwordId: 'password',
- *   buttonId: 'button',
- *   showToggleId: 'showPassword',
- *   route: appTestRoutes.appTest,
- *   redirect: appTestRoutes.redirect
- * });
- */
 export function createAdminLoginHandler({
   formId,
   emailId = 'email',
@@ -46,43 +12,37 @@ export function createAdminLoginHandler({
   route,
   redirect,
   theme = 'bootstrap',
-  maxLength = [30, 50],
-  recaptchaV3 = null // { siteKey: 'xxx', action: 'LOGIN' }
+  recaptchaAction = 'LOGIN',
+  lengthLimitArray = null,
+  optionalFields = []
 }) {
-  const handler = async (e) => {
-    e.preventDefault();
-
-    let recaptchaToken = null;
-    // Only run v3 if configured AND grecaptcha is available 
-    if (recaptchaV3?.siteKey && window.grecaptcha && window.grecaptcha.enterprise) { 
-      try { 
-        recaptchaToken = await grecaptcha.enterprise.execute( 
-          recaptchaV3.siteKey, 
-          { action: recaptchaV3.action || 'LOGIN' } ); 
-          } catch (err) { 
-            showError(err); 
-          } 
-    }
+  // Accessibility
+  const passwordInput = id(passwordId);
+  const toggleLabel = id(showToggleId);
 
-    const lengthLimit = {
-      maxLength: {
-        id: [passwordId, emailId],
-        max: maxLength
-      }
-    };
+  if (passwordInput) {
+    passwordInput.setAttribute('autocomplete', 'current-password');
+  }
 
-    loginSubmission(formId, route, redirect, theme, lengthLimit, [], recaptchaToken);
-  };
+  if (toggleLabel) {
+    toggleLabel.setAttribute(
+      'aria-label',
+      'Warning: this will display your password on the screen.'
+    );
+  }
 
-  bindEvent({ id: buttonId, handler });
+  // Password visibility toggle
   bindEvent({ id: showToggleId, handler: () => showPassword(passwordId) });
 
-  const passwordInput = id(passwordId);
-  const toggleLabel = id(showToggleId);
-
-  passwordInput.setAttribute('autocomplete', 'current-password');
-  toggleLabel.setAttribute(
-    'aria-label',
-    'Warning: this will display your password on the screen.'
-  );
+  // Core handler
+  createFormHandler({
+    formId,
+    buttonId,
+    route,
+    redirect,
+    theme,
+    lengthLimit: lengthLimitArray,
+    optionalFields: [emailId, passwordId, ...optionalFields],
+    recaptchaAction
+  });
 }

package/AcctMgt/processAll.js

@@ -1,3 +1,4 @@
+// processAll.js
 'use strict';
 import { postFormData } from '../Http.js';
 import { showLoader, clearLoader } from '../Loader.js';
@@ -5,59 +6,49 @@ import { id } from '../UtilityHtml.js';
 import { showError } from '../ShowResponse.js';
 import FormHelper from '../FormHelper.js';
 
-
-// block the setLoader div
-
 /**
- * Handles the submission of the login form and redirects the user.
- * @param {string} formId - The ID of the form to submit.
- * @param {string} loginURL - The URL to make the POST request to.
- * @param {string} redirect - The URL to redirect the user to after the submission is complete.
- * @param {string} [css=null] - The CSS class to add to the notification element if the submission is successful.
- * @returns {void} yes
- * @throws {Error} - If there is an error with the submission
- * @param {Object} [options.recaptchaV3=null] - reCAPTCHA v3 configuration ({ siteKey: 'OUR_ENTERPRISE_SITE_KEY', action: 'LOGIN' }).
+ * Handles the submission of a form and redirects the user.
  */
-export const loginSubmission = async ({formId, loginURL, redirect, css = null, lengthLimit = null, optionalFields = [], recaptchaToken = null
+export const loginSubmission = async ({
+  formId,
+  loginURL,
+  redirect,
+  css = null,
+  lengthLimit = null,      // { id: [...], max: [...] } or null
+  optionalFields = [],
+  recaptchaToken = null    // { token, action } or null
 }) => {
-
   try {
-
     const formInput = id(formId);
 
     if (!formInput) {
       throw new Error(`Form ${formId} not found`);
-      return;
     }
 
     const formInputArr = Array.from(formInput.elements);
-
     const formData = new FormHelper(formInputArr);
 
     formData.clearError();
 
     if (lengthLimit) {
-      formData.realTimeCheckLen(lengthLimit.maxLength.id, lengthLimit.maxLength.max);
+      formData.realTimeCheckLen(lengthLimit.id, lengthLimit.max);
     }
 
     formData.massValidate(optionalFields, { email: 'email', password: 'password' });
 
-    if (formData.result === 1) {
-
-      const notificationId = id(`${formId}_notification`) || formId;
-
-      notificationId.scrollIntoView({ behavior: 'smooth' });
-
-      showLoader();
+    if (formData.result !== 1) {
+      alert('The form cannot be submitted. Please check the errors');
+      return;
+    }
 
-      localStorage.setItem('redirect', redirect);
+    const notificationId = id(`${formId}_notification`) || formId;
+    notificationId.scrollIntoView({ behavior: 'smooth' });
 
-      await postFormData(loginURL, formId, redirect, css, recaptchaToken);
+    showLoader();
+    localStorage.setItem('redirect', redirect);
 
-    } else {
+    await postFormData(loginURL, formId, redirect, css, recaptchaToken);
 
-      alert('The form cannot be submitted. Please check the errors');
-    }
   } catch (err) {
     showError(err);
   } finally {

package/AcctMgt/recaptchaToken.js

@@ -0,0 +1,19 @@
+// recaptchaToken.js
+import { showError } from '../ShowResponse.js';
+
+export const recaptchaToken = async (action = 'SUBMIT') => {
+  let token = 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);
+    }
+  }
+
+  return token;
+};

package/AcctMgt/registerHandler.js

@@ -0,0 +1,24 @@
+// registerHandler.js
+import { createFormHandler } from './createFormHandler.js';
+
+export function registerHandler({
+  formId,
+  buttonId = 'button',
+  route,
+  redirect,
+  theme = 'bootstrap',
+  recaptchaAction = 'SUBMIT',
+  lengthLimitArray = null,
+  optionalFields = []
+}) {
+  createFormHandler({
+    formId,
+    buttonId,
+    route,
+    redirect,
+    theme,
+    lengthLimit: lengthLimitArray,
+    optionalFields,
+    recaptchaAction
+  });
+}

package/AcctMgt/update.js

@@ -1,49 +1,22 @@
+// update.js
 import { id } from '../UtilityHtml.js';
 import { bindEvent } from '../Utility.js';
 import { msgException, showError } from '../ShowResponse.js';
 import axios from 'axios';
 import { redirectAfterDelay, parseErrorResponse } from '../general.js';
-/**
- * Creates a reusable form submission handler for update forms.
- *
- * @function update
- * @param {Object} options - Configuration for the handler.
- * @param {string} options.formId - ID of the form element.
-   * @param {string} options.buttonId - ID of the submit button.
- * @param {string} options.route - API endpoint for submission.
- * @param {string} options.redirect - URL to redirect to after success.
- * @param {Object} [options.recaptchaV3=null] - reCAPTCHA v3 configuration ({ siteKey: 'OUR_ENTERPRISE_SITE_KEY', action: 'LOGIN' }).
- * 
- *
- * @example
- * update({
- *   formId: 'updateForm',
- *   buttonId: 'updateButton',
- *   route: appTestRoutes.appTestUpdate,
- *   redirect: appTestRoutes.appTestUpdateRedirect
- * });
- */
+import { recaptchaToken } from './recaptchaToken.js';
+
 export function update({
   formId,
   buttonId,
   route,
   redirect,
-  recaptchaV3 = null // { siteKey: 'xxx', action: 'UPDATE_DATA' }
+  recaptchaAction = 'SUBMIT'
 }) {
   const handler = async (e) => {
     e.preventDefault();
 
-    let recaptchaToken = null;
-    // Only run v3 if configured AND grecaptcha is available 
-    if (recaptchaV3?.siteKey && window.grecaptcha && window.grecaptcha.enterprise) {
-      try {
-        recaptchaToken = await grecaptcha.enterprise.execute(
-          recaptchaV3.siteKey,
-          { action: recaptchaV3.action || 'LOGIN' });
-      } catch (err) {
-        showError(err);
-      }
-    }
+    const token = await recaptchaToken(recaptchaAction);
 
     const form = id(formId);
     if (!form) {
@@ -54,9 +27,8 @@ export function update({
     const formData = new FormData();
     const inputs = form.querySelectorAll('[name]');
 
-     // if recaptcha token is provided, append it
-    if (recaptchaToken) {
-        formData.append('recaptchaTokenV3', recaptchaToken);
+    if (token) {
+      formData.append('recaptchaTokenV3', token);
     }
 
     inputs.forEach(input => {
@@ -64,7 +36,6 @@ export function update({
       const original = input.getAttribute('data-original');
       const current = input.type === 'file' ? input.files[0] : input.value;
 
-      // Only include changed fields
       if (input.type === 'file') {
         if (current) formData.append(name, current);
       } else if (current !== original) {
@@ -73,32 +44,25 @@ export function update({
     });
 
     try {
-
       const response = await axios.post(route, formData);
-
       const message = response.data.message;
 
       const notificationId = id(`${formId}_notification`) || formId;
-      notificationId.style.display = 'block'
-
-      notificationId.scrollIntoView({ behavior: 'smooth' });
-
+      notificationId.style.display = 'block';
       notificationId.innerHTML = message;
-
+      notificationId.scrollIntoView({ behavior: 'smooth' });
 
       if (redirect) {
         redirectAfterDelay(redirect, 2000);
       }
 
     } catch (error) {
-      console.log(error);
-      const ErrorMsg = parseErrorResponse(error);
-      const notificationId = id(`${formId}_notification`)
-      notificationId.style.display = 'block'
-      notificationId.innerHTML = `<li style="color:white; background-color:red">${ErrorMsg}</li>`;
+      const errorMsg = parseErrorResponse(error);
+      const notificationId = id(`${formId}_notification`);
+      notificationId.style.display = 'block';
+      notificationId.innerHTML = `<li style="color:white; background-color:red">${errorMsg}</li>`;
     }
   };
 
   bindEvent({ id: buttonId, handler });
 }
-

package/config/version.php

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

package/package.json

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