npm - @visns-studio/visns-components - Versions diffs - 6.32.2 → 6.34.0 - Mend

@visns-studio/visns-components 6.32.2 → 6.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/README.md +504 -0
package/package.json +1 -1
package/src/components/DataGrid.jsx +44 -2
package/src/components/Field.jsx +32 -0
package/src/components/Form.jsx +39 -2
package/src/components/Navigation.jsx +353 -43
package/src/components/Notification.jsx +13 -2
package/src/components/TableFilter.jsx +14 -2
package/src/components/auth/Login.jsx +9 -2
package/src/components/auth/PasskeyEnrolPrompt.jsx +269 -0
package/src/components/auth/Profile.jsx +422 -26
package/src/components/auth/authEndpoints.js +43 -0
package/src/components/auth/passkeyClient.js +102 -0
package/src/components/auth/passkeyPrompt.js +408 -0
package/src/components/auth/profileLayout.js +45 -0
package/src/components/controls/DataGridSearch.jsx +16 -2
package/src/components/controls/DataGridSortSheet.jsx +2 -0
package/src/components/generic/ActionButtons.jsx +1 -1
package/src/components/generic/GenericAuth.jsx +197 -21
package/src/components/generic/GenericDetail.jsx +95 -3
package/src/components/generic/GenericMain.jsx +7 -0
package/src/components/generic/StandardModal.jsx +71 -158
package/src/components/sms/SmsCampaigns.jsx +2487 -0
package/src/components/sms/SmsInbox.jsx +18 -0
package/src/components/sms/SmsThreadPanel.jsx +20 -0
package/src/components/sms/smsEndpoints.js +23 -0
package/src/components/styles/DataGrid.module.scss +22 -0
package/src/components/styles/Form.module.scss +100 -2
package/src/components/styles/Navigation.module.scss +354 -15
package/src/components/styles/Notification.module.scss +140 -8
package/src/components/styles/PasskeyEnrolPrompt.module.scss +105 -0
package/src/components/styles/Profile.module.scss +157 -0
package/src/components/styles/Sms.module.scss +451 -0
package/src/components/styles/StandardModal.module.scss +273 -0
package/src/components/styles/global.css +24 -5
package/src/components/utils/navCollapsed.js +201 -0
package/src/components/utils/rowActionSettings.js +76 -0
package/src/components/utils/usePasskeysEnabled.js +84 -0
package/src/components/utils/useShellLayout.js +131 -0
package/src/index.js +103 -1
package/src/utils/rememberTab.js +70 -0

package/src/components/auth/Profile.jsx CHANGED Viewed

@@ -15,7 +15,25 @@ import { toast } from 'react-toastify';
 import SignaturePad from 'react-signature-pad-wrapper';
 import Swal from 'sweetalert2';
 import CustomFetch from '../Fetch';
-import TableFilter from '../TableFilter';
+import TableFilter, { isFlatFilterList } from '../TableFilter';
+// Which shell the app is wearing, read off `<html data-layout>` — GenericAuth
+// writes it. See utils/useShellLayout.js.
+import { useShellLayout } from '../utils/useShellLayout';
+// Whether this app offers passkeys, read off `<html data-passkeys>` — the same
+// arrangement, for the same reason: this screen is mounted by the consuming
+// app's route config and is never handed GenericAuth's props.
+import { usePasskeysEnabled } from '../utils/usePasskeysEnabled';
+import { resolveProfileTabLayout } from './profileLayout';
+// The three passkey requests, shared with the enrolment prompt so the two
+// cannot drift — the ceremony in particular is ordered steps that fail at the
+// authenticator rather than at a lint.
+import {
+    deletePasskey,
+    enrolPasskey,
+    listPasskeys,
+} from './passkeyClient';
+import { defaultPasskeyName, resolvePasskeyOptions } from './passkeyPrompt';
+import { isPasskeyCancellation, isPasskeySupported } from './webauthn';
 import styles from '../styles/Profile.module.scss';
 /**
@@ -63,27 +81,63 @@ const FormField = memo(
     }
 );
-/** The tabs this screen has always had. */
+/**
+ * The tabs this screen owns.
+ *
+ * All three ids are reserved — `normaliseExtraTabs` refuses a contributed tab
+ * that collides with any of them — but only the first two are always drawn.
+ * Passkeys appears when the application has the feature on; see
+ * `visibleBuiltInTabs` below.
+ */
 const BUILT_IN_TABS = [
     { id: 'overview', label: 'Overview' },
     { id: '2fa', label: 'Two-Factor Authentication' },
+    { id: 'passkeys', label: 'Passkeys' },
 ];
