@modernman00/shared-js-lib 1.2.81 → 1.2.83

package/Http.js

@@ -1,90 +1,191 @@
 import { id, log } from './UtilityHtml.js';
 import axios from './axiosWrapper.js';
 import { redirectAfterDelay, parseErrorResponse } from './general.js';
+import { swalSuccess, swalError, swalToast } from './Alert.js';
+import { setButtonLoading, clearButtonLoading } from './ButtonLoader.js';
+import { acquireLock, releaseLock } from './FormLock.js';
+import { isOnline } from './NetworkGuard.js';
 
 /**
+ * Sends form data via POST request with automatic button spinner, SweetAlert2 alerts, and robust error handling.
+ * 
+ * Can be called with positional arguments (backward-compatible):
+ *   postFormData(url, formId, redirect, css, recaptchaToken, button)
+ * 
+ * Or with a modern config object:
+ *   postFormData(url, formId, { redirect, css, button, recaptchaToken, resetForm })
  * 
-* 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
-  * @param {Object} [options.recaptchaV3=null] - reCAPTCHA v3 configuration ({ siteKey: 'OUR_ENTERPRISE_SITE_KEY', action: 'LOGIN' }).
+ * @param {string|HTMLFormElement} formId - The ID string or DOM element of the form.
+ * @param {string|Object|null} [redirectOrOptions=null] - Redirect URL, or options configuration object.
+ * @param {string|null} [css=null] - CSS framework ('bootstrap', 'bulma', 'W3css', 'tailwind').
+ * @param {Object|null} [recaptchaToken=null] - reCAPTCHA token payload ({ token, action }).
+ * @param {string|HTMLElement|null} [button=null] - Specific button ID or element to show spinner on.
+ * @returns {Promise<Object>} Axios response object on success.
  */
