Translate admin panel to all 6 languages

src/app/admin/vpn/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { saveVpn } from "@/actions/admin-vpn";
 import { StatusCard } from "@/components/admin/dashboard";
 import { siteSettings } from "@/lib/services/site-settings";
+import { getTranslations } from "next-intl/server";
 
 export const dynamic = "force-dynamic";
 export const metadata = { title: "VPN" };
@@ -19,6 +20,7 @@ export default async function AdminVpn({
   searchParams: Promise<{ saved?: string }>;
 }) {
   const sp = await searchParams;
+  const t = await getTranslations("pages.admin.vpn");
 
   // Read current values (graceful fallbacks via siteSettings / DEFAULTS).
   const enabled = await siteSettings.getBool("vpn_block_enabled", false);
@@ -37,8 +39,8 @@ export default async function AdminVpn({
           <ShieldBan size={20} className="text-[var(--color-primary)]" />
         </div>
         <div>
-          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">VPN / Proxy Detection</h1>
-          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Block registrations from detected VPN/proxy IPs at sign-up. Settings are stored in <code>website_settings</code> (booleans use <code>0</code> / <code>1</code>). This is distinct from the raw IP allow/deny list — manage that under <Link href="/admin/ip">IP Management</Link>.</p>
+          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title")}</h1>
+          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t.rich("subtitle", { ipLink: (chunks) => <Link href="/admin/ip">{chunks}</Link> })}</p>
         </div>
       </div>
 
@@ -46,23 +48,23 @@ export default async function AdminVpn({
 
         {sp.saved ? (
           <p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
-            VPN settings saved
+            {t("settingsSaved")}
           </p>
         ) : null}
 
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard
-            label="Protection"
-            value={enabled ? "On" : "Off"}
+            label={t("protection")}
+            value={enabled ? t("on") : t("off")}
             state={enabled ? "ok" : "danger"}
-            hint={enabled ? `Provider: ${provider}` : "Registrations not screened"}
+            hint={enabled ? t("providerLabel", { provider }) : t("notScreened")}
             icon="🛡️"
           />
         </div>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Settings</h2>
+        <h2 className="admin-section-title">{t("settings")}</h2>
         <form action={saveVpn} className="admin-card">
           <div style={{ marginBottom: "1rem" }}>
             <label style={{ display: "flex", alignItems: "center", gap: "0.6rem" }}>
@@ -73,7 +75,7 @@ export default async function AdminVpn({
                 defaultChecked={enabled}
               />
               <span style={{ fontWeight: 700 }}>
-                Block registrations from detected VPN/proxy IPs
+                {t("blockOnDetect")}
               </span>
             </label>
           </div>
@@ -84,7 +86,7 @@ export default async function AdminVpn({
                 htmlFor="vpn_provider"
                 style={{ display: "block", fontWeight: 700, fontSize: "0.85rem" }}
               >
-                Provider
+                {t("provider")}
               </label>
               <select
                 id="vpn_provider"
@@ -99,7 +101,7 @@ export default async function AdminVpn({
                 ))}
               </select>
               <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
-                Detection service used to score incoming IPs.
+                {t("providerHint")}
               </p>
             </div>
 
@@ -108,18 +110,18 @@ export default async function AdminVpn({
                 htmlFor="vpn_api_key"
                 style={{ display: "block", fontWeight: 700, fontSize: "0.85rem" }}
               >
-                API key
+                {t("apiKey")}
               </label>
               <input
                 id="vpn_api_key"
                 name="vpn_api_key"
                 defaultValue={apiKey}
                 autoComplete="off"
-                placeholder="Provider API key"
+                placeholder={t("apiKeyPlaceholder")}
                 style={{ width: "100%" }}
               />
               <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
-                Required by the selected provider (leave blank for none).
+                {t("apiKeyHint")}
               </p>
             </div>
           </div>
@@ -129,37 +131,35 @@ export default async function AdminVpn({
               htmlFor="vpn_block_message"
               style={{ display: "block", fontWeight: 700, fontSize: "0.85rem" }}
             >
-              Block message
+              {t("blockMessage")}
             </label>
             <input
               id="vpn_block_message"
               name="vpn_block_message"
               defaultValue={blockMessage}
-              placeholder="Shown to users blocked for using a VPN/proxy"
+              placeholder={t("blockMessagePlaceholder")}
               style={{ width: "100%" }}
             />
             <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
-              Message displayed when a registration is rejected.
+              {t("blockMessageHint")}
             </p>
           </div>
 
           <div style={{ marginTop: "1rem", display: "flex", justifyContent: "flex-end" }}>
             <button type="submit" className="btn btn-primary">
-              Save
+              {t("save")}
             </button>
           </div>
         </form>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Raw IP allow / deny list</h2>
+        <h2 className="admin-section-title">{t("rawIpTitle")}</h2>
         <p className="text-xs text-gray-500 dark:text-gray-400">
-          VPN detection screens unknown IPs automatically. To explicitly allow
-          or block specific IP addresses or ASNs (overriding detection), use{" "}
-          <Link href="/admin/ip">IP Management</Link>.
+          {t.rich("rawIpDescription", { ipLink: (chunks) => <Link href="/admin/ip">{chunks}</Link> })}
         </p>
         <Link href="/admin/ip" className="btn btn-secondary">
-          Open IP Management
+          {t("openIpManagement")}
         </Link>
       </section>
     </main>