@modernman00/shared-js-lib 1.2.13 → 1.2.23

package/FormHelper.js

@@ -1,14 +1,14 @@
-'use strict'
+'use strict';
 export default class FormHelper {
     constructor(data) {
-         if (!Array.isArray(data)) throwError('data must be an array of form elements');
+        if (!Array.isArray(data)) throwError('data must be an array of form elements');
         this.data = data;
         this.error = [];
         this.result = 0;
     }
 
     id(x) {
-        return document.getElementById(x)
+        return document.getElementById(x);
     }
 
     /**
@@ -26,67 +26,139 @@ export default class FormHelper {
      * @param {string} [type='general'] - the type of validation to perform. Currently only 'email' is supported
      * @returns {boolean} - true if the field is valid, false otherwise
      */
-    validateField(value, type = 'general') {
+    validateLoginField(inputId, type = 'general') {
+        const inputEl = this.id(inputId);
+        const value = inputEl.value.trim();
+        let msg = '';
+        let isValid = true;
+
         if (type === 'email') {
             const emailRegex = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,4}$/;
-            return emailRegex.test(value);
+            if (!emailRegex.test(value)) {
+                msg = '<li>Please enter a valid email</li>';
+                isValid = false;
+            }
+        }
+
+        else if (type === 'password') {
+            const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;
+            if (!passwordRegex.test(value)) {
+                msg = '<li>Please enter a valid password (min 8 chars, upper & lowercase, number, special char)</li>';
+                isValid = false;
+            }
+        }
+
+        else if (type === 'general') {
+            const generalRegex = /[\w\d\s.,'"!?@#&()\-]/;
+            if (!generalRegex.test(value)) {
+                msg = '<li>Invalid entry — special characters may not be allowed</li>';
+                isValid = false;
+            }
+        }
+
+        // Set error if invalid
+        const errorEl = this.id(`${type}_error`);
+        if (!isValid) {
+            if (errorEl) {
+                errorEl.innerHTML = msg;
+                errorEl.style.color = 'red';
+            }
+            this.error.push(msg);
+        } else {
+            if (errorEl) errorEl.innerHTML = ''; // Clear error on success
         }
-        return value.trim().length > 0;
+
+        return isValid;
     }
 
 
+    matchRegex(value, type) {
+        const regexPatterns = {
+            email: /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,4}$/,
+            password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/,
+            general: /[\w\d\s.,'"!?@#&()\-]/,
+        };
+
+        return regexPatterns[type]?.test(value);
+    }
+
     /**
-     * Loop through all the elements in the form and validate each one.
-     * If element is empty, add error message to the error array and set result to false
-     * If element is not empty, check if it validates according to its type (email or general)
-     * If it does not validate, add error message to the error array and set result to false
-     * @returns {void}
+     * 
+     * @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"
+    };
+     * formHelper.massValidate(optional, types);
      */
-    massValidate() {
-        const invalidElements = this.data.flatMap(et => et.filter(post => {
-            const postName = post.name.replace('_', ' ');
-            let errMsg = this.id(`${post.name}_error`);
-
-            // rid it off the submit and token
-            if (['submit', 'button', 'showPassword_id', 'g-recaptcha-response', 'cancel', 'token', 'checkbox_id'].includes(post.name) ||
-                ['button'].includes(post.id) || ['button'].includes(post.type)) return false;
-
-            // check if there is no value
-            if (['spouseName', 'spouseMobile', 'spouseEmail', 'fatherMobile', 'fatherEmail', 'motherMobile', 'maidenName', 'motherEmail'].includes(post.name)) {
-                // post.value is not prpvided if it is not provided 
-                post.value = post.value === "" ? "Not Provided" : post.value
+
+
+
+    massValidate(optionalFields = [], typeMap = {}) {
+        this.clearError(); // Reset errors
+        this.result = 0;
+
+        for (let input of this.data) {
+            const { name, value, id, type, placeholder } = input;
+            const errorEl = this.id(`${name}_error`);
+           
+
+            // Skip non-input elements
+            if (
+                ['submit', 'button', 'g-recaptcha-response', 'cancel'].includes(name) ||
+                ['button', 'showPassword_id', 'token', 'g-recaptcha-response'].includes(id) ||
+                type === 'button' ||
+                name === 'checkbox_id'
+            ) continue;
+
+     
+
+            let label = name.replace(/_/g, ' '); // For readable error text
+            let val = value.trim();
+
+            // Handle optional fields
+            if (optionalFields.includes(name) && val === '') {
+                input.value = 'Not Provided';
+                continue;
             }
 
-            if (post.value === '' || post.value === 'select') {
-                errMsg.innerHTML = `${post.placeholder ?? "*"} cannot be left empty`;
-                errMsg.style.color = 'red';
-                this.error.push(`${postName.toUpperCase()} cannot be left empty`);
-                this.result = false;
-                return true;
+            // 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.`);
+                continue;
             }
 
-            if (post.name === 'email' && !this.validateField(post.value, 'email')) {
-                errMsg.innerHTML = '* Please enter a valid email';
-                errMsg.style.color = 'red';
-                this.error.push('<li style="color: red;">Please enter a valid email</li>');
-                this.result = false;
-                return true;
+            // Determine field type for regex
+            let validateType = typeMap[name] || (
+                name.toLowerCase().includes('email') ? 'email' :
+                    name.toLowerCase().includes('password') ? 'password' : 'general'
+            );
+
+            if (!this.matchRegex(val, validateType)) {
+                const msg = `There is a problem with your entry for ${label.toUpperCase()}`;
+                if (errorEl) errorEl.innerHTML = `<li style="color:red;">${msg}</li>`;
+                this.error.push(msg);
+                continue;
             }
 
-            return false;
-        }));
+            if (errorEl) errorEl.innerHTML = ''; // Clear if all good
+        }
 
-        if (invalidElements.length > 0) this.result = false;
+        this.result = this.error.length === 0 ? 1 : 0;
     }
 
+
+
     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
+        let msg = '<li style=color:\'red\';> Please enter a valid email</li>';
+        const email = this.id('email_id').value;
         if (email.match(emailExp) === null) {
-            this.id('email_error').innerHTML = msg
-            this.id('email_error').style.color = "red"
-            this.error.push(msg)
+            this.id('email_error').innerHTML = msg;
+            this.id('email_error').style.color = 'red';
+            this.error.push(msg);
         }
     }
 
@@ -128,7 +200,7 @@ export default class FormHelper {
     clearHtml() {
         this.data.flat().forEach(post => {
             if (!['submit', 'checkbox'].includes(post.name) && post.type !== 'submit') {
-                post.value = "";
+                post.value = '';
             }
         });
     }
@@ -140,16 +212,17 @@ export default class FormHelper {
 
     realTimeCheckLen(input, maxi) {
         input.forEach((id, i) => {
-            const theData = this.id(`${id}_id`);
+
+            const theData = this.id(`${id}`);
             if (!theData) {
-                console.error(`Element with ID '${id}_id' not found`);
+                console.error(`Element with ID '${id}' not found`);
                 return;
             }
             const max = maxi[i];
             theData.maxLength = parseInt(max) + 1;
             theData.addEventListener('input', () => {
                 const error = this.id(`${id}_error`);
-                error.innerHTML = (theData.value.length > max) ? `You have reached the maximum limit` : "";
+                error.innerHTML = (theData.value.length > max) ? 'You have reached the maximum limit' : '';
                 this.id(`${id}_help`).style.display = theData.value.length > max ? '' : 'none';
             });
         });
@@ -167,12 +240,12 @@ export default class FormHelper {
         const secondInput = this.id(second + '_id');
         const error = this.id(`${second}_error`);
 
-        const checkMatch = () => error.innerHTML = (firstInput.value !== secondInput.value) ? 'Your passwords do not match' : "";
+        const checkMatch = () => error.innerHTML = (firstInput.value !== secondInput.value) ? 'Your passwords do not match' : '';
 
         firstInput.addEventListener('input', checkMatch);
         secondInput.addEventListener('input', checkMatch);
     }
- 
+
 
     /**
      * Injects the values in the html array to the elements with the IDs in the idArray
@@ -190,11 +263,11 @@ export default class FormHelper {
      */
     duplicate(giveInput, takeInput) {
         let giver, taker;
-        giver = this.id(giveInput)
-        taker = this.id(takeInput)
+        giver = this.id(giveInput);
+        taker = this.id(takeInput);
         giver.addEventListener('keyup', () => {
             taker.value = giver.value;
-        })
+        });
     }
 
 
@@ -208,23 +281,23 @@ export default class FormHelper {
      * @param {string} outputId - the id of the element to update with the response from the server
      */
     realTimeServer(input, url, outputId) {
-        const theInput = this.id(input)
-        const output = this.id(outputId)
+        const theInput = this.id(input);
+        const output = this.id(outputId);
         theInput.addEventListener('keyup', async () => {
-            const inputVal = theInput.value
+            const inputVal = theInput.value;
 
-            if (inputVal === "") {
-                output.innerHTML = "";
+            if (inputVal === '') {
+                output.innerHTML = '';
                 return;
             }
 
             try {
-                const response = await axios.get(`${url}=${inputVal}`)
-                output.innerHTML = response.data
+                const response = await axios.get(`${url}=${inputVal}`);
+                output.innerHTML = response.data;
             } catch (error) {
-                console.error(error)
+                console.error(error);
             }
-        })
+        });
     }
 
     /**
@@ -236,31 +309,15 @@ export default class FormHelper {
     isChecked(yesId, noId, hiddenInput) {
         const checked = () => {
             if (this.id(yesId).checked) {
-                alert('check')
+                alert('check');
                 this.id(hiddenInput).innerHTML = 'checked';
             } else if (this.id(noId).checked) {
                 this.id(hiddenInput).innerHTML = 'checked';
             }
-        }
-
-        this.id(yesId).addEventListener('click', checked)
-        this.id(noId).addEventListener('click', checked)
-
-    }
-
-    previousAddress() {
-        const timeAddy = this.id('time_at_address_id')
-        const prevAddy = this.id('previous_address_class')
-        const showPrev = () => {
-            if (timeAddy.value != '3 years+') {
-                prevAddy.style.display = 'block'
-                this.id('previous_address_help').innerHTML = "Please enter your full address: House No, Street Name, Town/City and Post Code"
-            } else {
-                prevAddy.style.display = 'none'
-            }
+        };
 
-        }
-        timeAddy.addEventListener('change', showPrev)
+        this.id(yesId).addEventListener('click', checked);
+        this.id(noId).addEventListener('click', checked);
 
     }
 

package/Http.js

@@ -1,150 +1,244 @@
 import { id, log } from './UtilityHtml.js';
-import { clearLoader } from './Loader.js';
-import axios from 'axios'
-import axiosRetry from 'axios-retry';
-
-axiosRetry(axios, { retries: 3 });
-
+import axios from './axiosWrapper.js';
+import { redirectAfterDelay, parseErrorResponse } from './general.js';
 
+/**
+ * 
+* Sends form data via POST request.
+ * @param {string} url - The URL to post the data to.
+ * @param {string} formId - The ID or class of the form.
+ * @param {string|null} redirect - The page to redirect to after successful submission.
+ * @param {string|null} css - The CSS framework to use for notification styling (e.g., 'W3css', 'bulma').
+ NOTICE:::Make sure you set the notification id as the formId_notification
+ */
 export const postFormData = async (url, formId, redirect = null, css = null) => {
-    const notificationForm = `${formId}_notification`;
+
+    let notificationForm = `${formId}_notification`;
     const notificationId = id(notificationForm);
 
+
     if (!notificationId) {
         throw new Error('Notification element not found');
     }
-
     // Cleanup previous notification styles
     notificationId.style.display = 'none';
-    notificationId.className = notificationId.className.replace(/is-danger|is-success|w3-red|w3-green|bg-danger|bg-success/g, '');
 
+    ['is-danger', 'is-success', 'w3-red', 'w3-green', 'bg-danger', 'bg-success'].forEach(cls => notificationId.classList.remove(cls));
+
+    // add value to the hidden csrf input field
+    // const csrfToken = getCookieValue('XSRF-TOKEN');
+    // if (csrfToken) {
+    //     const csrfInput = id('token');
+    //     if (csrfInput) {
+    //         csrfInput.value = csrfToken; // Set the CSRF token in the hidden input field    
+    // } 
+
+    // extract the form entries
     const form = id(formId);
+
     if (!form) {
         throw new Error('Form element not found');
     }
 
-    const formEntries = new FormData(form);
+    let formEntries = new FormData(form);
+
     formEntries.delete('submit');
     formEntries.delete('checkbox_id');
 
     const options = {
-        baseURL: '/',
-        xsrfCookieName: 'XSRF-TOKEN',
-        xsrfHeaderName: 'X-XSRF-TOKEN',
-        withCredentials: true,
+        baseURL: '/', // Adjust to your API base URL
+        withCredentials: true, // Ensure cookies (e.g., XSRF token) are sent
     };
 
+    // AXIOS POST FUNCTIONALITY
     try {
         const response = await axios.post(url, formEntries, options);
-        if (!(response.status >= 200 && response.status < 300)) {
-            throw new Error(response.data?.message || 'Request failed');
-        }
-
         const successClass = getNotificationClassByCSS(css || 'bulma', 'green');
-        const { message } = response.data || {};
-        const { id: idSetFromHttp, famCode: famCodeSetFromHttp, outcome: dbHttpResult } = typeof message === 'object' ? message : { outcome: message };
 
-        if (!idSetFromHttp || !dbHttpResult || !famCodeSetFromHttp) {
-            throw new Error('Response data is missing required fields');
+        // check if response.data.message is an array
+        const { message } = response.data || {};
+        if( !message) {
+            throw new Error('Response data does not contain a message');
         }
-
-        sessionStorage.setItem('idSetFromHttp', sessionStorage.getItem('idSetFromHttp') || idSetFromHttp);
-        sessionStorage.setItem('famCodeSetFromHttp', sessionStorage.getItem('famCodeSetFromHttp') || famCodeSetFromHttp);
-
-        processFormDataAction(successClass, dbHttpResult, notificationId);
+        processFormDataAction(successClass, message, notificationId);
 
         if (redirect) {
-            setTimeout(() => window.location.assign(redirect), 2000);
+           redirectAfterDelay(redirect, 2000);
         }
+
     } catch (error) {
         const errorClass = getNotificationClassByCSS(css || 'bulma', 'red');
-        const errorMessage = error.response?.data?.error || error.request || 'An unknown error occurred';
-        processFormDataAction(errorClass, errorMessage, notificationId);
+        const ErrorMsg = parseErrorResponse(error);
+        processFormDataAction(errorClass, ErrorMsg, notificationId);
     }
 };
 
-
 /**
- * Displays a notification message and handles the loading indicator.
- * @param {string} cssClass - The CSS class to add to the notification element.
- * @param {string} message - The message to display in the notification element.
- * @param {HTMLElement} formNotificationId - The notification element to display the message in.
- * @returns {void}
+ * Process form data action.
+ * @param {string} cssClass - The CSS class for the notification.
+ * @param {string} message - The notification message.
  */
 const processFormDataAction = (cssClass, message, formNotificationId) => {
-    if (!formNotificationId) {
-        return log('Notification element not found');
+    if (formNotificationId) {
+        formNotificationId.style.display = 'block';
+        formNotificationId.classList.add(cssClass);
+        const errorElement = id('error');
+        if (errorElement) {
+            errorElement.scrollIntoView({ behavior: 'smooth' });
+            errorElement.innerHTML = message;
+        }
+        const loader = id('setLoader');
+        if (loader) loader.classList.remove('loader');
+    } else {
+        log('Notification element not found');
     }
+};
 
-    formNotificationId.style.display = 'block';
-    formNotificationId.classList.add(cssClass);
-
-    const errorElement = id('error');
-    if (errorElement) {
-        errorElement.innerHTML = message;
-        errorElement.scrollIntoView({ behavior: 'smooth' });
+/**
+ * Get the notification class based on the CSS framework.
+ * @param {string|null} css - The CSS framework to use for notification styling.
+ * @param {string} status - The status of the notification ('green' or 'red').
+ * @returns {string} - The corresponding CSS class.
+ */
+const getNotificationClassByCSS = (css, status) => {
+    switch (css) {
+        case 'W3css':
+            return status === 'green' ? 'w3-green' : 'w3-red';
+        case 'bulma':
+            return status === 'green' ? 'is-success' : 'is-danger';
+        case 'bootstrap':
+            return status === 'green' ? 'bg-success' : 'bg-danger';
+        default:
+            return status === 'green' ? 'bg-success' : 'bg-danger';
     }
-
-    clearLoader();
 };
 
-const getNotificationClassByCSS = (css, color) => (css === 'bulma' ? `is-${color}` : color === 'green' ? `${css}-${color}` : `${css}-danger`);
-
 
 /**
- * Fetches data from a specified API endpoint using a GET request.
  * 
- * @param {string} URL - The API endpoint to fetch data from.
- * @param {string|null} [token=null] - Optional authorization token for the request.
- * @returns {Promise<Object>} - A promise that resolves with the response data or rejects with an error.
+ * @param { the url you want to get} URL 
+ * @returns 
+ // now we can use that data from the outside!
+axiosTest()
+    .then(data => {
+        response.json({ message: 'Request received!', data })
+    })
+    .catch(err => console.log(err))
  */
 
 export const getApiData = async (URL, token = null) => {
-    const headers = {
-        'X-Requested-With': 'XMLHttpRequest',
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-    };
-    if (token) {
-        headers['Authorization'] = `Bearer ${token}`;
-    }
-
     try {
-        const response = await axios.get(URL, { headers });
-        return response.data;
+
+        const config = {
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+                'Authorization': 'Bearer ' + token
+            },
+        };
+
+        const fetch = await axios.get(URL, config);
+        return fetch.data;
+
+
     } catch (error) {
-        return Promise.reject(error);
+
+        return error;
+
     }
-}
 
 
+};
+
 export const getMultipleApiData = async (url1, url2, token = null) => {
-    const config = {
-        headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'Content-Type': 'application/json',
-            'Accept': 'application/json',
-            Authorization: `Bearer ${token}`,
-        },
-    };
+    try {
+
+        const config = {
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+                'Authorization': 'Bearer ' + token
+            },
+        };
+
+        const fetch = await axios.all([
+            axios.get(url1, config),
+            axios.get(url2, config)
+        ]);
+        return fetch;
+
+    } catch (error) {
+
+        return error;
+
+    }
+
 
-    return await axios.all([axios.get(url1, config), axios.get(url2, config)]).then(axios.spread((res1, res2) => [res1.data, res2.data]));
 };
 
+
+// build a function to post multiple api form data
+
 export const postMultipleApiData = async (url1, url2, formData, token = null) => {
-    const config = {
-        headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'Content-Type': 'application/json',
-            'Accept': 'application/json',
-            'Authorization': 'Bearer ' + token
-        },
-    };
+    try {
 
-    const [res1, res2] = await Promise.all([
-        axios.post(url1, formData, config),
-        axios.post(url2, formData, config),
-    ]);
+        const config = {
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+                'Authorization': 'Bearer ' + token
+            },
+        };
+        const fetch = await axios.all([
+            axios.post(url1, formData, config),
+            axios.post(url2, formData, config)
+        ]);
+
+        return fetch;
+
+    } catch (error) {
+        return error;
+    }
+};
+/**
+ * 
+ * @param { name} cname 
+ * @param {* value} cvalue 
+ * @param {* no of days 365} exdays 
+ */
+export const setCookie = (cname, cvalue, exdays) => {
+    var d = new Date();
+    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+    var expires = 'expires=' + d.toUTCString();
+    document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
+};
 
-    return [res1.data, res2.data];
+export const getCookie = (cname) => {
+    var name = cname + '=';
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return '';
 };
+
+export const checkCookie = () => {
+    var user = getCookie('username');
+    if (user != '') {
+        alert('Welcome again ' + user);
+    } else {
+        user = prompt('Please enter your name:', '');
+        if (user != '' && user != null) {
+            setCookie('username', user, 365);
+        }
+    }
+};

package/Loader.js

@@ -1,4 +1,4 @@
-import { id } from './global.js';
+import { id } from './UtilityHtml.js';
 
 export const loaderIconBootstrap = () => {