@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/vault/VaultShareModal.jsx

@@ -0,0 +1,454 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import { Check, Copy, Link2, Loader2, ShieldAlert, Trash2 } from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import StandardModal from '../generic/StandardModal';
+import styles from '../styles/Vault.module.scss';
+import { copyText } from './vaultClipboard';
+import { resolveVaultEndpoints } from './vaultEndpoints';
+import {
+    DEFAULT_EXPIRY_HOURS,
+    EXPIRY_OPTIONS,
+    VIEW_LIMIT_OPTIONS,
+    availableShareFields,
+    initialShareFields,
+    isShareRevocable,
+    shareFieldsLabel,
+    shareRequestBody,
+    shareStatus,
+    shareStatusLabel,
+    shareViewsLabel,
+    toggleShareField,
+} from './vaultShares';
+
+/** The pill colour per state. Anything unknown falls through to the neutral. */
+const STATUS_CLASS = {
+    active: 'shareStatusActive',
+    expired: 'shareStatusClosed',
+    spent: 'shareStatusClosed',
+    revoked: 'shareStatusRevoked',
+};
+
+/**
+ * Send one credential to somebody who does not have a CRM account.
+ *
+ * THE LINK IS THE CREDENTIAL. There is no password on the far side; anyone
+ * holding the URL inside its expiry and its view budget can read what it
+ * carries. Everything in this modal is shaped by that one fact:
+ *
+ *  - Expiry is not optional and there is no "never" in the list, because the
+ *    server has no such option either.
+ *  - The default field selection is username and password, not everything.
+ *  - The URL is shown exactly once. The server stores only its SHA-256, so
+ *    "you will not see this link again" is a statement of fact rather than a
+ *    warning — nothing, here or on the server, can reproduce it.
+ *  - The existing links are listed under the form rather than behind a tab,
+ *    because "have we already sent this out" is the question somebody opening
+ *    this dialog most often actually has.
+ *
+ * The 2FA option sends the CURRENT CODE, computed by the server at the moment
+ * the recipient reveals — never the seed. That is said on the checkbox, not
+ * just in this comment, because it is the one thing about this dialog a person
+ * could reasonably get wrong.
+ */
+const VaultShareModal = ({ entry, endpoints, isOpen = true, onClose }) => {
+    const routes = useMemo(() => resolveVaultEndpoints(endpoints), [endpoints]);
+
+    const fieldOptions = useMemo(() => availableShareFields(entry), [entry]);
+
+    const [fields, setFields] = useState(() => initialShareFields(entry));
+    const [expiresInHours, setExpiresInHours] = useState(DEFAULT_EXPIRY_HOURS);
+    const [maxViews, setMaxViews] = useState(null);
+
+    const [creating, setCreating] = useState(false);
+    // The one and only copy of a freshly minted URL. Held in component state
+    // and nowhere else — closing the modal is what destroys it.
+    const [created, setCreated] = useState(null);
+    const [copied, setCopied] = useState(false);
+
+    const [shares, setShares] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [revokingId, setRevokingId] = useState(null);
+
+    const mountedRef = useRef(true);
+    const copiedTimer = useRef(null);
+    const urlRef = useRef(null);
+
+    useEffect(() => {
+        mountedRef.current = true;
+
+        return () => {
+            mountedRef.current = false;
+            if (copiedTimer.current) clearTimeout(copiedTimer.current);
+        };
+    }, []);
+
+    const load = useCallback(() => {
+        if (!entry?.id) return;
+
+        setLoading(true);
+
+        CustomFetch(
+            routes.shares(entry.id),
+            'GET',
+            {},
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setShares(Array.isArray(result?.data) ? result.data : []);
+                setLoading(false);
+            },
+            null
+        ).catch(() => {
+            if (mountedRef.current) setLoading(false);
+        });
+    }, [routes, entry]);
+
+    useEffect(() => {
+        load();
+    }, [load]);
+
+    // A brand new link is worth selecting for the reader, so the keyboard path
+    // (focus, ⌘A, ⌘C) works for anyone whose browser refuses the clipboard API.
+    useEffect(() => {
+        if (created && urlRef.current) {
+            urlRef.current.focus();
+            urlRef.current.select();
+        }
+    }, [created]);
+
+    const toggle = (key) => setFields((current) => toggleShareField(current, key));
+
+    const create = useCallback(() => {
+        if (!entry?.id || fields.length === 0) return;
+
+        setCreating(true);
+
+        CustomFetch(
+            routes.createShare(entry.id),
+            'POST',
+            shareRequestBody({ fields, expiresInHours, maxViews }),
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setCreating(false);
+
+                if (!result?.url) {
+                    toast.error('The link could not be created.');
+
+                    return;
+                }
+
+                setCreated(result);
+                setCopied(false);
+                load();
+            },
+            null
+        ).catch(() => {
+            // CustomFetch has already said what went wrong — including the
+            // server's "this entry has no password to share".
+            if (mountedRef.current) setCreating(false);
+        });
+    }, [routes, entry, fields, expiresInHours, maxViews, load]);
+
+    const copyUrl = useCallback(async () => {
+        if (!created?.url) return;
+
+        const ok = await copyText(created.url);
+
+        if (!mountedRef.current) return;
+
+        if (!ok) {
+            // The input below is already on screen and already selected, so
+            // there is somewhere to fall back TO — say so rather than failing.
+            toast.info('Copy it from the box above — your browser blocked the clipboard.');
+
+            return;
+        }
+
+        toast.success('Link copied');
+        setCopied(true);
+
+        if (copiedTimer.current) clearTimeout(copiedTimer.current);
+
+        copiedTimer.current = setTimeout(() => {
+            copiedTimer.current = null;
+            if (mountedRef.current) setCopied(false);
+        }, 1500);
+    }, [created]);
+
+    const revoke = useCallback(
+        (share) => {
+            setRevokingId(share.id);
+
+            CustomFetch(
+                routes.revokeShare(entry.id, share.id),
+                'DELETE',
+                {},
+                () => {
+                    if (!mountedRef.current) return;
+
+                    setRevokingId(null);
+                    toast.success('Link revoked');
+                    load();
+                },
+                null
+            ).catch(() => {
+                if (mountedRef.current) setRevokingId(null);
+            });
+        },
+        [routes, entry, load]
+    );
+
+    return (
+        <StandardModal
+            isOpen={isOpen}
+            onClose={onClose}
+            size="medium"
+            showHeader
+            title={`Share ${entry?.title || 'credential'}`}
+        >
+            <div className={styles.form}>
+                {created ? (
+                    <div className={styles.shareResult}>
+                        <p className={styles.shareResultHead}>
+                            <Link2 size={15} strokeWidth={2.2} aria-hidden="true" />
+                            Your link is ready
+                        </p>
+
+                        <div className={styles.inputRow}>
+                            <input
+                                ref={urlRef}
+                                className={styles.input}
+                                readOnly
+                                value={created.url}
+                                onFocus={(e) => e.target.select()}
+                                aria-label="The share link"
+                            />
+                            <button
+                                type="button"
+                                className={styles.primaryButton}
+                                onClick={copyUrl}
+                            >
+                                {copied ? (
+                                    <Check size={15} strokeWidth={2.6} aria-hidden="true" />
+                                ) : (
+                                    <Copy size={15} strokeWidth={2} aria-hidden="true" />
+                                )}
+                                {copied ? 'Copied' : 'Copy'}
+                            </button>
+                        </div>
+
+                        <p className={styles.shareWarning}>
+                            <ShieldAlert size={14} strokeWidth={2.2} aria-hidden="true" />
+                            <span>
+                                <strong>You will not see this link again.</strong>{' '}
+                                Only its fingerprint is stored, so it cannot be
+                                looked up later. Treat the link itself as the
+                                password — anyone who has it can read{' '}
+                                {shareFieldsLabel(created).toLowerCase()} until it
+                                expires or you revoke it.
+                            </span>
+                        </p>
+
+                        <div className={styles.formActions}>
+                            <button
+                                type="button"
+                                className={styles.ghostButton}
+                                onClick={() => {
+                                    setCreated(null);
+                                    setCopied(false);
+                                }}
+                            >
+                                Create another
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.linkButton}
+                                onClick={onClose}
+                            >
+                                Done
+                            </button>
+                        </div>
+                    </div>
+                ) : (
+                    <>
+                        <div className={styles.field}>
+                            <span className={styles.label}>What to send</span>
+                            <div className={styles.shareFields}>
+                                {fieldOptions.map((field) => (
+                                    <label
+                                        key={field.key}
+                                        className={`${styles.inlineCheck} ${
+                                            field.disabled ? styles.radioDisabled : ''
+                                        }`}
+                                        title={field.reason || undefined}
+                                    >
+                                        <input
+                                            type="checkbox"
+                                            className={styles.checkControl}
+                                            checked={fields.includes(field.key)}
+                                            disabled={field.disabled}
+                                            onChange={() => toggle(field.key)}
+                                        />
+                                        <span>
+                                            {field.label}
+                                            {field.hint && (
+                                                <em className={styles.shareHint}>
+                                                    {field.hint}
+                                                </em>
+                                            )}
+                                            {field.disabled && field.reason && (
+                                                <em className={styles.shareHint}>
+                                                    {field.reason}
+                                                </em>
+                                            )}
+                                        </span>
+                                    </label>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className={styles.field}>
+                            <label className={styles.label} htmlFor="vault-share-expiry">
+                                Expires after
+                            </label>
+                            <select
+                                id="vault-share-expiry"
+                                className={styles.select}
+                                value={expiresInHours}
+                                onChange={(e) =>
+                                    setExpiresInHours(Number(e.target.value))
+                                }
+                            >
+                                {EXPIRY_OPTIONS.map((option) => (
+                                    <option key={option.value} value={option.value}>
+                                        {option.label}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+
+                        <div className={styles.field}>
+                            <label className={styles.label} htmlFor="vault-share-views">
+                                View limit
+                            </label>
+                            <select
+                                id="vault-share-views"
+                                className={styles.select}
+                                value={maxViews === null ? '' : maxViews}
+                                onChange={(e) =>
+                                    setMaxViews(
+                                        e.target.value === ''
+                                            ? null
+                                            : Number(e.target.value)
+                                    )
+                                }
+                            >
+                                {VIEW_LIMIT_OPTIONS.map((option) => (
+                                    <option
+                                        key={String(option.value)}
+                                        value={option.value === null ? '' : option.value}
+                                    >
+                                        {option.label}
+                                    </option>
+                                ))}
+                            </select>
+                            <p className={styles.help}>
+                                A one-view link closes itself the moment it is
+                                opened — the safest choice for a single recipient.
+                            </p>
+                        </div>
+
+                        <div className={styles.formActions}>
+                            <button
+                                type="button"
+                                className={styles.primaryButton}
+                                onClick={create}
+                                disabled={creating || fields.length === 0}
+                            >
+                                {creating && (
+                                    <Loader2 size={15} className={styles.spin} />
+                                )}
+                                {creating ? 'Creating…' : 'Create link'}
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.ghostButton}
+                                onClick={onClose}
+                                disabled={creating}
+                            >
+                                Cancel
+                            </button>
+                        </div>
+                    </>
+                )}
+
+                <div className={styles.shareList}>
+                    <p className={styles.label}>
+                        Links for this entry
+                        {loading && (
+                            <Loader2 size={13} className={styles.spin} aria-hidden="true" />
+                        )}
+                    </p>
+
+                    {shares.length === 0 && !loading && (
+                        <p className={styles.muted}>
+                            No links have been created for this entry.
+                        </p>
+                    )}
+
+                    {shares.map((share) => (
+                        <div key={share.id} className={styles.shareRow}>
+                            <div className={styles.shareRowMain}>
+                                <span
+                                    className={`${styles.pill} ${
+                                        styles[
+                                            STATUS_CLASS[shareStatus(share)] ||
+                                                'shareStatusClosed'
+                                        ] || ''
+                                    }`}
+                                >
+                                    {shareStatusLabel(share)}
+                                </span>
+                                <span className={styles.shareRowFields}>
+                                    {shareFieldsLabel(share)}
+                                </span>
+                            </div>
+                            <div className={styles.shareRowMeta}>
+                                <span>{shareViewsLabel(share)}</span>
+                                {share.created_by && <span>by {share.created_by}</span>}
+                                {share.expires_at && (
+                                    <span>
+                                        {shareStatus(share) === 'expired'
+                                            ? 'expired'
+                                            : 'expires'}{' '}
+                                        {new Date(share.expires_at).toLocaleString()}
+                                    </span>
+                                )}
+                            </div>
+                            {isShareRevocable(share) && (
+                                <button
+                                    type="button"
+                                    className={styles.linkButton}
+                                    onClick={() => revoke(share)}
+                                    disabled={revokingId === share.id}
+                                >
+                                    {revokingId === share.id ? (
+                                        <Loader2 size={13} className={styles.spin} />
+                                    ) : (
+                                        <Trash2 size={13} strokeWidth={2} aria-hidden="true" />
+                                    )}
+                                    Revoke
+                                </button>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </StandardModal>
+    );
+};
+
+export default VaultShareModal;

package/src/components/vault/vaultEndpoints.js

@@ -2,7 +2,7 @@
  * The URLs the vault talks to.
  *
  * Every vault component takes an `endpoints` object rather than a base string,
- * so a consumer can move one route without reproducing the other eleven. The
+ * so a consumer can move one route without reproducing the rest. The
  * defaults are the CRM's routes under `/ajax/vault`; `makeVaultEndpoints` is
  * there for the common case of moving all of them at once.
  *
@@ -22,6 +22,20 @@ export const makeVaultEndpoints = (base = '/ajax/vault') => ({
     logCopy: (id) => `${base}/${id}/log`,
     entryLog: (id) => `${base}/${id}/log`,
     globalLog: `${base}/log`,
+    // The client typeahead behind the "Client" field on an entry: every client
+    // in the host application, whether or not it has a credential.
+    clients: `${base}/clients`,
+    // The clients that actually HAVE entries, for the list's client filter.
+    // A different question from `clients` above, and it has to come from the
+    // server: the list is paginated, so the clients on the visible page are
+    // not the clients in the vault.
+    entryClients: `${base}/entry-clients`,
+    // External share links. There is no endpoint that reads a link back:
+    // `createShare` returns the URL once and the server keeps only its hash,
+    // so there is nothing to read.
+    shares: (id) => `${base}/${id}/shares`,
+    createShare: (id) => `${base}/${id}/shares`,
+    revokeShare: (id, shareId) => `${base}/${id}/shares/${shareId}`,
 });
 
 export const DEFAULT_ENDPOINTS = makeVaultEndpoints();
@@ -29,7 +43,7 @@ export const DEFAULT_ENDPOINTS = makeVaultEndpoints();
 /**
  * Merge a partial `endpoints` prop over the defaults.
  *
- * A consumer overriding one route must not lose the other eleven, and passing
+ * A consumer overriding one route must not lose the rest, and passing
  * nothing at all must land exactly on DEFAULT_ENDPOINTS.
  */
 export const resolveVaultEndpoints = (endpoints) => ({