@modernman00/shared-js-lib 1.2.13 → 1.2.23

package/.github/workflows/publish.yml

@@ -0,0 +1,53 @@
+name: Release shared-js-lib
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org/'
+          scope: '@modernman00'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Bump version and generate changelog
+        run: |
+          npm version patch -m "chore(release): %s"
+          npx auto-changelog -p
+        env:
+          GIT_AUTHOR_NAME: github-actions
+          GIT_AUTHOR_EMAIL: actions@github.com
+          GIT_COMMITTER_NAME: github-actions
+          GIT_COMMITTER_EMAIL: actions@github.com
+
+      - name: Push version bump and changelog
+        run: |
+          git push origin main --follow-tags
+
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v1
+        with:
+          tag_name: ${{ github.ref_name }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/release.yml

@@ -0,0 +1,29 @@
+name: Semantic Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org/'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

package/.github/workflows/test.yml

@@ -0,0 +1,32 @@
+name: Run Tests and Coverage
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests with coverage
+        run: npm test -- --coverage
+
+      - name: Upload coverage report
+        uses: actions/upload-artifact@v3
+        with:
+          name: coverage-report
+          path: coverage/

package/AcctMgt/changePassword.js

@@ -0,0 +1,90 @@
+import { loginSubmission } from './processAll.js';
+import { id } from '../UtilityHtml.js';
+import { bindEvent } from '../Utility.js';
+import { showPassword } from './loginUtility.js';
+import { matchInput } from '../general.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'] - 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.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.
+ *
+ * @example
+ * setupPasswordChange(); // Uses default IDs and routes
+ *
+ * @example
+ * setupPasswordChange({
+ *   buttonId: 'submitBtn',
+ *   passwordId: 'new_password',
+ *   confirmId: 'confirm_new_password',
+ *   route: '/api/change-password',
+ *   redirect: '/dashboard'
+ * });
+ */
+
+
+export const setupPasswordChange = ({
+  buttonId = 'button',
+  passwordId = 'password_id',
+  confirmId = 'confirm_password_id',
+  showToggleId = 'showPassword_id',
+  errorId = 'confirm_password_error',
+  helpId = 'password_help',
+  route = "",
+  redirect = "",
+  theme = 'bulma',
+  maxLength = 50
+} = {}) => {
+  // Accessibility & input attributes
+  const passwordInput = id(passwordId);
+  const confirmInput = id(confirmId);
+  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 = (e) => {
+    e.preventDefault();
+    loginSubmission('changePassword', route, redirect, theme, lengthLimit);
+  };
+
+  // Bind events
+  bindEvent({ id: buttonId, handler: handleSubmit });
+  bindEvent({ id: showToggleId, handler: () => showPassword(passwordId) });
+  matchInput(passwordId, confirmId, errorId);
+};
+
+
+

package/AcctMgt/code.js

@@ -0,0 +1,50 @@
+import { loginSubmission } from './processAll.js';
+import { bindEvent } from '../Utility.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.
+ *
+ * @example
+ * createCodeSubmitHandler({
+ *   formId: 'codeForm',
+ *   inputId: 'code_id',
+ *   buttonId: 'button',
+ *   route: appTestRoutes.appTestCode,
+ *   redirect: appTestRoutes.appTestCodeRedirect
+ * });
+ */
+export function createCodeSubmitHandler({
+  formId,
+  inputId,
+  buttonId,
+  route,
+  redirect,
+  theme = 'bulma',
+  maxLength = 50
+}) {
+  const handler = (e) => {
+    e.preventDefault();
+
+    const lengthLimit = {
+      maxLength: {
+        id: [inputId],
+        max: [maxLength]
+      }
+    };
+
+    loginSubmission(formId, route, redirect, theme, lengthLimit);
+  };
+
+  bindEvent({ id: buttonId, handler });
+}
+

package/AcctMgt/forgot.js

@@ -0,0 +1,57 @@
+import { loginSubmission} from './processAll.js';
+import {bindEvent } from '../Utility.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.
+ *
+ * @example
+ * createEmailSubmitHandler({
+ *   formId: 'forgotPassword',
+ *   inputId: 'email_id',
+ *   buttonId: 'button',
+ *   route: appTestRoutes.appTestForgot,
+ *   redirect: appTestRoutes.appTestForgotRedirect
+ * });
+ */
+export function forgotSubmitHandler({
+  formId,
+  inputId,
+  buttonId,
+  route,
+  redirect,
+  theme = 'bulma',
+  maxLength = 50
+}) {
+  const handler = (e) => {
+    e.preventDefault();
+
+    const lengthLimit = {
+      maxLength: {
+        id: [inputId],
+        max: [maxLength]
+      }
+    };
+
+    loginSubmission(formId, route, redirect, theme, lengthLimit);
+  };
+
+  bindEvent({ id: buttonId, handler });
+}
+
+

