feat(PROJ-70): Frontend für IMAP-Rückholung (Opt-in + Restore-Button)

- MeResponse um imap_restore_enabled erweitert - setImapRestore() + restoreMail() API-Funktionen (index.ts re-export) - useImapRestore-Hook + ImapRestoreSection (Switch + Passwort-Dialog) in Settings - RestoreMailButton in Mail-Detailansicht (Sichtbarkeit + Konto-Select) - Spec/INDEX auf In Review Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 00:43:24 +02:00
parent c00bf27fea
commit 4b3a4ef996
9 changed files with 479 additions and 1 deletions
@@ -85,7 +85,7 @@
 | PROJ-67 | Manticore Search Upgrade 25.0.0 → 27.1.5 + Auto-Upgrade-Pfad | Deployed | [PROJ-67](PROJ-67-manticore-upgrade-25-zu-27.md) | 2026-07-05 |
 | PROJ-68 | sudo-Provisionierung für Admin-Dienststeuerung fehlte komplett | Deployed | [PROJ-68](PROJ-68-sudo-provisionierung-dienststeuerung.md) | 2026-07-05 |
 | PROJ-69 | Admin-Dashboard Tab-Gruppierung (2-Ebenen-Navigation) | Planned | [PROJ-69](PROJ-69-admin-tabs-gruppierung.md) | 2026-07-06 |
-| PROJ-70 | User-Self-Service IMAP-Rückholung (Archiv-Mail zurück ins Postfach) | In Progress | [PROJ-70](PROJ-70-imap-rueckholung-self-service.md) | 2026-07-07 |
+| PROJ-70 | User-Self-Service IMAP-Rückholung (Archiv-Mail zurück ins Postfach) | In Review | [PROJ-70](PROJ-70-imap-rueckholung-self-service.md) | 2026-07-07 |

 <!-- Add features above this line -->

@@ -22,6 +22,7 @@ import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { OcrBadge } from "@/components/ocr-badge";
+import { RestoreMailButton } from "@/components/mail/RestoreMailButton";
 import { FileText } from "lucide-react";

 // ── Helpers ────────────────────────────────────────────────────────────────
@@ -410,6 +411,10 @@ export default function MailViewPage({
                  {ocrLoading ? "..." : "OCR-Text"}
                </Button>
              )}
+              <RestoreMailButton
+                mailId={id}
+                enabled={user?.imap_restore_enabled ?? false}
+              />
            </div>
          )}
        </div>
@@ -11,6 +11,7 @@ import { ProfileSection } from "@/components/settings/ProfileSection";
 import { DisplaySection } from "@/components/settings/DisplaySection";
 import { TotpSection } from "@/components/settings/TotpSection";
 import { ImapSection } from "@/components/settings/ImapSection";
