feat: add S/MIME store for managing key records and public certificates

- Implemented Zustand store for S/MIME functionality, including state management for key records and public certificates. - Added methods for importing PKCS#12 files and public certificates, binding identities to keys, and managing unlocked keys. - Introduced session storage for remembering unlocked keys across sessions. - Enhanced error handling and loading states during data operations.
2026-03-17 20:14:01 +01:00
parent 7c5785e9e8
commit de35d1d8e8
45 changed files with 24687 additions and 64 deletions
@@ -0,0 +1,169 @@
+"use client";
+
+import { useState, useId } from "react";
+import { useFocusTrap } from "@/hooks/use-focus-trap";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { KeyRound, Eye, EyeOff } from "lucide-react";
+
+interface SmimePassphraseDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (passphrase: string) => void | Promise<void>;
+  title: string;
+  description?: string;
+  submitText?: string;
+  error?: string | null;
+  /** Show a second passphrase field for import/export confirmation. */
+  showConfirm?: boolean;
+}
+
+export function SmimePassphraseDialog({
+  isOpen,
+  onClose,
+  onSubmit,
+  title,
+  description,
+  submitText,
+  error,
+  showConfirm = false,
+}: SmimePassphraseDialogProps) {
+  const t = useTranslations("smime");
+  const id = useId();
+  const [passphrase, setPassphrase] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const dialogRef = useFocusTrap({
+    isActive: isOpen,
+    onEscape: onClose,
+    restoreFocus: true,
+  });
+
+  if (!isOpen) return null;
+
+  const mismatch = showConfirm && passphrase !== confirm && confirm.length > 0;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!passphrase || (showConfirm && passphrase !== confirm)) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit(passphrase);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    setPassphrase("");
+    setConfirm("");
+    setShowPassword(false);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150">
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={`${id}-title`}
+        aria-describedby={description ? `${id}-desc` : undefined}
+        className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
+      >
+        <form onSubmit={handleSubmit}>
+          <div className="p-6">
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
+                <KeyRound className="w-5 h-5 text-primary" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h2
+                  id={`${id}-title`}
+                  className="text-lg font-semibold text-foreground"
+                >
+                  {title}
+                </h2>
+                {description && (
+                  <p
+                    id={`${id}-desc`}
+                    className="text-sm text-muted-foreground mt-1"
+                  >
+                    {description}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="mt-4 space-y-3">
+              <div className="relative">
+                <Input
+                  type={showPassword ? "text" : "password"}
+                  value={passphrase}
+                  onChange={(e) => setPassphrase(e.target.value)}
+                  placeholder={t("passphrase_placeholder")}
+                  autoFocus
+                  className="pr-10"
+                  autoComplete="off"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
+                  aria-label={showPassword ? t("hide_passphrase") : t("show_passphrase")}
+                >
+                  {showPassword ? (
+                    <EyeOff className="w-4 h-4" />
+                  ) : (
+                    <Eye className="w-4 h-4" />
+                  )}
+                </button>
+              </div>
+
+              {showConfirm && (
+                <div>
+                  <Input
+                    type={showPassword ? "text" : "password"}
+                    value={confirm}
+                    onChange={(e) => setConfirm(e.target.value)}
+                    placeholder={t("confirm_passphrase_placeholder")}
+                    autoComplete="off"
+                  />
+                  {mismatch && (
+                    <p className="text-xs text-destructive mt-1">
+                      {t("passphrase_mismatch")}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              {error && (
+                <p className="text-sm text-destructive">{error}</p>
+              )}
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 px-6 pb-6">
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={handleClose}
+              disabled={isSubmitting}
+            >
+              {t("cancel")}
+            </Button>
+            <Button
+              type="submit"
+              disabled={!passphrase || isSubmitting || (showConfirm && passphrase !== confirm)}
+            >
+              {isSubmitting ? t("processing") : (submitText ?? t("unlock"))}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}