@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/vault/qrDecode.js

@@ -0,0 +1,257 @@
+/**
+ * Reading a QR code, from whichever surface the user has to hand.
+ *
+ * Two entry points, both of which come back with the decoded *text* and leave
+ * every judgement about what that text means to the caller — `parseOtpAuthUri`
+ * in vaultHelpers.js is the thing that decides whether a QR was an
+ * authenticator setup code, and it already produces the sentences the user
+ * reads.
+ *
+ * Nothing here is imported at module load. `jsqr` is ~360 KB of decoder that
+ * only matters once someone actually points a camera at something, so it is
+ * pulled in with `await import('jsqr')` on first use: a consumer that never
+ * opens the vault form never ships it. The promise is cached, so the second
+ * frame does not pay for the import again.
+ *
+ * Where the browser has `BarcodeDetector` — Chrome and Edge on desktop and
+ * Android — that is tried first: it is the platform's own decoder, it is
+ * faster than anything in JavaScript, and it costs no download at all. Safari
+ * (so every iPad) does not have it, which is exactly why the jsQR fallback is
+ * not optional.
+ */
+
+/**
+ * The long edge, in pixels, an image is scaled down to before decoding.
+ *
+ * A modern phone screenshot is 3-4x this, and jsQR's cost is linear in pixel
+ * count while its accuracy is not — a 4032px screenshot takes seconds to scan
+ * and finds nothing a 1280px one misses. Video frames are already smaller
+ * than this and pass through untouched.
+ */
+export const MAX_DECODE_EDGE = 1280;
+
+let jsQrPromise = null;
+
+/** The lazy `jsqr` import, resolved once and reused. */
+const loadJsQr = () => {
+    if (!jsQrPromise) {
+        jsQrPromise = import('jsqr').then((module) => {
+            // The package is a UMD bundle, so what a namespace import puts on
+            // `default` depends on the loader. Take the first thing that is
+            // actually callable rather than guessing.
+            const candidates = [module?.default?.default, module?.default, module?.jsQR, module];
+
+            const found = candidates.find((one) => typeof one === 'function');
+
+            if (!found) throw new Error('jsQR did not load.');
+
+            return found;
+        });
+    }
+
+    return jsQrPromise;
+};
+
+/**
+ * Decode raw pixels.
+ *
+ * Takes anything shaped like an `ImageData` — `{ data, width, height }` — so
+ * this is testable in Node against a PNG decoded by pngjs, with no DOM at all
+ * (tests/vaultQr.test.mjs).
+ *
+ * Two passes. The first assumes dark-on-light, which is what a QR code
+ * printed by any provider actually is, and is roughly twice as fast. Only if
+ * that finds nothing is the inverted reading tried as well, which catches the
+ * screenshots taken in a dark-mode authenticator app.
+ *
+ * Returns the decoded text, or `null` when there is no QR code in the pixels.
+ * Async because the decoder itself is loaded on demand — see the file header.
+ */
+export const decodeImageData = async (imageData) => {
+    if (!imageData?.data || !imageData.width || !imageData.height) return null;
+
+    const jsQR = await loadJsQr();
+    const { data, width, height } = imageData;
+
+    for (const inversionAttempts of ['dontInvert', 'attemptBoth']) {
+        let result = null;
+
+        try {
+            result = jsQR(data, width, height, { inversionAttempts });
+        } catch {
+            // A malformed buffer is a "no code here", not a crash: this runs
+            // on every video frame.
+            return null;
+        }
+
+        const text = result?.data;
+
+        if (typeof text === 'string' && text !== '') return text;
+    }
+
+    return null;
+};
+
+/** The natural pixel size of a video, image or canvas. */
+const sourceSize = (source) => {
+    const width =
+        source?.videoWidth || source?.naturalWidth || source?.width || 0;
+    const height =
+        source?.videoHeight || source?.naturalHeight || source?.height || 0;
+
+    return { width, height };
+};
+
+let scratchCanvas = null;
+
+/**
+ * One canvas, reused.
+ *
+ * The scanner draws four frames a second for as long as it is open; a fresh
+ * canvas per frame is garbage the GC then has to chase while the same loop is
+ * trying to hold 250ms.
+ */
+const getScratchCanvas = (width, height) => {
+    if (typeof document === 'undefined') return null;
+
+    if (!scratchCanvas) scratchCanvas = document.createElement('canvas');
+
+    if (scratchCanvas.width !== width) scratchCanvas.width = width;
+    if (scratchCanvas.height !== height) scratchCanvas.height = height;
+
+    return scratchCanvas;
+};
+
+/** Has this browser got the platform decoder? */
+const hasBarcodeDetector = () =>
+    typeof window !== 'undefined' && 'BarcodeDetector' in window;
+
+let barcodeDetector = null;
+let barcodeDetectorFailed = false;
+
+const getBarcodeDetector = () => {
+    if (barcodeDetectorFailed || !hasBarcodeDetector()) return null;
+
+    if (!barcodeDetector) {
+        try {
+            // eslint-disable-next-line no-undef
+            barcodeDetector = new window.BarcodeDetector({ formats: ['qr_code'] });
+        } catch {
+            // Present but without qr_code support, which is allowed by the
+            // spec. Never ask again.
+            barcodeDetectorFailed = true;
+
+            return null;
+        }
+    }
+
+    return barcodeDetector;
+};
+
+/**
+ * Decode a `<video>` frame, an `<img>`, or a `<canvas>`.
+ *
+ * `BarcodeDetector` first where it exists, then jsQR over the pixels drawn to
+ * a canvas — downscaled to `MAX_DECODE_EDGE` on the long edge, which is what
+ * keeps a phone screenshot from taking several seconds.
+ *
+ * Returns the decoded text, or `null`. Never throws: the caller is a render
+ * loop or a file picker, and neither has anywhere useful to put an exception.
+ */
+export const decodeFromSource = async (source) => {
+    if (!source) return null;
+
+    const detector = getBarcodeDetector();
+
+    if (detector) {
+        try {
+            const codes = await detector.detect(source);
+            const text = codes?.[0]?.rawValue;
+
+            if (typeof text === 'string' && text !== '') return text;
+        } catch {
+            // Some builds throw on a video that has not painted a frame yet,
+            // and Firefox throws for the whole API. Fall through to jsQR
+            // rather than treating it as "no code".
+        }
+    }
+
+    const { width, height } = sourceSize(source);
+
+    if (!width || !height) return null;
+
+    const scale = Math.min(1, MAX_DECODE_EDGE / Math.max(width, height));
+    const targetWidth = Math.max(1, Math.round(width * scale));
+    const targetHeight = Math.max(1, Math.round(height * scale));
+
+    const canvas = getScratchCanvas(targetWidth, targetHeight);
+
+    if (!canvas) return null;
+
+    // `willReadFrequently` is the difference between a GPU-backed canvas that
+    // stalls on every `getImageData` and a software one that does not.
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+
+    if (!context) return null;
+
+    try {
+        context.drawImage(source, 0, 0, targetWidth, targetHeight);
+
+        return await decodeImageData(
+            context.getImageData(0, 0, targetWidth, targetHeight)
+        );
+    } catch {
+        // A cross-origin image taints the canvas and `getImageData` throws.
+        return null;
+    }
+};
+
+/**
+ * Decode a `File` or `Blob` — the upload, paste and drop paths.
+ *
+ * Wraps the blob in an `<img>` because that is the one decoder path available
+ * everywhere; `createImageBitmap` would be tidier but Safari's support for it
+ * with SVG and some PNGs is still uneven, and this runs on an iPad.
+ */
+export const decodeFromBlob = async (blob) => {
+    if (!blob || typeof document === 'undefined' || typeof URL === 'undefined') {
+        return null;
+    }
+
+    const url = URL.createObjectURL(blob);
+
+    try {
+        const image = await new Promise((resolve, reject) => {
+            const element = new window.Image();
+
+            element.onload = () => resolve(element);
+            element.onerror = () => reject(new Error('not an image'));
+            element.src = url;
+        });
+
+        return await decodeFromSource(image);
+    } catch {
+        return null;
+    } finally {
+        URL.revokeObjectURL(url);
+    }
+};
+
+/** The first image on a paste or drop, or null if there wasn't one. */
+export const imageFromTransfer = (transfer) => {
+    if (!transfer) return null;
+
+    const items = transfer.items ? Array.from(transfer.items) : [];
+
+    for (const item of items) {
+        if (item.kind === 'file' && String(item.type).startsWith('image/')) {
+            const file = item.getAsFile();
+
+            if (file) return file;
+        }
+    }
+
+    const files = transfer.files ? Array.from(transfer.files) : [];
+
+    return files.find((file) => String(file.type).startsWith('image/')) || null;
+};

