@modernman00/shared-js-lib 1.2.2

package/FormHelper.js

@@ -0,0 +1,268 @@
+'use strict'
+export default class FormHelper {
+    constructor(data) {
+         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)
+    }
+
+    /**
+     * general validation; check empty status, at least a single input, mobile length, white space
+     */
+
+    getData() {
+        return this.data;
+    }
+
+
+    /**
+     * Validate a single form field
+     * @param {string} value - the value of the field to validate
+     * @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') {
+        if (type === 'email') {
+            const emailRegex = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,4}$/;
+            return emailRegex.test(value);
+        }
+        return value.trim().length > 0;
+    }
+
+
+    /**
+     * 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}
+     */
+    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
+            }
+
+            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;
+            }
+
+            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;
+            }
+
+            return false;
+        }));
+
+        if (invalidElements.length > 0) this.result = false;
+    }
+
+    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
+        if (email.match(emailExp) === null) {
+            this.id('email_error').innerHTML = msg
+            this.id('email_error').style.color = "red"
+            this.error.push(msg)
+        }
+    }
+
+    /**
+     * Clears all error messages and empties the error array.
+     * Sets up event listeners to clear error messages for each input element.
+     * Keyup event listener: for non-select inputs
+     * Change event listener: for all inputs
+     * @returns {void}
+     */
+    clearError() {
+        this.error = []; // Empty the error array
+
+        // Function to clear error messages for a given input element
+        const clearErrorForElement = (elementName) => {
+            const errorElement = this.id(`${elementName}_error`);
+            if (errorElement) errorElement.innerHTML = '';
+        };
+
+        this.data.flat().forEach(({ id, name, value }) => {
+            if (['submit', 'button', 'token', 'checkbox'].includes(id) || ['token', 'submit'].includes(name)) return;
+
+            const element = this.id(id);
+            if (!element) {
+                console.error(`Element with ID '${id}' and post name '${name}' not found.`);
+                return;
+            }
+
+            // Add event listeners to clear errors
+            const clearErrorHandler = () => clearErrorForElement(name);
+            if (value !== 'select') element.addEventListener('keyup', clearErrorHandler);
+            element.addEventListener('change', clearErrorHandler);
+        });
+    }
+
+    /**
+     * Clears the values of all input elements in the form, excluding checkboxes and the submit button
+     */
+    clearHtml() {
+        this.data.flat().forEach(post => {
+            if (!['submit', 'checkbox'].includes(post.name) && post.type !== 'submit') {
+                post.value = "";
+            }
+        });
+    }
+    /**
+     * Check the length of the input in real time and display an error message if it exceeds the maximum length
+     * @param {array of strings} input - the IDs of the input elements to check
+     * @param {array of numbers} maxi - the maximum lengths for each input element
+     */
+
+    realTimeCheckLen(input, maxi) {
+        input.forEach((id, i) => {
+            const theData = this.id(`${id}_id`);
+            if (!theData) {
+                console.error(`Element with ID '${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` : "";
+                this.id(`${id}_help`).style.display = theData.value.length > max ? '' : 'none';
+            });
+        });
+    }
+
+
+
+    /**
+     * Match the value of the second input to the value of the first input in real time
+     * @param {string} first - the id of the first input
+     * @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 error = this.id(`${second}_error`);
+
+        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
+     * @param {array of strings} idArray - the IDs of the elements to inject the values to
+     * @param {array of strings} html - the values to inject to the elements
+     */
+    injectData(idArray, html) {
+        idArray.forEach((id, i) => this.id(id).innerHTML = html[i]);
+    }
+
+    /**
+     *
+     * @param {this is an id and its value is for duplication} firstInput
+     * @param {* another id that accepts the value of the firstInput} takeFirstInput
+     */
+    duplicate(giveInput, takeInput) {
+        let giver, taker;
+        giver = this.id(giveInput)
+        taker = this.id(takeInput)
+        giver.addEventListener('keyup', () => {
+            taker.value = giver.value;
+        })
+    }
+
+
+
+
+    /**
+     * Sends a get request to the server as the user types in the specified input element
+     * and updates the content of the specified output element with the response from the server
+     * @param {string} input - the id of the input element to listen to
+     * @param {string} url - the url of the get request to send, the value of the input element will be appended to the end of the url
+     * @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)
+        theInput.addEventListener('keyup', async () => {
+            const inputVal = theInput.value
+
+            if (inputVal === "") {
+                output.innerHTML = "";
+                return;
+            }
+
+            try {
+                const response = await axios.get(`${url}=${inputVal}`)
+                output.innerHTML = response.data
+            } catch (error) {
+                console.error(error)
+            }
+        })
+    }
+
+    /**
+     * Check if a yes/no radio button is checked and display "checked" in a hidden input field.
+     * @param {string} yesId - the id of the yes radio button
+     * @param {string} noId - the id of the no radio button
+     * @param {string} hiddenInput - the id of the hidden input field to display the result
+     */
+    isChecked(yesId, noId, hiddenInput) {
+        const checked = () => {
+            if (this.id(yesId).checked) {
+                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)
+
+    }
+
+
+}

