@modernman00/shared-js-lib 1.2.30 → 1.2.32

package/AcctMgt/changePassword.js

@@ -17,9 +17,9 @@ import { matchInput } from '../general.js';
  * @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'] - ID of the password input field.
- * @param {string} [config.confirmId='confirm_password_id'] - ID of the confirm password input field.
- * @param {string} [config.showToggleId='showPassword_id'] - ID of the toggle button to show/hide password.
+ * @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.
@@ -44,9 +44,9 @@ import { matchInput } from '../general.js';
 export const setupPasswordChange = ({
   formId = 'changePassword',
   buttonId = 'button',
-  passwordId = 'password_id',
-  confirmId = 'confirm_password_id',
-  showToggleId = 'showPassword_id',
+  passwordId = 'password',
+  confirmId = 'confirm_password',
+  showToggleId = 'showPassword',
   errorId = 'confirm_password_error',
   helpId = 'password_help',
   route,

package/AcctMgt/code.js

@@ -17,7 +17,7 @@ import { bindEvent } from '../Utility.js';
  * @example
  * createCodeSubmitHandler({
  *   formId: 'codeForm',
- *   inputId: 'code_id',
+ *   inputId: 'code',
  *   buttonId: 'button',
  *   route: appTestRoutes.appTestCode,
  *   redirect: appTestRoutes.appTestCodeRedirect
@@ -25,7 +25,7 @@ import { bindEvent } from '../Utility.js';
  */
 export function createCodeSubmitHandler({
   formId,
-  inputId = 'code_id',
+  inputId = 'code',
   buttonId = 'button',
   route,
   redirect,

package/AcctMgt/forgot.js

@@ -23,7 +23,7 @@ import {bindEvent } from '../Utility.js';
  * @example
  * createEmailSubmitHandler({
  *   formId: 'forgotPassword',
- *   inputId: 'email_id',
+ *   inputId: 'email',
  *   buttonId: 'button',
  *   route: appTestRoutes.appTestForgot,
  *   redirect: appTestRoutes.appTestForgotRedirect
@@ -31,7 +31,7 @@ import {bindEvent } from '../Utility.js';
  */
 export function forgotSubmitHandler({
   formId,
-  inputId = 'email_id',
+  inputId = 'email',
   buttonId = 'button',
   route,
   redirect,

package/AcctMgt/login.js

@@ -27,20 +27,20 @@ import { bindEvent, showPassword } from '../Utility.js';
  * @example
  * createAdminLoginHandler({
  *   formId: 'managed',
- *   emailId: 'email_id',
- *   passwordId: 'password_id',
+ *   emailId: 'email',
+ *   passwordId: 'password',
  *   buttonId: 'button',
- *   showToggleId: 'showPassword_id',
+ *   showToggleId: 'showPassword',
  *   route: appTestRoutes.appTest,
  *   redirect: appTestRoutes.redirect
  * });
  */
 export function createAdminLoginHandler({
   formId,
-  emailId = 'email_id',
-  passwordId = 'password_id',
+  emailId = 'email',
+  passwordId = 'password',
   buttonId = 'button',
-  showToggleId = 'showPassword_id',
+  showToggleId = 'showPassword',
   route,
   redirect,
   theme = 'bootstrap',

package/FormHelper.js

@@ -86,9 +86,9 @@ export default class FormHelper {
      * 
      * @param {*} optionalFields ["spouseName", "spouseMobile", "fatherEmail"];
      * @param {*} typeMap Create a validation map if certain fields need special types (email, password, etc). const types = {
-      email_id: "email",
-      password_id: "password",
-      custom_text_id: "general"
+      email: "email",
+      password: "password",
+      custom_text: "general"
     };
      * formHelper.massValidate(optional, types);
      */
@@ -101,22 +101,20 @@ export default class FormHelper {
 
         for (let input of this.data) {
             const { name, value, id, type, placeholder } = input;
-          
            
 
             // Skip non-input elements
             if (
                 ['submit', 'button', 'g-recaptcha-response', 'cancel'].includes(name) ||
-                ['button', 'showPassword_id', 'token', 'g-recaptcha-response'].includes(id) ||
+                ['button', 'showPassword', 'token', 'g-recaptcha-response'].includes(id) ||
                 type === 'button' ||
-                id === 'checkbox_id'
+                id === 'checkbox'
             ) continue;
 
      
-             // remove _id from id if it exists to create a clean label
-            const cleanID = id.endsWith('_id') ? id.slice(0, -3) : id;
-            let label = cleanID.replace(/_/g, ' '); // For readable error text
-              const errorEl = this.id(`${cleanID}_error`);
+         
+         
+              const errorEl = this.id(`${id}_error`);
             let val = value.trim();
 
             // Handle optional fields
@@ -127,8 +125,8 @@ export default class FormHelper {
 
             // Required field check
             if (val === '' || val === 'select') {
-                if (errorEl) errorEl.innerHTML = `<li style="color:red;">${label} cannot be left empty.</li>`;
-                this.error.push(`${label.toUpperCase()} cannot be left empty.`);
+                if (errorEl) errorEl.innerHTML = `<li style="color:red;">${id} cannot be left empty.</li>`;
+                this.error.push(`${id.toUpperCase()} cannot be left empty.`);
                 continue;
             }
 
@@ -139,7 +137,7 @@ export default class FormHelper {
             );
 
             if (!this.matchRegex(val, validateType)) {
-                const msg = `There is a problem with your entry for ${label.toUpperCase()}`;
+                const msg = `There is a problem with your entry for ${id.toUpperCase()}`;
                 if (errorEl) errorEl.innerHTML = `<li style="color:red;">${msg}</li>`;
                 this.error.push(msg);
                 continue;
@@ -156,7 +154,7 @@ export default class FormHelper {
     emailVal() {
         const emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
         let msg = '<li style=color:\'red\';> Please enter a valid email</li>';
-        const email = this.id('email_id').value;
+        const email = this.id('email').value;
         if (email.match(emailExp) === null) {
             this.id('email_error').innerHTML = msg;
             this.id('email_error').style.color = 'red';
@@ -189,11 +187,8 @@ export default class FormHelper {
                 return;
             }
 
-            // remove _id from id if it exists
-            const cleanID = id.endsWith('_id') ? id.slice(0, -3) : id;
-
             // Add event listeners to clear errors
-            const clearErrorHandler = () => clearErrorForElement(cleanID || name);
+            const clearErrorHandler = () => clearErrorForElement(id || name);
             if (value !== 'select') element.addEventListener('keyup', clearErrorHandler);
             element.addEventListener('change', clearErrorHandler);
         });
@@ -241,8 +236,8 @@ export default class FormHelper {
      * @param {string} second - the id of the second input
      */
     matchInput(first, second) {
-        const firstInput = this.id(first + '_id');
-        const secondInput = this.id(second + '_id');
+        const firstInput = this.id(first + '');
+        const secondInput = this.id(second + '');
         const error = this.id(`${second}_error`);
 
         const checkMatch = () => error.innerHTML = (firstInput.value !== secondInput.value) ? 'Your passwords do not match' : '';

package/Http.js

@@ -44,7 +44,7 @@ export const postFormData = async (url, formId, redirect = null, css = null) =>
     let formEntries = new FormData(form);
 
     formEntries.delete('submit');
-    formEntries.delete('checkbox_id');
+    formEntries.delete('checkbox');
 
     const options = {
         baseURL: '/', // Adjust to your API base URL

package/Utility.js

@@ -8,13 +8,13 @@ import {autocomplete} from './theAutoComplete.js';
  * @throws {Error} if any element with id from the input array is not found or is empty
  */
 export const realTimeCheckLen = (input, maxi) => {
-    const data = input.map(el => id(`${el}_id`));
+    const data = input.map(el => id(`${el}`));
     const errors = input.map(el => id(`${el}_error`));
     const helps = input.map(el => id(`${el}_help`));
 
     maxi.forEach((max, i) => {
         if (!data[i] || !errors[i] || !helps[i]) {
-            throw new Error(`Element with ID '${input[i]}_id' not found or is empty`);
+            throw new Error(`Element with ID '${input[i]}' not found or is empty`);
         }
 
         data[i].maxLength = parseInt(max, 10) + 1;

package/__tests__/handlers.test.js

@@ -40,7 +40,7 @@ describe('AcctMgt Handlers', () => {
 
     createCodeSubmitHandler({
       formId: 'codeForm',
-      inputId: 'code_id',
+      inputId: 'code',
       buttonId: 'button',
       route: '/api/code',
       redirect: '/success',
@@ -55,19 +55,19 @@ describe('AcctMgt Handlers', () => {
       '/api/code',
       '/success',
       'bulma',
-      { maxLength: { id: ['code_id'], max: [40] } }
+      { maxLength: { id: ['code'], max: [40] } }
     );
   });
 
   test('📧 forgotSubmitHandler submits email form correctly', () => {
     injectDOM([
       { id: 'button' },
-      { tag: 'input', id: 'email_id', value: 'user@example.com' }
+      { tag: 'input', id: 'email', value: 'user@example.com' }
     ]);
 
     forgotSubmitHandler({
       formId: 'forgotPassword',
-      inputId: 'email_id',
+      inputId: 'email',
       buttonId: 'button',
       route: '/api/forgot',
       redirect: '/reset',
@@ -82,23 +82,23 @@ describe('AcctMgt Handlers', () => {
       '/api/forgot',
       '/reset',
       'bulma',
-      { maxLength: { id: ['email_id'], max: [50] } }
+      { maxLength: { id: ['email'], max: [50] } }
     );
   });
 
   test('🔐 createAdminLoginHandler sets attributes and submits login', () => {
     injectDOM([
       { id: 'button' },
-      { id: 'showPassword_id' },
-      { tag: 'input', id: 'password_id' }
+      { id: 'showPassword' },
+      { tag: 'input', id: 'password' }
     ]);
 
     createAdminLoginHandler({
       formId: 'managed',
-      emailId: 'email_id',
-      passwordId: 'password_id',
+      emailId: 'email',
+      passwordId: 'password',
       buttonId: 'button',
-      showToggleId: 'showPassword_id',
+      showToggleId: 'showPassword',
       route: '/api/login',
       redirect: '/admin',
       theme: 'bootstrap',
@@ -106,37 +106,37 @@ describe('AcctMgt Handlers', () => {
     });
 
     document.getElementById('button').dispatchEvent(new Event('click'));
-    document.getElementById('showPassword_id').dispatchEvent(new Event('click'));
+    document.getElementById('showPassword').dispatchEvent(new Event('click'));
 
     expect(loginSubmission).toHaveBeenCalledWith(
       'managed',
       '/api/login',
       '/admin',
       'bootstrap',
-      { maxLength: { id: ['password_id', 'email_id'], max: [30, 50] } }
+      { maxLength: { id: ['password', 'email'], max: [30, 50] } }
     );
 
-    expect(document.getElementById('password_id').getAttribute('autocomplete')).toBe('current-password');
-    expect(showPassword).toHaveBeenCalledWith('password_id');
+    expect(document.getElementById('password').getAttribute('autocomplete')).toBe('current-password');
+    expect(showPassword).toHaveBeenCalledWith('password');
   });
 
   test('🔁 setupPasswordChange submits when passwords match', () => {
     injectDOM([
       { id: 'button' },
-      { id: 'showPassword_id' },
-      { tag: 'input', id: 'password_id', value: 'Secure123!' },
-      { tag: 'input', id: 'confirm_password_id', value: 'Secure123!' },
+      { id: 'showPassword' },
+      { tag: 'input', id: 'password', value: 'Secure123!' },
+      { tag: 'input', id: 'confirm_password', value: 'Secure123!' },
       { tag: 'div', id: 'confirm_password_error' },
       { tag: 'div', id: 'password_help' }
     ]);
 
     setupPasswordChange({
       buttonId: 'button',
-      passwordId: 'password_id',
-      confirmId: 'confirm_password_id',
+      passwordId: 'password',
+      confirmId: 'confirm_password',
       errorId: 'confirm_password_error',
       helpId: 'password_help',
-      showToggleId: 'showPassword_id',
+      showToggleId: 'showPassword',
       route: '/api/change-password',
       redirect: '/dashboard',
       theme: 'bulma',
@@ -150,7 +150,7 @@ describe('AcctMgt Handlers', () => {
       '/api/change-password',
       '/dashboard',
       'bulma',
-      { maxLength: { id: ['password_id', 'confirm_password_id'], max: [50, 50] } }
+      { maxLength: { id: ['password', 'confirm_password'], max: [50, 50] } }
     );
   });
 });

package/config/version.php

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

package/index.js

@@ -3,7 +3,7 @@ export * from './UtilityHtml.js';
 export * from './Utility.js';
 export * from './Loader.js';
 export * from './Cookie.js';
-export * from './FormHelper.js';
+export { default as FormHelper } from './FormHelper';
 export * from './Loader.js';
 export * from './ShowResponse.js';
 export * from './DateTime.js';

package/package.json

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