package/src/components/vault/useDebouncedValue.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * A value that lags behind by `delay` ms once it stops changing.
+ *
+ * Used to keep a keystroke from becoming a request. The same shape as the
+ * debounce inside QuickAction, kept here so the vault's two search boxes
+ * share one implementation.
+ */
+const useDebouncedValue = (value, delay = 250) => {
+    const [debounced, setDebounced] = useState(value);
+
+    useEffect(() => {
+        const handle = setTimeout(() => setDebounced(value), delay);
+
+        return () => clearTimeout(handle);
+    }, [value, delay]);
+
+    return debounced;
+};
+
+export default useDebouncedValue;

package/src/components/vault/useVaultReveal.js

@@ -0,0 +1,160 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+import CustomFetch from '../Fetch';
+import { resolveVaultEndpoints } from './vaultEndpoints';
+
+/**
+ * The reveal flow, in one place.
+ *
+ * Revealing a stored password can come back 423 — "confirm your CRM password
+ * first" — which is a step in the flow, not a failure: the backend wants proof
+ * the person at the keyboard is the person who logged in, and grants a short
+ * window once they give it. Both surfaces that reveal a password (the header
+ * quick search and the manager table) need identical behaviour, so it lives
+ * here rather than twice.
+ *
+ * `reveal(id)` returns a promise for the password. When a confirmation is
+ * needed that promise does not settle: `confirmRequired` flips true, the
+ * caller draws the panel, and a successful `confirm()` retries the original
+ * reveal and settles the promise the caller is already awaiting. Nothing
+ * upstream has to know a detour happened.
+ *
+ * The 423 is passed to CustomFetch as a silent status so it does not toast an
+ * error at somebody who has done nothing wrong; every other status keeps the
+ * library's normal error handling.
+ */
+const useVaultReveal = (endpoints) => {
+    // Memoised, or every render produces a fresh routes object, which changes
+    // the identity of `request` and `reveal`, which re-runs every effect and
+    // callback downstream that depends on them.
+    const routes = useMemo(() => resolveVaultEndpoints(endpoints), [endpoints]);
+
+    const [confirmRequired, setConfirmRequired] = useState(false);
+    const [confirmMessage, setConfirmMessage] = useState('');
+    const [confirmError, setConfirmError] = useState('');
+    const [confirmPending, setConfirmPending] = useState(false);
+    const [revealingId, setRevealingId] = useState(null);
+
+    // The reveal that was interrupted, held until the confirmation resolves.
+    const pendingRef = useRef(null);
+
+    const request = useCallback(
+        (entryId) =>
+            new Promise((resolve, reject) => {
+                setRevealingId(entryId);
+
+                CustomFetch(
+                    routes.reveal(entryId),
+                    'POST',
+                    {},
+                    (result) => {
+                        setRevealingId(null);
+                        resolve(result?.password ?? '');
+                    },
+                    null,
+                    // 423 is the confirm-first handshake, handled below.
+                    { silentStatuses: [423] }
+                ).catch((error) => {
+                    setRevealingId(null);
+                    reject(error);
+                });
+            }),
+        [routes]
+    );
+
+    const reveal = useCallback(
+        (entryId) =>
+            request(entryId).catch((error) => {
+                if (error?.status !== 423) throw error;
+
+                // Park the caller's promise and ask for the password. The
+                // caller keeps awaiting; `confirm` settles this for them.
+                return new Promise((resolve, reject) => {
+                    pendingRef.current = { entryId, resolve, reject };
+                    setConfirmMessage(
+                        error.data?.message ||
+                            'Confirm your CRM password to reveal this.'
+                    );
+                    setConfirmError('');
+                    setConfirmRequired(true);
+                });
+            }),
+        [request]
+    );
+
+    const cancelConfirm = useCallback(() => {
+        const pending = pendingRef.current;
+
+        pendingRef.current = null;
+        setConfirmRequired(false);
+        setConfirmError('');
+        setConfirmMessage('');
+        setConfirmPending(false);
+
+        // A cancelled reveal is a cancellation, not an error: it carries a
+        // flag so the caller can drop it without drawing anything.
+        if (pending) {
+            const cancelled = new Error('Reveal cancelled.');
+            cancelled.cancelled = true;
+            pending.reject(cancelled);
+        }
+    }, []);
+
+    const confirm = useCallback(
+        (password) => {
+            if (confirmPending) return;
+
+            const pending = pendingRef.current;
+
+            setConfirmPending(true);
+            setConfirmError('');
+
+            CustomFetch(
+                routes.confirm,
+                'POST',
+                { password },
+                () => {
+                    setConfirmPending(false);
+                    setConfirmRequired(false);
+                    setConfirmMessage('');
+                    pendingRef.current = null;
+
+                    if (!pending) return;
+
+                    // Straight back to what the user actually asked for.
+                    request(pending.entryId).then(pending.resolve, pending.reject);
+                },
+                null,
+                // Both of these are answers, not errors: a wrong password and
+                // a rate limit each get their own line in the panel.
+                { silentStatuses: [422, 429] }
+            ).catch((error) => {
+                setConfirmPending(false);
+
+                if (error?.status === 422) {
+                    setConfirmError('That password is not correct.');
+                } else if (error?.status === 429) {
+                    setConfirmError('Too many attempts — wait a minute.');
+                } else {
+                    // Anything else was already toasted by CustomFetch; the
+                    // panel stays open so the attempt is not simply lost.
+                    setConfirmError('That did not work. Try again.');
+                }
+            });
+        },
+        [confirmPending, request, routes]
+    );
+
+    return {
+        reveal,
+        revealingId,
+        confirmRequired,
+        confirmMessage,
+        confirmError,
+        confirmPending,
+        confirm,
+        cancelConfirm,
+    };
+};
+
+export default useVaultReveal;