+/** The id of the tab that only exists when passkeys are switched on. */
+const PASSKEYS_TAB = 'passkeys';
+/** A credential's own label, or the date it was created, or a last resort. */
+const passkeyLabel = (passkey) => {
+    if (typeof passkey?.alias === 'string' && passkey.alias.trim() !== '') {
+        return passkey.alias.trim();
+    }
+    if (passkey?.created_at) {
+        const created = new Date(passkey.created_at);
+        if (!Number.isNaN(created.getTime())) {
+            return `Added ${created.toLocaleDateString()}`;
+        }
+    }
+    return 'Passkey';
+};
 /**
  * Normalise a host's `extraTabs` into the shape `filters` holds.
  *
  * Anything without an `id` and a `render` is dropped rather than rendered as
- * an empty tab, and an id that collides with a built-in is dropped too — a
- * host must not be able to shadow Overview or 2FA out of existence.
+ * an empty tab, and an id that collides with a tab this screen is DRAWING is
+ * dropped too — a host must not be able to shadow Overview or 2FA out of
+ * existence.
+ *
+ * `reserved` is the drawn list, not `BUILT_IN_TABS`, for one specific reason:
+ * `passkeys` is a built-in only when the application has passkeys switched on.
+ * An app that contributed its own tab with that id before 6.33.0 — which is
+ * exactly what `extraTabs` was added for — keeps it while the feature is off,
+ * and loses it to the built-in when the feature is turned on, which is the
+ * right way round.
  */
