@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/UniversalSearch.jsx

@@ -0,0 +1,390 @@
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Search, CornerDownLeft } from 'lucide-react';
+
+import CustomFetch from './Fetch';
+import styles from './styles/UniversalSearch.module.scss';
+
+/**
+ * One search box for the whole application.
+ *
+ * Mounts as an account action through Navigation's `renderers` slot, the same
+ * way VaultQuickSearch and SmsInboxBadge do, so the three chips read as one
+ * row. ⌘K (Ctrl+K off a Mac) opens it from anywhere.
+ *
+ * The backend decides what is searched AND what this user may see — a source
+ * they lack the permission for is never queried, so an empty group here means
+ * "nothing matched", never "you are not allowed". Nothing in this component
+ * knows the model list.
+ */
+
+const isMac = () =>
+    typeof navigator !== 'undefined' &&
+    /Mac|iPhone|iPad/.test(navigator.platform || '');
+
+export const DEFAULT_UNIVERSAL_SEARCH_ENDPOINT = '/ajax/search';
+
+const UniversalSearch = ({
+    setting,
+    endpoint = DEFAULT_UNIVERSAL_SEARCH_ENDPOINT,
+    placeholder = 'Search customers, tickets, quotes…',
+    minLength = 2,
+    debounceMs = 220,
+    navigate: navigateProp = null,
+}) => {
+    const [open, setOpen] = useState(false);
+    const [term, setTerm] = useState('');
+    const [groups, setGroups] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState(null);
+    const [active, setActive] = useState(0);
+
+    const inputRef = useRef(null);
+    const panelRef = useRef(null);
+    // Every in-flight request carries a ticket; only the newest may write
+    // state. Without it a slow "ac" can land after a fast "acme" and replace
+    // the right answer with a stale one.
+    const ticket = useRef(0);
+
+    let routerNavigate = null;
+    try {
+        routerNavigate = useNavigate();
+    } catch {
+        routerNavigate = null; // mounted outside a Router
+    }
+    const go = navigateProp || routerNavigate;
+
+    // A flat list of every result, so ↑/↓ can cross group boundaries.
+    const flat = useMemo(
+        () =>
+            groups.flatMap((g) =>
+                g.results.map((r) => ({ ...r, group: g.label }))
+            ),
+        [groups]
+    );
+
+    // -- fetching ------------------------------------------------------------
+
+    useEffect(() => {
+        if (!open) return undefined;
+
+        const q = term.trim();
+
+        if (q.length < minLength) {
+            setGroups([]);
+            setMessage(null);
+            setLoading(false);
+
+            return undefined;
+        }
+
+        const mine = ++ticket.current;
+        setLoading(true);
+
+        const timer = setTimeout(async () => {
+            try {
+                // The query goes as the third argument rather than inline in
+                // the URL: CustomFetch builds the query string itself for GET,
+                // and its response cache keys on (url, method, params).
+                const res = await CustomFetch(endpoint, 'GET', { q });
+
+                if (mine !== ticket.current) return; // a newer query won
+
+                // Consumers wrap responses differently — some return the body,
+                // some `{ data: body }`. Unwrap rather than assume.
+                const body = res?.groups ? res : (res?.data ?? res);
+
+                setGroups(Array.isArray(body?.groups) ? body.groups : []);
+                setMessage(body?.message ?? null);
+                setActive(0);
+            } catch {
+                if (mine !== ticket.current) return;
+                setGroups([]);
+                setMessage('Search is unavailable right now.');
+            } finally {
+                if (mine === ticket.current) setLoading(false);
+            }
+        }, debounceMs);
+
+        return () => clearTimeout(timer);
+    }, [term, open, endpoint, minLength, debounceMs]);
+
+    // -- opening -------------------------------------------------------------
+
+    const close = useCallback(() => {
+        setOpen(false);
+        setTerm('');
+        setGroups([]);
+        setActive(0);
+    }, []);
+
+    useEffect(() => {
+        /**
+         * Capture phase on purpose: the CRM is full of controls that stop
+         * keydown propagating — the data grid, the rich text editors,
+         * react-select — and a bubbling listener behind any of them never
+         * hears the key. Same reasoning as VaultQuickSearch's shortcut.
+         */
+        const onKey = (e) => {
+            const mod = isMac() ? e.metaKey : e.ctrlKey;
+
+            if (mod && e.key.toLowerCase() === 'k') {
+                // An editor's own ⌘K (insert link) has the better claim while
+                // the caret is in rich text.
+                const el = document.activeElement;
+                if (el?.isContentEditable) return;
+
+                e.preventDefault();
+                setOpen((v) => !v);
+
+                return;
+            }
+
+            if (e.key === 'Escape' && open) {
+                e.preventDefault();
+                close();
+            }
+        };
+
+        window.addEventListener('keydown', onKey, true);
+
+        return () => window.removeEventListener('keydown', onKey, true);
+    }, [open, close]);
+
+    useEffect(() => {
+        if (open) {
+            // Focus after paint, or the input is not in the DOM yet.
+            const t = setTimeout(() => inputRef.current?.focus(), 0);
+
+            return () => clearTimeout(t);
+        }
+
+        return undefined;
+    }, [open]);
+
+    useEffect(() => {
+        if (!open) return undefined;
+
+        const onDown = (e) => {
+            if (panelRef.current && !panelRef.current.contains(e.target))
+                close();
+        };
+
+        document.addEventListener('mousedown', onDown);
+
+        return () => document.removeEventListener('mousedown', onDown);
+    }, [open, close]);
+
+    // -- choosing ------------------------------------------------------------
+
+    const choose = useCallback(
+        (result) => {
+            if (!result?.url) return;
+
+            close();
+
+            if (go) {
+                go(result.url);
+            } else {
+                window.location.href = result.url;
+            }
+        },
+        [go, close]
+    );
+
+    const onInputKey = (e) => {
+        if (flat.length === 0) return;
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActive((i) => (i + 1) % flat.length);
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActive((i) => (i - 1 + flat.length) % flat.length);
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            choose(flat[active]);
+        }
+    };
+
+    const shortcut = isMac() ? '⌘K' : 'Ctrl+K';
+    const label = setting?.label || 'Search';
+
+    let flatIndex = -1;
+
+    return (
+        <div className={styles.wrap}>
+            <button
+                type="button"
+                className={styles.trigger}
+                onClick={() => setOpen((v) => !v)}
+                aria-label={`${label} (${shortcut})`}
+                data-tooltip-content={`${label} (${shortcut})`}
+                aria-expanded={open}
+                aria-haspopup="dialog"
+            >
+                <Search size={18} strokeWidth={2} aria-hidden="true" />
+            </button>
+
+            {open && (
+                // The host's `.hactions` is a horizontal scroll container, so it
+                // clips on both axes; this attribute is the contract that tells
+                // it to let the panel out. Same as Notification and the vault.
+                <div data-nav-overlay="open" className={styles.overlay}>
+                    <div
+                        ref={panelRef}
+                        className={styles.panel}
+                        role="dialog"
+                        aria-modal="false"
+                        aria-label={label}
+                    >
+                        <div className={styles.field}>
+                            <Search
+                                size={16}
+                                aria-hidden="true"
+                                className={styles.fieldIcon}
+                            />
+                            <input
+                                ref={inputRef}
+                                type="text"
+                                className={styles.input}
+                                value={term}
+                                placeholder={placeholder}
+                                onChange={(e) => setTerm(e.target.value)}
+                                onKeyDown={onInputKey}
+                                aria-label={placeholder}
+                                autoComplete="off"
+                                spellCheck="false"
+                            />
+                            <kbd className={styles.kbd}>esc</kbd>
+                        </div>
+
+                        <div className={styles.results}>
+                            {loading && (
+                                <p className={styles.state}>Searching…</p>
+                            )}
+
+                            {!loading && message && (
+                                <p className={styles.state}>{message}</p>
+                            )}
+
+                            {!loading &&
+                                !message &&
+                                term.trim().length >= minLength &&
+                                groups.length === 0 && (
+                                    <p className={styles.state}>
+                                        Nothing matched “{term.trim()}”.
+                                    </p>
+                                )}
+
+                            {!loading && term.trim().length < minLength && (
+                                <p className={styles.state}>
+                                    Type at least {minLength} characters.
+                                </p>
+                            )}
+
+                            {!loading &&
+                                groups.map((group) => (
+                                    <section
+                                        key={group.key}
+                                        className={styles.group}
+                                    >
+                                        <h3 className={styles.groupLabel}>
+                                            {group.label}
+                                        </h3>
+                                        <ul className={styles.rows}>
+                                            {group.results.map((result) => {
+                                                flatIndex += 1;
+                                                const isActive =
+                                                    flatIndex === active;
+                                                const myIndex = flatIndex;
+
+                                                return (
+                                                    <li
+                                                        key={`${group.key}-${result.id}`}
+                                                    >
+                                                        <button
+                                                            type="button"
+                                                            className={`${styles.row} ${
+                                                                isActive
+                                                                    ? styles.rowActive
+                                                                    : ''
+                                                            }`}
+                                                            onClick={() =>
+                                                                choose(result)
+                                                            }
+                                                            onMouseEnter={() =>
+                                                                setActive(
+                                                                    myIndex
+                                                                )
+                                                            }
+                                                            title={`${result.title}${
+                                                                result.subtitle
+                                                                    ? ' — ' +
+                                                                      result.subtitle
+                                                                    : ''
+                                                            }`}
+                                                        >
+                                                            <span
+                                                                className={
+                                                                    styles.rowTitle
+                                                                }
+                                                            >
+                                                                {result.title}
+                                                            </span>
+                                                            {result.subtitle && (
+                                                                <span
+                                                                    className={
+                                                                        styles.rowSub
+                                                                    }
+                                                                >
+                                                                    {
+                                                                        result.subtitle
+                                                                    }
+                                                                </span>
+                                                            )}
+                                                            {isActive && (
+                                                                <CornerDownLeft
+                                                                    size={13}
+                                                                    aria-hidden="true"
+                                                                    className={
+                                                                        styles.rowEnter
+                                                                    }
+                                                                />
+                                                            )}
+                                                        </button>
+                                                    </li>
+                                                );
+                                            })}
+                                        </ul>
+                                    </section>
+                                ))}
+                        </div>
+
+                        <footer className={styles.foot}>
+                            <span>
+                                <kbd className={styles.kbd}>↑</kbd>
+                                <kbd className={styles.kbd}>↓</kbd> move
+                            </span>
+                            <span>
+                                <kbd className={styles.kbd}>↵</kbd> open
+                            </span>
+                            <span>
+                                <kbd className={styles.kbd}>{shortcut}</kbd>{' '}
+                                toggle
+                            </span>
+                        </footer>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default UniversalSearch;

package/src/components/auth/Login.jsx

@@ -5,13 +5,18 @@ import './authFont';
 import React, { useEffect, useRef, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { Eye, EyeOff } from 'lucide-react';
+import { Eye, EyeOff, KeyRound } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 import AuthLoading from './AuthLoading';
 import AuthBrandPanel from './AuthBrandPanel';
 import { resolveAuthEndpoints } from './authEndpoints';
 import { syncCsrfFromResponse } from './authHelpers';
+import {
+    getPasskeyCredential,
+    isPasskeyCancellation,
+    isPasskeySupported,
+} from './webauthn';
 
 import styles from '../styles/Login.module.scss';
 
@@ -24,6 +29,8 @@ const DEFAULT_COPY = {
     title: 'Sign in',
     sso: 'Sign in with Microsoft',
     ssoRedirecting: 'Redirecting…',
+    passkey: 'Sign in with a passkey',
+    passkeyPending: 'Waiting for your passkey…',
     altToggle: 'Sign in with email instead',
     divider: 'or sign in with email',
     emailLabel: 'Email',
@@ -40,6 +47,11 @@ const Login = ({
     logo,
     loginBg,
     providers,
+    // Whether the host offers passkeys. Config-driven exactly like
+    // `providers`: the server says whether the feature exists at all, and
+    // this screen additionally checks the browser can do WebAuthn before
+    // drawing anything.
+    passkeys = false,
     setSystemAuth,
     setUserProfile,
     config = {},
@@ -70,25 +82,42 @@ const Login = ({
     // redirect, and a `previous` URL after sign-in. Never lowered: there is
     // nothing to come back to.
     const [isLeaving, setIsLeaving] = useState(false);
+    // The passkey ceremony: the browser's own sheet is up and the
+    // authenticator is waiting to be touched. Its own flag rather than
+    // `isLoading`, because the button that started it has a label of its own
+    // to show while it runs.
+    const [isPasskeyPending, setIsPasskeyPending] = useState(false);
     // Any request in flight, or the page on its way out. Every control on the
     // screen keys off this, so a second submit is impossible during either.
-    const isBusy = isLoading || isLeaving;
+    const isBusy = isLoading || isLeaving || isPasskeyPending;
     const [showPassword, setShowPassword] = useState(false);
 
     // Collapsed behind a button, since Microsoft is how nearly everyone signs
     // in. Open from the start when there is no SSO provider configured —
     // otherwise the only way in would be hidden behind a disclosure.
     const ssoAvailable = Array.isArray(providers) && providers.length > 0;
-    const [showEmail, setShowEmail] = useState(!ssoAvailable);
+    // Two conditions, deliberately: the host has to offer passkeys AND the
+    // browser has to be able to do them. Read once — a browser does not grow
+    // WebAuthn support mid-session, and re-checking on every render would
+    // make this a moving target for the collapse logic below.
+    const [passkeyAvailable] = useState(
+        () => !!passkeys && isPasskeySupported()
+    );
+    // The email form stays open when it is the only way in. Either
+    // alternative being present is enough to fold it away.
+    const [showEmail, setShowEmail] = useState(
+        !ssoAvailable && !passkeyAvailable
+    );
+    const hasAlternative = ssoAvailable || passkeyAvailable;
     const emailRef = useRef(null);
 
     // Opening the form should put the cursor where typing starts, rather than
     // leaving it on the button that opened it.
     useEffect(() => {
-        if (showEmail && ssoAvailable) {
+        if (showEmail && hasAlternative) {
             emailRef.current?.focus();
         }
-    }, [showEmail, ssoAvailable]);
+    }, [showEmail, hasAlternative]);
 
     const [auth, setAuth] = useState({
         email: '',
@@ -102,6 +131,39 @@ const Login = ({
         password: '',
     });
 
+    // A failed SSO round trip returns as a full page load, not a fetch — there
+    // is no response for the backend to put a message in, so it puts one in
+    // `?error=`. Captured on the first render (GenericAuth's profile check can
+    // navigate this screen and drop the query string a moment later) and
+    // raised through the same toast every other failure on this screen uses.
+    const [entryError] = useState(() => {
+        if (typeof window === 'undefined') {
+            return '';
+        }
+
+        return new URLSearchParams(window.location.search).get('error') || '';
+    });
+
+    useEffect(() => {
+        if (!entryError) {
+            return;
+        }
+
+        // Longer than the default: "no account for you, ask an administrator"
+        // is a sentence to act on, not a status blip.
+        toast.error(entryError, { autoClose: 10000 });
+
+        // Strip it, so a reload does not replay a message about an attempt
+        // that is over. `state` is carried across — a bounce from a protected
+        // page parks the intended destination there.
+        navigate(location.pathname, {
+            replace: true,
+            state: location.state,
+        });
+        // Once, for the message the page arrived carrying.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     const renderSsoButton = () => {
         if (!providers || providers.length === 0) {
             return null;
@@ -156,6 +218,75 @@ const Login = ({
         return content;
     };
 
+    /**
+     * CustomFetch as a plain promise, with its automatic error toast off.
+     *
+     * The passkey flow is three steps that only make sense in order, and a
+     * failure part way through needs one message written by the code below —
+     * not the raw server string the default handler would raise.
+     */
+    const postJson = (url, body) =>
+        new Promise((resolve, reject) => {
+            CustomFetch(url, 'POST', body, resolve, (message) =>
+                reject(new Error(message || 'Request failed.'))
+            );
+        });
+
+    /**
+     * Sign in with a passkey.
+     *
+     * Challenge from the server, signed by the authenticator, back to the
+     * server. No email is asked for and none is sent: the credential is
+     * discoverable, so it carries the identity itself.
+     */
+    const handlePasskey = async () => {
+        if (isBusy) {
+            return;
+        }
+
+        setIsPasskeyPending(true);
+
+        try {
+            const options = await postJson(urls.passkeyLoginOptions, {});
+            const assertion = await getPasskeyCredential(options);
+            const result = await postJson(urls.passkeyLogin, {
+                ...assertion,
+                location: location.state?.previousUrl || '',
+            });
+
+            // Same response shape as the email form's, and handled the same
+            // way — see handleSubmit.
+            syncCsrfFromResponse(result);
+            setUserProfile(result.user);
+
+            if (result.previous && result.previous !== '') {
+                setIsLeaving(true);
+                window.location.href = result.previous;
+            } else {
+                // Stays pending: GenericAuth's curtain takes over from here,
+                // and a button snapping back to idle underneath it reads as
+                // "nothing happened".
+                setSystemAuth(true);
+            }
+        } catch (error) {
+            setIsPasskeyPending(false);
+
+            // Dismissing the browser's sheet is not a failure. The person
+            // just decided not to; telling them so in red is noise.
+            if (isPasskeyCancellation(error)) {
+                return;
+            }
+
+            toast.error(
+                error?.message ||
+                    'That passkey could not be used. Please try again, or sign in with your email.'
+            );
+
+            // Leave a way forward on screen rather than only a red toast.
+            setShowEmail(true);
+        }
+    };
+
     const handleChange = (e) => {
         if (e) {
             const value =
@@ -317,14 +448,39 @@ const Login = ({
                         {branding.signInHint ||
                             (ssoAvailable
                                 ? 'Use your Microsoft account to continue.'
-                                : 'Sign in with your email and password.')}
+                                : passkeyAvailable
+                                  ? 'Use your passkey to continue.'
+                                  : 'Sign in with your email and password.')}
                     </p>
 
                     {/* SSO leads when configured; the email form stays
                         available underneath for accounts without it. */}
                     {renderSsoButton()}
 
-                    {ssoAvailable && !showEmail && (
+                    {/* Then the passkey, for the people who have set one up.
+                        Below Microsoft rather than above it: SSO is how most
+                        of this company signs in, and a passkey is something a
+                        person opted into for themselves. */}
+                    {passkeyAvailable && (
+                        <button
+                            type="button"
+                            className={styles.passkey}
+                            disabled={isBusy}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                handlePasskey();
+                            }}
+                        >
+                            <span className={styles.passkeyMark}>
+                                <KeyRound size={18} strokeWidth={1.9} />
+                            </span>
+                            {isPasskeyPending
+                                ? copy.passkeyPending
+                                : copy.passkey}
+                        </button>
+                    )}
+
+                    {hasAlternative && !showEmail && (
                         <button
                             type="button"
                             className={styles.altToggle}
@@ -336,7 +492,7 @@ const Login = ({
                         </button>
                     )}
 
-                    {showEmail && ssoAvailable && (
+                    {showEmail && hasAlternative && (
                         <div className={styles.divider}>
                             <span>{copy.divider}</span>
                         </div>