@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/vault/VaultConfirmPanel.jsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Loader2, ShieldCheck } from 'lucide-react';
+
+import styles from '../styles/Vault.module.scss';
+
+/**
+ * "Confirm your CRM password", drawn wherever a reveal was interrupted.
+ *
+ * Rendered by both the quick search popover and the manager, driven entirely
+ * by `useVaultReveal` — this file holds no flow logic, only the form. It is a
+ * plain `<div>` rather than a `<form>` so it can sit inside the manager's
+ * entry form without nesting one form in another; Enter is wired by hand.
+ */
+const VaultConfirmPanel = ({
+    message,
+    error,
+    pending,
+    onConfirm,
+    onCancel,
+    compact = false,
+}) => {
+    const [password, setPassword] = useState('');
+    const inputRef = useRef(null);
+
+    // The panel appears in place of what the user was looking at, so the
+    // caret has to arrive with it — otherwise the next keystroke is lost.
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+
+    // A rejected attempt clears the field: the value in it is known wrong,
+    // and leaving it there invites a second submit of the same thing.
+    useEffect(() => {
+        if (error) setPassword('');
+    }, [error]);
+
+    const submit = () => {
+        if (pending || password === '') return;
+        onConfirm(password);
+    };
+
+    return (
+        <div
+            className={`${styles.confirmPanel} ${compact ? styles.confirmCompact : ''}`}
+            role="group"
+            aria-label="Confirm your password"
+        >
+            <div className={styles.confirmHead}>
+                <ShieldCheck size={16} strokeWidth={2} aria-hidden="true" />
+                <strong>Confirm your CRM password</strong>
+            </div>
+
+            {message && <p className={styles.confirmMessage}>{message}</p>}
+
+            <div className={styles.confirmRow}>
+                <input
+                    ref={inputRef}
+                    type="password"
+                    className={styles.confirmInput}
+                    value={password}
+                    autoComplete="current-password"
+                    placeholder="Your password"
+                    aria-label="Your CRM password"
+                    aria-invalid={error ? 'true' : undefined}
+                    disabled={pending}
+                    onChange={(e) => setPassword(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            submit();
+                        }
+                        if (e.key === 'Escape') {
+                            // Escape backs out of the confirmation without
+                            // closing the surface underneath it.
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onCancel();
+                        }
+                    }}
+                />
+                <button
+                    type="button"
+                    className={styles.confirmButton}
+                    onClick={submit}
+                    disabled={pending || password === ''}
+                >
+                    {pending ? (
+                        <Loader2 size={14} className={styles.spin} aria-hidden="true" />
+                    ) : null}
+                    {pending ? 'Checking…' : 'Confirm'}
+                </button>
+                <button
+                    type="button"
+                    className={styles.confirmCancel}
+                    onClick={onCancel}
+                    disabled={pending}
+                >
+                    Cancel
+                </button>
+            </div>
+
+            {/*
+              * The line is always in the DOM, holding its own height, so an
+              * error does not shove the buttons down the moment it appears.
+              */}
+            <p className={styles.confirmError} role="alert">
+                {error || ' '}
+            </p>
+        </div>
+    );
+};
+
+export default VaultConfirmPanel;