Files
jobtrackingapp/job-tracker-ui/src/components/BackupCard.tsx
T

54 lines
1.8 KiB
TypeScript

import React, { useState } from "react";
import { Box, Button, Paper, Typography } from "@mui/material";
import { api, getApiErrorMessage } from "../api";
import { useToast } from "../toast";
import { useI18n } from "../i18n/I18nProvider";
export default function BackupCard() {
const { toast } = useToast();
const { t } = useI18n();
const [downloading, setDownloading] = useState(false);
const downloadEncrypted = async () => {
setDownloading(true);
try {
const res = await api.post("/backup/encrypted", null, { responseType: "blob" });
const blob: Blob = res.data;
const url = URL.createObjectURL(blob);
const cd = (res.headers?.["content-disposition"] as string) || "";
const m = /filename="?([^";]+)"?/i.exec(cd);
const filename = m?.[1] ?? `jobtracker_backup_${new Date().toISOString().slice(0, 10)}.jtbackup`;
const link = document.createElement("a");
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
link.remove();
window.setTimeout(() => URL.revokeObjectURL(url), 5000);
toast(t("backupDownloaded"), "success");
} catch (error: any) {
toast(getApiErrorMessage(error, t("backupFailed")), "error");
} finally {
setDownloading(false);
}
};
return (
<Paper sx={{ mt: 2, p: 2 }}>
<Typography variant="h6" sx={{ mb: 1 }}>
{t("backupTitle")}
</Typography>
<Typography sx={{ color: "text.secondary", mb: 1 }}>
{t("backupBody")}
</Typography>
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
<Button variant="contained" onClick={downloadEncrypted} disabled={downloading}>
{downloading ? t("backupPreparing") : t("backupDownload")}
</Button>
</Box>
</Paper>
);
}