jdzcaptcha 2.0.0

package/lib/js/captcha.js

@@ -0,0 +1,182 @@
+import { VERSION, defaults } from './constants.js';
+import { Utils } from './utils.js';
+import { Widget } from './widget.js';
+import Fetch from './fetch.js';
+
+export const Captcha = {
+    NAME: 'JdzCaptcha',
+    VERSION: VERSION,
+    debugMode: window.JDZ_DEBUG_MODE || false,
+    debug: Utils.debug,
+    config: null,
+    initialized: false,
+    instances: [],
+
+    /**
+     * Intialize the captcha configuration and load the widgets.
+     * @param {string} loaderUrl The URL to fetch the captcha configuration from.
+     * @param {string} [selector=null] The CSS selector for the elements to initialize the captcha on.
+     * @param {Object} [options={}] Additional options to override the default configuration.
+     * @returns {Object} The Captcha instance.
+     */
+    initialize: function (loaderUrl, selector = null, options = {}) {
+        const loadSelector = (selector) => {
+            if (!selector) return;
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', () => {
+                    this.loadFromSelector(selector);
+                });
+            } else {
+                this.loadFromSelector(selector);
+            }
+        };
+
+        if (this.initialized) {
+            Utils.warning('Already initialized. Cannot use Captcha.initliaze() twice.');
+            loadSelector(selector);
+            return this;
+        }
+
+        if (!loaderUrl) {
+            // If no loaderUrl is provided, use the default options.
+            Utils.error('LoaderUrl is required to initialize the configuration.');
+            this.config = Utils.extend({}, defaults, options || {});
+            this.initialized = true;
+            loadSelector(selector);
+            return this;
+        }
+
+        Fetch({
+            url: loaderUrl,
+            type: 'POST',
+            success: (data) => {
+                this.config = Utils.extend({}, defaults, options || {}, data || {});
+                this.initialized = true;
+                loadSelector(selector);
+            },
+            error: () => {
+                Utils.error('Failed to load configuration. Using default options.');
+                this.config = Utils.extend({}, defaults, options || {});
+                this.initialized = true;
+                loadSelector(selector);
+            },
+        });
+
+        return this;
+    },
+
+    /**
+     * Initializes the captcha widgets for the specified elements.
+     * @param {string} selector The CSS selector for the elements to initialize the captcha on.
+     * @param {Object} [options={}] Additional options to override the config for the newInstances.
+     * @returns {Object} The Captcha instance.
+     */
+    loadFromSelector: function (selector, options = {}) {
+        if (!selector) {
+            return this;
+        }
+
+        // Merge config with the provided options, if available.
+        options = Utils.extend({}, this.config, options || {});
+
+        // Initialize the captcha widgets for the elements matching the selector.
+        const newInstances = Array.from(document.querySelectorAll(selector))
+            .map((element) => new Widget(element, options))
+            .filter((widget) => widget !== null);
+
+        if (newInstances.length === 0) {
+            Utils.warn('No valid elements found for the provided selector:', selector);
+            return this;
+        }
+
+        // Merge new instances with existing ones.
+        this.instances = [...this.instances, ...newInstances];
+
+        // Bind callbacks, if provided in the options, only to the new instances.
+        if (options.callbacks) {
+            newInstances.forEach((widget) => {
+                Object.entries(options.callbacks).forEach(([event, callback]) => {
+                    widget.$element.addEventListener(event, callback);
+                });
+            });
+        }
+
+        return this;
+    },
+
+    checkIfValid: function () {
+        if (!this.initialized) {
+            Utils.warning('Captcha has not been initialized.');
+            return false;
+        }
+
+        if (this.instances.length === 0) {
+            Utils.warning('No instances found.');
+            return false;
+        }
+
+        return true;
+    },
+
+    /**
+     * Resets the specified widget, or all widgets if no widget identifier is provided.
+     * @param {string} widgetId The identifier of the widget to reset.
+     * @returns {Object} The Captcha instance (for method chaining).
+     */
+    reset: function (widgetId = null) {
+        if (!this.checkIfValid()) {
+            Utils.error('Cannot reset.');
+            return this;
+        }
+
+        // If no widgetId is provided, reset all instances.
+        if (!widgetId) {
+            this.instances.forEach((widget) => {
+                widget.reset();
+            });
+            return this;
+        }
+
+        // If widgetId is provided, reset the specific instance.
+        const widget = this.instances.find((w) => w.id === widgetId);
+        if (widget) {
+            widget.reset();
+        } else {
+            Utils.error(`No instance found with ID "${widgetId}".Cannot reset.`);
+        }
+
+        return this;
+    },
+
+    /**
+     * Binds an event listener to all widgets in the captcha instance.
+     * @param {string} event The name of the event to bind to.
+     * @param {Function} callback The function to be called when the event is triggered.
+     * @param {string} widgetId The identifier of the widget to reset.
+     * @returns {Object} The Captcha instance (for method chaining).
+     */
+    bind: function (event, callback, widgetId = null) {
+        if (!this.checkIfValid()) {
+            Utils.error('Cannot bind.');
+            return this;
+        }
+
+        // If no widgetId is provided, bind the event to all instances.
+        if (!widgetId) {
+            this.instances.forEach((widget) => {
+                widget.$element.addEventListener(event, callback);
+            });
+            return this;
+        }
+
+        // If widgetId is provided, bind the event to the specific instance.
+        const widget = this.instances.find((w) => w.id === widgetId);
+        if (widget) {
+            widget.$element.addEventListener(event, callback);
+        } else {
+            Utils.error(`No instance found with ID "${widgetId}".Cannot bind event.`);
+        }
+
+        return this;
+    }
+};