package/AcctMgt/login.js

@@ -0,0 +1,73 @@
+import { loginSubmission } from './processAll.js';
+import { id} from '../UtilityHtml.js';
+import { bindEvent } from '../Utility.js';
+import { showPassword } from './loginUtility.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.
+ *
+ * @example
+ * createAdminLoginHandler({
+ *   formId: 'managed',
+ *   emailId: 'email_id',
+ *   passwordId: 'password_id',
+ *   buttonId: 'button',
+ *   showToggleId: 'showPassword_id',
+ *   route: appTestRoutes.appTest,
+ *   redirect: appTestRoutes.redirect
+ * });
+ */
+export function createAdminLoginHandler({
+  formId,
+  emailId,
+  passwordId,
+  buttonId,
+  showToggleId,
+  route,
+  redirect,
+  theme = 'bootstrap',
+  maxLength = [30, 50]
+}) {
+  const handler = (e) => {
+    e.preventDefault();
+
+    const lengthLimit = {
+      maxLength: {
+        id: [passwordId, emailId],
+        max: maxLength
+      }
+    };
+
+    loginSubmission(formId, route, redirect, theme, lengthLimit);
+  };
+
+  bindEvent({ id: buttonId, handler });
+  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.'
+  );
+}

package/AcctMgt/loginUtility.js

@@ -0,0 +1,11 @@
+import { id } from '../UtilityHtml.js';
+
+export const showPassword = (inputId) => {
+    const y = id(inputId);
+    if (y.type === 'password') {
+
+        y.type = 'text';
+    } else {
+        y.type = 'password';
+    }
+};

package/{Login.js → AcctMgt/processAll.js}

@@ -1,8 +1,9 @@
 'use strict';
-import { convertFormData } from './FormProcessing.js';
-import { postFormData } from './Http.js';
-import { showLoader, clearLoader } from './Loader.js';
-import { showError } from './ShowResponse.js';
+import { postFormData } from '../Http.js';
+import { showLoader, clearLoader } from '../Loader.js';
+import { showError, qSel } from '../UtilityHtml.js';
+import FormHelper from '../FormHelper.js';
+
 
 // block the setLoader div
 
@@ -15,28 +16,40 @@ import { showError } from './ShowResponse.js';
  * @returns {void}
  * @throws {Error} - If there is an error with the submission
  */
-export const loginSubmission = async (
-  formId,
-  loginURL,
-  redirect,
-  css = null, lengthLimit = null
+export const loginSubmission = async (formId, loginURL, redirect, css = null, lengthLimit = null
 ) => {
-  const formData = convertFormData(formId);
-  formData.clearError();
-  if (lengthLimit) {
-    formData.realTimeCheckLen(lengthLimit.maxLength.id, lengthLimit.maxLength.max);
-  }
 
   try {
-    formData.emailVal();
-    formData.massValidate();
 
-    if (!formData.error.length) {
+    const formInput = qSel(`#${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.massValidate([], { email: 'email', password: 'password' });
+
+    if (formData.result === 1) {
+
+
       showLoader();
       localStorage.setItem('redirect', redirect);
 
       await postFormData(loginURL, formId, redirect, css);
     } else {
+
       alert('The form cannot be submitted. Please check the errors');
     }
   } catch (err) {

package/Cookie.js

@@ -47,3 +47,9 @@ export const checkCookie = (name) => {
         alert(`Welcome again ${user}`);
     }
 }
+
+// CHECK TOKEN FROM COOKIE 
+export const getCookieValue = (name) => {
+    const match = document.cookie.split('; ').find(row => row.startsWith(name + '='));
+    return match ? decodeURIComponent(match.split('=')[1]) : null;
+}

package/CountryCode.js

@@ -4,7 +4,7 @@ import { id } from './UtilityHtml.js';
 
 // Object to map countries to country codes
 
-const countryCodes = {
+export const countryCodes = {
   Afghanistan: '93',
   Albania: '355',
   Algeria: '213',

package/{FormProcessing.js → FileUpload.js}

@@ -1,12 +1,5 @@
-import { qSelAll, id } from './UtilityHtml.js';
-import  FormHelper  from './FormHelper.js';
+import { id } from './UtilityHtml.js';
 
-export const convertFormData = (formId) => {
-    const formInput = qSelAll(formId)
-    const formInputArr = Array.from(formInput)
-    return new FormHelper(formInputArr)
-
-}
 
 /**
  * Sets up an event listener for the given button element that triggers a file upload click event.