-export const postFormData = async (url, formId, redirect = null, css = null, recaptchaToken = null) => {
+export const postFormData = async (
+    url,
+    formId,
+    redirectOrOptions = null,
+    css = null,
+    recaptchaToken = null,
+    button = null
+) => {
+    // Determine if third argument is an options object
+    const isOptionsObj = redirectOrOptions !== null && typeof redirectOrOptions === 'object';
+    const redirect = isOptionsObj ? redirectOrOptions.redirect : redirectOrOptions;
+    const themeCss = isOptionsObj ? (redirectOrOptions.css || css) : css;
+    const recaptcha = isOptionsObj ? (redirectOrOptions.recaptchaToken || recaptchaToken) : recaptchaToken;
+    const buttonTarget = isOptionsObj ? (redirectOrOptions.button || button) : button;
+    const shouldResetForm = isOptionsObj && typeof redirectOrOptions.resetForm === 'boolean'
+        ? redirectOrOptions.resetForm
+        : true;
+
+    // 1. Connectivity Check
+    if (!isOnline()) {
+        swalToast('No internet connection. Please check your network and retry.', 'warning', 4000);
+        return { error: true, message: 'Offline' };
+    }
 
-        const loader = id('setLoader');
-        if (loader) loader.style.display = 'block';
+    // 2. Double-Submit Protection Lock
+    const lockKey = `${url}::${typeof formId === 'string' ? formId : (formId.id || 'form')}`;
+    if (!acquireLock(lockKey)) {
+        swalToast('Please wait, a submission is already in progress...', 'warning', 2500);
+        return { error: true, message: 'In flight' };
+    }
 
-    let notificationForm = `${formId}_notification`;
-    const notificationId = id(notificationForm);
+    // Resolve form element
+    const form = typeof formId === 'string' ? id(formId) : formId;
+    if (!form) {
+        releaseLock(lockKey);
+        throw new Error('Form element not found');
+    }
 
-    
-    if (!notificationId) {
-        throw new Error('Notification element not found');
+    // Resolve button for spinner:
+    // Works with any button type: type="button", type="submit", or no type.
+    let btnEl = null;
+    if (buttonTarget) {
+        btnEl = typeof buttonTarget === 'string'
+            ? (id(buttonTarget.replace(/^#/, '')) || document.querySelector(buttonTarget))
+            : buttonTarget;
+    }
+    if (!btnEl && form instanceof HTMLFormElement) {
+        // Smart fallback priority:
+        // 1. type="submit" or input submit
+        // 2. Any button with common action classes or IDs (save, submit)
+        // 3. ANY button in the form, including type="button"
+        btnEl = form.querySelector('button[type="submit"], input[type="submit"]')
+            || form.querySelector('button#submit, button#save, button.btn-primary, button.is-primary')
+            || form.querySelector('button');
     }
-    // Cleanup previous notification styles
-    notificationId.style.display = 'none';
 
-    ['is-danger', 'is-success', 'w3-red', 'w3-green', 'bg-danger', 'bg-success'].forEach(cls => notificationId.classList.remove(cls));
+    // Set button spinner and disable button
+    if (btnEl) {
+        setButtonLoading(btnEl);
+    }
 
-    // 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    
-    // } 
+    // Optional legacy external loader
+    const loader = id('setLoader');
+    if (loader) loader.style.display = 'block';
 
-    // extract the form entries
-    // extract the form entriesËËË
-    const form = id(formId)
+    // Determine notification requirement:
+    // If called with modern options object, notification is optional (SweetAlert2 handles alerts).
+    // If called with legacy positional arguments, enforce legacy expectation if configured.
+    const formIdStr = typeof formId === 'string' ? formId : (form.id || '');
+    const notificationId = formIdStr ? id(`${formIdStr}_notification`) : null;
 
-    if (!form) {
-        throw new Error('Form element not found');
+    if (!notificationId && !isOptionsObj) {
+        throw new Error('Notification element not found');
     }
 
-    let formEntries = new FormData(form);
+    if (notificationId) {
+        notificationId.style.display = 'none';
+        ['is-danger', 'is-success', 'w3-red', 'w3-green', 'bg-danger', 'bg-success'].forEach(cls =>
+            notificationId.classList.remove(cls)
+        );
+    }
 
-    // if recaptcha token is provided, append it for v3
-    // if recaptcha token is provided, append it for v3
-    if (recaptchaToken) {
+    // Build form data
+    let formEntries;
+    if (form instanceof FormData) {
+        formEntries = form;
+    } else if (form instanceof HTMLFormElement) {
+        formEntries = new FormData(form);
+    } else {
+        formEntries = new FormData();
+    }
 
-        formEntries.append('siteKey', recaptchaToken.token);
-        formEntries.append('action', recaptchaToken.action);
+    // Append recaptcha token if present
+    if (recaptcha) {
+        formEntries.append('siteKey', recaptcha.token || '');
+        formEntries.append('action', recaptcha.action || 'SUBMIT');
     }
 
     formEntries.delete('submit');
     formEntries.delete('checkbox');
 
     const options = {
-        baseURL: '/', // Adjust to your API base URL
-        withCredentials: true, // Ensure cookies (e.g., XSRF token) are sent
+        baseURL: '/',
+        withCredentials: true,
     };
 
-    // AXIOS POST FUNCTIONALITY
     try {
         const response = await axios.post(url, formEntries, options);
-        const successClass = getNotificationClassByCSS(css || 'bulma', 'green');
+        const successClass = getNotificationClassByCSS(themeCss || 'bulma', 'green');
 
-        // check if response.data.message is an array
-        const { message } = response.data || {};
+        const { message } = response?.data || {};
         if (!message) {
             throw new Error('Response data does not contain a message');
         }
-        processFormDataAction(successClass, message, notificationId);
+
+        const successMsg = typeof message === 'string' && message.trim()
+            ? message.trim()
+            : 'Operation completed successfully.';
+
+        // Modern SweetAlert2 toast notification
+        swalSuccess(successMsg, true);
+
+        // Fallback DOM notification if element exists
+        if (notificationId) {
+            processFormDataAction(successClass, successMsg, notificationId);
+        }
 
         if (redirect) {
-            redirectAfterDelay(redirect, 2000);
+            redirectAfterDelay(redirect, 1500);
+        }
+
+        if (shouldResetForm && typeof form.reset === 'function') {
+            form.reset();
         }
 
-        form.reset();
+        return response;
 
     } catch (error) {
-        const errorClass = getNotificationClassByCSS(css || 'bulma', 'red');
-        const ErrorMsg = parseErrorResponse(error);
-        processFormDataAction(errorClass, ErrorMsg, notificationId);
+        const errorClass = getNotificationClassByCSS(themeCss || 'bulma', 'red');
+        const errorMsg = parseErrorResponse(error) || 'An error occurred during submission.';
+
+        // Modern SweetAlert2 error modal/toast
+        swalError(errorMsg, true);
+
+        // Fallback DOM notification if element exists
+        if (notificationId) {
+            processFormDataAction(errorClass, errorMsg, notificationId);
+        }
+
+        return { error: true, message: errorMsg, rawError: error };
+
+    } finally {
+        // Release lock
+        releaseLock(lockKey);
+
+        // Guaranteed spinner cleanup
+        if (btnEl) {
+            clearButtonLoading(btnEl);
+        }
+        if (loader) {
+            loader.style.display = 'none';
+            loader.classList.remove('loader');
+        }
     }
 };
 
@@ -167,11 +268,14 @@ export const getApiData = async (URL, token = null) => {
             headers: {
                 "X-Requested-With": "XMLHttpRequest",
                 "Content-Type": "application/json",
-                Accept: "application/json",
-                ...(token && { Authorization: `Bearer ${token}` }), // only add if token exists
+                Accept: "application/json"
             },
         };
 
+        if (token) {
+            config.headers['Authorization'] = `Bearer ${token}`;
+        }
+
         const response = await axios.get(URL, config);
         return response.data;
     } catch (error) {
@@ -208,11 +312,14 @@ export const getMultipleApiData = async (url1, url2, token = null) => {
             headers: {
                 "X-Requested-With": "XMLHttpRequest",
                 "Content-Type": "application/json",
-                Accept: "application/json",
-                ...(token && { Authorization: `Bearer ${token}` }), // add only if token exists
+                Accept: "application/json"
             },
         };
 
+        if (token) {
+            config.headers['Authorization'] = `Bearer ${token}`;
+        }
+
         // run requests in parallel
         const [res1, res2] = await axios.all([
             axios.get(url1, config),

package/InlineValidation.js

@@ -0,0 +1,78 @@
+'use strict';
+import { id } from './UtilityHtml.js';
+
+const VALID_EMAIL_REGEX = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,6}$/;
+
+/**
+ * Attaches real-time validation and micro-feedback to form fields on blur/input.
+ * 
+ * @param {string|HTMLElement} fieldId - ID or DOM element of the input
+ * @param {Object} options
+ * @param {'email'|'password'|'required'|'custom'} [options.type='required']
+ * @param {(value: string) => { valid: boolean, message?: string }} [options.validator]
+ * @param {string} [options.errorColor='#e74c3c']
+ * @param {string} [options.successColor='#27ae60']
+ */
+export const attachInlineValidation = (fieldId, options = {}) => {
+  if (typeof document === 'undefined') return;
+
+  const el = typeof fieldId === 'string' ? id(fieldId) : fieldId;
+  if (!el) return;
+
+  const {
+    type = 'required',
+    validator = null,
+    errorColor = '#e74c3c',
+    successColor = '#27ae60'
+  } = options;
+
+  const errorElId = `${el.id || el.name}_error`;
+  let feedbackEl = id(errorElId);
+
+  const validate = () => {
+    const val = (el.value || '').trim();
+    let isValid = true;
+    let message = '';
+
+    if (typeof validator === 'function') {
+      const result = validator(val);
+      isValid = !!result.valid;
+      message = result.message || '';
+    } else if (type === 'required') {
+      isValid = val.length > 0;
+      message = isValid ? '' : 'This field is required.';
+    } else if (type === 'email') {
+      isValid = VALID_EMAIL_REGEX.test(val);
+      message = isValid ? '' : 'Please enter a valid email address.';
+    } else if (type === 'password') {
+      isValid = val.length >= 8;
+      message = isValid ? '' : 'Password must be at least 8 characters long.';
+    }
+
+    // Apply micro-feedback styling
+    if (isValid) {
+      el.style.borderColor = val ? successColor : '';
+      if (feedbackEl) {
+        feedbackEl.innerHTML = '';
+        feedbackEl.style.display = 'none';
+      }
+    } else {
+      el.style.borderColor = errorColor;
+      if (feedbackEl) {
+        feedbackEl.style.display = 'block';
+        feedbackEl.style.color = errorColor;
+        feedbackEl.innerHTML = message;
+      }
+    }
+
+    return isValid;
+  };
+
+  el.addEventListener('blur', validate);
+  el.addEventListener('input', () => {
+    // Clear error border while user is re-typing
+    if (el.style.borderColor === errorColor) {
+      validate();
+    }
+  });
+};

package/NetworkGuard.js

@@ -0,0 +1,54 @@
+'use strict';
+import { swalToast } from './Alert.js';
+
+let isListening = false;
+let wasOffline = false;
+
+/**
+ * Checks if the browser is currently online.
+ * @returns {boolean}
+ */
+export const isOnline = () => {
+  return typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
+    ? navigator.onLine
+    : true;
+};
+
+/**
+ * Attaches automatic online/offline listeners to show clean toasts.
+ * Safe to call multiple times (idempotent).
+ */
+export const setupNetworkListeners = () => {
+  if (typeof window === 'undefined' || isListening) return;
+  isListening = true;
+
+  window.addEventListener('offline', () => {
+    wasOffline = true;
+    swalToast('Internet connection lost. You are offline.', 'warning', 4000);
+  });
+
+  window.addEventListener('online', () => {
+    if (wasOffline) {
+      swalToast('Connection restored. Back online!', 'success', 3000);
+      wasOffline = false;
+    }
+  });
+};
+
+/**
+ * Wraps an async request to check connectivity before dispatching.
+ * 
+ * @param {() => Promise<any>} requestFn
+ * @param {string} [offlineMsg='No internet connection. Please check your network.']
+ * @returns {Promise<any>}
+ */
+export const withNetworkGuard = async (
+  requestFn,
+  offlineMsg = 'No internet connection. Please check your network.'
+) => {
+  if (!isOnline()) {
+    swalToast(offlineMsg, 'warning', 4000);
+    throw new Error(offlineMsg);
+  }
+  return await requestFn();
+};

package/OfflineQueue.js

@@ -0,0 +1,278 @@
+/**
+ * 📦 OfflineQueue — Resilient IndexedDB Offline Request Queue
+ * Part of @modernman00/shared-js-lib
+ *
+ * Implements the Deloitte Digital & BRATS-approved enterprise architecture:
+ * 1. UUIDv4 Idempotency Key injection ('X-Idempotency-Key') to eliminate duplicate writes
+ * 2. Strict Security Blacklist: Refuses to store credentials, passwords, or /auth/* /admin/* requests
+ * 3. Kieran Memory Cap: 2MB max per payload, 30 items max queue depth
+ * 4. 24-Hour automatic request expiration
+ * 5. Automatic replay on 'online' event with fresh CSRF token header
+ */
+
+export class OfflineQueue {
+  constructor(options = {}) {
+    this.appName = options.appName || (typeof window !== 'undefined' ? window.location.hostname.replace(/[^a-zA-Z0-9]/g, '_') : 'app');
+    this.dbName = options.dbName || `${this.appName}_offline_db`;
+    this.storeName = 'offline_requests';
+    this.dbVersion = 1;
+    this.maxItems = options.maxItems || 30;
+    this.maxPayloadBytes = options.maxPayloadBytes || 2 * 1024 * 1024; // 2MB cap
+    this.maxAgeMs = options.maxAgeMs || 24 * 60 * 60 * 1000; // 24 hours
+    this.db = null;
+    this.isReplaying = false;
+
+    // Security Blacklist (never cache credentials/auth/passwords offline)
+    this.blacklistPatterns = [
+      /\/auth\//i,
+      /\/admin\//i,
+      /\/login/i,
+      /\/logout/i,
+      /\/signout/i,
+      /\/password/i,
+      /\/2fa/i,
+      /\/totp/i
+    ];
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('online', () => this.replay());
+    }
+  }
+
+  /**
+   * Generates standard RFC4122 v4 UUID for request idempotency
+   */
+  static generateUUID() {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+      const r = (Math.random() * 16) | 0;
+      const v = c === 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  }
+
+  /**
+   * Initializes or returns the open IndexedDB instance
+   */
+  async getDB() {
+    if (this.db) return this.db;
+    if (typeof indexedDB === 'undefined') {
+      throw new Error('IndexedDB is not supported in this browser environment');
+    }
+
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.dbVersion);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve(this.db);
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(this.storeName)) {
+          const store = db.createObjectStore(this.storeName, { keyPath: 'id', autoIncrement: true });
+          store.createIndex('timestamp', 'timestamp', { unique: false });
+          store.createIndex('idempotencyKey', 'idempotencyKey', { unique: true });
+        }
+      };
+    });
+  }
+
+  /**
+   * Check if URL matches the security blacklist
+   */
+  isBlacklisted(url) {
+    if (!url || typeof url !== 'string') return true;
+    return this.blacklistPatterns.some(pattern => pattern.test(url));
+  }
+
+  /**
+   * Enqueues an outgoing request for offline storage and later replay
+   */
+  async enqueue(requestData) {
+    const { url, method = 'POST', headers = {}, body = null } = requestData;
+
+    // Security Gate
+    if (this.isBlacklisted(url)) {
+      console.warn(`[OfflineQueue] Blocked security-sensitive request from offline storage: ${url}`);
+      return false;
+    }
+
+    // Payload Size Guard (Kieran Memory Protection)
+    const serializedBody = typeof body === 'string' ? body : JSON.stringify(body || {});
+    const bodySize = typeof Blob !== 'undefined' ? new Blob([serializedBody]).size : serializedBody.length;
+    if (bodySize > this.maxPayloadBytes) {
+      console.warn(`[OfflineQueue] Request payload exceeds 2MB memory cap (${bodySize} bytes). Dropping.`);
+      if (typeof window !== 'undefined' && window.dispatchEvent) {
+        window.dispatchEvent(new CustomEvent('offlinequeue:payload-too-large', { detail: { url } }));
+      }
+      return false;
+    }
+
+    // Filter headers to strip sensitive authorization tokens from plaintext IndexedDB
+    const safeHeaders = {};
+    const headerEntries = headers.entries ? Array.from(headers.entries()) : Object.entries(headers || {});
+    for (const [key, value] of headerEntries) {
+      const lower = key.toLowerCase();
+      if (lower !== 'authorization' && lower !== 'cookie' && lower !== 'set-cookie') {
+        safeHeaders[key] = value;
+      }
+    }
+
+    const idempotencyKey = safeHeaders['x-idempotency-key'] || safeHeaders['X-Idempotency-Key'] || OfflineQueue.generateUUID();
+    safeHeaders['X-Idempotency-Key'] = idempotencyKey;
+
+    const db = await this.getDB();
+
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(this.storeName, 'readwrite');
+      const store = tx.objectStore(this.storeName);
+
+      // Check max queue length
+      const countReq = store.count();
+      countReq.onsuccess = () => {
+        if (countReq.result >= this.maxItems) {
+          console.warn(`[OfflineQueue] Queue reached max depth (${this.maxItems}). Dropping oldest request.`);
+          const openCursor = store.openCursor();
+          openCursor.onsuccess = (e) => {
+            const cursor = e.target.result;
+            if (cursor) {
+              store.delete(cursor.primaryKey);
+            }
+          };
+        }
+
+        const item = {
+          url,
+          method: method.toUpperCase(),
+          headers: safeHeaders,
+          body: serializedBody,
+          idempotencyKey,
+          timestamp: Date.now()
+        };
+
+        store.add(item);
+      };
+
+      tx.oncomplete = () => {
+        console.log(`[OfflineQueue] Request queued successfully with Idempotency Key: ${idempotencyKey}`);
+        if (typeof window !== 'undefined' && window.dispatchEvent) {
+          window.dispatchEvent(new CustomEvent('offlinequeue:enqueued', { detail: { url, idempotencyKey } }));
+        }
+        resolve(idempotencyKey);
+      };
+      tx.onerror = () => reject(tx.error);
+    });
+  }
+
+  /**
+   * Replays all stored offline requests sequentially
+   */
+  async replay() {
+    if (this.isReplaying || (typeof navigator !== 'undefined' && !navigator.onLine)) {
+      return;
+    }
+
+    this.isReplaying = true;
+    const db = await this.getDB();
+
+    try {
+      const items = await new Promise((resolve, reject) => {
+        const tx = db.transaction(this.storeName, 'readonly');
+        const store = tx.objectStore(this.storeName);
+        const req = store.getAll();
+        req.onsuccess = () => resolve(req.result || []);
+        req.onerror = () => reject(req.error);
+      });
+
+      if (items.length === 0) {
+        this.isReplaying = false;
+        return;
+      }
+
+      console.log(`[OfflineQueue] Network restored. Replaying ${items.length} queued request(s)...`);
+
+      // Refresh CSRF Token if available in DOM
+      let currentCsrf = null;
+      if (typeof document !== 'undefined') {
+        const metaCsrf = document.querySelector('meta[name="csrf-token"]') || document.querySelector('meta[name="csrf"]');
+        if (metaCsrf) currentCsrf = metaCsrf.getAttribute('content');
+      }
+
+      const now = Date.now();
+
+      for (const item of items) {
+        // Expiration check (24h)
+        if (now - item.timestamp > this.maxAgeMs) {
+          console.warn(`[OfflineQueue] Request to ${item.url} expired (>24h). Removing from queue.`);
+          await this.deleteItem(item.id);
+          continue;
+        }
+
+        const headers = { ...item.headers };
+        if (currentCsrf) {
+          headers['X-CSRF-TOKEN'] = currentCsrf;
+        }
+
+        try {
+          const response = await fetch(item.url, {
+            method: item.method,
+            headers,
+            body: item.body
+          });
+
+          // If server successfully processed (2xx or 4xx business error), delete from queue
+          // (4xx means invalid input or already processed, no point in infinite retry loop)
+          if (response.ok || (response.status >= 400 && response.status < 500)) {
+            console.log(`[OfflineQueue] Replayed ${item.url} -> Status ${response.status}`);
+            await this.deleteItem(item.id);
+          } else {
+            console.warn(`[OfflineQueue] Server returned ${response.status} for ${item.url}. Will retry later.`);
+            break; // Stop replay if server is returning 5xx errors
+          }
+        } catch (networkErr) {
+          console.warn(`[OfflineQueue] Network still unstable during replay: ${networkErr.message}`);
+          break; // Stop loop and wait for next online event
+        }
+      }
+    } catch (err) {
+      console.error('[OfflineQueue] Replay cycle error:', err);
+    } finally {
+      this.isReplaying = false;
+      if (typeof window !== 'undefined' && window.dispatchEvent) {
+        window.dispatchEvent(new CustomEvent('offlinequeue:replay-complete'));
+      }
+    }
+  }
+
+  /**
+   * Deletes a single item by primary key ID
+   */
+  async deleteItem(id) {
+    const db = await this.getDB();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(this.storeName, 'readwrite');
+      const store = tx.objectStore(this.storeName);
+      store.delete(id);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+    });
+  }
+
+  /**
+   * Clears all queued items
+   */
+  async clear() {
+    const db = await this.getDB();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(this.storeName, 'readwrite');
+      const store = tx.objectStore(this.storeName);
+      store.clear();
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+    });
+  }
+}