@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/vault/VaultQuickSearch.jsx

@@ -0,0 +1,681 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import {
+    ExternalLink,
+    KeyRound,
+    Loader2,
+    Lock,
+    Plus,
+    Search,
+    User,
+} from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import styles from '../styles/Vault.module.scss';
+import OtpChip from './OtpChip';
+import VaultConfirmPanel from './VaultConfirmPanel';
+import useDebouncedValue from './useDebouncedValue';
+import useVaultReveal from './useVaultReveal';
+import withVaultNavigation from './vaultNavigation';
+import { copyText } from './vaultClipboard';
+import { resolveVaultEndpoints } from './vaultEndpoints';
+import {
+    hostFromUrl,
+    isMacPlatform,
+    matchesShortcut,
+    openableUrl,
+    shortcutLabel,
+} from './vaultHelpers';
+
+/** What the shortcut must not interrupt. */
+const MODAL_SELECTOR = [
+    'dialog[open]',
+    '[aria-modal="true"]',
+    // SweetAlert, which the library uses for confirmations, and which takes
+    // the keyboard for itself while it is up.
+    '.swal2-container',
+].join(', ');
+
+/**
+ * Should this keystroke be left alone?
+ *
+ * ⌘K is a cheap chord, which is the point of it and also the risk: it is the
+ * kind of key an editor or a spreadsheet grid binds for itself. So the vault
+ * declines it when something modal is already on screen, and when the caret is
+ * in rich text — a TinyMCE body is `contenteditable` inside an iframe, and an
+ * editor toolbar's own ⌘K (insert link) has a better claim on the keystroke
+ * than a header popover does.
+ */
+const shouldIgnoreShortcut = (event) => {
+    if (typeof document === 'undefined') return false;
+
+    if (document.querySelector(MODAL_SELECTOR)) return true;
+
+    const target = event.target;
+
+    // A keydown inside an iframe never reaches this window in the first place;
+    // this catches the case where the iframe itself holds focus.
+    if (target?.tagName === 'IFRAME' || document.activeElement?.tagName === 'IFRAME') {
+        return true;
+    }
+
+    if (target?.isContentEditable) return true;
+
+    return Boolean(target?.closest?.('[contenteditable="true"], [contenteditable=""]'));
+};
+
+/**
+ * The vault, from the header.
+ *
+ * Mounted as an account action through Navigation's `renderers` slot, so it
+ * sits in the chip row beside the notification bell and wears the same
+ * trigger. The point of it is the shortest possible path from "I need the
+ * bank login" to that password being on the clipboard: a keyboard shortcut, a
+ * few letters, Enter.
+ *
+ * Everything here is deliberately transient. Results are not cached between
+ * openings, a revealed password hides itself after fifteen seconds, and
+ * closing the popover forgets all of it — a vault that leaves credentials
+ * lying around in component state is a vault that leaks them to the next
+ * person at the desk.
+ */
+const VaultQuickSearchInner = ({
+    setting,
+    // Accepted so the component matches the shape Navigation's renderers hand
+    // over, even though the popover does not read them.
+    userProfile: _userProfile,
+    setSystemAuth: _setSystemAuth,
+    endpoints,
+    manageUrl = '/settings/vault',
+    // Both, because ⌘K is what a user's hands reach for and ⌘⇧K is what the
+    // first version of this shipped with. `matchesShortcut` takes either a
+    // string or a list.
+    shortcut = ['mod+k', 'mod+shift+k'],
+    limit = 8,
+    navigate,
+}) => {
+    const routes = useMemo(() => resolveVaultEndpoints(endpoints), [endpoints]);
+
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [searched, setSearched] = useState(false);
+    const [highlight, setHighlight] = useState(0);
+    // Used when the clipboard is unavailable: { label, value }.
+    const [fallback, setFallback] = useState(null);
+
+    const debouncedQuery = useDebouncedValue(query, 250);
+
+    const wrapperRef = useRef(null);
+    const triggerRef = useRef(null);
+    const inputRef = useRef(null);
+    const mountedRef = useRef(true);
+    // Guards against an early response overwriting a later one.
+    const requestRef = useRef(0);
+    // One button node per row's OTP chip, so Alt+O can open the highlighted
+    // row's code without lifting the chip's state out of it.
+    const otpButtonsRef = useRef({});
+
+    const {
+        reveal,
+        revealingId,
+        confirmRequired,
+        confirmMessage,
+        confirmError,
+        confirmPending,
+        confirm,
+        cancelConfirm,
+    } = useVaultReveal(routes);
+
+    useEffect(() => () => {
+        mountedRef.current = false;
+    }, []);
+
+    /* ------------------------------------------------------------ opening */
+
+    const close = useCallback(() => {
+        setOpen(false);
+        setQuery('');
+        setResults([]);
+        setSearched(false);
+        setHighlight(0);
+        setFallback(null);
+    }, []);
+
+    // Read through a ref so the listener below can be registered exactly once:
+    // the default is an array literal, so a dependency on it would tear the
+    // listener down and rebuild it on every render.
+    const shortcutRef = useRef(shortcut);
+    shortcutRef.current = shortcut;
+
+    // The shortcut is global: the whole point is not having to reach for the
+    // mouse, or to be on any particular page first.
+    //
+    // On `window`, in the capture phase, because the CRM is full of controls
+    // that stop keydown from propagating — the data grid, the rich text
+    // editors, react-select — and a bubbling listener behind any of them never
+    // hears the key at all. Capturing means the vault sees it first and, when
+    // it is the vault's chord, nobody else does.
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (!matchesShortcut(event, shortcutRef.current)) return;
+            if (shouldIgnoreShortcut(event)) return;
+
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen((prev) => !prev);
+        };
+
+        window.addEventListener('keydown', onKeyDown, true);
+
+        return () => window.removeEventListener('keydown', onKeyDown, true);
+    }, []);
+
+    useEffect(() => {
+        if (!open) return undefined;
+
+        // Focus after paint, or the input is not in the document yet.
+        const handle = setTimeout(() => inputRef.current?.focus(), 0);
+
+        return () => clearTimeout(handle);
+    }, [open]);
+
+    useEffect(() => {
+        if (!open) return undefined;
+
+        const onMouseDown = (event) => {
+            if (wrapperRef.current?.contains(event.target)) return;
+            if (triggerRef.current?.contains(event.target)) return;
+
+            close();
+        };
+
+        document.addEventListener('mousedown', onMouseDown);
+
+        return () => document.removeEventListener('mousedown', onMouseDown);
+    }, [open, close]);
+
+    /* ----------------------------------------------------------- searching */
+
+    useEffect(() => {
+        if (!open) return;
+
+        const search = debouncedQuery.trim();
+        const ticket = requestRef.current + 1;
+        requestRef.current = ticket;
+
+        setLoading(true);
+
+        CustomFetch(
+            routes.list,
+            'GET',
+            { search, per_page: limit },
+            (result) => {
+                // A slower earlier request must not land on top of this one.
+                if (!mountedRef.current || requestRef.current !== ticket) return;
+
+                setResults(Array.isArray(result?.data) ? result.data : []);
+                setLoading(false);
+                setSearched(true);
+                setHighlight(0);
+            },
+            null
+        ).catch(() => {
+            if (!mountedRef.current || requestRef.current !== ticket) return;
+
+            setLoading(false);
+            setSearched(true);
+            setResults([]);
+        });
+    }, [open, debouncedQuery, limit, routes]);
+
+    /* ------------------------------------------------------------ actions */
+
+    /**
+     * A revealed password goes to the clipboard, and nowhere else.
+     *
+     * There is deliberately no "show it in the row" any more: this popover
+     * opens in the header of a screen other people walk past, and a password
+     * printed into a list is a password anyone behind the desk can read. The
+     * clipboard is what the user came for; the fallback below exists only for
+     * a browser that will not give us one.
+     */
+    const handleRevealed = useCallback((entry, password) => {
+        if (!mountedRef.current) return;
+
+        copyText(password).then((copied) => {
+            if (!mountedRef.current) return;
+
+            if (copied) {
+                toast.success('Password copied — paste it now');
+            } else {
+                // No clipboard (an insecure context, usually). Show it in the
+                // panel so the action is not a dead end.
+                setFallback({
+                    label: `Password for ${entry.title}`,
+                    value: password,
+                });
+            }
+        });
+    }, []);
+
+    const revealEntry = useCallback(
+        (entry) => {
+            reveal(entry.id)
+                .then((password) => handleRevealed(entry, password))
+                .catch(() => {
+                    // A cancelled confirmation is a decision, not a failure,
+                    // and every other outcome has already been reported by
+                    // CustomFetch. Swallowed so it is not an unhandled
+                    // rejection.
+                })
+                .finally(() => {
+                    // Focus went to the confirm panel; bring it back so the
+                    // next keystroke goes to the search box.
+                    if (mountedRef.current && open) inputRef.current?.focus();
+                });
+        },
+        [reveal, handleRevealed, open]
+    );
+
+    const copyUsername = useCallback(
+        async (entry) => {
+            const copied = await copyText(entry.username);
+
+            if (!mountedRef.current) return;
+
+            if (copied) {
+                toast.success('Username copied');
+            } else {
+                setFallback({
+                    label: `Username for ${entry.title}`,
+                    value: entry.username,
+                });
+            }
+
+            // Logged for the same reason the password copies are: knowing who
+            // took a credential out of the vault, and when.
+            CustomFetch(
+                routes.logCopy(entry.id),
+                'POST',
+                { action: 'copy_username' },
+                () => {},
+                () => {}
+            ).catch(() => {
+                // An unrecorded copy must not interrupt the user.
+            });
+        },
+        [routes]
+    );
+
+    const openSite = useCallback((entry) => {
+        const url = openableUrl(entry.url);
+
+        if (url === '') return;
+
+        // `noopener` matters: the opened page gets no handle on this one.
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }, []);
+
+    const goToManager = useCallback(
+        (extra = '') => {
+            close();
+            navigate(`${manageUrl}${extra}`);
+        },
+        [close, navigate, manageUrl]
+    );
+
+    /* ---------------------------------------------------------- keyboard */
+
+    /**
+     * Every key the popover answers to while the search box has focus.
+     *
+     * The row actions are on Alt rather than on the bare letter they name:
+     * focus never leaves the search input — it is what ↑↓ steer from — so a
+     * bare `u` is a character the user is typing into their query, not a
+     * command. Alt+U and Alt+O are free on both platforms and do not shadow
+     * anything the browser or a screen reader claims.
+     */
+    const onSearchKeyDown = useCallback(
+        (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                if (confirmRequired) cancelConfirm();
+                else close();
+                return;
+            }
+
+            if (confirmRequired || results.length === 0) return;
+
+            const entry = results[highlight];
+
+            if (event.altKey && !event.ctrlKey && !event.metaKey) {
+                const key = String(event.key).toLowerCase();
+
+                // On a Mac, Alt+letter types a symbol — `event.key` is `†` for
+                // Alt+T — so the physical key is the only reliable read.
+                const code = String(event.code || '').toLowerCase();
+                const pressed = ['u', 'o'].find(
+                    (one) => key === one || code === `key${one}`
+                );
+
+                if (!pressed || !entry) return;
+
+                event.preventDefault();
+
+                if (pressed === 'u' && entry.username) copyUsername(entry);
+                else if (pressed === 'o' && entry.has_totp) {
+                    otpButtonsRef.current[entry.id]?.click();
+                }
+
+                return;
+            }
+
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                setHighlight((prev) => (prev + 1) % results.length);
+            } else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                setHighlight(
+                    (prev) => (prev - 1 + results.length) % results.length
+                );
+            } else if (event.key === 'Enter') {
+                event.preventDefault();
+                if (entry) revealEntry(entry);
+            }
+        },
+        [
+            confirmRequired,
+            cancelConfirm,
+            close,
+            results,
+            highlight,
+            revealEntry,
+            copyUsername,
+        ]
+    );
+
+    /* ------------------------------------------------------------ render */
+
+    const label = setting?.label || 'Vault';
+    const hint = shortcutLabel(shortcut);
+    // ⌥ on a Mac keyboard, Alt+ everywhere else — the same split
+    // `shortcutLabel` already makes for the global shortcut.
+    const altLabel = isMacPlatform() ? '⌥' : 'Alt+';
+
+    /**
+     * One result, on one line.
+     *
+     * The row is a two-column grid: everything identifying the entry in the
+     * first cell, which truncates, and the actions in the second, which never
+     * wrap. It used to be three stacked blocks with labelled pills, and with a
+     * real title ("Colonial First State — Adviser portal") beside a real email
+     * username the pills spilled onto a second and third line and a list of
+     * eight entries stopped fitting on screen. So the actions are square icon
+     * buttons with tooltips and aria-labels instead, and the full
+     * `title — username — url` goes in a `title` attribute for whatever the
+     * ellipsis ate.
+     *
+     * Nothing makes a row taller: a revealed password goes straight to the
+     * clipboard rather than onto the screen, so every row is exactly one line
+     * whatever happens in it.
+     */
+    const renderRow = (entry, index) => {
+        const isHighlighted = index === highlight;
+        const host = hostFromUrl(entry.url);
+        const meta = [entry.username, host].filter(Boolean).join(' · ');
+        const busy = revealingId === entry.id;
+        const url = openableUrl(entry.url);
+
+        return (
+            <li
+                key={entry.id}
+                className={`${styles.row} ${isHighlighted ? styles.rowActive : ''}`}
+                onMouseEnter={() => setHighlight(index)}
+                aria-selected={isHighlighted}
+                role="option"
+            >
+                <div
+                    className={styles.rowMain}
+                    title={[entry.title, entry.username, entry.url]
+                        .filter(Boolean)
+                        .join(' — ')}
+                >
+                    {entry.visibility === 'private' && (
+                        <Lock
+                            size={12}
+                            strokeWidth={2}
+                            className={styles.privateMark}
+                            aria-label="Private to you"
+                            data-tooltip-id="system-tooltip"
+                            data-tooltip-place="bottom"
+                            data-tooltip-content="Private to you"
+                        />
+                    )}
+                    <strong className={styles.rowName}>{entry.title}</strong>
+                    <span className={styles.rowMeta}>
+                        {meta ? ` · ${meta}` : ' · No username'}
+                    </span>
+                </div>
+
+                {/* Icons, not labelled pills: the words are what forced the
+                    wrap. Every one carries a tooltip and an aria-label. */}
+                <div className={styles.rowActions}>
+                    {entry.username && (
+                        <button
+                            type="button"
+                            className={styles.rowAction}
+                            onClick={() => copyUsername(entry)}
+                            data-tooltip-id="system-tooltip"
+                            data-tooltip-content="Copy username"
+                            aria-label={`Copy the username for ${entry.title}`}
+                        >
+                            <User size={15} strokeWidth={2} aria-hidden="true" />
+                        </button>
+                    )}
+
+                    <button
+                        type="button"
+                        className={`${styles.rowAction} ${styles.rowActionPrimary}`}
+                        onClick={() => revealEntry(entry)}
+                        disabled={busy}
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content="Copy password"
+                        aria-label={`Copy the password for ${entry.title}`}
+                    >
+                        {busy ? (
+                            <Loader2 size={15} className={styles.spin} aria-hidden="true" />
+                        ) : (
+                            <KeyRound size={15} strokeWidth={2} aria-hidden="true" />
+                        )}
+                    </button>
+
+                    {entry.has_totp && (
+                        <OtpChip
+                            entryId={entry.id}
+                            endpoints={routes}
+                            size="icon"
+                            buttonRef={(node) => {
+                                if (node) otpButtonsRef.current[entry.id] = node;
+                                else delete otpButtonsRef.current[entry.id];
+                            }}
+                        />
+                    )}
+
+                    {url !== '' && (
+                        <button
+                            type="button"
+                            className={styles.rowAction}
+                            onClick={() => openSite(entry)}
+                            data-tooltip-id="system-tooltip"
+                            data-tooltip-content="Open site"
+                            aria-label={`Open ${host} in a new tab`}
+                        >
+                            <ExternalLink size={15} strokeWidth={2} aria-hidden="true" />
+                        </button>
+                    )}
+                </div>
+            </li>
+        );
+    };
+
+    return (
+        <div className={styles.quickSearch}>
+            <button
+                ref={triggerRef}
+                type="button"
+                className={styles.trigger}
+                onClick={() => (open ? close() : setOpen(true))}
+                data-tooltip-id="system-tooltip"
+                data-tooltip-content={`${label} · ${hint}`}
+                aria-label={`${label} (${hint})`}
+                aria-keyshortcuts="Meta+K Control+K"
+                aria-expanded={open}
+                aria-haspopup="dialog"
+            >
+                <KeyRound size={20} strokeWidth={2} />
+            </button>
+
+            {open && (
+                <div
+                    className={styles.popoverWrapper}
+                    ref={wrapperRef}
+                    /* Tells the navigation's action pill to stop clipping
+                       while this is open. See Navigation.module.scss
+                       `.hactions > ul`, and Notification, which does the
+                       same. */
+                    data-nav-overlay="open"
+                    role="dialog"
+                    aria-label={label}
+                >
+                    <div className={styles.popover}>
+                        {/* The manager is the only way to add, edit or delete,
+                            so its link is a permanent primary control here —
+                            not something that appears only when a search
+                            happens to come back empty. */}
+                        <div className={styles.popoverHead}>
+                            <span className={styles.popoverTitle}>
+                                <KeyRound size={15} strokeWidth={2.2} aria-hidden="true" />
+                                {label}
+                            </span>
+                            <button
+                                type="button"
+                                className={styles.primaryButton}
+                                onClick={() => goToManager()}
+                            >
+                                Open password manager
+                            </button>
+                        </div>
+
+                        <div className={styles.searchBar}>
+                            <Search size={16} strokeWidth={2} aria-hidden="true" />
+                            <input
+                                ref={inputRef}
+                                type="text"
+                                className={styles.searchInput}
+                                value={query}
+                                placeholder="Search the vault…"
+                                aria-label="Search the vault"
+                                autoComplete="off"
+                                spellCheck="false"
+                                onChange={(e) => setQuery(e.target.value)}
+                                onKeyDown={onSearchKeyDown}
+                            />
+                            {loading && (
+                                <Loader2
+                                    size={15}
+                                    className={styles.spin}
+                                    aria-label="Searching"
+                                />
+                            )}
+                        </div>
+
+                        {confirmRequired ? (
+                            <VaultConfirmPanel
+                                message={confirmMessage}
+                                error={confirmError}
+                                pending={confirmPending}
+                                onConfirm={confirm}
+                                onCancel={() => {
+                                    cancelConfirm();
+                                    inputRef.current?.focus();
+                                }}
+                                compact
+                            />
+                        ) : (
+                            <>
+                                {fallback && (
+                                    <div className={styles.fallback}>
+                                        <label htmlFor="vault-fallback">
+                                            {fallback.label} — copy it by hand
+                                        </label>
+                                        <input
+                                            id="vault-fallback"
+                                            className={styles.fallbackInput}
+                                            readOnly
+                                            value={fallback.value}
+                                            onFocus={(e) => e.target.select()}
+                                        />
+                                        <button
+                                            type="button"
+                                            className={styles.linkButton}
+                                            onClick={() => setFallback(null)}
+                                        >
+                                            Done
+                                        </button>
+                                    </div>
+                                )}
+
+                                {results.length > 0 && (
+                                    <ul
+                                        className={styles.rows}
+                                        role="listbox"
+                                        aria-label="Vault entries"
+                                    >
+                                        {results.map(renderRow)}
+                                    </ul>
+                                )}
+
+                                {results.length === 0 && searched && !loading && (
+                                    <div className={styles.empty}>
+                                        <p>
+                                            {query.trim() === ''
+                                                ? 'No passwords saved yet.'
+                                                : `No matches for "${query.trim()}"`}
+                                        </p>
+                                        <button
+                                            type="button"
+                                            className={styles.primaryButton}
+                                            onClick={() =>
+                                                goToManager(
+                                                    `?create=1&title=${encodeURIComponent(
+                                                        query.trim()
+                                                    )}`
+                                                )
+                                            }
+                                        >
+                                            <Plus size={14} strokeWidth={2} />
+                                            Add a password
+                                        </button>
+                                    </div>
+                                )}
+                            </>
+                        )}
+
+                        <div className={styles.footer}>
+                            <span className={styles.footerHint}>
+                                ↑↓ move · ⏎ copy password · {altLabel}U username ·{' '}
+                                {altLabel}O code · {hint}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+const VaultQuickSearch = withVaultNavigation(VaultQuickSearchInner);
+
+export default VaultQuickSearch;