feat(i18n): localize portal account settings

app/portal/settings/security/actions.ts

@@ -0,0 +1,43 @@
+"use server";
+
+import { headers } from "next/headers";
+import { revalidatePath } from "next/cache";
+import { auth } from "@/server/auth/auth";
+import { requirePortalBackend } from "@/server/web/portal";
+import { cleanText } from "@/server/web/form-data";
+
+export async function changePortalPasswordAction(formData: FormData) {
+  const currentPassword = cleanText(formData.get("currentPassword")) ?? "";
+  const newPassword = cleanText(formData.get("newPassword")) ?? "";
+  const confirmPassword = cleanText(formData.get("confirmPassword")) ?? "";
+
+  if (!currentPassword) {
+    return { errorKey: "settings.security.errors.currentRequired" };
+  }
+  if (newPassword.length < 8 || newPassword.length > 128) {
+    return { errorKey: "settings.security.errors.newLength" };
+  }
+  if (newPassword !== confirmPassword) {
+    return { errorKey: "settings.security.errors.confirmMismatch" };
+  }
+  if (newPassword === currentPassword) {
+    return { errorKey: "settings.security.errors.samePassword" };
+  }
+
+  try {
+    await requirePortalBackend();
+    await auth.api.changePassword({
+      headers: await headers(),
+      body: {
+        currentPassword,
+        newPassword,
+        revokeOtherSessions: true,
+      },
+    });
+    revalidatePath("/portal/settings/security");
+    return { success: true };
+  } catch (error) {
+    console.error("Portal password change failed", error);
+    return { errorKey: "settings.security.errors.changeFailed" };
+  }
+}

app/portal/settings/security/page.tsx

@@ -1,23 +1,7 @@
-import { Card, CardContent } from "poyraz-ui/atoms";
-import { createTranslator } from "@/server/i18n/translator";
-import { resolvePortalLocale } from "@/server/i18n/resolver";
 import { requirePortalBackend } from "@/server/web/portal";
+import { PortalSecurityForm } from "./portal-security-form";
 
 export default async function PortalSecuritySettingsPage() {
-  const { context } = await requirePortalBackend();
-  const locale = await resolvePortalLocale(context);
-  const t = createTranslator(locale.locale, ["settings"]).t;
-
-  return (
-    <Card>
-      <CardContent className="space-y-2 p-6 sm:p-8">
-        <h2 className="text-xl font-semibold text-foreground">
-          {t("settings.portal.security.title")}
-        </h2>
-        <p className="text-sm text-muted-foreground">
-          {t("settings.portal.security.description")}
-        </p>
-      </CardContent>
-    </Card>
-  );
+  await requirePortalBackend();
+  return <PortalSecurityForm />;
 }

app/portal/settings/security/portal-security-form.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useRef, useTransition } from "react";
+import { KeyRound, Save, ShieldCheck } from "lucide-react";
+import { Button, Card, CardContent, Input, Label } from "poyraz-ui/atoms";
+import { Alert, AlertDescription, AlertTitle, toast } from "poyraz-ui/molecules";
+import { useTranslations } from "@/components/i18n/i18n-provider";
+import { changePortalPasswordAction } from "./actions";
+
+export function PortalSecurityForm() {
+  const t = useTranslations();
+  const formRef = useRef<HTMLFormElement>(null);
+  const [pending, startTransition] = useTransition();
+
+  function submit(formData: FormData) {
+    startTransition(async () => {
+      const result = await changePortalPasswordAction(formData);
+      if (result.errorKey) {
+        toast.error(t(result.errorKey));
+        return;
+      }
+      formRef.current?.reset();
+      toast.success(t("settings.security.messages.saved"));
+    });
+  }
+
+  return (
+    <Card>
+      <CardContent className="space-y-8 p-6 sm:p-8">
+        <div className="space-y-1.5">
+          <h2 className="text-xl font-semibold text-foreground">
+            {t("settings.portal.security.title")}
+          </h2>
+          <p className="max-w-2xl text-sm text-muted-foreground">
+            {t("settings.portal.security.description")}
+          </p>
+        </div>
+
+        <Alert>
+          <ShieldCheck className="h-4 w-4" aria-hidden="true" />
+          <AlertTitle>{t("settings.security.sessions.title")}</AlertTitle>
+          <AlertDescription>
+            {t("settings.security.sessions.description")}
+          </AlertDescription>
+        </Alert>
+
+        <form ref={formRef} action={submit} className="max-w-2xl space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="currentPassword">
+              {t("settings.security.fields.currentPassword")}
+            </Label>
+            <Input
+              id="currentPassword"
+              name="currentPassword"
+              type="password"
+              autoComplete="current-password"
+              required
+            />
+          </div>
+
+          <div className="grid gap-5 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="newPassword">
+                {t("settings.security.fields.newPassword")}
+              </Label>
+              <Input
+                id="newPassword"
+                name="newPassword"
+                type="password"
+                minLength={8}
+                maxLength={128}
+                autoComplete="new-password"
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">
+                {t("settings.security.fields.confirmPassword")}
+              </Label>
+              <Input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                minLength={8}
+                maxLength={128}
+                autoComplete="new-password"
+                required
+              />
+            </div>
+          </div>
+
+          <p className="flex items-center gap-2 text-xs text-muted-foreground">
+            <KeyRound className="h-4 w-4 shrink-0" aria-hidden="true" />
+            {t("settings.security.help.password")}
+          </p>
+
+          <div className="flex justify-end border-t border-border pt-6">
+            <Button type="submit" variant="default" effect="shine" loading={pending} className="gap-2">
+              <Save className="h-4 w-4" aria-hidden="true" />
+              {t("settings.security.actions.save")}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}