-const normaliseExtraTabs = (extraTabs) =>
+const normaliseExtraTabs = (extraTabs, reserved) =>
     (Array.isArray(extraTabs) ? extraTabs : []).filter(
         (tab) =>
             tab &&
             typeof tab.id === 'string' &&
             tab.id !== '' &&
             typeof tab.render === 'function' &&
-            !BUILT_IN_TABS.some((builtIn) => builtIn.id === tab.id)
+            !reserved.includes(tab.id)
     );
 const Profile = ({
@@ -104,8 +158,48 @@ const Profile = ({
      * fetches on mount does not fetch until it is looked at.
      */
     extraTabs,
+    /**
+     * Where the tabs go: `'rail'` down the left of the panel, or
+     * `'underline'` as a horizontal strip above it — the same two names, and
+     * the same TableFilter variant, GenericIndex's `tabLayout` prop takes.
+     *
+     * PASSING NOTHING IS THE NORMAL CASE. The default is resolved from the
+     * app's shell layout: a top-bar app (`layout="full"`) keeps the rail it
+     * has always had, and a sidebar app (`layout="cms"` / `"simple"`) gets
+     * the strip, because on those the page already has a vertical rail down
+     * its left edge and a second one beside it is two columns of navigation
+     * to reach two tabs. See profileLayout.js, where the rule is written out
+     * and tested. Naming either value here overrides all of that.
+     */
+    tabLayout,
+    /**
+     * Whether this screen offers the Passkeys tab.
+     *
+     * PASSING NOTHING IS THE NORMAL CASE, and it is not "off": it reads the
+     * application-wide switch that GenericAuth's `passkeys` prop writes onto
+     * `<html data-passkeys>`. That is what makes "let them add a passkey" a
+     * one-prop feature for a consuming app — this screen is mounted by the
+     * app's own route config and could not otherwise be told.
+     *
+     * A boolean, or the same object shape GenericAuth takes, overrides it —
+     * for a host that wants the tab on one profile screen and not another.
+     */
+    passkeys,
+    /**
+     * Endpoint overrides for the passkey requests, merged over
+     * DEFAULT_AUTH_ENDPOINTS exactly as in the auth screens. Nothing else on
+     * this page is configurable yet, which is why it is only used there.
+     */
+    endpoints,
 }) => {
     const location = useLocation();
+    const shellLayout = useShellLayout();
+    // The app-wide switch, unless this screen was told otherwise.
+    const appOffersPasskeys = usePasskeysEnabled();
+    const passkeysEnabled =
+        passkeys === undefined || passkeys === null
+            ? appOffersPasskeys
+            : resolvePasskeyOptions(passkeys).enabled;
     const signatureRef = useRef(null);
     const [isLoading, setIsLoading] = useState(false);
     const [profile, setProfile] = useState({
@@ -132,11 +226,32 @@ const Profile = ({
     const [verificationCode, setVerificationCode] = useState('');
     const [showTwoFactorSetup, setShowTwoFactorSetup] = useState(false);
+    // Passkeys. `null` means "not fetched yet", which the tab draws as a
+    // loading line rather than as "you have none" — the two look identical in
+    // an empty array and mean opposite things.
+    const [passkeyList, setPasskeyList] = useState(null);
+    const [passkeyBusy, setPasskeyBusy] = useState(false);
+    /** The tabs actually drawn: the always-there two, plus passkeys if on. */
+    const builtInTabs = useMemo(
+        () =>
+            BUILT_IN_TABS.filter(
+                (tab) => tab.id !== PASSKEYS_TAB || passkeysEnabled
+            ),
+        [passkeysEnabled]
+    );
+    /** Their ids, which are the ids a contributed tab may not take. */
+    const builtInIds = useMemo(
+        () => builtInTabs.map((tab) => tab.id),
+        [builtInTabs]
+    );
     // Keyed by id so a host can look one up while rendering, and so the
     // reconcile effect below can tell a contributed tab from a built-in.
     const contributedTabs = useMemo(
-        () => normaliseExtraTabs(extraTabs),
-        [extraTabs]
+        () => normaliseExtraTabs(extraTabs, builtInIds),
+        [extraTabs, builtInIds]
     );
     // A stable identity for "which tabs exist", so the reconcile effect fires
@@ -145,18 +260,12 @@ const Profile = ({
     const contributedIds = contributedTabs.map((tab) => tab.id).join('|');
     const [filters, setFilters] = useState(() => [
-        {
-            id: 'overview',
-            show: true,
-            label: 'Overview',
-            class: 'subactive',
-        },
-        {
-            id: '2fa',
-            show: false,
-            label: 'Two-Factor Authentication',
-            class: '',
-        },
+        ...builtInTabs.map((tab, index) => ({
+            id: tab.id,
+            show: index === 0,
+            label: tab.label,
+            class: index === 0 ? 'subactive' : '',
+        })),
         ...contributedTabs.map((tab) => ({
             id: tab.id,
             show: false,
@@ -181,7 +290,7 @@ const Profile = ({
     useEffect(() => {
         setFilters((previous) => {
             const wanted = [
-                ...BUILT_IN_TABS.map((tab) => tab.id),
+                ...builtInTabs.map((tab) => tab.id),
                 ...contributedTabs.map((tab) => tab.id),
             ];
@@ -209,7 +318,7 @@ const Profile = ({
                     show: false,
                     label:
                         contributed?.label ||
-                        BUILT_IN_TABS.find((tab) => tab.id === id)?.label ||
+                        builtInTabs.find((tab) => tab.id === id)?.label ||
                         id,
                     class: '',
                 };
@@ -222,7 +331,11 @@ const Profile = ({
             return next;
         });
-    }, [contributedIds]); // eslint-disable-line react-hooks/exhaustive-deps
+        // `passkeysEnabled` belongs here beside the contributed ids: the
+        // attribute it reads is written by GenericAuth's insertion effect,
+        // which can land after this screen's first render (a refresh straight
+        // onto /profile), and the tab has to appear when it does.
+    }, [contributedIds, passkeysEnabled]); // eslint-disable-line react-hooks/exhaustive-deps
     const handleClearSignature = useCallback((e) => {
         if (e) {
@@ -563,6 +676,101 @@ const Profile = ({
     }, []);
     // Memoized content renderer to prevent unnecessary re-renders
+    /* ---------------------------------------------------------------------
+     | Passkeys
+     |
+     | The same three requests the enrolment prompt makes, through the same
+     | module (passkeyClient.js) — deliberately not a second copy of the
+     | ceremony here, because the two would drift the first time one of them
+     | was fixed and the failure would be an authenticator refusing rather
+     | than anything a test or a lint would catch.
+     * ------------------------------------------------------------------ */
+    /** Whether the passkeys tab is the one currently on screen. */
+    const passkeysTabShown = filters.some(
+        (filter) => filter.id === PASSKEYS_TAB && filter.show
+    );
+    const refreshPasskeys = useCallback(async () => {
+        try {
+            const { passkeys: credentials } = await listPasskeys(endpoints);
+            setPasskeyList(credentials);
+        } catch (error) {
+            // An empty list rather than a permanent "loading": the tab has to
+            // settle on something, and the toast says why it is empty.
+            setPasskeyList([]);
+            toast.error(
+                error?.message || 'Your passkeys could not be loaded.'
+            );
+        }
+    }, [endpoints]);
+    // Fetched when the tab is first looked at, not on mount: a user who never
+    // opens it never makes the request, which is the same rule `extraTabs`
+    // renderers follow.
+    useEffect(() => {
+        if (passkeysTabShown && passkeyList === null) {
+            refreshPasskeys();
+        }
+    }, [passkeysTabShown, passkeyList, refreshPasskeys]);
+    const handleAddPasskey = useCallback(async () => {
+        setPasskeyBusy(true);
+        try {
+            await enrolPasskey(endpoints, { name: defaultPasskeyName() });
+            toast.success('Passkey added.');
+            await refreshPasskeys();
+        } catch (error) {
+            // Closing the browser's own sheet is not a failure; see
+            // isPasskeyCancellation.
+            if (!isPasskeyCancellation(error)) {
+                toast.error(
+                    error?.message ||
+                        'That passkey could not be added. Please try again.'
+                );
+            }
+        } finally {
+            setPasskeyBusy(false);
+        }
+    }, [endpoints, refreshPasskeys]);
+    const handleRemovePasskey = useCallback(
+        async (passkey) => {
+            const result = await Swal.fire({
+                title: 'Remove this passkey',
+                text: `${passkeyLabel(
+                    passkey
+                )} will no longer sign you in. You can add it again at any time.`,
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: 'var(--primary-color)',
+                cancelButtonColor: 'var(--secondary-color)',
+                confirmButtonText: 'Yes, remove it',
+                cancelButtonText: 'No, keep it',
+            });
+            if (!result.isConfirmed) {
+                return;
+            }
+            setPasskeyBusy(true);
+            try {
+                await deletePasskey(endpoints, passkey.id);
+                toast.success('Passkey removed.');
+                await refreshPasskeys();
+            } catch (error) {
+                toast.error(
+                    error?.message || 'That passkey could not be removed.'
+                );
+            } finally {
+                setPasskeyBusy(false);
+            }
+        },
+        [endpoints, refreshPasskeys]
+    );
     const renderContent = useCallback(
         (filter) => {
             if (filter.show && filter.id === 'overview') {
@@ -1171,6 +1379,146 @@ const Profile = ({
                         </div>
                     </div>
                 );
+            } else if (filter.show && filter.id === PASSKEYS_TAB) {
+                const supported = isPasskeySupported();
+                return (
+                    <div className={styles.gridtxt} key={filter.id}>
+                        <div className={styles.gridtxt__header}>
+                            <span>Passkeys</span>
+                        </div>
+                        {/* Same two-column sectioning as the other two tabs:
+                            what a passkey is on the left, what this account
+                            holds and the control that changes it on the
+                            right. */}
+                        <div className={styles.form}>
+                            <section className={styles.section}>
+                                <div className={styles.sectionAside}>
+                                    <h3 className={styles.sectionTitle}>
+                                        This account&apos;s passkeys
+                                    </h3>
+                                    <p className={styles.sectionDescription}>
+                                        A passkey signs you in with the
+                                        fingerprint, face or screen PIN of a
+                                        device you already carry — no password
+                                        to type and nothing to remember. The
+                                        key itself never leaves the device,
+                                        and each device you use needs its own.
+                                    </p>
+                                </div>
+                                <div className={styles.sectionFields}>
+                                    <div className={styles.twoFactorStatus}>
+                                        {passkeyList === null ? (
+                                            <p
+                                                className={
+                                                    styles.sectionDescription
+                                                }
+                                            >
+                                                Loading your passkeys…
+                                            </p>
+                                        ) : passkeyList.length === 0 ? (
+                                            <p
+                                                className={
+                                                    styles.sectionDescription
+                                                }
+                                            >
+                                                You have no passkeys yet.
+                                            </p>
+                                        ) : (
+                                            <ul
+                                                className={
+                                                    styles.passkeyList
+                                                }
+                                            >
+                                                {passkeyList.map((passkey) => (
+                                                    <li
+                                                        key={passkey.id}
+                                                        className={
+                                                            styles.passkeyItem
+                                                        }
+                                                    >
+                                                        <span
+                                                            className={
+                                                                styles.passkeyName
+                                                            }
+                                                        >
+                                                            {passkeyLabel(
+                                                                passkey
+                                                            )}
+                                                        </span>
+                                                        {passkey.last_used_at ? (
+                                                            <span
+                                                                className={
+                                                                    styles.passkeyMeta
+                                                                }
+                                                            >
+                                                                Last used{' '}
+                                                                {new Date(
+                                                                    passkey.last_used_at
+                                                                ).toLocaleDateString()}
+                                                            </span>
+                                                        ) : (
+                                                            <span
+                                                                className={
+                                                                    styles.passkeyMeta
+                                                                }
+                                                            >
+                                                                Not used yet
+                                                            </span>
+                                                        )}
+                                                        <button
+                                                            className={`${styles.btn} ${styles.btnDanger}`}
+                                                            onClick={() =>
+                                                                handleRemovePasskey(
+                                                                    passkey
+                                                                )
+                                                            }
+                                                            disabled={
+                                                                passkeyBusy
+                                                            }
+                                                            type="button"
+                                                        >
+                                                            Remove
+                                                        </button>
+                                                    </li>
+                                                ))}
+                                            </ul>
+                                        )}
+                                        {/* The browser is the other half of
+                                            the question: a host can offer
+                                            passkeys and this browser still
+                                            not be able to make one. Saying so
+                                            beats a button that fails. */}
+                                        {supported ? (
+                                            <button
+                                                className={`${styles.btn} ${styles.btnPrimary}`}
+                                                onClick={handleAddPasskey}
+                                                disabled={passkeyBusy}
+                                                aria-busy={passkeyBusy}
+                                                type="button"
+                                            >
+                                                {passkeyBusy
+                                                    ? 'Waiting for your device…'
+                                                    : 'Add a passkey'}
+                                            </button>
+                                        ) : (
+                                            <p
+                                                className={
+                                                    styles.sectionDescription
+                                                }
+                                            >
+                                                This browser cannot create
+                                                passkeys. Try the device you
+                                                sign in on most.
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
+                            </section>
+                        </div>
+                    </div>
+                );
             }
             // A tab the consuming application contributed. Wrapped in the
@@ -1220,6 +1568,10 @@ const Profile = ({
             copyToClipboard,
             handleVerificationCodeChange,
             contributedTabs,
+            passkeyList,
+            passkeyBusy,
+            handleAddPasskey,
+            handleRemovePasskey,
         ]
     );
@@ -1310,21 +1662,65 @@ const Profile = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location.search, location.pathname, filterIds]);
+    /*
+     * Rail or strip.
+     *
+     * `isFlatFilterList` is TableFilter's own gate, checked here for the same
+     * reason GenericIndex and GenericDetail check it: the container built
+     * below must never disagree with the markup TableFilter puts inside it.
+     * Profile's tabs are flat today — the two built-ins plus whatever
+     * `extraTabs` adds, none of which take children — so this is a guard
+     * against a future shape rather than a live branch.
+     */
+    const tabsUnderlined =
+        resolveProfileTabLayout({ tabLayout, shellLayout }) === 'underline' &&
+        isFlatFilterList(filters);
     return (
         <div>
             <div className={styles.grid}>
                 <div className={styles.grid__row}>
-                    <div className={`${styles.grid__full} ${styles.crmtitle}`}>
+                    {/* In strip mode the title is the page's own title row —
+                        type on the page ground, the treatment GenericIndex
+                        and GenericDetail use — rather than a white card
+                        holding two words above a second white card holding
+                        the rail. */}
+                    <div
+                        className={[
+                            styles.grid__full,
+                            styles.crmtitle,
+                            tabsUnderlined ? styles['crmtitle--flat'] : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                    >
                         <h1>My Profile</h1>
                     </div>
                 </div>
             </div>
             <div className={styles.grid}>
-                <div className={styles.grid__subrow}>
-                    <div className={styles.grid__subnav}>
+                <div
+                    className={[
+                        styles.grid__subrow,
+                        tabsUnderlined ? styles['grid__subrow--stacked'] : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
+                >
+                    <div
+                        className={[
+                            styles.grid__subnav,
+                            tabsUnderlined
+                                ? styles['grid__subnav--underline']
+                                : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                    >
                         <TableFilter
                             filters={filters}
                             setFilters={setFilters}
+                            variant={tabsUnderlined ? 'underline' : undefined}
                         />
                     </div>
                     <div className={styles.grid__subcontent}>

package/src/components/auth/authEndpoints.js CHANGED Viewed

@@ -27,6 +27,22 @@ export const DEFAULT_AUTH_ENDPOINTS = {
     passkeyLoginOptions: '/login/passkey/options',
     /** Login.jsx — POST the signed assertion; answers like `authenticate`. */
     passkeyLogin: '/login/passkey',
+    /*
+     * The authenticated half of the same feature: managing the credentials a
+     * signed-in user holds. These four are the defaults shipped by
+     * visnsstudio/visns-packages — `config('visns-packages.passkeys.uris')` —
+     * with the leading slash the login pair above already carries. An app that
+     * mounts the controller somewhere else overrides them through the same
+     * `endpoints` prop, one key at a time.
+     */
+    /** PasskeyEnrolPrompt / Profile — GET `{passkeys: [...]}` for this user. */
+    passkeyIndex: '/ajax/passkeys',
+    /** POST {} for a credential-creation challenge. */
+    passkeyRegisterOptions: '/ajax/passkeys/options',
+    /** POST the created credential plus `{alias}`. */
+    passkeyRegister: '/ajax/passkeys/register',
+    /** DELETE one credential. `{id}` is replaced with its base64url id. */
+    passkeyDestroy: '/ajax/passkeys/{id}',
     /** GenericAuth.jsx — GET, polled to decide whether a session exists. */
     profile: '/ajax/user/profile',
     /** Reset.jsx — POST {email}. */
@@ -63,6 +79,33 @@ export const resolveAuthEndpoints = (overrides) => {
     return resolved;
 };
+/**
+ * The `destroy` URL for one credential.
+ *
+ * The Laravel route carries the credential id as a path parameter, and the id
+ * is base64url — path-safe by construction, but encoded anyway: the template
+ * is a consumer-supplied string and nothing here may assume what it substitutes
+ * into. A template with no `{id}` placeholder gets the id appended, so
+ * `'/ajax/passkeys'` works as well as `'/ajax/passkeys/{id}'`.
+ *
+ * @param {string} template  Usually `endpoints.passkeyDestroy`.
+ * @param {string} id        The credential id, exactly as the server gave it.
+ * @returns {string}
+ */
+export const resolvePasskeyDestroyUrl = (template, id) => {
+    const path =
+        typeof template === 'string' && template !== ''
+            ? template
+            : DEFAULT_AUTH_ENDPOINTS.passkeyDestroy;
+    const encoded = encodeURIComponent(String(id ?? ''));
+    if (path.includes('{id}')) {
+        return path.replace('{id}', encoded);
+    }
+    return `${path.replace(/\/+$/, '')}/${encoded}`;
+};
 /** The client-portal route paths, as they were hardcoded before 6.7.0. */
 export const DEFAULT_CLIENT_PATHS = {
     /** Route segment the client routes are nested under in GenericAuth. */