package/lib/js/constants.js

@@ -0,0 +1,61 @@
+export const VERSION = '2.0.0';
+
+export const CSS = {
+    opacity: 'jdzc-opacity',
+    error: 'jdzc-error',
+    success: 'jdzc-success',
+    init: 'jdzc-init',
+    loader: 'jdzc-loader',
+    selection: 'jdzc-box-selection',
+    box: 'jdzc-box',
+    boxH: 'jdzc-box-h',
+    boxB: 'jdzc-box-b',
+    boxF: 'jdzc-box-f',
+    circle: 'jdzc-box-circle',
+    info: 'jdzc-box-info',
+    title: 'jdzc-box-title',
+    icons: 'jdzc-box-icons',
+    checkmark: 'jdzc-box-checkmark',
+    subtitle: 'jdzc-box-subtitle',
+    fields: 'jdzc-fields',
+};
+
+export const defaults = {
+    path: '/captcha/request/',
+    token: true,
+    fontFamily: '',
+    credits: 'show',
+    series: 'streamline',
+    theme: 'light',
+    security: {
+        clickDelay: 1500,
+        hoverDetection: true,
+        enableInitialMessage: true,
+        initializeDelay: 500,
+        selectionResetDelay: 3000,
+        loadingAnimationDelay: 1000,
+        invalidateTime: 1000 * 60 * 2,
+    },
+    fields: {
+        selection: '_jdzc-hf-se',
+        id: '_jdzc-hf-id',
+        honeypot: '_jdzc-hf-hp',
+        token: '_jdzc-token',
+    },
+    messages: {
+        initialization: {
+            loading: 'Loading challenge...',
+            verify: 'Verify that you are human.',
+        },
+        header: 'Select the image displayed the <u>least</u> amount of times',
+        correct: 'Verification complete.',
+        incorrect: {
+            title: 'Uh oh.',
+            subtitle: 'You’ve selected the wrong image.',
+        },
+        timeout: {
+            title: 'Please wait 60 sec.',
+            subtitle: 'You made too many incorrect selections.',
+        },
+    },
+};

package/lib/js/fetch.js

