300 lines
11 KiB
TypeScript
300 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useLanguage } from "@/components/language-provider";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
const TRUST_STATE_COLORS: Record<string, string> = {
|
|
basic: "bg-slate-500/20 text-slate-400",
|
|
verified: "bg-amber-500/20 text-amber-400",
|
|
strong: "bg-emerald-500/20 text-emerald-400",
|
|
};
|
|
|
|
const TRUST_STATE_LABELS: Record<string, { fa: string; en: string }> = {
|
|
basic: { fa: "پایه", en: "Basic" },
|
|
verified: { fa: "تأیید شده", en: "Verified" },
|
|
strong: { fa: "قوی", en: "Strong" },
|
|
};
|
|
|
|
export default function SecurityPage() {
|
|
const { lang, dir } = useLanguage();
|
|
const t = (fa: string, en: string) => (lang === "fa" ? fa : en);
|
|
|
|
const [mfaEnabled, setMfaEnabled] = useState(false);
|
|
const [setupData, setSetupData] = useState<{ secret: string; qr_code: string; totp_uri: string } | null>(null);
|
|
const [verifyCode, setVerifyCode] = useState("");
|
|
const [currentPassword, setCurrentPassword] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState<string | null>(null);
|
|
|
|
const [trustState, setTrustState] = useState<string | null>(null);
|
|
const [trustScore, setTrustScore] = useState<number | null>(null);
|
|
const [evidenceList, setEvidenceList] = useState<any[]>([]);
|
|
|
|
const getToken = () => localStorage.getItem("access_token");
|
|
|
|
useEffect(() => {
|
|
fetchMfaStatus();
|
|
fetchTrustState();
|
|
}, []);
|
|
|
|
const fetchTrustState = async () => {
|
|
const token = getToken();
|
|
if (!token) return;
|
|
try {
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/verification/trust/me/`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setTrustState(data.trust_state);
|
|
setTrustScore(data.trust_score);
|
|
setEvidenceList(data.evidence || []);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const fetchMfaStatus = async () => {
|
|
const token = getToken();
|
|
if (!token) return;
|
|
try {
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/mfa/setup/`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
if (res.status === 200) {
|
|
const data = await res.json();
|
|
setMfaEnabled(false);
|
|
setSetupData(null);
|
|
} else if (res.status === 400) {
|
|
const data = await res.json();
|
|
if (data.detail && data.detail.includes("already enabled")) {
|
|
setMfaEnabled(true);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const startSetup = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
try {
|
|
const token = getToken();
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/mfa/setup/`, {
|
|
method: "GET",
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setSetupData(data);
|
|
} else {
|
|
const data = await res.json();
|
|
setError(data.detail || t("خطا در راهاندازی MFA", "Error setting up MFA"));
|
|
}
|
|
} catch (e) {
|
|
setError(t("خطا در ارتباط با سرور", "Server connection error"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const verifyMfa = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
try {
|
|
const token = getToken();
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/mfa/verify/`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
|
|
body: JSON.stringify({ code: verifyCode }),
|
|
});
|
|
if (res.ok) {
|
|
setSuccess(t("MFA با موفقیت فعال شد", "MFA enabled successfully"));
|
|
setMfaEnabled(true);
|
|
setSetupData(null);
|
|
setVerifyCode("");
|
|
} else {
|
|
const data = await res.json();
|
|
setError(data.detail || t("کد نامعتبر است", "Invalid code"));
|
|
}
|
|
} catch (e) {
|
|
setError(t("خطا در ارتباط با سرور", "Server connection error"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const disableMfa = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
setSuccess(null);
|
|
try {
|
|
const token = getToken();
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/mfa/disable/`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
|
|
body: JSON.stringify({ current_password: currentPassword }),
|
|
});
|
|
if (res.ok) {
|
|
setSuccess(t("MFA با موفقیت غیرفعال شد", "MFA disabled successfully"));
|
|
setMfaEnabled(false);
|
|
setCurrentPassword("");
|
|
} else {
|
|
const data = await res.json();
|
|
setError(data.detail || t("خطا در غیرفعالسازی MFA", "Error disabling MFA"));
|
|
}
|
|
} catch (e) {
|
|
setError(t("خطا در ارتباط با سرور", "Server connection error"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">{t("امنیت", "Security")}</h1>
|
|
<p className="text-slate-400">{t("تنظیمات احراز هویت دو مرحلهای (MFA)", "Multi-factor authentication settings")}</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="rounded-lg bg-rose-500/15 p-3 text-sm text-rose-400">{error}</div>
|
|
)}
|
|
{success && (
|
|
<div className="rounded-lg bg-emerald-500/15 p-3 text-sm text-emerald-400">{success}</div>
|
|
)}
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t("حالت اعتماد", "Trust State")}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
className={`rounded-lg px-4 py-2 text-xl font-bold ${
|
|
trustState ? TRUST_STATE_COLORS[trustState] || TRUST_STATE_COLORS.basic : "bg-slate-500/10"
|
|
}`}
|
|
>
|
|
{trustState
|
|
? TRUST_STATE_LABELS[trustState]?.[lang] || trustState
|
|
: t("در حال بارگذاری...", "Loading...")}
|
|
</div>
|
|
{trustScore !== null && (
|
|
<div className="text-2xl font-bold text-white">{trustScore}/100</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-sm text-slate-400">
|
|
{t("تعداد شواهد ثبتشده:", "Evidence records:")} {evidenceList.length}
|
|
</div>
|
|
|
|
{evidenceList.length > 0 && (
|
|
<div className="space-y-2">
|
|
{evidenceList.map((e) => (
|
|
<div
|
|
key={e.id}
|
|
className="flex items-center justify-between rounded-lg border border-white/10 p-2"
|
|
>
|
|
<span className="text-sm text-slate-300">
|
|
{e.evidence_type} — {e.dimension}
|
|
</span>
|
|
<span className={`text-xs ${TRUST_STATE_COLORS.basic}`}>
|
|
{e.provider}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
{t("احراز هویت دو مرحلهای (MFA)", "Multi-Factor Authentication (MFA)")}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium text-white">
|
|
{t("وضعیت MFA", "MFA Status")}
|
|
</p>
|
|
<p className="text-sm text-slate-400">
|
|
{mfaEnabled
|
|
? t("فعال شده", "Enabled")
|
|
: t("غیرفعال", "Disabled")}
|
|
</p>
|
|
</div>
|
|
{!mfaEnabled && !setupData && (
|
|
<Button onClick={startSetup} disabled={loading}>
|
|
{loading ? t("در حال بارگذاری...", "Loading...") : t("فعالسازی MFA", "Enable MFA")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{setupData && (
|
|
<div className="space-y-4 rounded-lg border border-white/10 p-4">
|
|
<p className="text-sm text-slate-300">
|
|
{t("کد QR را با برنامه Authenticator خود اسکن کنید:", "Scan this QR code with your authenticator app:")}
|
|
</p>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={setupData.qr_code}
|
|
alt="MFA QR Code"
|
|
className="h-48 w-48"
|
|
/>
|
|
<div>
|
|
<p className="text-sm text-slate-400">{t("کد دستی:", "Manual code:")}</p>
|
|
<code className="block break-all rounded bg-black/30 p-2 text-xs text-slate-300">
|
|
{setupData.secret}
|
|
</code>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
type="text"
|
|
placeholder={t("کد تأیید را وارد کنید", "Enter verification code")}
|
|
value={verifyCode}
|
|
onChange={(e) => setVerifyCode(e.target.value)}
|
|
dir="ltr"
|
|
/>
|
|
</div>
|
|
<Button onClick={verifyMfa} disabled={loading || !verifyCode}>
|
|
{loading ? t("در حال تأیید...", "Verifying...") : t("تأیید و فعالسازی", "Verify & Enable")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{mfaEnabled && (
|
|
<div className="space-y-4 rounded-lg border border-white/10 p-4">
|
|
<p className="text-sm text-slate-300">
|
|
{t("برای غیرفعالسازی MFA، رمز عبور فعلی خود را وارد کنید:", "To disable MFA, enter your current password:")}
|
|
</p>
|
|
<div>
|
|
<Input
|
|
type="password"
|
|
placeholder={t("رمز عبور فعلی", "Current password")}
|
|
value={currentPassword}
|
|
onChange={(e) => setCurrentPassword(e.target.value)}
|
|
dir="ltr"
|
|
/>
|
|
</div>
|
|
<Button variant="secondary" onClick={disableMfa} disabled={loading || !currentPassword}>
|
|
{loading ? t("در حال غیرفعالسازی...", "Disabling...") : t("غیرفعالسازی MFA", "Disable MFA")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|