package/src/components/vault/vaultClipboard.js

@@ -0,0 +1,33 @@
+/**
+ * Copying, and what to do when the browser will not.
+ *
+ * `navigator.clipboard` needs a secure context, so it is simply absent on any
+ * deployment still served over plain http — and a vault whose copy button
+ * does nothing, silently, is worse than one that never had a copy button. The
+ * caller uses the `false` return to fall back to showing the value in a
+ * read-only input the user can select by hand.
+ */
+
+/** True when the value reached the clipboard. Never throws. */
+export const copyText = async (value) => {
+    const text = String(value ?? '');
+
+    if (text === '') return false;
+
+    const clipboard = globalThis.navigator?.clipboard;
+
+    if (!clipboard || typeof clipboard.writeText !== 'function') return false;
+
+    try {
+        await clipboard.writeText(text);
+        return true;
+    } catch {
+        // Denied permission, or a document that was not focused at the moment
+        // of the write. Either way the caller shows the value instead.
+        return false;
+    }
+};
+
+/** Whether a copy button can work at all, for deciding what to render. */
+export const canCopy = () =>
+    typeof globalThis.navigator?.clipboard?.writeText === 'function';

package/src/components/vault/vaultEndpoints.js

@@ -0,0 +1,40 @@
+/**
+ * The URLs the vault talks to.
+ *
+ * Every vault component takes an `endpoints` object rather than a base string,
+ * so a consumer can move one route without reproducing the other eleven. The
+ * defaults are the CRM's routes under `/ajax/vault`; `makeVaultEndpoints` is
+ * there for the common case of moving all of them at once.
+ *
+ * Pure and React-free so `node --test` can import it.
+ */
+
+export const makeVaultEndpoints = (base = '/ajax/vault') => ({
+    list: base,
+    show: (id) => `${base}/${id}`,
+    create: base,
+    update: (id) => `${base}/${id}`,
+    destroy: (id) => `${base}/${id}`,
+    restore: (id) => `${base}/${id}/restore`,
+    confirm: `${base}/confirm-password`,
+    reveal: (id) => `${base}/${id}/reveal`,
+    otp: (id) => `${base}/${id}/otp`,
+    logCopy: (id) => `${base}/${id}/log`,
+    entryLog: (id) => `${base}/${id}/log`,
+    globalLog: `${base}/log`,
+});
+
+export const DEFAULT_ENDPOINTS = makeVaultEndpoints();
+
+/**
+ * Merge a partial `endpoints` prop over the defaults.
+ *
+ * A consumer overriding one route must not lose the other eleven, and passing
+ * nothing at all must land exactly on DEFAULT_ENDPOINTS.
+ */
+export const resolveVaultEndpoints = (endpoints) => ({
+    ...DEFAULT_ENDPOINTS,
+    ...(endpoints || {}),
+});
+
+export default DEFAULT_ENDPOINTS;

