825d46c934
* refactor: move to tanstack start * refactor: auth flow & volumes * refactor: repo & snapshot details * refactor: backups, create repo, volumes * refactor: create volume & restore snapshot * refactor: notifications * refactor: settings * refactor: breadcrumbs * fix: ts issues * refactor: prod deployment * fix: import css production * refactor: nitro build * refactor: winston -> consola * fix: memory leak is sse events cleanup * fix: cli usage * chore: remove rr routes file * refactor: pr feedbacks * refactor: patch api client to have a global client per call * refactor: pr feedbacks * fix(dockerfile): add explicit port * fix(e2e): healthcheck under /api
91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
import { useMutation } from "@tanstack/react-query";
|
|
import { AlertTriangle, Download } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { AuthLayout } from "~/client/components/auth-layout";
|
|
import { Alert, AlertDescription, AlertTitle } from "~/client/components/ui/alert";
|
|
import { Button } from "~/client/components/ui/button";
|
|
import { Input } from "~/client/components/ui/input";
|
|
import { Label } from "~/client/components/ui/label";
|
|
import { downloadResticPasswordMutation } from "~/client/api-client/@tanstack/react-query.gen";
|
|
import { useNavigate } from "@tanstack/react-router";
|
|
|
|
export 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!");
|
|
void navigate({ to: "/volumes", replace: true });
|
|
},
|
|
onError: (error) => {
|
|
toast.error("Failed to download recovery key", { description: error.message });
|
|
},
|
|
});
|
|
|
|
const handleSubmit = (e: React.SubmitEvent) => {
|
|
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
|
|
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>
|
|
);
|
|
}
|