@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/vault/PasswordGenerator.jsx

@@ -0,0 +1,145 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { RefreshCw } from 'lucide-react';
+
+import styles from '../styles/Vault.module.scss';
+import { generatePassword, scorePassword } from './vaultHelpers';
+
+const MIN_LENGTH = 12;
+const MAX_LENGTH = 40;
+
+/**
+ * The generator popover behind the password field's "Generate" button.
+ *
+ * Shows the candidate before it is accepted, because a generated password
+ * that lands straight in the field gives no chance to reject one full of
+ * characters this particular system will not take. Every option regenerates
+ * immediately, so the effect of a checkbox is visible rather than described.
+ *
+ * All the actual work is in `generatePassword`; this is its dial.
+ */
+const PasswordGenerator = ({ onUse, onClose }) => {
+    const [options, setOptions] = useState({
+        length: 20,
+        uppercase: true,
+        digits: true,
+        symbols: true,
+        // The checkbox is phrased as "avoid look-alikes", which is the
+        // inverse of the generator's `ambiguous` flag.
+        avoidAmbiguous: true,
+    });
+    const [candidate, setCandidate] = useState('');
+
+    const regenerate = useCallback((next) => {
+        setCandidate(
+            generatePassword({
+                length: next.length,
+                uppercase: next.uppercase,
+                digits: next.digits,
+                symbols: next.symbols,
+                ambiguous: !next.avoidAmbiguous,
+            })
+        );
+    }, []);
+
+    useEffect(() => {
+        regenerate(options);
+        // Deliberately once: every later regeneration is driven by an
+        // explicit change below, so the candidate does not churn under the
+        // user's cursor while they read it.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const update = (patch) => {
+        const next = { ...options, ...patch };
+
+        setOptions(next);
+        regenerate(next);
+    };
+
+    const strength = scorePassword(candidate);
+
+    const toggle = (key, label) => (
+        <label className={styles.genOption}>
+            <input
+                type="checkbox"
+                className={styles.checkControl}
+                checked={options[key]}
+                onChange={(e) => update({ [key]: e.target.checked })}
+            />
+            <span>{label}</span>
+        </label>
+    );
+
+    return (
+        <div className={styles.generator} role="group" aria-label="Generate a password">
+            <div className={styles.genCandidate}>
+                <code>{candidate}</code>
+                <button
+                    type="button"
+                    className={styles.iconButton}
+                    onClick={() => regenerate(options)}
+                    aria-label="Generate another"
+                    data-tooltip-id="system-tooltip"
+                    data-tooltip-content="Generate another"
+                >
+                    <RefreshCw size={15} strokeWidth={2} />
+                </button>
+            </div>
+
+            <div
+                className={styles.strength}
+                data-score={strength.score}
+                role="status"
+                aria-live="polite"
+            >
+                <div className={styles.strengthTrack}>
+                    <div
+                        className={styles.strengthFill}
+                        style={{ width: `${((strength.score + 1) / 5) * 100}%` }}
+                    />
+                </div>
+                <span className={styles.strengthLabel}>{strength.label}</span>
+            </div>
+
+            <label className={styles.genLength}>
+                <span>
+                    Length <strong>{options.length}</strong>
+                </span>
+                <input
+                    type="range"
+                    min={MIN_LENGTH}
+                    max={MAX_LENGTH}
+                    value={options.length}
+                    onChange={(e) => update({ length: Number(e.target.value) })}
+                    aria-label="Password length"
+                />
+            </label>
+
+            <div className={styles.genOptions}>
+                {toggle('uppercase', 'A-Z')}
+                {toggle('digits', '0-9')}
+                {toggle('symbols', 'Symbols')}
+                {toggle('avoidAmbiguous', 'Avoid look-alikes')}
+            </div>
+
+            <div className={styles.genActions}>
+                <button
+                    type="button"
+                    className={styles.primaryButton}
+                    onClick={() => onUse(candidate)}
+                >
+                    Use this password
+                </button>
+                <button
+                    type="button"
+                    className={styles.linkButton}
+                    onClick={onClose}
+                >
+                    Cancel
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default PasswordGenerator;

package/src/components/vault/QrScanner.jsx

@@ -0,0 +1,326 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Camera, Loader2, SwitchCamera, X } from 'lucide-react';
+
+import styles from '../styles/Vault.module.scss';
+import { decodeFromSource } from './qrDecode';
+import { parseOtpAuthUri } from './vaultHelpers';
+
+/** How often a frame is actually decoded, in milliseconds. */
+const DECODE_INTERVAL = 250;
+
+/** How long a "that wasn't a setup code" notice stays up before scanning quietly again. */
+const NOTICE_MS = 4000;
+
+const MESSAGES = {
+    insecure:
+        'The camera only opens on a secure (https) page — upload a screenshot of the QR instead.',
+    unsupported:
+        "This browser won't open a camera — upload a screenshot of the QR instead.",
+    denied:
+        'Camera access was blocked — allow it in the browser settings, or upload a screenshot instead.',
+    missing: 'No camera was found on this device — upload a screenshot of the QR instead.',
+    failed: "The camera couldn't be started — upload a screenshot of the QR instead.",
+};
+
+/**
+ * Point the device camera at the QR code a provider is showing.
+ *
+ * Deliberately an inline panel rather than a modal of its own: the form that
+ * mounts this is already inside a `StandardModal`, and that component locks
+ * `document.body` scroll and listens for Escape at the document — so a second
+ * one nested inside it closes both at once on the first Escape and unlocks
+ * the page's scroll when only the inner one went away. The generator popover
+ * beside it in the same form takes the same shape for the same reason.
+ *
+ * `onResult` is called with the raw decoded text, once, and only for a QR that
+ * `parseOtpAuthUri` accepts — anything else is reported in place and scanning
+ * continues, because the usual cause is the camera catching the wrong code on
+ * a page that shows several.
+ *
+ * The stream is stopped on unmount, on cancel, and on a successful read. A
+ * camera left running is a lit LED on the user's device and a genuine privacy
+ * complaint, so every exit from this component goes through `stop()`.
+ */
+const QrScanner = ({ onResult, onCancel }) => {
+    const [status, setStatus] = useState('starting'); // starting | scanning | error
+    const [error, setError] = useState('');
+    const [notice, setNotice] = useState('');
+    const [deviceId, setDeviceId] = useState(null);
+    const [devices, setDevices] = useState([]);
+
+    const videoRef = useRef(null);
+    const streamRef = useRef(null);
+    const frameRef = useRef(null);
+    const lastDecodeRef = useRef(0);
+    const busyRef = useRef(false);
+    const doneRef = useRef(false);
+    const noticeTimerRef = useRef(null);
+
+    /** Tear the camera down. Safe to call twice; every exit path calls it. */
+    const stop = useCallback(() => {
+        if (frameRef.current) {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+
+        const stream = streamRef.current;
+
+        if (stream) {
+            stream.getTracks().forEach((track) => track.stop());
+            streamRef.current = null;
+        }
+
+        if (videoRef.current) videoRef.current.srcObject = null;
+    }, []);
+
+    const showNotice = useCallback((text) => {
+        setNotice(text);
+
+        clearTimeout(noticeTimerRef.current);
+        noticeTimerRef.current = setTimeout(() => setNotice(''), NOTICE_MS);
+    }, []);
+
+    /* ------------------------------------------------------------ the loop */
+
+    const tick = useCallback(() => {
+        frameRef.current = requestAnimationFrame(tick);
+
+        const video = videoRef.current;
+
+        if (!video || doneRef.current || busyRef.current) return;
+        // readyState < 2 is a video with no frame to read yet.
+        if (video.readyState < 2) return;
+
+        const now = Date.now();
+
+        // rAF fires 60 times a second; decoding that often would peg a tablet
+        // CPU for no gain, so the work is throttled and the animation frame
+        // is used only as the clock.
+        if (now - lastDecodeRef.current < DECODE_INTERVAL) return;
+
+        lastDecodeRef.current = now;
+        busyRef.current = true;
+
+        decodeFromSource(video)
+            .then((text) => {
+                if (doneRef.current || !text) return;
+
+                try {
+                    parseOtpAuthUri(text);
+                } catch {
+                    showNotice(
+                        /^otpauth:/i.test(text)
+                            ? "That setup link isn't one we can read."
+                            : "That QR isn't an authenticator setup code."
+                    );
+
+                    return;
+                }
+
+                doneRef.current = true;
+                stop();
+                onResult?.(text);
+            })
+            .finally(() => {
+                busyRef.current = false;
+            });
+    }, [onResult, showNotice, stop]);
+
+    /* ----------------------------------------------------------- the camera */
+
+    useEffect(() => {
+        let cancelled = false;
+
+        const start = async () => {
+            if (typeof window === 'undefined') return;
+
+            // Chrome and Safari both hide `mediaDevices` entirely on an
+            // insecure origin, so this check has to come first or the user is
+            // told the browser cannot do it at all.
+            if (window.isSecureContext === false) {
+                setStatus('error');
+                setError(MESSAGES.insecure);
+
+                return;
+            }
+
+            if (!navigator.mediaDevices?.getUserMedia) {
+                setStatus('error');
+                setError(MESSAGES.unsupported);
+
+                return;
+            }
+
+            setStatus('starting');
+            setError('');
+
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    audio: false,
+                    video: deviceId
+                        ? { deviceId: { exact: deviceId } }
+                        : // The rear camera on a tablet or phone; a laptop has
+                          // only one and ignores the hint rather than failing.
+                          { facingMode: { ideal: 'environment' } },
+                });
+
+                if (cancelled) {
+                    stream.getTracks().forEach((track) => track.stop());
+
+                    return;
+                }
+
+                streamRef.current = stream;
+
+                const video = videoRef.current;
+
+                if (video) {
+                    video.srcObject = stream;
+                    // Both are required on iOS Safari, which otherwise takes
+                    // the video full-screen the moment it plays.
+                    video.setAttribute('playsinline', 'true');
+                    video.muted = true;
+
+                    try {
+                        await video.play();
+                    } catch {
+                        // An autoplay rejection still leaves a usable stream
+                        // on most engines; the loop reads readyState anyway.
+                    }
+                }
+
+                if (cancelled) return;
+
+                setStatus('scanning');
+
+                // Only worth listing once there is a stream: before
+                // permission is granted the labels are blank and, on Safari,
+                // the list is short by design.
+                try {
+                    const all = await navigator.mediaDevices.enumerateDevices();
+
+                    if (!cancelled) {
+                        setDevices(all.filter((one) => one.kind === 'videoinput'));
+                    }
+                } catch {
+                    // Not fatal — it only costs the "Switch camera" button.
+                }
+
+                frameRef.current = requestAnimationFrame(tick);
+            } catch (exception) {
+                if (cancelled) return;
+
+                const name = exception?.name || '';
+
+                setStatus('error');
+                setError(
+                    name === 'NotAllowedError' || name === 'SecurityError'
+                        ? MESSAGES.denied
+                        : name === 'NotFoundError' || name === 'OverconstrainedError'
+                          ? MESSAGES.missing
+                          : MESSAGES.failed
+                );
+            }
+        };
+
+        start();
+
+        return () => {
+            cancelled = true;
+            stop();
+        };
+        // `tick` is stable for the life of the panel, and re-running this on a
+        // new identity would restart the camera mid-scan.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [deviceId]);
+
+    useEffect(
+        () => () => {
+            doneRef.current = true;
+            clearTimeout(noticeTimerRef.current);
+            stop();
+        },
+        [stop]
+    );
+
+    const cancel = () => {
+        doneRef.current = true;
+        stop();
+        onCancel?.();
+    };
+
+    const switchCamera = () => {
+        const index = devices.findIndex((one) => one.deviceId === deviceId);
+        const next = devices[(index + 1) % devices.length];
+
+        if (next) {
+            stop();
+            setDeviceId(next.deviceId);
+        }
+    };
+
+    return (
+        <div className={styles.qrScanner} role="group" aria-label="Scan a QR code">
+            <div className={styles.qrScannerHead}>
+                <Camera size={15} strokeWidth={2} aria-hidden="true" />
+                <span>Scan the QR code</span>
+
+                {status === 'scanning' && devices.length > 1 && (
+                    <button
+                        type="button"
+                        className={styles.linkButton}
+                        onClick={switchCamera}
+                    >
+                        <SwitchCamera size={14} strokeWidth={2} />
+                        Switch camera
+                    </button>
+                )}
+
+                <button
+                    type="button"
+                    className={styles.iconButton}
+                    onClick={cancel}
+                    aria-label="Close the scanner"
+                >
+                    <X size={15} strokeWidth={2} />
+                </button>
+            </div>
+
+            {status === 'error' ? (
+                <p className={styles.fieldError} role="alert">
+                    {error}
+                </p>
+            ) : (
+                <div className={styles.qrStage}>
+                    <video
+                        ref={videoRef}
+                        className={styles.qrVideo}
+                        playsInline
+                        muted
+                        autoPlay
+                    />
+                    <div className={styles.qrViewfinder} aria-hidden="true">
+                        <span className={styles.qrSweep} />
+                    </div>
+
+                    {status === 'starting' && (
+                        <div className={styles.qrStarting}>
+                            <Loader2 size={16} className={styles.spin} />
+                            Starting the camera…
+                        </div>
+                    )}
+                </div>
+            )}
+
+            <p
+                className={notice ? styles.fieldError : styles.help}
+                role="status"
+                aria-live="polite"
+            >
+                {notice || 'Hold the code inside the frame — it reads by itself.'}
+            </p>
+        </div>
+    );
+};
+
+export default QrScanner;

package/src/components/vault/VaultAccessLog.jsx

@@ -0,0 +1,225 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import moment from 'moment';
+import { Loader2 } from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import StandardModal from '../generic/StandardModal';
+import styles from '../styles/Vault.module.scss';
+import { resolveVaultEndpoints } from './vaultEndpoints';
+
+/**
+ * The actions the log records, and how to say them in English.
+ *
+ * An unknown action is shown as it arrived rather than dropped — the backend
+ * is free to record something this build has not heard of, and a log with
+ * silent gaps in it is worse than one with an ugly line.
+ */
+export const VAULT_ACTIONS = {
+    reveal: 'revealed the password',
+    copy_password: 'copied the password',
+    copy_username: 'copied the username',
+    otp: 'read the 2FA code',
+    view: 'opened the entry',
+    create: 'created the entry',
+    update: 'edited the entry',
+    delete: 'deleted the entry',
+    restore: 'restored the entry',
+};
+
+const describeAction = (action) =>
+    VAULT_ACTIONS[action] || String(action || '').replace(/_/g, ' ');
+
+/**
+ * Who took what out of the vault, and when.
+ *
+ * Two modes on one component, because they render the same rows: `entry` logs
+ * one credential's history, and the global mode (no `entry`) logs everything,
+ * with filters. Only the global one shows which entry a line belongs to.
+ *
+ * The user filter is built from the users actually seen in the log rather than
+ * from a directory endpoint — the vault has no business asking for the staff
+ * list, and the only users who can appear here are ones who already have.
+ */
+const VaultAccessLog = ({ entry = null, endpoints, isOpen = true, onClose }) => {
+    const routes = useMemo(() => resolveVaultEndpoints(endpoints), [endpoints]);
+    const global = !entry;
+
+    const [rows, setRows] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [page, setPage] = useState(1);
+    const [lastPage, setLastPage] = useState(1);
+    const [userId, setUserId] = useState('');
+    const [action, setAction] = useState('');
+    const [knownUsers, setKnownUsers] = useState([]);
+
+    const mountedRef = useRef(true);
+
+    useEffect(() => {
+        mountedRef.current = true;
+
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+
+    const load = useCallback(() => {
+        setLoading(true);
+
+        const params = { page };
+
+        if (global) {
+            if (userId) params.user_id = userId;
+            if (action) params.action = action;
+        }
+
+        CustomFetch(
+            global ? routes.globalLog : routes.entryLog(entry.id),
+            'GET',
+            params,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                const data = Array.isArray(result?.data) ? result.data : [];
+
+                setRows(data);
+                setLastPage(Number(result?.last_page) || 1);
+                setLoading(false);
+
+                // Accumulate, so paging back and forth does not empty the
+                // filter of a user who was on the previous page.
+                setKnownUsers((prev) => {
+                    const seen = new Map(prev.map((u) => [String(u.id), u]));
+
+                    data.forEach((row) => {
+                        if (row.user?.id) seen.set(String(row.user.id), row.user);
+                    });
+
+                    return [...seen.values()].sort((a, b) =>
+                        String(a.name).localeCompare(String(b.name))
+                    );
+                });
+            },
+            null
+        ).catch(() => {
+            if (mountedRef.current) setLoading(false);
+        });
+    }, [routes, global, entry, page, userId, action]);
+
+    useEffect(() => {
+        if (isOpen) load();
+    }, [isOpen, load]);
+
+    return (
+        <StandardModal
+            isOpen={isOpen}
+            onClose={onClose}
+            size="medium"
+            showHeader
+            title={global ? 'Vault access log' : `Access log — ${entry.title}`}
+        >
+            <div className={styles.log}>
+                {global && (
+                    <div className={styles.logFilters}>
+                        <select
+                            className={styles.select}
+                            value={userId}
+                            aria-label="Filter by user"
+                            onChange={(e) => {
+                                setUserId(e.target.value);
+                                setPage(1);
+                            }}
+                        >
+                            <option value="">Everyone</option>
+                            {knownUsers.map((user) => (
+                                <option key={user.id} value={user.id}>
+                                    {user.name}
+                                </option>
+                            ))}
+                        </select>
+
+                        <select
+                            className={styles.select}
+                            value={action}
+                            aria-label="Filter by action"
+                            onChange={(e) => {
+                                setAction(e.target.value);
+                                setPage(1);
+                            }}
+                        >
+                            <option value="">Every action</option>
+                            {Object.entries(VAULT_ACTIONS).map(([key, text]) => (
+                                <option key={key} value={key}>
+                                    {text}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                )}
+
+                {loading && rows.length === 0 && (
+                    <p className={styles.muted}>
+                        <Loader2 size={14} className={styles.spin} /> Loading…
+                    </p>
+                )}
+
+                {!loading && rows.length === 0 && (
+                    <p className={styles.muted}>Nothing recorded yet.</p>
+                )}
+
+                <ul className={styles.logRows}>
+                    {rows.map((row) => (
+                        <li key={row.id} className={styles.logRow}>
+                            <div>
+                                <strong>{row.user?.name || 'Unknown user'}</strong>{' '}
+                                {describeAction(row.action)}
+                                {global && row.entry?.title && (
+                                    <>
+                                        {' — '}
+                                        <em>{row.entry.title}</em>
+                                    </>
+                                )}
+                            </div>
+                            <div className={styles.logMeta}>
+                                {row.ip && <span>{row.ip}</span>}
+                                <span
+                                    data-tooltip-id="system-tooltip"
+                                    data-tooltip-content={moment(row.created_at).format(
+                                        'DD MMM YYYY, HH:mm:ss'
+                                    )}
+                                >
+                                    {moment(row.created_at).fromNow()}
+                                </span>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+
+                {lastPage > 1 && (
+                    <div className={styles.pager}>
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            disabled={page <= 1 || loading}
+                            onClick={() => setPage((p) => Math.max(1, p - 1))}
+                        >
+                            Previous
+                        </button>
+                        <span className={styles.muted}>
+                            Page {page} of {lastPage}
+                        </span>
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            disabled={page >= lastPage || loading}
+                            onClick={() => setPage((p) => Math.min(lastPage, p + 1))}
+                        >
+                            Next
+                        </button>
+                    </div>
+                )}
+            </div>
+        </StandardModal>
+    );
+};
+
+export default VaultAccessLog;