package/src/components/vault/vaultFit.js

@@ -0,0 +1,116 @@
+/**
+ * How many rows fit, and which page to land on when that number changes.
+ *
+ * The vault's list is not a document that scrolls: the user asked to see the
+ * entries *and* the pager without moving anything, so the page size follows
+ * the window rather than the other way round. That turns "25 entries" into a
+ * measurement, and a measurement wants a pure function it can be tested
+ * against — the components only feed it numbers.
+ *
+ * Pure and React-free so `node --test` can import it.
+ */
+
+/**
+ * Floors and ceilings on the computed page size.
+ *
+ * MIN keeps a short window (or a mis-measurement) from asking the server for
+ * one row at a time; MAX is VaultController::MAX_PER_PAGE, which silently
+ * clamps anything larger — asking for more would quietly return fewer than the
+ * caller then tries to draw.
+ */
+export const MIN_ROWS = 5;
+export const MAX_ROWS = 100;
+
+/**
+ * The number of rows that fit in the space left below the list's top edge.
+ *
+ * Every argument is px. `available` is the distance from the top of the list
+ * container to the bottom of the useful area (see `useAvailableHeight`), out
+ * of which the pager and any fixed furniture inside the container — a header
+ * row — must be paid before rows can be counted.
+ *
+ * Returns `null` rather than a guess when it cannot measure: no height yet, or
+ * a row height of zero because nothing has rendered. A caller that gets `null`
+ * keeps whatever page size it is already using, which is why the list does not
+ * flash a five-row page on first paint.
+ *
+ * @param {object} options
+ * @param {number} [options.available]    px from the container's top to the
+ *                                        bottom of the usable area.
+ * @param {number} [options.pagerHeight]  px the pager occupies, gap included.
+ * @param {number} [options.rowHeight]    px one row occupies.
+ * @param {number} [options.chrome]       px of fixed furniture inside the
+ *                                        container (the header row).
+ * @param {number} [options.min]          floor, default MIN_ROWS.
+ * @param {number} [options.max]          ceiling, default MAX_ROWS.
+ * @returns {number|null}
+ */
+export const fitRowsToHeight = ({
+    available,
+    pagerHeight = 0,
+    rowHeight,
+    chrome = 0,
+    min = MIN_ROWS,
+    max = MAX_ROWS,
+} = {}) => {
+    // `Number(null)` is 0, and 0 is a perfectly finite number of pixels — so
+    // an unmeasured height would otherwise read as "no room" and clamp to the
+    // floor rather than saying it does not know.
+    const height = available == null || available === '' ? NaN : Number(available);
+    const row = rowHeight == null || rowHeight === '' ? NaN : Number(rowHeight);
+
+    if (!Number.isFinite(height) || !Number.isFinite(row) || row <= 0) {
+        return null;
+    }
+
+    const pager = Number.isFinite(Number(pagerHeight)) ? Number(pagerHeight) : 0;
+    const furniture = Number.isFinite(Number(chrome)) ? Number(chrome) : 0;
+
+    const forRows = height - pager - furniture;
+
+    // A low floor and a high ceiling the wrong way round would otherwise make
+    // the clamp depend on which one is applied first.
+    const low = Number.isFinite(Number(min)) ? Math.max(1, Number(min)) : MIN_ROWS;
+    const high = Number.isFinite(Number(max)) ? Number(max) : MAX_ROWS;
+    const ceiling = Math.max(low, high);
+
+    // Floor, not round: half a row showing is the scrollbar this exists to
+    // avoid.
+    const fits = Math.floor(forRows / row);
+
+    return Math.min(ceiling, Math.max(low, fits));
+};
+
+/**
+ * The page that still contains a given entry once the page size changes.
+ *
+ * Resizing the window must not teleport the reader: the entry at the top of
+ * the page they were on stays on screen, which means recomputing the page
+ * number from that entry's index in the whole result set.
+ *
+ * @param {number} firstIndex zero-based index of the first entry on the page
+ *                            the user is looking at.
+ * @param {number} perPage    the new page size.
+ * @returns {number} a 1-based page number, never below 1.
+ */
+export const pageForIndex = (firstIndex, perPage) => {
+    const index = Number(firstIndex);
+    const size = Number(perPage);
+
+    if (!Number.isFinite(size) || size <= 0) return 1;
+    if (!Number.isFinite(index) || index <= 0) return 1;
+
+    return Math.floor(index / size) + 1;
+};
+
+/** The zero-based index of the first entry on `page` at `perPage` a page. */
+export const firstIndexOfPage = (page, perPage) => {
+    const number = Number(page);
+    const size = Number(perPage);
+
+    if (!Number.isFinite(number) || !Number.isFinite(size)) return 0;
+
+    return Math.max(0, (Math.max(1, number) - 1) * Math.max(1, size));
+};
+
+export default fitRowsToHeight;