auramaxx 1.0.0-alpha.4

package/src/components/vault/CredentialField.tsx

@@ -0,0 +1,361 @@
+'use client';
+
+import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { ChevronDown, Copy, Eye, EyeOff, Maximize2, Loader2 } from 'lucide-react';
+import { Popover } from '@/components/design-system';
+import { decryptCredentialPayload } from '@/lib/vault-crypto';
+import { api, Api } from '@/lib/api';
+import { marked } from 'marked';
+
+type SensitiveInteractionMode = 'default' | 'hover-copy' | 'markdown-hover-copy';
+
+interface CredentialFieldProps {
+  label: string;
+  value?: string;
+  credentialId: string;
+  fieldKey: string;
+  isSensitive: boolean;
+  onShowLargeType: (value: string) => void;
+  sensitiveInteractionMode?: SensitiveInteractionMode;
+}
+
+export const CredentialField: React.FC<CredentialFieldProps> = ({
+  label,
+  value,
+  credentialId,
+  fieldKey,
+  isSensitive,
+  onShowLargeType,
+  sensitiveInteractionMode = 'default',
+}) => {
+  const [copied, setCopied] = useState(false);
+  const [revealed, setRevealed] = useState(false);
+  const [revealedValue, setRevealedValue] = useState<string | null>(null);
+  const [decrypting, setDecrypting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuAnchorRef = useRef<HTMLButtonElement>(null);
+  const revealTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const autoDecryptAttemptedRef = useRef(false);
+  const isHoverCopyMode = sensitiveInteractionMode === 'hover-copy' || sensitiveInteractionMode === 'markdown-hover-copy';
+  const isMarkdownMode = sensitiveInteractionMode === 'markdown-hover-copy';
+
+  const markdownHtml = useMemo(() => {
+    if (!isMarkdownMode || revealedValue == null) return '';
+    const escaped = revealedValue
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+    return marked.parse(escaped, { async: false, breaks: true }) as string;
+  }, [isMarkdownMode, revealedValue]);
+
+  useEffect(() => {
+    return () => {
+      if (revealTimerRef.current) clearTimeout(revealTimerRef.current);
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    setCopied(false);
+    setRevealed(false);
+    setRevealedValue(null);
+    setError(null);
+    setMenuOpen(false);
+    autoDecryptAttemptedRef.current = false;
+    if (revealTimerRef.current) clearTimeout(revealTimerRef.current);
+  }, [credentialId, fieldKey]);
+
+  const markCopied = useCallback(() => {
+    setCopied(true);
+    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+    copyTimerRef.current = setTimeout(() => setCopied(false), 2000);
+  }, []);
+
+  const decryptField = useCallback(async (): Promise<string | null> => {
+    setDecrypting(true);
+    setError(null);
+    try {
+      const res = await api.post<{ encrypted: string }>(Api.Wallet, `/credentials/${credentialId}/read`);
+      const plaintext = await decryptCredentialPayload(res.encrypted);
+      const parsed = JSON.parse(plaintext);
+      const field = parsed.fields?.find((f: { key: string; value: string }) => f.key === fieldKey);
+      if (!field) {
+        setError('Field not found');
+        return null;
+      }
+      return field.value;
+    } catch {
+      setError('Decryption failed -- try re-unlocking');
+      return null;
+    } finally {
+      setDecrypting(false);
+    }
+  }, [credentialId, fieldKey]);
+
+  const handleCopySensitive = useCallback(async () => {
+    if (decrypting) return;
+    setMenuOpen(false);
+    const val = await decryptField();
+    if (val != null) {
+      navigator.clipboard.writeText(val);
+      markCopied();
+    }
+  }, [decryptField, decrypting, markCopied]);
+
+  const handleReveal = useCallback(async () => {
+    if (decrypting || (revealed && revealedValue != null)) return;
+    setMenuOpen(false);
+    const val = await decryptField();
+    if (val != null) {
+      setRevealedValue(val);
+      setRevealed(true);
+      if (revealTimerRef.current) clearTimeout(revealTimerRef.current);
+      revealTimerRef.current = setTimeout(() => {
+        setRevealed(false);
+        setRevealedValue(null);
+      }, 30000);
+    }
+  }, [decryptField, decrypting, revealed, revealedValue]);
+
+  const handleHide = useCallback(() => {
+    setRevealed(false);
+    setRevealedValue(null);
+    if (revealTimerRef.current) clearTimeout(revealTimerRef.current);
+  }, []);
+
+  const handleLargeType = useCallback(async () => {
+    setMenuOpen(false);
+    const val = await decryptField();
+    if (val != null) {
+      onShowLargeType(val);
+    }
+  }, [decryptField, onShowLargeType]);
+
+  const handleCopyNonSensitive = useCallback(() => {
+    if (value) {
+      navigator.clipboard.writeText(value);
+      markCopied();
+    }
+  }, [value, markCopied]);
+
+  const handleLargeTypeNonSensitive = useCallback(() => {
+    if (!value) return;
+    setMenuOpen(false);
+    onShowLargeType(value);
+  }, [onShowLargeType, value]);
+
+  const handleClickCopySensitive = useCallback(async () => {
+    if (!isHoverCopyMode || decrypting) return;
+    let val = revealedValue;
+    if (val == null) {
+      val = await decryptField();
+      if (val != null) setRevealedValue(val);
+    }
+    if (val != null) {
+      navigator.clipboard.writeText(val);
+      markCopied();
+    }
+  }, [decryptField, decrypting, isHoverCopyMode, markCopied, revealedValue]);
+
+  useEffect(() => {
+    if (!isSensitive || !isHoverCopyMode) return;
+    if (autoDecryptAttemptedRef.current) return;
+    autoDecryptAttemptedRef.current = true;
+    let cancelled = false;
+    void (async () => {
+      const val = await decryptField();
+      if (!cancelled && val != null) {
+        setRevealedValue(val);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [decryptField, isHoverCopyMode, isSensitive]);
+
+  if (!isSensitive) {
+    return (
+      <div
+        className="flex items-center gap-3 py-2 px-2 cursor-pointer hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors group"
+        onClick={handleCopyNonSensitive}
+      >
+        <div className="w-24 shrink-0">
+          <span className="font-mono text-[9px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">
+            {label}
+          </span>
+        </div>
+        <div className="flex-1 min-w-0">
+          <span className="font-mono text-[11px] text-[var(--color-text,#0a0a0a)] break-all">
+            {copied ? 'Copied' : (value || '--')}
+          </span>
+        </div>
+        <div className="shrink-0 relative flex items-center gap-1">
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleCopyNonSensitive();
+            }}
+            className="inline-flex items-center gap-1 px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-faint,#9ca3af)] hover:text-[var(--color-text,#0a0a0a)]"
+          >
+            <Copy size={10} />
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+          <button
+            ref={menuAnchorRef}
+            onClick={(e) => {
+              e.stopPropagation();
+              setMenuOpen(!menuOpen);
+            }}
+            className="p-1 opacity-0 group-hover:opacity-100 transition-opacity text-[var(--color-text-faint,#9ca3af)] hover:text-[var(--color-text,#0a0a0a)]"
+            aria-label={`Field actions for ${label}`}
+          >
+            <ChevronDown size={12} />
+          </button>
+          <Popover
+            isOpen={menuOpen}
+            onClose={() => setMenuOpen(false)}
+            anchorEl={menuAnchorRef.current}
+            anchor="right"
+          >
+            <div className="flex flex-col gap-1 min-w-[160px]">
+              <button
+                onClick={handleCopyNonSensitive}
+                className="flex items-center gap-2 px-2 py-1.5 text-left font-mono text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors"
+              >
+                <Copy size={10} />
+                Copy
+              </button>
+              <button
+                onClick={handleLargeTypeNonSensitive}
+                disabled={!value}
+                className="flex items-center gap-2 px-2 py-1.5 text-left font-mono text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors disabled:opacity-40"
+              >
+                <Maximize2 size={10} />
+                Show in large type
+              </button>
+            </div>
+          </Popover>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex gap-3 py-2 px-2 group ${isMarkdownMode ? 'items-start' : 'items-center'}`}>
+      <div className="w-24 shrink-0">
+        <span className="font-mono text-[9px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">
+          {label}
+        </span>
+      </div>
+      <div
+        data-testid={`credential-field-value-${fieldKey}`}
+        className={`flex-1 min-w-0 transition-colors rounded-sm ${isHoverCopyMode ? '' : 'cursor-pointer'} ${isMarkdownMode ? 'border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#f4f4f2)] overflow-hidden' : 'hover:bg-[var(--color-background-alt,#f4f4f5)] px-1 py-0.5'}`}
+        onClick={() => { if (isHoverCopyMode) void handleClickCopySensitive(); else void handleReveal(); }}
+      >
+        {error ? (
+          <span className="font-mono text-[10px] text-[var(--color-danger,#ef4444)]">{error}</span>
+        ) : decrypting ? (
+          <Loader2 size={12} className="animate-spin text-[var(--color-text-muted,#6b7280)]" />
+        ) : isMarkdownMode && revealedValue != null ? (
+          <div>
+            <div className="px-4 py-2 border-b border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)] font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-faint,#9ca3af)]">
+              {copied ? 'Copied' : 'Hover then click to copy raw note'}
+            </div>
+            <div className="p-5 prose-mono max-w-none" dangerouslySetInnerHTML={{ __html: markdownHtml }} />
+          </div>
+        ) : isHoverCopyMode ? (
+          <span className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)] tracking-wider uppercase">
+            {copied ? 'Copied' : revealedValue != null ? 'Hover then click to copy' : 'Decrypting'}
+          </span>
+        ) : revealed && revealedValue != null ? (
+          <div className="flex items-center gap-2">
+            <span className="font-mono text-[11px] text-[var(--color-text,#0a0a0a)] break-all">{revealedValue}</span>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                handleHide();
+              }}
+              className="shrink-0 text-[var(--color-text-faint,#9ca3af)] hover:text-[var(--color-text,#0a0a0a)] transition-colors"
+            >
+              <EyeOff size={12} />
+            </button>
+          </div>
+        ) : (
+          <span className="font-mono text-[11px] text-[var(--color-text-muted,#6b7280)] tracking-wider">
+            {copied ? 'Copied' : '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022'}
+          </span>
+        )}
+      </div>
+      {!isHoverCopyMode && (
+        <div className="shrink-0 relative flex items-center gap-1">
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              void handleCopySensitive();
+            }}
+            className="inline-flex items-center gap-1 px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-faint,#9ca3af)] hover:text-[var(--color-text,#0a0a0a)]"
+          >
+            <Copy size={10} />
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+          <button
+            ref={menuAnchorRef}
+            onClick={(e) => {
+              e.stopPropagation();
+              setMenuOpen(!menuOpen);
+            }}
+            className="p-1 opacity-0 group-hover:opacity-100 transition-opacity text-[var(--color-text-faint,#9ca3af)] hover:text-[var(--color-text,#0a0a0a)]"
+            aria-label={`Field actions for ${label}`}
+          >
+            <ChevronDown size={12} />
+          </button>
+          <Popover
+            isOpen={menuOpen}
+            onClose={() => setMenuOpen(false)}
+            anchorEl={menuAnchorRef.current}
+            anchor="right"
+          >
+            <div className="flex flex-col gap-1 min-w-[170px]">
+              <button
+                onClick={handleCopySensitive}
+                className="flex items-center gap-2 px-2 py-1.5 text-left font-mono text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors"
+              >
+                <Copy size={10} />
+                Copy
+              </button>
+              {!revealed && (
+                <button
+                  onClick={handleReveal}
+                  className="flex items-center gap-2 px-2 py-1.5 text-left font-mono text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors"
+                >
+                  <Eye size={10} />
+                  Reveal
+                </button>
+              )}
+              {revealed && (
+                <button
+                  onClick={handleHide}
+                  className="flex items-center gap-2 px-2 py-1.5 text-left font-mono text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors"
+                >
+                  <EyeOff size={10} />
+                  Hide
+                </button>
+              )}
+              <button
+                onClick={handleLargeType}
+                className="flex items-center gap-2 px-2 py-1.5 text-left font-mono text-[9px] tracking-widest uppercase text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors"
+              >
+                <Maximize2 size={10} />
+                Show in large type
+              </button>
+            </div>
+          </Popover>
+        </div>
+      )}
+    </div>
+  );
+};