auramaxx 0.0.1

package/src/components/vault/PasswordGenerator.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { RotateCcw } from 'lucide-react';
+import { Button, TextInput, FilterDropdown, Modal, Toggle } from '@/components/design-system';
+import { WORDLIST } from '@/lib/wordlist';
+
+interface PasswordGeneratorProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onUse: (password: string) => void;
+}
+
+type GenType = 'random' | 'memorable' | 'pin';
+
+interface GenOptions {
+  numbers: boolean;
+  symbols: boolean;
+  uppercase: boolean;
+  avoidAmbiguous: boolean;
+}
+
+const TYPE_OPTIONS = [
+  { value: 'random', label: 'Random' },
+  { value: 'memorable', label: 'Memorable' },
+  { value: 'pin', label: 'PIN' },
+];
+
+const DEFAULT_LENGTHS: Record<GenType, number> = { random: 20, memorable: 4, pin: 6 };
+const MIN_LENGTHS: Record<GenType, number> = { random: 8, memorable: 3, pin: 4 };
+const MAX_LENGTHS: Record<GenType, number> = { random: 128, memorable: 10, pin: 12 };
+
+function randomIndex(max: number): number {
+  const arr = new Uint32Array(1);
+  crypto.getRandomValues(arr);
+  return arr[0] % max;
+}
+
+function generateRandom(length: number, opts: GenOptions): string {
+  let charset = 'abcdefghijklmnopqrstuvwxyz';
+  if (opts.numbers) charset += '0123456789';
+  if (opts.symbols) charset += '!@#$%^&*()_+-=[]{}|;:,.<>?';
+  if (opts.uppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  if (opts.avoidAmbiguous) charset = charset.replace(/[0OoIl1]/g, '');
+  if (charset.length === 0) charset = 'abcdefghijklmnopqrstuvwxyz';
+  const chars: string[] = [];
+  for (let i = 0; i < length; i++) {
+    chars.push(charset[randomIndex(charset.length)]);
+  }
+  return chars.join('');
+}
+
+function generateMemorable(count: number): string {
+  const words: string[] = [];
+  for (let i = 0; i < count; i++) {
+    words.push(WORDLIST[randomIndex(WORDLIST.length)]);
+  }
+  return words.join('-');
+}
+
+function generatePin(length: number): string {
+  const chars: string[] = [];
+  for (let i = 0; i < length; i++) {
+    chars.push(String(randomIndex(10)));
+  }
+  return chars.join('');
+}
+
+export const PasswordGenerator: React.FC<PasswordGeneratorProps> = ({ isOpen, onClose, onUse }) => {
+  const [type, setType] = useState<GenType>('random');
+  const [length, setLength] = useState(DEFAULT_LENGTHS.random);
+  const [options, setOptions] = useState<GenOptions>({
+    numbers: true,
+    symbols: true,
+    uppercase: true,
+    avoidAmbiguous: false,
+  });
+  const [generated, setGenerated] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  const generate = useCallback(() => {
+    switch (type) {
+      case 'random':
+        setGenerated(generateRandom(length, options));
+        break;
+      case 'memorable':
+        setGenerated(generateMemorable(length));
+        break;
+      case 'pin':
+        setGenerated(generatePin(length));
+        break;
+    }
+    setCopied(false);
+  }, [type, length, options]);
+
+  // Auto-generate on open and when options change
+  useEffect(() => {
+    if (isOpen) generate();
+  }, [isOpen, generate]);
+
+  // Reset length when type changes
+  useEffect(() => {
+    setLength(DEFAULT_LENGTHS[type]);
+  }, [type]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(generated);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard not available
+    }
+  };
+
+  const handleLengthInput = (val: string) => {
+    const n = parseInt(val, 10);
+    if (!isNaN(n)) {
+      setLength(Math.max(MIN_LENGTHS[type], Math.min(MAX_LENGTHS[type], n)));
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Password Generator"
+      size="sm"
+      footer={(
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm" onClick={generate} icon={<RotateCcw size={10} />}>
+            Refresh
+          </Button>
+          <Button variant="secondary" size="sm" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm" onClick={() => onUse(generated)}>
+            Use
+          </Button>
+        </div>
+      )}
+    >
+      <div className="space-y-4 min-h-[280px]">
+        {/* Generated password display */}
+        <div
+          onClick={handleCopy}
+          className="bg-[var(--color-background-alt,#f4f4f5)] border border-[var(--color-border,#d4d4d8)] p-3 cursor-pointer transition-colors hover:border-[var(--color-border-focus,#0a0a0a)] relative group"
+        >
+          <div className="font-mono text-lg font-bold text-[var(--color-text,#0a0a0a)] break-all select-all pr-12">
+            {generated}
+          </div>
+          <div className={`absolute top-1 right-2 font-mono text-[8px] uppercase tracking-widest font-bold transition-opacity ${copied ? 'opacity-100' : 'opacity-0'} bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] px-1.5 py-0.5`}>
+            Copied
+          </div>
+          {!copied && (
+            <div className="absolute top-1 right-2 font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] opacity-0 group-hover:opacity-100 transition-opacity">
+              Click to copy
+            </div>
+          )}
+        </div>
+
+        {/* Type selector */}
+        <FilterDropdown
+          options={TYPE_OPTIONS}
+          value={type}
+          onChange={(v) => setType(v as GenType)}
+          label="Type"
+          compact
+        />
+
+        {/* Length */}
+        <div>
+          <label className="block font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] mb-1.5 px-1">
+            Length
+          </label>
+          <div className="flex items-center gap-3">
+            <input
+              type="range"
+              min={MIN_LENGTHS[type]}
+              max={MAX_LENGTHS[type]}
+              value={length}
+              onChange={(e) => setLength(parseInt(e.target.value, 10))}
+              className="flex-1 h-1 appearance-none bg-[var(--color-border,#d4d4d8)] outline-none"
+              style={{ accentColor: 'var(--color-accent, #ccff00)' }}
+            />
+            <div className="w-16">
+              <TextInput
+                compact
+                type="number"
+                min={MIN_LENGTHS[type]}
+                max={MAX_LENGTHS[type]}
+                value={length}
+                onChange={(e) => handleLengthInput(e.target.value)}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Options (only for random type) */}
+        {type === 'random' && (
+          <div className="space-y-2.5">
+            <Toggle
+              size="sm"
+              checked={options.numbers}
+              onChange={(v) => setOptions((o) => ({ ...o, numbers: v }))}
+              label="Numbers"
+            />
+            <Toggle
+              size="sm"
+              checked={options.symbols}
+              onChange={(v) => setOptions((o) => ({ ...o, symbols: v }))}
+              label="Symbols"
+            />
+            <Toggle
+              size="sm"
+              checked={options.uppercase}
+              onChange={(v) => setOptions((o) => ({ ...o, uppercase: v }))}
+              label="Uppercase"
+            />
+            <Toggle
+              size="sm"
+              checked={options.avoidAmbiguous}
+              onChange={(v) => setOptions((o) => ({ ...o, avoidAmbiguous: v }))}
+              label="Avoid ambiguous"
+            />
+          </div>
+        )}
+
+      </div>
+    </Modal>
+  );
+};

