feat: download recovery file restic password

apps/client/app/modules/auth/routes/download-recovery-key.tsx

@@ -0,0 +1,106 @@
+import { useMutation } from "@tanstack/react-query";
+import { AlertTriangle, Download } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { downloadResticPasswordMutation } from "~/api-client/@tanstack/react-query.gen";
+import { AuthLayout } from "~/components/auth-layout";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { authMiddleware } from "~/middleware/auth";
+import type { Route } from "./+types/download-recovery-key";
+
+export const clientMiddleware = [authMiddleware];
+
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "Download Recovery Key" },
+		{
+			name: "description",
+			content: "Download your backup recovery key to ensure you can restore your data.",
+		},
+	];
+}
+
+export default function DownloadRecoveryKeyPage() {
+	const navigate = useNavigate();
+	const [password, setPassword] = useState("");
+
+	const downloadResticPassword = useMutation({
+		...downloadResticPasswordMutation(),
+		onSuccess: (data) => {
+			const blob = new Blob([data], { type: "text/plain" });
+			const url = window.URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = "restic.pass";
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			window.URL.revokeObjectURL(url);
+
+			toast.success("Recovery key downloaded successfully!");
+			navigate("/volumes", { replace: true });
+		},
+		onError: (error) => {
+			toast.error("Failed to download recovery key", { description: error.message });
+		},
+	});
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (!password) {
+			toast.error("Password is required");
+			return;
+		}
+
+		downloadResticPassword.mutate({
+			body: {
+				password,
+			},
+		});
+	};
+
+	return (
+		<AuthLayout
+			title="Download Your Recovery Key"
+			description="This is a critical step to ensure you can recover your backups"
+		>
+			<Alert variant="warning" className="mb-6">
+				<AlertTriangle className="size-5" />
+				<AlertTitle>Important: Save This File Securely</AlertTitle>
+				<AlertDescription>
+					Your Restic password is essential for recovering your backup data. If you lose access to this server without
+					this file, your backups will be unrecoverable. Store it in a password manager or encrypted storage.
+				</AlertDescription>
+			</Alert>
+
+			<form onSubmit={handleSubmit} className="space-y-4">
+				<div className="space-y-2">
+					<Label htmlFor="password">Confirm Your Password</Label>
+					<Input
+						id="password"
+						type="password"
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
+						placeholder="Enter your password"
+						required
+						autoFocus
+						disabled={downloadResticPassword.isPending}
+					/>
+					<p className="text-xs text-muted-foreground">Enter your account password to download the recovery key</p>
+				</div>
+
+				<div className="flex flex-col gap-2">
+					<Button type="submit" loading={downloadResticPassword.isPending} className="w-full">
+						<Download size={16} className="mr-2" />
+						Download Recovery Key
+					</Button>
+				</div>
+			</form>
+		</AuthLayout>
+	);
+}

apps/client/app/modules/auth/routes/login.tsx

