@visns-studio/visns-components 6.17.2 → 6.20.1

package/src/components/vault/vaultShares.js

@@ -0,0 +1,247 @@
+/**
+ * The share modal's pure logic.
+ *
+ * Kept React-free so `node --test` can import it: the parts of this feature
+ * worth testing are the field whitelist, the request body and the words put
+ * next to a link's state, none of which need a DOM.
+ *
+ * ONE THING TO KEEP IN MIND THROUGHOUT. A share link is the credential — there
+ * is no password on the far side of it — so every default in here leans
+ * conservative: the shortest expiry list that is still useful, the narrowest
+ * default field set, and a status vocabulary that never says "active" about a
+ * link that is not.
+ */
+
+/**
+ * The fields a link can carry, in the order the modal lists them and the order
+ * the server stores them.
+ *
+ * `totp` is the CURRENT SIX-DIGIT CODE, computed server-side when the
+ * recipient reveals — never the seed. There is no option to send the seed and
+ * that is deliberate: a seed is a permanent second factor, and one sitting in
+ * the same message as the password is not a second factor at all.
+ */
+export const SHARE_FIELDS = [
+    { key: 'username', label: 'Username' },
+    { key: 'password', label: 'Password' },
+    { key: 'totp', label: '2FA code', hint: 'The current code, not the secret' },
+    { key: 'url', label: 'Website' },
+    { key: 'notes', label: 'Notes' },
+];
+
+/** What a new share starts with: the pair that is useful on its own. */
+export const DEFAULT_SHARE_FIELDS = ['username', 'password'];
+
+/**
+ * The expiry choices, in hours.
+ *
+ * No "never" option anywhere, at any layer: the server requires an expiry and
+ * caps it, and offering one here that it would refuse is a worse experience
+ * than not offering it.
+ */
+export const EXPIRY_OPTIONS = [
+    { value: 1, label: '1 hour' },
+    { value: 24, label: '24 hours' },
+    { value: 168, label: '7 days' },
+    { value: 720, label: '30 days' },
+];
+
+export const DEFAULT_EXPIRY_HOURS = 24;
+
+/**
+ * The view budget. `null` is "no limit", which is still bounded by the expiry —
+ * unlimited views is not the same as an unlimited link.
+ */
+export const VIEW_LIMIT_OPTIONS = [
+    { value: 1, label: '1 view' },
+    { value: 5, label: '5 views' },
+    { value: null, label: 'No limit' },
+];
+
+/**
+ * Which fields this entry can actually offer.
+ *
+ * The LIST payload deliberately carries no password and no notes — that is the
+ * vault's whole design — so those two cannot be known here and are always
+ * offered; the server refuses a link to a field the entry does not hold, with a
+ * message saying which. The three that ARE knowable from a row are disabled up
+ * front, because a checkbox that turns into a 422 is a worse answer than one
+ * that was never tickable.
+ *
+ * @param {object} entry a row from the list endpoint
+ * @returns {Array<{key: string, label: string, hint?: string, disabled: boolean, reason?: string}>}
+ */
+export const availableShareFields = (entry) => {
+    const row = entry || {};
+
+    return SHARE_FIELDS.map((field) => {
+        let disabled = false;
+        let reason;
+
+        if (field.key === 'username' && !row.username) {
+            disabled = true;
+            reason = 'This entry has no username';
+        }
+
+        if (field.key === 'url' && !row.url) {
+            disabled = true;
+            reason = 'This entry has no address';
+        }
+
+        if (field.key === 'totp' && !row.has_totp) {
+            disabled = true;
+            reason = 'This entry has no 2FA';
+        }
+
+        return { ...field, disabled, ...(reason ? { reason } : {}) };
+    });
+};
+
+/**
+ * The starting selection for an entry: the defaults, minus anything it cannot
+ * offer. An entry with no username shares just the password.
+ *
+ * @returns {Array<string>}
+ */
+export const initialShareFields = (entry) =>
+    availableShareFields(entry)
+        .filter((field) => DEFAULT_SHARE_FIELDS.includes(field.key) && !field.disabled)
+        .map((field) => field.key);
+
+/**
+ * Add or remove one field, keeping the module's own order.
+ *
+ * Order matters more than it looks: two shares of the same fields should store
+ * the same array, so a list of shares does not read as though they differ.
+ *
+ * @param {Array<string>} fields
+ * @param {string} key
+ * @returns {Array<string>}
+ */
+export const toggleShareField = (fields, key) => {
+    const current = Array.isArray(fields) ? fields : [];
+    const known = SHARE_FIELDS.map((field) => field.key);
+
+    if (!known.includes(key)) return current.slice();
+
+    const next = current.includes(key)
+        ? current.filter((field) => field !== key)
+        : current.concat([key]);
+
+    return known.filter((field) => next.includes(field));
+};
+
+/**
+ * The body the create endpoint wants.
+ *
+ * `max_views` is omitted rather than sent as null when there is no limit: the
+ * server treats an absent key and a null the same way, and a body that carries
+ * only what was chosen is easier to read in a network panel.
+ *
+ * @param {{fields: Array<string>, expiresInHours: number, maxViews: (number|null)}} choice
+ * @returns {object}
+ */
+export const shareRequestBody = ({ fields, expiresInHours, maxViews } = {}) => {
+    const known = SHARE_FIELDS.map((field) => field.key);
+    const clean = known.filter((field) => (fields || []).includes(field));
+
+    const hours = Number(expiresInHours);
+    const views = Number(maxViews);
+
+    const body = {
+        fields: clean,
+        expires_in_hours:
+            Number.isFinite(hours) && hours > 0
+                ? Math.round(hours)
+                : DEFAULT_EXPIRY_HOURS,
+    };
+
+    if (Number.isFinite(views) && views > 0) {
+        body.max_views = Math.round(views);
+    }
+
+    return body;
+};
+
+/**
+ * One word for a link's state, matching the server's own vocabulary.
+ *
+ * Falls back to computing it from the row when the server did not say, so a
+ * list rendered from a stale response still labels an expired link as expired
+ * rather than as active.
+ */
+export const shareStatus = (share) => {
+    const row = share || {};
+
+    if (typeof row.status === 'string' && row.status !== '') return row.status;
+
+    if (row.revoked_at) return 'revoked';
+
+    if (row.expires_at && new Date(row.expires_at).getTime() <= Date.now()) {
+        return 'expired';
+    }
+
+    if (
+        row.max_views !== null &&
+        row.max_views !== undefined &&
+        Number(row.views || 0) >= Number(row.max_views)
+    ) {
+        return 'spent';
+    }
+
+    return 'active';
+};
+
+const STATUS_LABELS = {
+    active: 'Active',
+    expired: 'Expired',
+    spent: 'Views used up',
+    revoked: 'Revoked',
+};
+
+export const shareStatusLabel = (share) =>
+    STATUS_LABELS[shareStatus(share)] || 'Unknown';
+
+/** Only an active link can be closed; the rest are already closed. */
+export const isShareRevocable = (share) => shareStatus(share) === 'active';
+
+/**
+ * How many times this link has been opened, said in English.
+ *
+ * "0 of 1 view" rather than "0 views" when there is a budget: the number that
+ * matters to whoever is looking is how many are left, and stating the ceiling
+ * is how that is read off in one glance.
+ */
+export const shareViewsLabel = (share) => {
+    const row = share || {};
+    const used = Number(row.views || 0);
+
+    if (row.max_views === null || row.max_views === undefined) {
+        return `${used} ${used === 1 ? 'view' : 'views'}`;
+    }
+
+    const max = Number(row.max_views);
+
+    return `${used} of ${max} ${max === 1 ? 'view' : 'views'}`;
+};
+
+/**
+ * The field list as a sentence, for the row in the shares list.
+ *
+ * Unknown keys are printed rather than dropped: the server is free to grow a
+ * shareable field this build has not heard of, and a list with a silent gap in
+ * it is worse than one with an ugly word.
+ */
+export const shareFieldsLabel = (share) => {
+    const fields = Array.isArray(share?.fields) ? share.fields : [];
+
+    if (fields.length === 0) return 'Nothing';
+
+    return fields
+        .map((key) => {
+            const known = SHARE_FIELDS.find((field) => field.key === key);
+
+            return known ? known.label : String(key);
+        })
+        .join(', ');
+};