package/FormProcessing.js

@@ -0,0 +1,22 @@
+import { qSelAll, 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.
+ * Also sets up an event listener for the given input element that displays the name of the selected files.
+ * @param {string} uploadBtn - the id of a button element that will trigger the file upload dialog box.
+ * @param {string} inputId - the id of the input element with the file type.
+ * @param {string} fileName - the id of the element where the selected file names will be displayed.
+ */
+export const showImageFileUploadFn = (uploadBtn, inputId, fileName) => {
+  const input = id(inputId);
+  const fileNamesEl = id(fileName);
+  id(uploadBtn).addEventListener('click', () => input.click());
+  input.addEventListener('change', () => fileNamesEl.innerText = Array.from(input.files).map(file => file.name).join(', '));
+};

package/Http.js

@@ -0,0 +1,150 @@
+import { id, log } from './UtilityHtml.js';
+import { clearLoader } from './Loader.js';
+import axios from 'axios'
+import axiosRetry from 'axios-retry';
+
+axiosRetry(axios, { retries: 3 });
+
+
+export const postFormData = async (url, formId, redirect = null, css = null) => {
+    const 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, '');
+
+    const form = id(formId);
+    if (!form) {
+        throw new Error('Form element not found');
+    }
+
+    const formEntries = new FormData(form);
+    formEntries.delete('submit');
+    formEntries.delete('checkbox_id');
+
+    const options = {
+        baseURL: '/',
+        xsrfCookieName: 'XSRF-TOKEN',
+        xsrfHeaderName: 'X-XSRF-TOKEN',
+        withCredentials: true,
+    };
+
+    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');
+        }
+
+        sessionStorage.setItem('idSetFromHttp', sessionStorage.getItem('idSetFromHttp') || idSetFromHttp);
+        sessionStorage.setItem('famCodeSetFromHttp', sessionStorage.getItem('famCodeSetFromHttp') || famCodeSetFromHttp);
+
+        processFormDataAction(successClass, dbHttpResult, notificationId);
+
+        if (redirect) {
+            setTimeout(() => window.location.assign(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);
+    }
+};
+
+
+/**
+ * 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}
+ */
+const processFormDataAction = (cssClass, message, formNotificationId) => {
+    if (!formNotificationId) {
+        return 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' });
+    }
+
+    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.
+ */
+
+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;
+    } catch (error) {
+        return Promise.reject(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}`,
+        },
+    };
+
+    return await axios.all([axios.get(url1, config), axios.get(url2, config)]).then(axios.spread((res1, res2) => [res1.data, res2.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
+        },
+    };
+
+    const [res1, res2] = await Promise.all([
+        axios.post(url1, formData, config),
+        axios.post(url2, formData, config),
+    ]);
+
+    return [res1.data, res2.data];
+};

package/Loader.js

@@ -0,0 +1,35 @@
+export const loaderIconBootstrap = () => {
+
+    return `<div class="spinner-grow text-primary" role="status">
+        <span class="sr-only">Loading...</span>
+        </div>`
+}
+
+export const loaderIcon = () => {
+
+    return `<div class="loader"></div>`
+}
+
+export const loaderIconBulma = () => {
+
+    return `<div class="is-loading"></div>`
+}
+
+export const clearLoader = (elementId = 'setLoader', loaderClass = "loader") => {
+    const loader = id(elementId);
+    if (!loader) {
+        throw new Error(`Element not found`);
+    }
+
+    loader.style.display = "none";
+    loader.classList.remove(loaderClass);
+
+}
+export const showLoader = (elementId ='setLoader', loaderClass = "loader") => {
+    const loader = id(elementId);
+    if (!loader) {
+        throw new Error(`Element  not found`);
+    }
+    loader.classList.add(loaderClass);
+    loader.style.display = "block";
+};

package/Login.js

@@ -0,0 +1,43 @@
+"use strict";
+import { convertFormData } from './FormProcessing.js';
+import { postFormData } from "./Http.js";
+import { showLoader, clearLoader } from './Loader.js';
+import { showError } from "./ShowResponse.js";
+
+// block the setLoader div
+
+/**
+ * Handles the submission of the login form.
+ * @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}
+ * @throws {Error} - If there is an error with the submission
+ */
+export const loginSubmission = async (formId, loginURL, redirect, css = null) => {
+    const formData = convertFormData(formId);
+    formData.clearError();
+
+    try {
+        formData.emailVal();
+        formData.massValidate();
+
+        if (!formData.error.length) {
+
+            showLoader();
+            localStorage.setItem('redirect', redirect);
+
+            await postFormData(loginURL, formId, redirect, css);
+        } else {
+            alert('The form cannot be submitted. Please check the errors');
+        }
+    } catch (err) {
+        showError(err);
+    } finally {
+       clearLoader();
+    }
+    
+}
+
+

package/ShowResponse.js

@@ -0,0 +1,93 @@
+import { id } from './UtilityHtml.js';
+import axios from "axios"
+export const showError = (e) => console.error(`${e.name} at ${e.fileName}:${e.lineNumber} - ${e.message}\n${e.stack}`);
+
+export const msgException = (errorMessage) => {
+  
+    throw new Error(errorMessage)
+}
+
+
+/**
+ * 
+ * @param {*} elementId - element id
+ * @param {*} addClass either a success or danger class (green or red)
+ * @param {*} message - html message to convey success or failure
+ * @param {*} timer - timer for the message to disappear- default is 5 secs
+ */
+export const showNotification = (elementId, addClass, message, timer = 5000) => {
+    // display the success information for 10sec
+    id(`${elementId}`).style.display = "block" // unblock the notification
+    id(`${elementId}`).classList.add(addClass) // add the success class
+    id(`${elementId}`).innerHTML = message // error element
+    id('loader').classList.remove('loader') // remove loader
+
+    setTimeout(() => {
+        id(`${elementId}`).style.backgroundColor = ""
+        id(`${elementId}`).style.color = ""
+        id(`${elementId}`).innerHTML = ""
+    }, timer)
+}
+
+  /**
+   * 
+   * @param {*} elementId - element id 
+   * @returns {Promise<void>}
+   * @description This is a function that deletes a notification. It takes in the elementId of the delete button
+   *              and uses that to get the user ID and the notification ID. It makes a put request to the server to
+   *              mark the notification as read. If the request is successful, it removes the notification from the page
+   *              and decrements the notification count by 1. If the request is unsuccessful, it logs an error message.
+   */
+  export const deleteNotification = async (elementId) => {
+
+         // Extract the user ID from the target ID
+            const senderId = elementId.replace("deleteNotification", "notificationBar");
+          
+            const elementData = id(elementId)
+            const data = elementData.getAttribute("data-id");
+
+            // change the background of the clicked element 
+
+            const notificationHTML = id(senderId);
+
+            // Make sure required variables are defined before using them
+            if (
+                typeof yourId === 'undefined' ||
+                typeof famCode === 'undefined'
+            ) {
+                msgException("Required parameters (yourId or famCode) are not defined");
+            }
+
+            const url = `/removeNotification/${yourId}/${famCode}/${data}`
+
+
+            const response = await axios.put(url)
+
+
+            if (response.data.message === "Notification marked as read") {
+
+                // remove a html element with notificationBar after 2 mins 
+                notificationHTML.remove()
+
+                // reduce the notification count as you have deleted the notification
+
+                const newValues = parseInt(sessionStorage.getItem('notificationCount') - 1)
+                id('notification_count').innerHTML = newValues;
+            } else {
+                msgException("Error removing notification" + " " + response.data.message);
+            }
+    }
+
+    export const showResponse = (theId, message, status) => {
+    const responseEl = id(theId)
+    const col = status ? 'green' : 'red'
+
+    responseEl.innerHTML = message
+    responseEl.style.color = 'green'
+    responseEl.style.backgroundColor = col
+    responseEl.style.color = 'white';
+    setTimeout(() => {
+        responseEl.innerHTML = '';
+    }, 5000); // Disappear after 5 seconds
+
+}