package/src/components/vault/TOTPDisplay.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { api, Api } from '@/lib/api';
+import { CredentialField } from './CredentialField';
+
+interface TOTPDisplayProps {
+  credentialId: string;
+}
+
+/**
+ * Live TOTP code display with countdown timer.
+ * Only renders if the credential has a TOTP secret.
+ */
+export const TOTPDisplay: React.FC<TOTPDisplayProps> = ({ credentialId }) => {
+  const [code, setCode] = useState<string | null>(null);
+  const [remaining, setRemaining] = useState(30);
+  const [hasTOTP, setHasTOTP] = useState<boolean | null>(null); // null = unknown
+
+  const fetchCode = useCallback(async () => {
+    try {
+      const res = await api.post<{ success: boolean; code: string; remaining: number; error?: string }>(
+        Api.Wallet,
+        `/credentials/${credentialId}/totp`,
+      );
+      if (res.success && res.code) {
+        setCode(res.code);
+        setRemaining(res.remaining);
+        setHasTOTP(true);
+      } else {
+        setHasTOTP(false);
+      }
+    } catch {
+      setHasTOTP(false);
+    }
+  }, [credentialId]);
+
+  useEffect(() => {
+    fetchCode();
+  }, [fetchCode]);
+
+  // Countdown timer
+  useEffect(() => {
+    if (hasTOTP !== true) return;
+    const interval = setInterval(() => {
+      setRemaining(prev => {
+        if (prev <= 1) {
+          fetchCode();
+          return 30;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [hasTOTP, fetchCode]);
+
+  if (hasTOTP === null || hasTOTP === false) return null;
+  const isUrgent = remaining <= 5;
+  const displayCode = code ? `${code.slice(0, 3)} ${code.slice(3)}` : '--- ---';
+  const progress = remaining / 30;
+
+  return (
+    <div className="space-y-0.5" data-testid="totp-display">
+      <CredentialField
+        label="2FA Code"
+        value={displayCode}
+        copyValue={code ?? undefined}
+        credentialId={credentialId}
+        fieldKey="totp_code"
+        isSensitive={false}
+        trailingValue={(
+          <div className="ml-2 flex items-center gap-1.5">
+            <svg width="16" height="16" viewBox="0 0 18 18" className="shrink-0" style={{ transform: 'rotate(-90deg)' }}>
+              <circle
+                cx="9"
+                cy="9"
+                r="7"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                className="text-[var(--color-border,#d4d4d8)]"
+                opacity="0.3"
+              />
+              <circle
+                cx="9"
+                cy="9"
+                r="7"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeDasharray={`${progress * 43.98} 43.98`}
+                strokeLinecap="round"
+                className={isUrgent ? 'text-[var(--color-danger,#ef4444)]' : 'text-[var(--color-accent,#ccff00)]'}
+              />
+            </svg>
+            <span className={`font-mono text-[9px] ${
+              isUrgent ? 'text-[var(--color-danger,#ef4444)]' : 'text-[var(--color-text-faint,#9ca3af)]'
+            }`}>
+              {remaining}s
+            </span>
+          </div>
+        )}
+        disableLargeType={true}
+        onShowLargeType={() => {}}
+      />
+    </div>
+  );
+};

package/src/components/vault/TotpSetupPanel.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import React, { useMemo, useRef, useState } from 'react';
+import { TextInput } from '@/components/design-system';
+import { classifyTotpPayload, normalizeBase32Secret, parseTotpUri, type ParsedTotpUri } from '@/lib/totp-import';
+
+type TotpIntent = 'keep' | 'replace' | 'remove';
+
+type Props = {
+  isEdit: boolean;
+  hasExistingTotp: boolean;
+  onIntentChange: (intent: TotpIntent) => void;
+  onSecretChange: (secret: string, markDirty: boolean) => void;
+};
+
+export const TotpSetupPanel: React.FC<Props> = ({ isEdit, hasExistingTotp, onIntentChange, onSecretChange }) => {
+  const [mode, setMode] = useState<'manual' | 'uri' | 'qr'>('manual');
+  const [manualSecret, setManualSecret] = useState('');
+  const [uriInput, setUriInput] = useState('');
+  const [preview, setPreview] = useState<ParsedTotpUri | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isDecoding, setIsDecoding] = useState(false);
+  const decodeVersionRef = useRef(0);
+
+  const hasMigrationPayload = useMemo(() => classifyTotpPayload(uriInput) === 'otpauth-migration', [uriInput]);
+
+  const applyParsed = (parsed: ParsedTotpUri) => {
+    setPreview(parsed);
+    setError(null);
+    onIntentChange('replace');
+    onSecretChange(parsed.secret, true);
+  };
+
+  const handleManualChange = (value: string) => {
+    setManualSecret(value);
+    if (!value.trim()) {
+      setPreview(null);
+      onSecretChange('', false);
+      return;
+    }
+    try {
+      const normalized = normalizeBase32Secret(value);
+      setError(null);
+      setPreview({ secret: normalized, algorithm: 'SHA1', digits: 6, period: 30 });
+      onIntentChange('replace');
+      onSecretChange(normalized, true);
+    } catch {
+      setPreview(null);
+      setError('Invalid TOTP secret');
+      onSecretChange('', false);
+    }
+  };
+
+  const parseUriInput = (value: string) => {
+    if (!value.trim()) {
+      setPreview(null);
+      setError(null);
+      onSecretChange('', false);
+      return;
+    }
+    const kind = classifyTotpPayload(value);
+    if (kind === 'otpauth-migration') {
+      setPreview(null);
+      setError(null);
+      onSecretChange('', false);
+      return;
+    }
+    if (kind !== 'otpauth') {
+      setPreview(null);
+      setError('Unsupported QR/setup payload. Use an otpauth://totp link.');
+      onSecretChange('', false);
+      return;
+    }
+
+    try {
+      applyParsed(parseTotpUri(value));
+    } catch (err) {
+      setPreview(null);
+      setError(err instanceof Error ? err.message : 'Invalid TOTP setup link');
+      onSecretChange('', false);
+    }
+  };
+
+  const handleQrFile = async (file: File | null) => {
+    if (!file) return;
+    if (file.size > 5 * 1024 * 1024) {
+      setError('QR image must be 5MB or smaller');
+      return;
+    }
+
+    const currentVersion = ++decodeVersionRef.current;
+    setIsDecoding(true);
+    setError(null);
+
+    try {
+      if (typeof window === 'undefined' || !('BarcodeDetector' in window)) {
+        throw new Error('QR decoding not supported in this browser. Paste setup link manually.');
+      }
+      const detector = new (window as unknown as { BarcodeDetector: new (opts: { formats: string[] }) => { detect: (source: ImageBitmap) => Promise<Array<{ rawValue?: string }>> } }).BarcodeDetector({ formats: ['qr_code'] });
+      const bitmap = await createImageBitmap(file);
+      try {
+        if (bitmap.width > 4096 || bitmap.height > 4096) {
+          throw new Error('QR image dimensions exceed 4096x4096 limit');
+        }
+        const codes = await detector.detect(bitmap);
+        if (decodeVersionRef.current !== currentVersion) return;
+        const payload = codes[0]?.rawValue || '';
+        setUriInput(payload);
+        parseUriInput(payload);
+      } finally {
+        bitmap.close();
+      }
+    } catch (err) {
+      if (decodeVersionRef.current !== currentVersion) return;
+      setPreview(null);
+      setError(err instanceof Error ? err.message : 'Failed to decode QR image');
+    } finally {
+      if (decodeVersionRef.current === currentVersion) setIsDecoding(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3 border border-[var(--color-border,#d4d4d8)] p-3 bg-[var(--color-background-alt,#f4f4f5)]" data-testid="totp-setup-panel">
+      {isEdit && hasExistingTotp && (
+        <div className="flex flex-wrap gap-2">
+          <button type="button" className="font-mono text-[9px] px-2 py-1 border" onClick={() => { onIntentChange('keep'); setError(null); onSecretChange('', false); }}>
+            Keep Existing
+          </button>
+          <button type="button" className="font-mono text-[9px] px-2 py-1 border" onClick={() => onIntentChange('replace')}>
+            Replace TOTP
+          </button>
+          <button type="button" className="font-mono text-[9px] px-2 py-1 border" onClick={() => { onIntentChange('remove'); setPreview(null); setError(null); onSecretChange('', true); }}>
+            Remove TOTP
+          </button>
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <button type="button" className="font-mono text-[9px] uppercase px-2 py-1 border" onClick={() => setMode('manual')}>Manual</button>
+        <button type="button" className="font-mono text-[9px] uppercase px-2 py-1 border" onClick={() => setMode('uri')}>Paste Link</button>
+        <button type="button" className="font-mono text-[9px] uppercase px-2 py-1 border" onClick={() => setMode('qr')}>Import QR</button>
+      </div>
+
+      {mode === 'manual' && (
+        <TextInput
+          label="TOTP Secret (2FA)"
+          value={manualSecret}
+          onChange={(e) => handleManualChange(e.target.value)}
+          placeholder="Base32 secret (e.g. JBSWY3DPEHPK3PXP)"
+          type="password"
+        />
+      )}
+
+      {mode === 'uri' && (
+        <div>
+          <label className="block font-mono text-[9px] font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)]">Setup Link</label>
+          <textarea
+            className="w-full h-24 bg-[var(--color-background-alt,#f4f4f5)] border border-[var(--color-border,#d4d4d8)] font-mono text-sm p-3 resize-none"
+            value={uriInput}
+            onChange={(e) => { setUriInput(e.target.value); parseUriInput(e.target.value); }}
+            placeholder="otpauth://totp/..."
+            data-testid="totp-uri-input"
+          />
+        </div>
+      )}
+
+      {mode === 'qr' && (
+        <div className="space-y-2">
+          <input
+            type="file"
+            accept="image/png,image/jpeg,image/webp"
+            onChange={(e) => { void handleQrFile(e.target.files?.[0] || null); }}
+            data-testid="totp-qr-file"
+          />
+          {isDecoding && <p className="font-mono text-[10px]" data-testid="totp-qr-decoding">Decoding QR…</p>}
+        </div>
+      )}
+
+      {hasMigrationPayload && (
+        <div className="font-mono text-[10px] border p-2" data-testid="totp-migration-fallback">
+          Google Authenticator migration QR detected. v1 supports standard otpauth:// links only. Use manual setup or account-level QR when available.
+        </div>
+      )}
+
+      {preview && (
+        <div className="font-mono text-[10px] border p-2" data-testid="totp-preview">
+          <div>Issuer: {preview.issuer || '—'}</div>
+          <div>Account: {preview.account || '—'}</div>
+          <div>Digits: {preview.digits}</div>
+          <div>Period: {preview.period}s</div>
+          <div>Algorithm: {preview.algorithm}</div>
+        </div>
+      )}
+
+      {error && <div className="font-mono text-[10px] text-[var(--color-danger,#ef4444)]" data-testid="totp-error">{error}</div>}
+    </div>
+  );
+};