@@ -0,0 +1,51 @@
+/**
+ * Sends an HTTP request using the Fetch API.
+ * @param {Object} options The options for the request.
+ * @param {string} options.url The URL to send the request to.
+ * @param {string} [options.type='GET'] The HTTP method (e.g., 'GET', 'POST').
+ * @param {Object} [options.headers={}] The headers to include in the request.
+ * @param {Object|FormData} [options.data] The data to send with the request.
+ * @param {Function} [options.success] The callback function for a successful response.
+ * @param {Function} [options.error] The callback function for an error response.
+ */
+const Fetch = async (options = {}) => {
+    const { url, type = 'GET', headers = {}, data, success, error } = options;
+
+    const fetchOptions = {
+        method: type.toUpperCase(),
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            ...headers,
+        },
+    };
+
+    if (data) {
+        if (data instanceof FormData) {
+            fetchOptions.body = data;
+        } else {
+            fetchOptions.headers['Content-Type'] = 'application/json';
+            fetchOptions.body = JSON.stringify(data);
+        }
+    }
+
+    try {
+        const response = await fetch(url, fetchOptions);
+
+        if (!response.ok) {
+            throw new Error(`Request failed with status ${response.status}`);
+        }
+
+        const text = await response.text();
+        let result;
+        try {
+            result = JSON.parse(text);
+        } catch (e) {
+            result = text;
+        }
+        if (success) success(result);
+    } catch (err) {
+        if (error) error(err);
+    }
+};
+
+export default Fetch;

package/lib/js/ui.js