@@ -44,8 +44,12 @@ export default function LoginPage() {
 
 	const login = useMutation({
 		...loginMutation(),
-		onSuccess: async () => {
-			navigate("/volumes");
+		onSuccess: async (data) => {
+			if (data.user && !data.user.hasDownloadedResticPassword) {
+				navigate("/download-recovery-key");
+			} else {
+				navigate("/volumes");
+			}
 		},
 		onError: (error) => {
 			console.error(error);

apps/client/app/modules/auth/routes/onboarding.tsx

@@ -48,7 +48,7 @@ export default function OnboardingPage() {
 		...registerMutation(),
 		onSuccess: async () => {
 			toast.success("Admin user created successfully!");
-			navigate("/volumes");
+			navigate("/download-recovery-key");
 		},
 		onError: (error) => {
 			console.error(error);

apps/client/app/modules/repositories/tabs/info.tsx

@@ -135,9 +135,7 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 				<AlertDialogContent className="max-w-2xl">
 					<AlertDialogHeader>
 						<AlertDialogTitle>Doctor Results</AlertDialogTitle>
-						<AlertDialogDescription>
-							{doctorMutation.data?.message || "Repository doctor operation completed"}
-						</AlertDialogDescription>
+						<AlertDialogDescription>Repository doctor operation completed</AlertDialogDescription>
 					</AlertDialogHeader>
 
 					{doctorMutation.data && (

apps/client/app/modules/settings/routes/settings.tsx

@@ -1,11 +1,24 @@
 import { useMutation } from "@tanstack/react-query";
-import { KeyRound, User } from "lucide-react";
+import { Download, KeyRound, User } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
-import { changePasswordMutation, logoutMutation } from "~/api-client/@tanstack/react-query.gen";
+import {
+	changePasswordMutation,
+	downloadResticPasswordMutation,
+	logoutMutation,
+} from "~/api-client/@tanstack/react-query.gen";
 import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardTitle } from "~/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "~/components/ui/dialog";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import { appContext } from "~/context";
@@ -30,6 +43,8 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 	const [currentPassword, setCurrentPassword] = useState("");
 	const [newPassword, setNewPassword] = useState("");
 	const [confirmPassword, setConfirmPassword] = useState("");
+	const [downloadDialogOpen, setDownloadDialogOpen] = useState(false);
+	const [downloadPassword, setDownloadPassword] = useState("");
 	const navigate = useNavigate();
 
 	const logout = useMutation({
@@ -56,6 +71,28 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 		},
 	});
 
+	const downloadResticPassword = useMutation({
+		...downloadResticPasswordMutation(),
+		onSuccess: (data) => {
+			const blob = new Blob([data], { type: "text/plain" });
+			const url = window.URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = "restic.pass";
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			window.URL.revokeObjectURL(url);
+
+			toast.success("Restic password file downloaded successfully");
+			setDownloadDialogOpen(false);
+			setDownloadPassword("");
+		},
+		onError: (error) => {
+			toast.error("Failed to download Restic password", { description: error.message });
+		},
+	});
+
 	const handleChangePassword = (e: React.FormEvent) => {
 		e.preventDefault();
 
@@ -77,6 +114,21 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 		});
 	};
 
+	const handleDownloadResticPassword = (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (!downloadPassword) {
+			toast.error("Password is required");
+			return;
+		}
+
+		downloadResticPassword.mutate({
+			body: {
+				password: downloadPassword,
+			},
+		});
+	};
+
 	return (
 		<Card className="p-0 gap-0">
 			<div className="border-b border-border/50 bg-card-header p-6">
@@ -143,6 +195,69 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 					</Button>
 				</form>
 			</CardContent>
+
+			<div className="border-t border-border/50 bg-card-header p-6">
+				<CardTitle className="flex items-center gap-2">
+					<Download className="size-5" />
+					Backup Recovery Key
+				</CardTitle>
+				<CardDescription className="mt-1.5">Download your Restic password file for disaster recovery</CardDescription>
+			</div>
+			<CardContent className="p-6 space-y-4">
+				<p className="text-sm text-muted-foreground max-w-2xl">
+					This file contains the encryption password used by Restic to secure your backups. Store it in a safe place
+					(like a password manager or encrypted storage). If you lose access to this server, you'll need this file to
+					recover your backup data.
+				</p>
+
+				<Dialog open={downloadDialogOpen} onOpenChange={setDownloadDialogOpen}>
+					<DialogTrigger asChild>
+						<Button variant="outline">
+							<Download size={16} className="mr-2" />
+							Download Restic Password
+						</Button>
+					</DialogTrigger>
+					<DialogContent>
+						<form onSubmit={handleDownloadResticPassword}>
+							<DialogHeader>
+								<DialogTitle>Download Restic Password</DialogTitle>
+								<DialogDescription>
+									For security reasons, please enter your account password to download the Restic password file.
+								</DialogDescription>
+							</DialogHeader>
+							<div className="space-y-4 py-4">
+								<div className="space-y-2">
+									<Label htmlFor="download-password">Your Password</Label>
+									<Input
+										id="download-password"
+										type="password"
+										value={downloadPassword}
+										onChange={(e) => setDownloadPassword(e.target.value)}
+										placeholder="Enter your password"
+										required
+										autoFocus
+									/>
+								</div>
+							</div>
+							<DialogFooter>
+								<Button
+									type="button"
+									variant="outline"
+									onClick={() => {
+										setDownloadDialogOpen(false);
+										setDownloadPassword("");
+									}}
+								>
+									Cancel
+								</Button>
+								<Button type="submit" loading={downloadResticPassword.isPending}>
+									Download
+								</Button>
+							</DialogFooter>
+						</form>
+					</DialogContent>
+				</Dialog>
+			</CardContent>
 		</Card>
 	);
 }