package/src/index.js

@@ -88,6 +88,14 @@ import {
     syncCsrfToken,
     twoFactorSuccessTarget,
 } from './components/auth/authHelpers';
+import {
+    base64UrlToBytes,
+    bytesToBase64Url,
+    createPasskeyCredential,
+    getPasskeyCredential,
+    isPasskeyCancellation,
+    isPasskeySupported,
+} from './components/auth/webauthn';
 import {
     CLIENT_AUTH_PROTOCOLS,
     DEFAULT_CLIENT_PROTOCOL,
@@ -104,9 +112,16 @@ import CallQueueSettings from './components/callQueue/CallQueueSettings';
 import OtpChip from './components/vault/OtpChip';
 import VaultAccessLog from './components/vault/VaultAccessLog';
 import VaultConfirmPanel from './components/vault/VaultConfirmPanel';
+import GenericSettings from './components/generic/GenericSettings';
+import IntegrationsManager from './components/settings/IntegrationsManager';
+import TicketConversation from './components/tickets/TicketConversation';
+import VaultClientPicker from './components/vault/VaultClientPicker';
 import VaultEntryForm from './components/vault/VaultEntryForm';
 import VaultManager from './components/vault/VaultManager';
 import VaultQuickSearch from './components/vault/VaultQuickSearch';
+// External share links. VaultManager already mounts this from the Share action
+// on a row; it is exported for a consumer that wants the dialog somewhere else.
+import VaultShareModal from './components/vault/VaultShareModal';
 import PasswordGenerator from './components/vault/PasswordGenerator';
 import QrScanner from './components/vault/QrScanner';
 import useVaultReveal from './components/vault/useVaultReveal';
@@ -206,6 +221,10 @@ import GenericClientPortal from './components/generic/GenericClientPortal';
 import GenericDashboard from './components/generic/GenericDashboard';
 import GenericDetail from './components/generic/GenericDetail';
 import GenericDynamic from './components/generic/GenericDynamic';
+import UniversalSearch, {
+    DEFAULT_UNIVERSAL_SEARCH_ENDPOINT,
+} from './components/UniversalSearch';
+import ExcelStyleGrid from './components/generic/ExcelStyleGrid';
 import GenericFormBuilder from './components/generic/GenericFormBuilder';
 import GenericIndex from './components/generic/GenericIndex';
 import GenericGrid from './components/generic/GenericGrid';
@@ -280,9 +299,14 @@ export {
     useVaultReveal,
     VaultAccessLog,
     VaultConfirmPanel,
+    GenericSettings,
+    IntegrationsManager,
+    TicketConversation,
+    VaultClientPicker,
     VaultEntryForm,
     VaultManager,
     VaultQuickSearch,
+    VaultShareModal,
     clientRecipient,
     conversationCountLabel,
     DEFAULT_SMS_ENDPOINTS,
@@ -313,6 +337,7 @@ export {
     threadDisplayName,
     toE164,
     useSmsLive,
+    UniversalSearch,
     useSmsThreads,
     CameraPlacement,
     CellWithTooltip,
@@ -352,6 +377,8 @@ export {
     GenericDashboard,
     GenericDetail,
     GenericDynamic,
+    DEFAULT_UNIVERSAL_SEARCH_ENDPOINT,
+    ExcelStyleGrid,
     GenericFormBuilder,
     GenericIndex,
     GenericGrid,
@@ -402,6 +429,14 @@ export {
     resolveAuthEndpoints,
     resolveClientPaths,
     resolveClientProtocol,
+    // Passkeys (WebAuthn). Exported so a consuming app can build its own
+    // enrolment screen against the same marshalling the login screen uses.
+    base64UrlToBytes,
+    bytesToBase64Url,
+    createPasskeyCredential,
+    getPasskeyCredential,
+    isPasskeyCancellation,
+    isPasskeySupported,
     SectionEditor,
     SectionGroupedReport,
     SectionTypeSelector,

package/src/utils/fetchUtil.js

@@ -92,23 +92,47 @@ const fetchUtil = async (config) => {
         requestHeaders.set('Content-Type', 'application/json');
     }
 
-    // Add CSRF token for Laravel if available
-    const csrfToken = document
-        .querySelector('meta[name="csrf-token"]')
-        ?.getAttribute('content');
-    if (csrfToken) {
-        // Laravel accepts the CSRF token in different headers
-        if (!requestHeaders.has('X-CSRF-TOKEN')) {
-            requestHeaders.set('X-CSRF-TOKEN', csrfToken);
+    /*
+     * Laravel's session headers are for Laravel — this app's own origin.
+     *
+     * Attached to every request they also went to third parties: the address
+     * autocomplete handed the user's CSRF token to api.mapbox.com on every
+     * keystroke. A token another host has no use for and no business seeing,
+     * and because they are not CORS-simple headers each request also paid for
+     * a preflight it did not need.
+     */
+    const isSameOrigin = (() => {
+        try {
+            return (
+                new URL(requestUrl, window.location.href).origin ===
+                window.location.origin
+            );
+        } catch {
+            // A url this fetch could not parse is one the browser will reject
+            // anyway; treat it as ours rather than silently dropping headers.
+            return true;
         }
-        if (!requestHeaders.has('X-XSRF-TOKEN')) {
-            requestHeaders.set('X-XSRF-TOKEN', csrfToken);
+    })();
+
+    if (isSameOrigin) {
+        // Add CSRF token for Laravel if available
+        const csrfToken = document
+            .querySelector('meta[name="csrf-token"]')
+            ?.getAttribute('content');
+        if (csrfToken) {
+            // Laravel accepts the CSRF token in different headers
+            if (!requestHeaders.has('X-CSRF-TOKEN')) {
+                requestHeaders.set('X-CSRF-TOKEN', csrfToken);
+            }
+            if (!requestHeaders.has('X-XSRF-TOKEN')) {
+                requestHeaders.set('X-XSRF-TOKEN', csrfToken);
+            }
         }
-    }
 
-    // Add X-Requested-With header for Laravel to recognize AJAX requests
-    if (!requestHeaders.has('X-Requested-With')) {
-        requestHeaders.set('X-Requested-With', 'XMLHttpRequest');
+        // Add X-Requested-With header for Laravel to recognize AJAX requests
+        if (!requestHeaders.has('X-Requested-With')) {
+            requestHeaders.set('X-Requested-With', 'XMLHttpRequest');
+        }
     }
 
     // Handle credentials