@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/vault/VaultEntryForm.jsx

@@ -0,0 +1,740 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+import {
+    Camera,
+    Check,
+    Eye,
+    EyeOff,
+    ImageUp,
+    Loader2,
+    ShieldCheck,
+    Wand2,
+    X,
+} from 'lucide-react';
+
+import CustomFetch from '../Fetch';
+import StandardModal from '../generic/StandardModal';
+import styles from '../styles/Vault.module.scss';
+import PasswordGenerator from './PasswordGenerator';
+import QrScanner from './QrScanner';
+import { decodeFromBlob, imageFromTransfer } from './qrDecode';
+import { resolveVaultEndpoints } from './vaultEndpoints';
+import { describeOtpConfig, parseOtpAuthUri, parseTags, scorePassword } from './vaultHelpers';
+
+const EMPTY = {
+    title: '',
+    url: '',
+    username: '',
+    notes: '',
+    visibility: 'shared',
+};
+
+/**
+ * Create or edit one vault entry.
+ *
+ * The interesting part is what is *not* sent. The list and show payloads never
+ * carry a password or a 2FA secret, so this form starts with both fields blank
+ * even when editing an entry that has them — there is nothing to prefill with.
+ * That makes "blank" ambiguous, and the API resolves it by key presence: omit
+ * `password` to leave it alone, send `""` to clear it, send a value to replace
+ * it. So the form tracks intent rather than value, and only puts a key in the
+ * body when the user actually expressed one.
+ *
+ * The 2FA field takes either a bare base32 secret or the whole `otpauth://`
+ * link, and says what it understood — digits, period, algorithm — before the
+ * entry is saved, because the failure mode otherwise is a code that is simply
+ * always wrong with nothing on screen to explain why.
+ *
+ * It also takes the QR code itself, which is the only artefact a provider is
+ * guaranteed to show: scanned with the device camera, uploaded as a file,
+ * pasted from the clipboard, or dropped on the field. All four decode to the
+ * same `otpauth://` text and land in the same input, where the same feedback
+ * line vouches for it — so nothing downstream, here or in the API, knows or
+ * cares which way it arrived.
+ */
+const VaultEntryForm = ({
+    entry = null,
+    endpoints,
+    canManage = false,
+    isOpen = true,
+    onClose,
+    onSaved,
+    prefill = {},
+}) => {
+    const routes = useMemo(() => resolveVaultEndpoints(endpoints), [endpoints]);
+    const editing = Boolean(entry?.id);
+
+    const [values, setValues] = useState(() => ({
+        ...EMPTY,
+        ...(entry || {}),
+        // A shared entry is the default, but only for someone allowed to make
+        // one; everyone else can only keep their own.
+        visibility: entry?.visibility || (canManage ? 'shared' : 'private'),
+        title: entry?.title || prefill.title || '',
+        url: entry?.url || prefill.url || '',
+    }));
+    const [tags, setTags] = useState(() => parseTags(entry?.tags || prefill.tags || []));
+    const [tagDraft, setTagDraft] = useState('');
+
+    const [password, setPassword] = useState('');
+    const [clearPassword, setClearPassword] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const [showGenerator, setShowGenerator] = useState(false);
+
+    // 'keep' (an existing secret, untouched) | 'edit' | 'remove'
+    const [totpMode, setTotpMode] = useState(
+        editing && entry?.has_totp ? 'keep' : 'edit'
+    );
+    const [totpInput, setTotpInput] = useState('');
+
+    // The QR paths. All four of them end in the same place — decoded text in
+    // `totpInput` — so they share one busy flag and one error line.
+    const [scanning, setScanning] = useState(false);
+    const [qrBusy, setQrBusy] = useState(false);
+    const [qrError, setQrError] = useState('');
+    const [dropping, setDropping] = useState(false);
+    const qrFileRef = useRef(null);
+
+    const [errors, setErrors] = useState({});
+    const [saving, setSaving] = useState(false);
+
+    const mountedRef = useRef(true);
+    const titleRef = useRef(null);
+
+    useEffect(() => {
+        mountedRef.current = true;
+
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+
+    useEffect(() => {
+        if (isOpen) setTimeout(() => titleRef.current?.focus(), 0);
+    }, [isOpen]);
+
+    const set = (key, value) => {
+        setValues((prev) => ({ ...prev, [key]: value }));
+        setErrors((prev) => (prev[key] ? { ...prev, [key]: undefined } : prev));
+    };
+
+    /* --------------------------------------------------------------- tags */
+
+    const commitTag = useCallback(
+        (raw) => {
+            const next = parseTags([...tags, raw]);
+
+            setTags(next);
+            setTagDraft('');
+        },
+        [tags]
+    );
+
+    const onTagKeyDown = (event) => {
+        if (event.key === ',' || event.key === 'Enter') {
+            event.preventDefault();
+            if (tagDraft.trim() !== '') commitTag(tagDraft);
+        } else if (event.key === 'Backspace' && tagDraft === '' && tags.length) {
+            // Backspace on an empty field takes the last pill, which is what
+            // every other tag input does.
+            setTags(tags.slice(0, -1));
+        }
+    };
+
+    /* --------------------------------------------------------------- totp */
+
+    const totpFeedback = useMemo(() => {
+        const raw = totpInput.trim();
+
+        if (totpMode !== 'edit' || raw === '') return null;
+
+        try {
+            return { ok: true, text: describeOtpConfig(parseOtpAuthUri(raw)) };
+        } catch (error) {
+            return { ok: false, text: error.message };
+        }
+    }, [totpInput, totpMode]);
+
+    /* ---------------------------------------------------------------- qr */
+
+    // Hidden rather than disabled where there is no camera at all: a button
+    // that can never work is worse than no button, and the upload sitting
+    // next to it does the same job.
+    const cameraAvailable = useMemo(
+        () =>
+            typeof navigator !== 'undefined' &&
+            Boolean(navigator.mediaDevices?.getUserMedia),
+        []
+    );
+
+    /**
+     * Put decoded QR text in the field, or say why it could not go there.
+     *
+     * The raw text is stored, not the parsed pieces: the API takes the link
+     * whole, and the feedback line under the field re-parses it — so what the
+     * user sees is the same sentence a pasted link would have produced, and
+     * an edit by hand afterwards still behaves.
+     */
+    const applyScanned = useCallback((text) => {
+        const raw = String(text ?? '').trim();
+
+        try {
+            parseOtpAuthUri(raw);
+        } catch (error) {
+            setQrError(
+                /^otpauth:/i.test(raw)
+                    ? error.message
+                    : `That QR isn't an authenticator setup code — it reads “${
+                          raw.length > 42 ? `${raw.slice(0, 42)}…` : raw
+                      }”.`
+            );
+
+            return false;
+        }
+
+        setTotpInput(raw);
+        setQrError('');
+        setErrors((prev) =>
+            prev.totp_secret ? { ...prev, totp_secret: undefined } : prev
+        );
+
+        return true;
+    }, []);
+
+    /** The upload, paste and drop paths, which are one path after the file. */
+    const readImage = useCallback(
+        async (blob) => {
+            if (!blob) return;
+
+            setQrBusy(true);
+            setQrError('');
+
+            const text = await decodeFromBlob(blob);
+
+            if (!mountedRef.current) return;
+
+            setQrBusy(false);
+
+            if (!text) {
+                setQrError(
+                    'No QR code found in that image — try a sharper screenshot, or paste the setup link instead.'
+                );
+
+                return;
+            }
+
+            applyScanned(text);
+        },
+        [applyScanned]
+    );
+
+    const onTotpPaste = (event) => {
+        const file = imageFromTransfer(event.clipboardData);
+
+        // No image on the clipboard means an ordinary text paste, which must
+        // reach the input untouched.
+        if (!file) return;
+
+        event.preventDefault();
+        readImage(file);
+    };
+
+    const onTotpDrop = (event) => {
+        event.preventDefault();
+        setDropping(false);
+
+        const file = imageFromTransfer(event.dataTransfer);
+
+        if (file) readImage(file);
+    };
+
+    /* -------------------------------------------------------------- save */
+
+    const submit = () => {
+        if (saving) return;
+
+        const body = {
+            title: values.title.trim(),
+            url: (values.url || '').trim(),
+            username: (values.username || '').trim(),
+            notes: values.notes || '',
+            tags,
+            visibility: values.visibility,
+        };
+
+        // Key presence is the contract — see the note at the top of the file.
+        if (clearPassword) body.password = '';
+        else if (password !== '') body.password = password;
+
+        if (totpMode === 'remove') body.totp_secret = '';
+        else if (totpMode === 'edit' && totpInput.trim() !== '') {
+            // Sent raw: the API accepts a bare secret or a full otpauth link,
+            // and the link carries the digits and period that parsing here
+            // would only have to send separately.
+            body.totp_secret = totpInput.trim();
+        }
+
+        // A secret the user typed but that does not parse would be rejected by
+        // the API anyway; saying so here costs no round trip.
+        if (totpFeedback && !totpFeedback.ok) {
+            setErrors({ totp_secret: totpFeedback.text });
+            return;
+        }
+
+        setSaving(true);
+        setErrors({});
+
+        CustomFetch(
+            editing ? routes.update(entry.id) : routes.create,
+            editing ? 'PUT' : 'POST',
+            body,
+            (result) => {
+                if (!mountedRef.current) return;
+
+                setSaving(false);
+                toast.success('Saved');
+                onSaved?.(result);
+            },
+            null,
+            // Read the field errors off the bag rather than taking the
+            // flattened string CustomFetch would otherwise toast.
+            { silentStatuses: [422] }
+        ).catch((error) => {
+            if (!mountedRef.current) return;
+
+            setSaving(false);
+
+            if (error?.status === 422) {
+                const bag = error.data?.errors || {};
+
+                setErrors(
+                    Object.fromEntries(
+                        Object.entries(bag).map(([field, messages]) => [
+                            field,
+                            Array.isArray(messages) ? messages[0] : String(messages),
+                        ])
+                    )
+                );
+            }
+        });
+    };
+
+    const strength = password === '' ? null : scorePassword(password);
+
+    const field = (key, labelText, input, help) => (
+        <div className={styles.field}>
+            <label className={styles.label} htmlFor={`vault-${key}`}>
+                {labelText}
+            </label>
+            {input}
+            {help && !errors[key] && <p className={styles.help}>{help}</p>}
+            {errors[key] && (
+                <p className={styles.fieldError} role="alert">
+                    {errors[key]}
+                </p>
+            )}
+        </div>
+    );
+
+    return (
+        <StandardModal
+            isOpen={isOpen}
+            onClose={onClose}
+            size="medium"
+            showHeader
+            title={editing ? `Edit ${entry.title}` : 'New vault entry'}
+        >
+            <div className={styles.form}>
+                {field(
+                    'title',
+                    'Title *',
+                    <input
+                        id="vault-title"
+                        ref={titleRef}
+                        className={styles.input}
+                        value={values.title}
+                        onChange={(e) => set('title', e.target.value)}
+                        placeholder="What is this login for?"
+                    />
+                )}
+
+                {field(
+                    'url',
+                    'URL',
+                    <input
+                        id="vault-url"
+                        className={styles.input}
+                        value={values.url || ''}
+                        onChange={(e) => set('url', e.target.value)}
+                        placeholder="mybank.com.au"
+                    />
+                )}
+
+                {field(
+                    'username',
+                    'Username',
+                    <input
+                        id="vault-username"
+                        className={styles.input}
+                        value={values.username || ''}
+                        onChange={(e) => set('username', e.target.value)}
+                        autoComplete="off"
+                    />
+                )}
+
+                {field(
+                    'password',
+                    'Password',
+                    <div className={styles.passwordField}>
+                        <div className={styles.inputRow}>
+                            <input
+                                id="vault-password"
+                                className={styles.input}
+                                type={showPassword ? 'text' : 'password'}
+                                value={password}
+                                autoComplete="new-password"
+                                disabled={clearPassword}
+                                placeholder={
+                                    editing
+                                        ? 'Leave blank to keep the current password'
+                                        : ''
+                                }
+                                onChange={(e) => setPassword(e.target.value)}
+                            />
+                            <button
+                                type="button"
+                                className={styles.iconButton}
+                                onClick={() => setShowPassword((v) => !v)}
+                                aria-label={
+                                    showPassword ? 'Hide password' : 'Show password'
+                                }
+                            >
+                                {showPassword ? (
+                                    <EyeOff size={16} strokeWidth={2} />
+                                ) : (
+                                    <Eye size={16} strokeWidth={2} />
+                                )}
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.ghostButton}
+                                onClick={() => setShowGenerator((v) => !v)}
+                                aria-expanded={showGenerator}
+                            >
+                                <Wand2 size={15} strokeWidth={2} />
+                                Generate
+                            </button>
+                        </div>
+
+                        {strength && (
+                            <div className={styles.strength} data-score={strength.score}>
+                                <div className={styles.strengthTrack}>
+                                    <div
+                                        className={styles.strengthFill}
+                                        style={{
+                                            width: `${((strength.score + 1) / 5) * 100}%`,
+                                        }}
+                                    />
+                                </div>
+                                <span className={styles.strengthLabel}>
+                                    {strength.label}
+                                </span>
+                            </div>
+                        )}
+
+                        {showGenerator && (
+                            <PasswordGenerator
+                                onUse={(generated) => {
+                                    setPassword(generated);
+                                    setClearPassword(false);
+                                    // Shown once so it can be copied into
+                                    // whatever system it belongs to; the user
+                                    // will not get a second look at it here.
+                                    setShowPassword(true);
+                                    setShowGenerator(false);
+                                }}
+                                onClose={() => setShowGenerator(false)}
+                            />
+                        )}
+
+                        {editing && (
+                            <label className={styles.inlineCheck}>
+                                <input
+                                    type="checkbox"
+                                    className={styles.checkControl}
+                                    checked={clearPassword}
+                                    onChange={(e) => {
+                                        setClearPassword(e.target.checked);
+                                        if (e.target.checked) setPassword('');
+                                    }}
+                                />
+                                <span>Clear the stored password</span>
+                            </label>
+                        )}
+                    </div>
+                )}
+
+                {field(
+                    'totp_secret',
+                    '2FA secret',
+                    totpMode === 'keep' ? (
+                        <div className={styles.totpConfigured}>
+                            <ShieldCheck size={16} strokeWidth={2} aria-hidden="true" />
+                            <span>2FA configured</span>
+                            <button
+                                type="button"
+                                className={styles.linkButton}
+                                onClick={() => setTotpMode('edit')}
+                            >
+                                Replace
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.dangerLink}
+                                onClick={() => setTotpMode('remove')}
+                            >
+                                Remove
+                            </button>
+                        </div>
+                    ) : totpMode === 'remove' ? (
+                        <div className={styles.totpConfigured}>
+                            <span className={styles.muted}>
+                                2FA will be removed when you save.
+                            </span>
+                            <button
+                                type="button"
+                                className={styles.linkButton}
+                                onClick={() => setTotpMode('keep')}
+                            >
+                                Undo
+                            </button>
+                        </div>
+                    ) : (
+                        <div
+                            className={`${styles.totpField} ${
+                                dropping ? styles.totpFieldDropping : ''
+                            }`}
+                            onPaste={onTotpPaste}
+                            onDragOver={(e) => {
+                                // Without preventDefault on dragover the drop
+                                // never fires and the browser navigates to the
+                                // image instead.
+                                e.preventDefault();
+                                if (!dropping) setDropping(true);
+                            }}
+                            onDragLeave={(e) => {
+                                if (!e.currentTarget.contains(e.relatedTarget)) {
+                                    setDropping(false);
+                                }
+                            }}
+                            onDrop={onTotpDrop}
+                        >
+                            <input
+                                id="vault-totp_secret"
+                                className={styles.input}
+                                value={totpInput}
+                                autoComplete="off"
+                                spellCheck="false"
+                                placeholder="otpauth://totp/… or a base32 secret"
+                                onChange={(e) => {
+                                    setTotpInput(e.target.value);
+                                    if (qrError) setQrError('');
+                                }}
+                            />
+
+                            <div className={styles.qrActions}>
+                                {cameraAvailable && (
+                                    <button
+                                        type="button"
+                                        className={styles.ghostButton}
+                                        onClick={() => {
+                                            setQrError('');
+                                            setScanning((v) => !v);
+                                        }}
+                                        aria-expanded={scanning}
+                                    >
+                                        <Camera size={15} strokeWidth={2} />
+                                        {scanning ? 'Stop scanning' : 'Scan QR'}
+                                    </button>
+                                )}
+
+                                <button
+                                    type="button"
+                                    className={styles.ghostButton}
+                                    onClick={() => qrFileRef.current?.click()}
+                                    disabled={qrBusy}
+                                >
+                                    {qrBusy ? (
+                                        <Loader2 size={15} className={styles.spin} />
+                                    ) : (
+                                        <ImageUp size={15} strokeWidth={2} />
+                                    )}
+                                    {qrBusy ? 'Reading…' : 'Upload QR image'}
+                                </button>
+
+                                <input
+                                    ref={qrFileRef}
+                                    type="file"
+                                    accept="image/*"
+                                    className={styles.visuallyHidden}
+                                    tabIndex={-1}
+                                    onChange={(e) => {
+                                        const file = e.target.files?.[0];
+
+                                        // Cleared so picking the same file
+                                        // twice fires `change` the second time.
+                                        e.target.value = '';
+                                        readImage(file);
+                                    }}
+                                />
+                            </div>
+
+                            {scanning && (
+                                <QrScanner
+                                    onResult={(text) => {
+                                        setScanning(false);
+                                        applyScanned(text);
+                                    }}
+                                    onCancel={() => setScanning(false)}
+                                />
+                            )}
+
+                            {qrError && (
+                                <p className={styles.fieldError} role="alert">
+                                    {qrError}
+                                </p>
+                            )}
+
+                            {totpFeedback && (
+                                <p
+                                    className={
+                                        totpFeedback.ok
+                                            ? styles.totpOk
+                                            : styles.fieldError
+                                    }
+                                    role="status"
+                                >
+                                    {totpFeedback.ok && (
+                                        <Check size={13} strokeWidth={2} />
+                                    )}
+                                    {totpFeedback.text}
+                                </p>
+                            )}
+                            {editing && entry?.has_totp && (
+                                <button
+                                    type="button"
+                                    className={styles.linkButton}
+                                    onClick={() => {
+                                        setTotpMode('keep');
+                                        setTotpInput('');
+                                    }}
+                                >
+                                    Keep the existing secret
+                                </button>
+                            )}
+                        </div>
+                    ),
+                    'Paste the setup link or key from your provider, scan the QR code, or drop a screenshot of it here.'
+                )}
+
+                {field(
+                    'tags',
+                    'Tags',
+                    <div className={styles.tagField}>
+                        {tags.map((tag) => (
+                            <span key={tag} className={styles.tagPill}>
+                                {tag}
+                                <button
+                                    type="button"
+                                    onClick={() =>
+                                        setTags(tags.filter((t) => t !== tag))
+                                    }
+                                    aria-label={`Remove the ${tag} tag`}
+                                >
+                                    <X size={12} strokeWidth={2.5} />
+                                </button>
+                            </span>
+                        ))}
+                        <input
+                            id="vault-tags"
+                            className={styles.tagInput}
+                            value={tagDraft}
+                            placeholder={tags.length ? '' : 'banking, admin'}
+                            onChange={(e) => setTagDraft(e.target.value)}
+                            onKeyDown={onTagKeyDown}
+                            onBlur={() => tagDraft.trim() && commitTag(tagDraft)}
+                        />
+                    </div>,
+                    'Comma or Enter adds a tag.'
+                )}
+
+                {field(
+                    'notes',
+                    'Notes',
+                    <textarea
+                        id="vault-notes"
+                        className={styles.textarea}
+                        rows={3}
+                        value={values.notes || ''}
+                        onChange={(e) => set('notes', e.target.value)}
+                    />
+                )}
+
+                {field(
+                    'visibility',
+                    'Visibility',
+                    <div className={styles.radioRow}>
+                        <label className={!canManage ? styles.radioDisabled : ''}>
+                            <input
+                                type="radio"
+                                className={styles.checkControl}
+                                name="vault-visibility"
+                                value="shared"
+                                checked={values.visibility === 'shared'}
+                                disabled={!canManage}
+                                onChange={() => set('visibility', 'shared')}
+                            />
+                            <span>Shared with the team</span>
+                        </label>
+                        <label>
+                            <input
+                                type="radio"
+                                className={styles.checkControl}
+                                name="vault-visibility"
+                                value="private"
+                                checked={values.visibility === 'private'}
+                                onChange={() => set('visibility', 'private')}
+                            />
+                            <span>Private to me</span>
+                        </label>
+                    </div>,
+                    canManage
+                        ? undefined
+                        : 'Only a vault manager can share an entry with the team.'
+                )}
+
+                <div className={styles.formActions}>
+                    <button
+                        type="button"
+                        className={styles.primaryButton}
+                        onClick={submit}
+                        disabled={saving || values.title.trim() === ''}
+                    >
+                        {saving && <Loader2 size={15} className={styles.spin} />}
+                        {saving ? 'Saving…' : 'Save'}
+                    </button>
+                    <button
+                        type="button"
+                        className={styles.ghostButton}
+                        onClick={onClose}
+                        disabled={saving}
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </StandardModal>
+    );
+};
+
+export default VaultEntryForm;