+import { ImapRestoreSection } from "@/components/settings/ImapRestoreSection";

 export default function SettingsPage() {
  const { user, loading, refresh } = useAuth();
@@ -50,6 +51,12 @@ export default function SettingsPage() {
          systemInfoLoading={systemInfoLoading}
          username={user.username}
        />
+        <ImapRestoreSection
+          initialEnabled={user.imap_restore_enabled ?? false}
+          onChanged={() => {
+            void refresh();
+          }}
+        />
      </main>
    </div>
  );
@@ -0,0 +1,171 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { MailPlus } from "lucide-react";
+import { getImapAccounts, restoreMail, type ImapAccount } from "@/lib/api";
+
+interface RestoreMailButtonProps {
+  mailId: string;
+  // PROJ-70: gate visibility on the user's opt-in flag.
+  enabled: boolean;
+}
+
+// PROJ-70: "Zurück ins Postfach" — copies an archived mail into the user's
+// external IMAP mailbox (INBOX). Only rendered when the opt-in is active and
+// at least one IMAP account is configured.
+export function RestoreMailButton({ mailId, enabled }: RestoreMailButtonProps) {
+  const [accounts, setAccounts] = useState<ImapAccount[]>([]);
+  const [accountsLoaded, setAccountsLoaded] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selected, setSelected] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  useEffect(() => {
+    if (!enabled) return;
+    let active = true;
+    getImapAccounts()
+      .then((data) => {
+        if (!active) return;
+        setAccounts(data);
+        if (data.length > 0) setSelected(String(data[0].id));
+      })
+      .catch(() => {
+        // Ignore — without accounts the button stays hidden.
+      })
+      .finally(() => {
+        if (active) setAccountsLoaded(true);
+      });
+    return () => {
+      active = false;
+    };
+  }, [enabled]);
+
+  // Hidden until we know the opt-in is on and there is a target mailbox.
+  if (!enabled || !accountsLoaded || accounts.length === 0) {
+    return null;
+  }
+
+  function openDialog() {
+    setError("");
+    setDialogOpen(true);
+  }
+
+  async function handleRestore() {
+    const accountId = parseInt(selected, 10);
+    if (!accountId) {
+      setError("Bitte ein Ziel-Postfach auswählen.");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    setSuccess("");
+    try {
+      const res = await restoreMail(mailId, accountId);
+      const acc = accounts.find((a) => a.id === res.account);
+      setSuccess(
+        `Mail wurde nach ${res.mailbox} in "${acc?.name ?? res.account}" zurückgeholt.`
+      );
+      setDialogOpen(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Rückholung fehlgeschlagen.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={openDialog}>
+        <MailPlus className="mr-1.5 h-4 w-4" aria-hidden="true" />
+        Zurück ins Postfach
+      </Button>
+
+      {success && (
+        <Alert className="basis-full">
+          <AlertDescription>{success}</AlertDescription>
+        </Alert>
+      )}
+      {error && !dialogOpen && (
+        <Alert variant="destructive" className="basis-full">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Mail zurück ins Postfach</DialogTitle>
+            <DialogDescription>
+              Es wird eine Kopie dieser archivierten Mail in den Ordner INBOX
+              des gewählten Postfachs übertragen. Das Archiv bleibt unverändert.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 py-2">
+            {accounts.length > 1 ? (
+              <div className="space-y-2">
+                <Label htmlFor="restore-account">Ziel-Postfach</Label>
+                <Select value={selected} onValueChange={setSelected}>
+                  <SelectTrigger id="restore-account">
+                    <SelectValue placeholder="Postfach auswählen" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {accounts.map((acc) => (
+                      <SelectItem key={acc.id} value={String(acc.id)}>
+                        {acc.name} ({acc.username})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                Ziel-Postfach: {accounts[0].name} ({accounts[0].username})
+              </p>
+            )}
+
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setDialogOpen(false)}
+              disabled={loading}
+            >
+              Abbrechen
+            </Button>
+            <Button type="button" onClick={handleRestore} disabled={loading}>
+              {loading ? "Übertragen..." : "Zurückholen"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
@@ -0,0 +1,143 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { MailPlus } from "lucide-react";
+import { useImapRestore } from "@/hooks/useImapRestore";
+
+interface ImapRestoreSectionProps {
+  initialEnabled: boolean;
+  onChanged: (enabled: boolean) => void;
+}
+
+// PROJ-70: Opt-in toggle that lets a user restore archived mails back into
+// their own external IMAP mailbox. Off by default; enabling requires the
+// current login password.
+export function ImapRestoreSection({
+  initialEnabled,
+  onChanged,
+}: ImapRestoreSectionProps) {
+  const {
+    enabled,
+    dialogOpen,
+    setDialogOpen,
+    password,
+    setPassword,
+    error,
+    success,
+    loading,
+    handleToggle,
+    confirmEnable,
+    cancelDialog,
+  } = useImapRestore(initialEnabled, onChanged);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3">
+          <MailPlus className="h-5 w-5" aria-hidden="true" />
+          Rückholung ins Postfach
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          Wenn aktiviert, können Sie einzelne archivierte Mails aus der
+          Detailansicht als Kopie zurück in Ihr eigenes IMAP-Postfach (Ordner
+          INBOX) übertragen. Das Archiv selbst bleibt unverändert. Standardmäßig
+          ist diese Funktion deaktiviert.
+        </p>
+
+        <div className="flex items-center justify-between gap-4 rounded-md border px-4 py-3">
+          <div className="space-y-0.5">
+            <Label htmlFor="imap-restore-switch" className="text-sm font-medium">
+              Rückholung erlauben
+            </Label>
+            <p className="text-xs text-muted-foreground">
+              {enabled ? "Aktiv" : "Deaktiviert"}
+            </p>
+          </div>
+          <Switch
+            id="imap-restore-switch"
+            checked={enabled}
+            disabled={loading}
+            onCheckedChange={handleToggle}
+            aria-label="Rückholung ins Postfach erlauben"
+          />
+        </div>
+
+        {success && (
+          <Alert>
+            <AlertDescription>{success}</AlertDescription>
+          </Alert>
+        )}
+        {error && !dialogOpen && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+      </CardContent>
+
+      <Dialog
+        open={dialogOpen}
+        onOpenChange={(open) => {
+          if (!open) cancelDialog();
+          else setDialogOpen(true);
+        }}
+      >
+        <DialogContent>
+          <form onSubmit={confirmEnable}>
+            <DialogHeader>
+              <DialogTitle>Rückholung aktivieren</DialogTitle>
+              <DialogDescription>
+                Bitte bestätigen Sie mit Ihrem aktuellen Passwort, um die
+                Rückholung ins Postfach zu aktivieren.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-2 py-4">
+              <Label htmlFor="imap-restore-password">Aktuelles Passwort</Label>
+              <Input
+                id="imap-restore-password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                autoComplete="current-password"
+                autoFocus
+                aria-label="Aktuelles Passwort"
+              />
+              {error && (
+                <Alert variant="destructive">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+            </div>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={cancelDialog}
+                disabled={loading}
+              >
+                Abbrechen
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {loading ? "Aktivieren..." : "Aktivieren"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  );
+}
@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import { setImapRestore } from "@/lib/api";
+
+// PROJ-70: Manages the IMAP-restore opt-in toggle.
+// Enabling requires the current password (bcrypt re-check on the server);
+// disabling is applied immediately without a password.
+export function useImapRestore(
+  initialEnabled: boolean,
+  onChanged: (enabled: boolean) => void
+) {
+  const [enabled, setEnabled] = useState(initialEnabled);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  // Triggered by the Switch. Turning ON opens the password dialog first;
+  // turning OFF is sent directly.
+  function handleToggle(next: boolean) {
+    setError("");
+    setSuccess("");
+    if (next) {
+      setPassword("");
+      setDialogOpen(true);
+    } else {
+      void disable();
+    }
+  }
+
+  async function disable() {
+    setLoading(true);
+    try {
+      const res = await setImapRestore(false, "");
+      setEnabled(res.imap_restore_enabled);
+      onChanged(res.imap_restore_enabled);
+      setSuccess("Rückholung deaktiviert.");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Deaktivieren fehlgeschlagen.");
+      // Keep the switch reflecting the actual (still enabled) server state.
+      setEnabled(true);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function confirmEnable(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    if (!password) {
+      setError("Bitte aktuelles Passwort eingeben.");
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await setImapRestore(true, password);
+      setEnabled(res.imap_restore_enabled);
+      onChanged(res.imap_restore_enabled);
+      setDialogOpen(false);
+      setPassword("");
+      setSuccess("Rückholung aktiviert.");
+    } catch (err) {
+      // Wrong password / LDAP account / other → keep dialog open, switch stays OFF.
+      setError(err instanceof Error ? err.message : "Aktivieren fehlgeschlagen.");
+      setEnabled(false);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function cancelDialog() {
+    setDialogOpen(false);
+    setPassword("");
+    setError("");
+    setEnabled(false);
+  }
+
+  return {
+    enabled,
+    dialogOpen,
+    setDialogOpen,
+    password,
+    setPassword,
+    error,
+    success,
+    loading,
+    handleToggle,
+    confirmEnable,
+    cancelDialog,
+  };
+}
@@ -15,6 +15,7 @@ export {
  getMe,
  logout,
  changePassword,
+  setImapRestore,
  changeEmail,
  updatePreferences,
  getUsers,
@@ -92,6 +93,7 @@ export type {
  Pop3Account,
  Pop3TestResult,
  UploadJob,
+  RestoreResult,
 } from "./mail";
 export {
  searchEmails,
@@ -99,6 +101,7 @@ export {
  getThread,
  downloadMailAttachment,
  downloadMailRaw,
+  restoreMail,
  getOCRTextDownloadURL,
  downloadMailOCRText,
  getImapAccounts,
@@ -238,6 +238,45 @@ export async function downloadMailOCRText(
  return { kind: "ok", blob: await res.blob(), filename };
 }

+// ── Restore (PROJ-70) ───────────────────────────────────────────────────────
+
+export interface RestoreResult {
+  ok: boolean;
+  mailbox: string;
+  account: number;
+}
+
+/**
+ * PROJ-70: Copy an archived mail back into the user's external IMAP mailbox
+ * (fixed target folder INBOX). The archive stays read-only/unchanged.
+ * Surfaces the server's plain-text `error` field (e.g. 422 target rejected).
+ */
+export async function restoreMail(
+  id: string,
+  accountId: number
+): Promise<RestoreResult> {
+  const res = await fetch(`${API_BASE}/api/mails/${id}/restore`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify({ account_id: accountId }),
+  });
+  if (res.ok) {
+    return res.json();
+  }
+  // Try to extract a human-readable error message from the JSON body.
+  let message = `Rückholung fehlgeschlagen (${res.status})`;
+  try {
+    const body = await res.json();
+    if (body && typeof body.error === "string" && body.error) {
+      message = body.error;
+    }
+  } catch {
+    // non-JSON body, keep the default message
+  }
+  throw new Error(message);
+}
+
 // ── IMAP ──────────────────────────────────────────────────────────────────────

 export async function getImapAccounts(): Promise<ImapAccount[]> {
@@ -28,6 +28,8 @@ export interface MeResponse {
  role: string;
  email: string;
  list_page_size: number;
+  // PROJ-70: Opt-in flag for IMAP restore (mail back to external mailbox)
+  imap_restore_enabled?: boolean;
 }

 export interface CreateUserRequest {
@@ -75,6 +77,21 @@ export async function changePassword(
  });
 }

+// PROJ-70: Toggle the IMAP-restore opt-in. Enabling requires the current
+// password (bcrypt re-check on the server); disabling does not.
+export async function setImapRestore(
+  enabled: boolean,
+  currentPassword: string
+): Promise<{ ok: boolean; imap_restore_enabled: boolean }> {
+  return request<{ ok: boolean; imap_restore_enabled: boolean }>(
+    "/api/auth/imap-restore",
+    {
+      method: "PATCH",
+      body: JSON.stringify({ enabled, current_password: currentPassword }),
+    }
+  );
+}
+
 export async function changeEmail(
  email: string
 ): Promise<{ ok: boolean; email: string }> {