@@ -0,0 +1,117 @@
+import { CSS } from './constants.js';
+
+export const UI = {
+    /**
+     * Builds the HTML for the credits section of the captcha.
+     * @returns {string} The HTML string for the credits section.
+     */
+    buildCredits: (options) => {
+        if (options.credits) {
+            return '<span' + (options.credits === 'hide' ? ' style="display:none;"' : '') + '>' +
+                '<a href="https://joffreydemetz.com/jdzcaptcha" target="_blank" rel="follow" title="JdzCaptcha by Joffrey Demetz">JdzCaptcha</a>' +
+                ' &copy;' +
+                '</span>';
+        }
+        return '';
+    },
+
+    /**
+     * Builds the HTML for the initial state of the captcha.
+     * @param {Object} options The configuration options for the captcha.
+     * @return {string} The HTML string for the captcha holder.
+     */
+    buildCaptchaInitialHolder: (options) => {
+        return '<div class="' + CSS.box + '">' +
+            '<div class="' + CSS.boxB + '">' +
+            '<div class="' + CSS.circle + '"></div>' +
+            '<div class="' + CSS.info + '">' + UI.buildCredits(options) + '</div>' +
+            '<div class="' + CSS.title + '">' + options.messages.initialization.verify + '</div>' +
+            '</div>' +
+            '</div>';
+    },
+
+    /**
+     * Builds the HTML for the challenge state of the captcha.
+     * @param {Object} options The configuration options for the captcha.
+     * @param {string} captchaId The captcha identifier.
+     * @return {string} The HTML string for the captcha holder.
+     */
+    buildCaptchaHolder: (options, captchaId) => {
+        return '<div class="' + CSS.box + '">' +
+            '<div class="' + CSS.boxH + '"><span>' + options.messages.header + '</span></div>' +
+            '<div class="' + CSS.boxB + '"><div class="' + CSS.icons + '"></div></div>' +
+            '<div class="' + CSS.boxF + '">' + UI.buildCredits(options) + '</div>' +
+            '<div class="' + CSS.fields + '">' +
+            '<input type="hidden" name="jdzc[' + options.fields.selection + ']" required />' +
+            '<input type="hidden" name="jdzc[' + options.fields.id + ']" value="' + captchaId + '" required />' +
+            '<input type="hidden" name="jdzc[' + options.fields.honeypot + ']" required />' +
+            '</div>' +
+            '</div>';
+    },
+
+    /**
+     * Builds the HTML for the checkmark icon.
+     * @return {string} The HTML string for the checkmark icon.
+     */
+    buildCheckmark: () => {
+        return '<svg viewBox="0 0 98.5 98.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">' +
+            '<path class="checkmark" d="M81.7 17.8C73.5 9.3 62 4 49.2 4 24.3 4 4 24.3 4 49.2s20.3 45.2 45.2 45.2 45.2-20.3 45.2-45.2c0-8.6-2.4-16.6-6.5-23.4L45.6 68.2 24.7 47.3" fill="none" stroke-miterlimit="10" stroke-width="8" />' +
+            '</svg>';
+    },
+
+    buildValidSelectionMessage: (options) => {
+        return '<div class="' + CSS.title + '">' + options.messages.correct + '</div>' +
+            '<div class="' + CSS.checkmark + '">' + UI.buildCheckmark() + '</div>';
+    },
+
+    buildInvalidSelectionMessage: (options) => {
+        return '<div class="' + CSS.title + '">' + options.messages.incorrect.title + '</div>' +
+            '<div class="' + CSS.subtitle + '">' + options.messages.incorrect.subtitle + '</div>';
+    },
+
+    buildErrorMessage: (topMessage, bottomMessage) => {
+        return '<div class="' + CSS.title + '"> ' + topMessage + '</div>' +
+            '<div class="' + CSS.subtitle + '">' + bottomMessage + '</div>';
+    },
+
+    /**
+     * Adds a loading spinner to the captcha holder element.
+     * @param {HTMLElement} $el The captcha icon holder element.
+     */
+    addLoadingSpinner: ($el) => {
+        $el.classList.add(CSS.opacity);
+        if (!$el.querySelector(`.${CSS.loader} `)) {
+            $el.insertAdjacentHTML('beforeend', `<div class="${CSS.loader}"></div>`);
+        }
+    },
+
+    /**
+     * Removes the loading spinner from the captcha holder element.
+     * @param {HTMLElement} $el The captcha icon holder element.
+     */
+    removeLoadingSpinner: ($el) => {
+        $el.classList.remove(CSS.opacity);
+
+        if ($el.querySelector(`.${CSS.loader} `)) {
+            $el.querySelector(`.${CSS.loader} `).remove();
+        }
+    },
+
+    /**
+     * Removes the loading spinner when the background image of the given DOM element is fully loaded.
+     * @param {HTMLElement} $el The DOM element with the background image.
+     * @param {Function} removeSpinnerCallback The callback to remove the spinner.
+     */
+    removeLoadingSpinnerOnImageLoad: ($el, removeSpinnerCallback) => {
+        const imageUrl = $el.style.backgroundImage.match(/\((.*?)\)/)?.[1]?.replace(/(['"])/g, '');
+        if (!imageUrl) return;
+
+        const imgObject = new Image();
+
+        // Remove the spinner once the image is loaded.
+        imgObject.onload = () => removeSpinnerCallback();
+
+        // Set the image source to trigger the `onload` event.
+        imgObject.src = imageUrl;
+    },
+};

package/lib/js/utils.js

@@ -0,0 +1,159 @@
+export const Utils = {
+    /**
+     * Extends an object with properties from one or more source objects.
+     * @param {Object} [out={}] The target object to extend.
+     * @param {...Object} sources The source objects to copy properties from.
+     * @returns {Object} The extended object.
+     */
+    extend: (out = {}, ...sources) => {
+        sources.forEach((source) => {
+            if (source && typeof source === 'object') {
+                Object.keys(source).forEach((key) => {
+                    if (typeof source[key] === 'object' && !Array.isArray(source[key])) {
+                        out[key] = Utils.extend(out[key] || {}, source[key]);
+                    } else {
+                        out[key] = source[key];
+                    }
+                });
+            }
+        });
+        return out;
+    },
+
+    thrown: (error) => {
+        const DEBUG_MODE = window.JdzCaptcha && window.JdzCaptcha.debugMode;
+        if (!DEBUG_MODE) return;
+
+        if (typeof error === 'string') {
+            console.warn('JdzCaptcha ERROR:', error);
+        } else if (error instanceof Error) {
+            console.error('JdzCaptcha ERROR:', error.message);
+        } else if (typeof error === 'object') {
+            console.dir('JdzCaptcha ERROR:', error);
+        } else {
+            console.warn('JdzCaptcha ERROR:', error);
+        }
+    },
+
+    /**
+     * Triggers a custom event on a DOM element.
+     * @param {HTMLElement} $el The DOM element to trigger the event on.
+     * @param {string} event The name of the event to trigger.
+     * @param {Object} [data] The data to pass with the event.
+     */
+    trigger: ($el, event, data) => {
+        const domEvent = new CustomEvent(event, { detail: data });
+        $el.dispatchEvent(domEvent);
+    },
+
+    /**
+     * Removes all child elements from a DOM element.
+     * @param {HTMLElement} $el The DOM element to empty.
+     */
+    empty: ($el) => {
+        while ($el.firstChild) $el.removeChild($el.firstChild);
+    },
+
+    /**
+     * Calculates the offset of a DOM element relative to the document.
+     * @param {HTMLElement} $el The DOM element to calculate the offset for.
+     * @returns {Object} An object containing the top and left offsets.
+     */
+    detectOffset: ($el) => {
+        if (!$el.getClientRects().length) return { top: 0, left: 0 };
+
+        const { top, left } = $el.getBoundingClientRect();
+        const { pageYOffset, pageXOffset } = $el.ownerDocument.defaultView;
+
+        return {
+            top: top + pageYOffset,
+            left: left + pageXOffset,
+        };
+    },
+
+    /**
+     * Gets the computed width of a DOM element in pixels.
+     * @param {HTMLElement} $el The DOM element to get the width for.
+     * @returns {number} The width of the element in pixels.
+     */
+    width: ($el) => {
+        return parseFloat(getComputedStyle($el, null).width.replace('px', ''));
+    },
+
+    /** 
+     * Logs debug information to the console if debug mode is enabled.
+     * Supports multiple arguments and automatically uses `console.dir` for objects or arrays.
+     * @param {...any} args The data to log. The last argument can specify the console method (e.g., 'log', 'warn').
+     */
+    debug: (...args) => {
+        // Check if debug mode is enabled
+        const DEBUG_MODE = window.JdzCaptcha && window.JdzCaptcha.debugMode;
+        if (!DEBUG_MODE) return;
+
+        // Extract the last argument as the console method, defaulting to 'log'
+        const method = typeof args[args.length - 1] === 'string' && console[args[args.length - 1]] ? args.pop() : 'log';
+
+        args.forEach((arg) => {
+            // Check if the first argument is an object or array, and use `console.dir` if so
+            if (typeof arg === 'object' || Array.isArray(arg)) {
+                if (method === 'warn' || method === 'error') {
+                    console[method]('JdzCaptcha: ' + method.toUpperCase() + ':');
+                }
+                console.dir(arg);
+            } else {
+                if ('dir' === method) {
+                    console.log('JdzCaptcha: ' + arg);
+                }
+                else {
+                    console[method](arg);
+                }
+            }
+        });
+    },
+
+    /**
+     * Logs a warning message to the console if debug mode is enabled.
+     * @param {...any} args The data to log as a warning.
+     */
+    warn: (...args) => {
+        Utils.debug(...args, 'warn');
+    },
+
+    /**
+     * Logs an error message to the console if debug mode is enabled.
+     * @param {...any} args The data to log as an error.
+     */
+    error: (...args) => {
+        Utils.debug(...args, 'error');
+    },
+
+    /**
+     * Creates a Base64 encoded JSON string from the given data parameter.
+     * @param {Object} data The payload object to encode.
+     * @returns {string} The encoded payload.
+     */
+    createPayload: (data) => {
+        return btoa(JSON.stringify({ ...data, ts: Date.now() }));
+    },
+
+    /**
+     * Checks if a string is a valid Base64 encoded string.
+     * @param {string} str The string to check.
+     * @returns {boolean} True if the string is valid Base64, false otherwise.
+     */
+    isBase64: (str) => {
+        try {
+            return btoa(atob(str)) === str;
+        } catch (err) {
+            return false;
+        }
+    },
+
+    /**
+     * Clears a timeout if the timeout ID is valid.
+     * @param {number|null} timeoutId The timeout ID to clear.
+     */
+    clearInvalidationTimeout: (timeoutId) => {
+        if (timeoutId) clearTimeout(timeoutId);
+    },
+};