@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/auth/Profile.jsx

@@ -1,7 +1,14 @@
 // src/components/auth/Profile.jsx
 import '../styles/global.css';
 
-import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
+import React, {
+    useState,
+    useEffect,
+    useMemo,
+    useRef,
+    useCallback,
+    memo,
+} from 'react';
 import { useLocation } from 'react-router-dom';
 import PasswordStrengthBar from 'react-password-strength-bar';
 import { toast } from 'react-toastify';
@@ -56,7 +63,48 @@ const FormField = memo(
     }
 );
 
-const Profile = ({ userProfile, setUserProfile }) => {
+/** The tabs this screen has always had. */
+const BUILT_IN_TABS = [
+    { id: 'overview', label: 'Overview' },
+    { id: '2fa', label: 'Two-Factor Authentication' },
+];
+
+/**
+ * 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.
+ */
+const normaliseExtraTabs = (extraTabs) =>
+    (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)
+    );
+
+const Profile = ({
+    userProfile,
+    setUserProfile,
+    /**
+     * Tabs contributed by the consuming application:
+     * `[{ id, label, render }]`, appended after the built-in two and drawn
+     * through the same rail and the same section chrome, so a contributed tab
+     * is indistinguishable from a native one.
+     *
+     * This exists because a CRM's own account settings talk to that CRM's own
+     * endpoints — the Omnia passkey screen is the first — and this library is
+     * shared, so those cannot live in here. Passing nothing leaves the screen
+     * exactly as it was.
+     *
+     * `render` is called only while its tab is selected, so a section that
+     * fetches on mount does not fetch until it is looked at.
+     */
+    extraTabs,
+}) => {
     const location = useLocation();
     const signatureRef = useRef(null);
     const [isLoading, setIsLoading] = useState(false);
@@ -84,7 +132,19 @@ const Profile = ({ userProfile, setUserProfile }) => {
     const [verificationCode, setVerificationCode] = useState('');
     const [showTwoFactorSetup, setShowTwoFactorSetup] = useState(false);
 
-    const [filters, setFilters] = useState([
+    // 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]
+    );
+
+    // A stable identity for "which tabs exist", so the reconcile effect fires
+    // when the set changes and not merely because the host rebuilt the array
+    // literal on a re-render — which it does on every one.
+    const contributedIds = contributedTabs.map((tab) => tab.id).join('|');
+
+    const [filters, setFilters] = useState(() => [
         {
             id: 'overview',
             show: true,
@@ -97,8 +157,73 @@ const Profile = ({ userProfile, setUserProfile }) => {
             label: 'Two-Factor Authentication',
             class: '',
         },
+        ...contributedTabs.map((tab) => ({
+            id: tab.id,
+            show: false,
+            label: tab.label || tab.id,
+            class: '',
+        })),
     ]);
 
+    /** Which tabs the rail currently holds — see the URL sync effect. */
+    const filterIds = filters.map((filter) => filter.id).join('|');
+
+    /**
+     * Keep the rail in step with a host that decides its tabs late.
+     *
+     * The initial state above is enough for a host passing a constant, which
+     * is the common case; this covers the one that only knows whether a tab
+     * applies once something has loaded. Existing entries are carried across
+     * untouched so the selection survives, and a tab that disappears while
+     * selected hands the selection back to Overview rather than leaving the
+     * screen blank.
+     */
+    useEffect(() => {
+        setFilters((previous) => {
+            const wanted = [
+                ...BUILT_IN_TABS.map((tab) => tab.id),
+                ...contributedTabs.map((tab) => tab.id),
+            ];
+
+            const unchanged =
+                previous.length === wanted.length &&
+                previous.every((filter, index) => filter.id === wanted[index]);
+
+            if (unchanged) {
+                return previous;
+            }
+
+            const next = wanted.map((id) => {
+                const existing = previous.find((filter) => filter.id === id);
+
+                if (existing) {
+                    return existing;
+                }
+
+                const contributed = contributedTabs.find(
+                    (tab) => tab.id === id
+                );
+
+                return {
+                    id,
+                    show: false,
+                    label:
+                        contributed?.label ||
+                        BUILT_IN_TABS.find((tab) => tab.id === id)?.label ||
+                        id,
+                    class: '',
+                };
+            });
+
+            // Nothing selected any more — the tab that was showing has gone.
+            if (!next.some((filter) => filter.show)) {
+                next[0] = { ...next[0], show: true, class: 'subactive' };
+            }
+
+            return next;
+        });
+    }, [contributedIds]); // eslint-disable-line react-hooks/exhaustive-deps
+
     const handleClearSignature = useCallback((e) => {
         if (e) {
             e.preventDefault();
@@ -1047,6 +1172,35 @@ const Profile = ({ userProfile, setUserProfile }) => {
                     </div>
                 );
             }
+
+            // A tab the consuming application contributed. Wrapped in the
+            // same `gridtxt` shell and header the two above use, so what the
+            // host supplies is only the body — it cannot get the chrome
+            // subtly wrong, and a change to the chrome reaches every tab.
+            if (filter.show) {
+                const contributed = contributedTabs.find(
+                    (tab) => tab.id === filter.id
+                );
+
+                if (contributed) {
+                    return (
+                        <div className={styles.gridtxt} key={filter.id}>
+                            <div className={styles.gridtxt__header}>
+                                <span>
+                                    {contributed.label || contributed.id}
+                                </span>
+                            </div>
+                            {/* Called here rather than held as an element, so
+                                nothing inside it mounts — or fetches — until
+                                the tab is actually being looked at. */}
+                            <div className={styles.form}>
+                                {contributed.render()}
+                            </div>
+                        </div>
+                    );
+                }
+            }
+
             return null;
         },
         [
@@ -1065,6 +1219,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
             disableTwoFactor,
             copyToClipboard,
             handleVerificationCodeChange,
+            contributedTabs,
         ]
     );
 
@@ -1102,26 +1257,58 @@ const Profile = ({ userProfile, setUserProfile }) => {
             setTwoFactorEnabled(false);
         }
 
-        // Check URL query parameters for tab selection
-        const queryParams = new URLSearchParams(location.search);
-        const tabParam = queryParams.get('tab');
-
-        if (tabParam === '2fa') {
-            // Update filters to show 2FA tab
-            setFilters((prevFilters) =>
-                prevFilters.map((filter) => ({
-                    ...filter,
-                    show: filter.id === '2fa',
-                    class: filter.id === '2fa' ? 'subactive' : '',
-                }))
-            );
+    }, [userProfile.name, userProfile.email, userProfile.signature]);
+
+    /**
+     * Select a tab from the URL.
+     *
+     * Two spellings, because two already existed in the wild. `?tab=<id>` is
+     * what this screen has always read — it only ever recognised `2fa`, and
+     * now recognises any tab that exists, contributed ones included. The
+     * trailing path segment is the other: apps route `/profile/:type` here,
+     * so `/profile/passkeys` and `/profile/2fa` now land on their tab instead
+     * of silently showing Overview.
+     *
+     * An unrecognised value selects nothing rather than clearing the rail, so
+     * a stray URL leaves the screen on Overview rather than blank.
+     *
+     * Split out of the form-reset effect above deliberately: that one wipes
+     * the name/email fields, and it must not run again because somebody
+     * switched tab.
+     */
+    useEffect(() => {
+        const fromQuery = new URLSearchParams(location.search).get('tab');
+        const fromPath = location.pathname
+            .replace(/\/+$/, '')
+            .split('/')
+            .pop();
+
+        const requested = [fromQuery, fromPath].find((candidate) =>
+            filters.some((filter) => filter.id === candidate)
+        );
+
+        if (!requested) {
+            return;
         }
-    }, [
-        userProfile.name,
-        userProfile.email,
-        userProfile.signature,
-        location.search,
-    ]);
+
+        setFilters((prevFilters) => {
+            if (prevFilters.find((filter) => filter.id === requested)?.show) {
+                return prevFilters;
+            }
+
+            return prevFilters.map((filter) => ({
+                ...filter,
+                show: filter.id === requested,
+                class: filter.id === requested ? 'subactive' : '',
+            }));
+        });
+        // Keyed on which tabs EXIST, not on `filters` itself: the id list
+        // changes only when the rail gains or loses a tab, so a late-arriving
+        // contributed tab still gets its deep link — while clicking between
+        // tabs (which changes `show`, not the ids) does not re-run this and
+        // pin the rail back to the URL.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location.search, location.pathname, filterIds]);
 
     return (
         <div>

package/src/components/auth/authEndpoints.js

@@ -23,6 +23,10 @@ export const DEFAULT_AUTH_ENDPOINTS = {
     twoFactorResend: '/login/two-factor-resend',
     /** Login.jsx — the azure SSO button navigates here. */
     azureSso: '/auth/azure',
+    /** Login.jsx — POST {} for a passkey assertion challenge. */
+    passkeyLoginOptions: '/login/passkey/options',
+    /** Login.jsx — POST the signed assertion; answers like `authenticate`. */
+    passkeyLogin: '/login/passkey',
     /** GenericAuth.jsx — GET, polled to decide whether a session exists. */
     profile: '/ajax/user/profile',
     /** Reset.jsx — POST {email}. */

package/src/components/auth/webauthn.js

@@ -0,0 +1,194 @@
+/**
+ * Passkey (WebAuthn) marshalling for the browser.
+ *
+ * `navigator.credentials` speaks ArrayBuffers and JSON speaks strings, so both
+ * ceremonies need the same translation in both directions. That is roughly
+ * forty lines of base64url, which is not worth an npm dependency — especially
+ * one that would ship in every consumer of this library.
+ *
+ * The wire format is the Laravel side's (laragear/webauthn): base64url in
+ * the options, base64url back in the credential. Padding is omitted on the
+ * way out; the server's decoder accepts either.
+ *
+ * Pure module (no React, no imports) so it can be unit-tested with
+ * `node --test`, the same way authEndpoints.js is.
+ */
+
+/**
+ * base64url string -> Uint8Array.
+ *
+ * Tolerates the padding a server may or may not have included.
+ */
+export const base64UrlToBytes = (value) => {
+    const base64 = String(value).replace(/-/g, '+').replace(/_/g, '/');
+    const padded = base64.padEnd(
+        base64.length + ((4 - (base64.length % 4)) % 4),
+        '='
+    );
+    const binary = atob(padded);
+    const bytes = new Uint8Array(binary.length);
+
+    for (let i = 0; i < binary.length; i += 1) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+
+    return bytes;
+};
+
+/**
+ * ArrayBuffer -> unpadded base64url.
+ *
+ * Built in chunks rather than `String.fromCharCode(...bytes)`: an attestation
+ * object runs to a couple of kilobytes, and spreading that many arguments is
+ * how this kind of helper blows the call stack on the one authenticator that
+ * returns a large one.
+ */
+export const bytesToBase64Url = (buffer) => {
+    const bytes = new Uint8Array(buffer);
+    let binary = '';
+
+    for (let i = 0; i < bytes.length; i += 0x8000) {
+        binary += String.fromCharCode.apply(
+            null,
+            bytes.subarray(i, i + 0x8000)
+        );
+    }
+
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+};
+
+/**
+ * Whether this browser can do WebAuthn at all.
+ *
+ * The screen still needs the server to say passkeys are switched on; this is
+ * the other half of that question.
+ */
+export const isPasskeySupported = () =>
+    typeof window !== 'undefined' &&
+    typeof window.PublicKeyCredential === 'function' &&
+    typeof navigator !== 'undefined' &&
+    !!navigator.credentials;
+
+/**
+ * Whether the person simply dismissed the passkey prompt.
+ *
+ * The credential API reports "you closed the sheet", "you let it time out"
+ * and "no key matched" as the same NotAllowedError, and none of the three is
+ * a failure worth a red toast — the person knows what they just did. Callers
+ * use this to fall silent instead.
+ */
+export const isPasskeyCancellation = (error) =>
+    !!error &&
+    (error.name === 'NotAllowedError' || error.name === 'AbortError');
+
+/** Turn the server's creation options into what the browser wants. */
+const parseCreationOptions = (options) => ({
+    ...options,
+    challenge: base64UrlToBytes(options.challenge),
+    user: {
+        ...options.user,
+        id: base64UrlToBytes(options.user.id),
+    },
+    excludeCredentials: (options.excludeCredentials || []).map(
+        (credential) => ({
+            ...credential,
+            id: base64UrlToBytes(credential.id),
+        })
+    ),
+});
+
+/** Turn the server's request options into what the browser wants. */
+const parseRequestOptions = (options) => {
+    const parsed = {
+        ...options,
+        challenge: base64UrlToBytes(options.challenge),
+    };
+
+    // Absent for a username-less sign-in, and it must STAY absent: an empty
+    // array means "no credential is acceptable", not "any".
+    if (Array.isArray(options.allowCredentials)) {
+        parsed.allowCredentials = options.allowCredentials.map(
+            (credential) => ({
+                ...credential,
+                id: base64UrlToBytes(credential.id),
+            })
+        );
+    }
+
+    return parsed;
+};
+
+/** Turn what the browser produced back into JSON for the server. */
+const serialiseCredential = (credential) => {
+    const response = {};
+
+    [
+        'clientDataJSON',
+        'attestationObject',
+        'authenticatorData',
+        'signature',
+        'userHandle',
+    ].forEach((key) => {
+        const value = credential.response[key];
+
+        if (value) {
+            response[key] = bytesToBase64Url(value);
+        }
+    });
+
+    // Which ways this authenticator can be reached — USB, NFC, the platform
+    // itself. Sent so a later sign-in can hint the browser where to look;
+    // not every authenticator reports it.
+    if (typeof credential.response.getTransports === 'function') {
+        const transports = credential.response.getTransports();
+
+        if (transports && transports.length) {
+            response.transports = transports;
+        }
+    }
+
+    return {
+        // Already base64url per the spec, and the server matches its stored
+        // primary key against exactly this string — do not re-encode it.
+        id: credential.id,
+        rawId: bytesToBase64Url(credential.rawId),
+        type: credential.type,
+        response,
+    };
+};
+
+/**
+ * Enrol: ask the authenticator for a new key pair.
+ *
+ * @param options the server's PublicKeyCredentialCreationOptions, as JSON
+ * @returns the credential, ready to POST
+ */
+export const createPasskeyCredential = async (options) => {
+    const credential = await navigator.credentials.create({
+        publicKey: parseCreationOptions(options),
+    });
+
+    if (!credential) {
+        throw new Error('No passkey was created.');
+    }
+
+    return serialiseCredential(credential);
+};
+
+/**
+ * Sign in: ask the authenticator to sign the server's challenge.
+ *
+ * @param options the server's PublicKeyCredentialRequestOptions, as JSON
+ * @returns the assertion, ready to POST
+ */
+export const getPasskeyCredential = async (options) => {
+    const credential = await navigator.credentials.get({
+        publicKey: parseRequestOptions(options),
+    });
+
+    if (!credential) {
+        throw new Error('No passkey was offered.');
+    }
+
+    return serialiseCredential(credential);
+};

package/src/components/columns/ColumnRenderers.jsx

@@ -3159,7 +3159,12 @@ const formatPhoneNumber = (phoneNumber) => {
     if (!phoneNumber) return '';
     
     // Remove all non-digit characters
-    const cleanNumber = phoneNumber.replace(/\D/g, '');
+    let cleanNumber = phoneNumber.replace(/\D/g, '');
+
+    // +61 spellings collapse to the local form so every branch below applies.
+    if (cleanNumber.match(/^61[2-9]\d{8}$/)) {
+        cleanNumber = '0' + cleanNumber.slice(2);
+    }
     
     // Check if it's an Australian mobile number (starts with 04 and has 10 digits)
     if (cleanNumber.match(/^04\d{8}$/)) {

package/src/components/controls/DataGridSearch.jsx

@@ -227,10 +227,17 @@ const DataGridSearch = ({
     return (
         <div className={styles.searchContainer}>
             <div className={styles.searchInputWrapper}>
-                <div
-                    className={styles['icon-search']}
-                    style={{ left: 25, color: '#000' }}
-                >
+                {/* No inline styles here, deliberately.
+                
+                    These carried `left: 25` / `color: '#000'` on the icon and
+                    `borderRadius: 0, paddingLeft: 55` on the input. An inline
+                    style beats every stylesheet, so the square corners and the
+                    55px indent survived the 2026 pass untouched — the CSS was
+                    correct the whole time and simply never applied. The icon
+                    offset and the input's indent are a matched pair, so they
+                    belong in one place: `.icon-search` and `.searchInput` in
+                    DataGrid.module.scss. */}
+                <div className={styles['icon-search']}>
                     <Search strokeWidth={2} size={14} />
                 </div>
                 <input
@@ -238,7 +245,6 @@ const DataGridSearch = ({
                     placeholder="Search"
                     value={search}
                     onChange={handleChangeSearch}
-                    style={{ borderRadius: 0, paddingLeft: 55 }}
                     className={styles.searchInput}
                 />
             </div>

package/src/components/generic/GenericAuth.jsx

@@ -90,6 +90,9 @@ const GenericAuth = ({
     logo,
     headerLogo,
     providers,
+    // Whether this host offers passkeys. Threaded to the login screen the
+    // same way `providers` is; false leaves the button undrawn.
+    passkeys = false,
     navigation,
     routeConfig,
     themeType = 'primary',
@@ -259,6 +262,7 @@ const GenericAuth = ({
                             loginBg={loginBg}
                             logo={logo}
                             providers={providers}
+                            passkeys={passkeys}
                             setIsAuthenticated={setIsAuthenticated}
                             setUserProfile={setUserProfile}
                             config={config}
@@ -451,6 +455,7 @@ const LoginComponent = React.memo(
         loginBg,
         logo,
         providers,
+        passkeys,
         setIsAuthenticated,
         setUserProfile,
         config,
@@ -460,6 +465,7 @@ const LoginComponent = React.memo(
             loginBg={loginBg}
             logo={logo}
             providers={providers}
+            passkeys={passkeys}
             setSystemAuth={setIsAuthenticated}
             setUserProfile={setUserProfile}
             config={config}