use <Translated />

apps/login/src/app/(login)/accounts/page.tsx

@@ -1,5 +1,6 @@
 import { DynamicTheme } from "@/components/dynamic-theme";
 import { SessionsList } from "@/components/sessions-list";
+import { Translated } from "@/components/translated";
 import { getAllSessionCookieIds } from "@/lib/cookies";
 import { getServiceUrlFromHeaders } from "@/lib/service-url";
 import {
@@ -9,7 +10,7 @@ import {
 } from "@/lib/zitadel";
 import { UserPlusIcon } from "@heroicons/react/24/outline";
 import { Organization } from "@zitadel/proto/zitadel/org/v2/org_pb";
-import { getLocale, getTranslations } from "next-intl/server";
+import { getLocale } from "next-intl/server";
 import { headers } from "next/headers";
 import Link from "next/link";
 
@@ -33,7 +34,6 @@ export default async function Page(props: {
 }) {
   const searchParams = await props.searchParams;
   const locale = getLocale();
-  const t = await getTranslations({ locale, namespace: "accounts" });
 
   const requestId = searchParams?.requestId;
   const organization = searchParams?.organization;
@@ -71,8 +71,12 @@ export default async function Page(props: {
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("title")}</h1>
+        <h1>
-        <p className="ztdl-p mb-6 block">{t("description")}</p>
+          <Translated i18nKey="title" namespace="accounts" />
+        </h1>
+        <p className="ztdl-p mb-6 block">
+          <Translated i18nKey="description" namespace="accounts" />
+        </p>
 
         <div className="flex flex-col w-full space-y-2">
           <SessionsList sessions={sessions} requestId={requestId} />
@@ -81,7 +85,9 @@ export default async function Page(props: {
               <div className="w-8 h-8 mr-4 flex flex-row justify-center items-center rounded-full bg-black/5 dark:bg-white/5">
                 <UserPlusIcon className="h-5 w-5" />
               </div>
-              <span className="text-sm">{t("addAnother")}</span>
+              <span className="text-sm">
+                <Translated i18nKey="addAnother" namespace="accounts" />
+              </span>
             </div>
           </Link>
         </div>

apps/login/src/app/(login)/authenticator/set/page.tsx

@@ -18,7 +18,7 @@ import {
   listAuthenticationMethodTypes,
 } from "@/lib/zitadel";
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
-import { getLocale, getTranslations } from "next-intl/server";
+import { getLocale } from "next-intl/server";
 import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 
@@ -27,7 +27,6 @@ export default async function Page(props: {
 }) {
   const searchParams = await props.searchParams;
   const locale = getLocale();
-  const t = await getTranslations({ locale, namespace: "authenticator" });
 
   const { loginName, requestId, organization, sessionId } = searchParams;
 
@@ -169,9 +168,13 @@ export default async function Page(props: {
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("title")}</h1>
+        <h1>
+          <Translated i18nKey="title" namespace="authenticator" />
+        </h1>
 
-        <p className="ztdl-p">{t("description")}</p>
+        <p className="ztdl-p">
+          <Translated i18nKey="description" namespace="authenticator" />
+        </p>
 
         <UserAvatar
           loginName={sessionWithData.factors?.user?.loginName}
@@ -191,7 +194,9 @@ export default async function Page(props: {
         {loginSettings?.allowExternalIdp && !!identityProviders.length && (
           <>
             <div className="py-3 flex flex-col">
-              <p className="ztdl-p text-center">{t("linkWithIDP")}</p>
+              <p className="ztdl-p text-center">
+                <Translated i18nKey="linkWithIDP" namespace="authenticator" />
+              </p>
             </div>
 
             <SignInWithIdp

apps/login/src/app/(login)/idp/page.tsx

@@ -1,16 +1,14 @@
 import { DynamicTheme } from "@/components/dynamic-theme";
 import { SignInWithIdp } from "@/components/sign-in-with-idp";
+import { Translated } from "@/components/translated";
 import { getServiceUrlFromHeaders } from "@/lib/service-url";
 import { getActiveIdentityProviders, getBrandingSettings } from "@/lib/zitadel";
-import { getLocale, getTranslations } from "next-intl/server";
 import { headers } from "next/headers";
 
 export default async function Page(props: {
   searchParams: Promise<Record<string | number | symbol, string | undefined>>;
 }) {
   const searchParams = await props.searchParams;
-  const locale = getLocale();
-  const t = await getTranslations({ locale, namespace: "idp" });
 
   const requestId = searchParams?.requestId;
   const organization = searchParams?.organization;
@@ -33,8 +31,12 @@ export default async function Page(props: {
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("title")}</h1>
+        <h1>
-        <p className="ztdl-p">{t("description")}</p>
+          <Translated i18nKey="title" namespace="idp" />
+        </h1>
+        <p className="ztdl-p">
+          <Translated i18nKey="description" namespace="idp" />
+        </p>
 
         {identityProviders && (
           <SignInWithIdp

apps/login/src/app/(login)/logout/page.tsx

@@ -1,5 +1,6 @@
 import { DynamicTheme } from "@/components/dynamic-theme";
 import { SessionsClearList } from "@/components/sessions-clear-list";
+import { Translated } from "@/components/translated";
 import { getAllSessionCookieIds } from "@/lib/cookies";
 import { getServiceUrlFromHeaders } from "@/lib/service-url";
 import {
@@ -8,7 +9,6 @@ import {
   listSessions,
 } from "@/lib/zitadel";
 import { Organization } from "@zitadel/proto/zitadel/org/v2/org_pb";
-import { getLocale, getTranslations } from "next-intl/server";
 import { headers } from "next/headers";
 
 async function loadSessions({ serviceUrl }: { serviceUrl: string }) {
@@ -30,8 +30,6 @@ export default async function Page(props: {
   searchParams: Promise<Record<string | number | symbol, string | undefined>>;
 }) {
   const searchParams = await props.searchParams;
-  const locale = getLocale();
-  const t = await getTranslations({ locale, namespace: "logout" });
 
   const organization = searchParams?.organization;
   const postLogoutRedirectUri = searchParams?.post_logout_redirect_uri;
@@ -67,8 +65,12 @@ export default async function Page(props: {
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("title")}</h1>
+        <h1>
-        <p className="ztdl-p mb-6 block">{t("description")}</p>
+          <Translated i18nKey="title" namespace="logout" />
+        </h1>
+        <p className="ztdl-p mb-6 block">
+          <Translated i18nKey="description" namespace="logout" />
+        </p>
 
         <div className="flex flex-col w-full space-y-2">
           <SessionsClearList

apps/login/src/app/(login)/register/page.tsx

@@ -14,7 +14,7 @@ import {
 } from "@/lib/zitadel";
 import { Organization } from "@zitadel/proto/zitadel/org/v2/org_pb";
 import { PasskeysType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
-import { getLocale, getTranslations } from "next-intl/server";
+import { getLocale } from "next-intl/server";
 import { headers } from "next/headers";
 
 export default async function Page(props: {
@@ -22,7 +22,6 @@ export default async function Page(props: {
 }) {
   const searchParams = await props.searchParams;
   const locale = getLocale();
-  const t = await getTranslations({ locale, namespace: "register" });
 
   let { firstname, lastname, email, organization, requestId } = searchParams;
 
@@ -70,8 +69,12 @@ export default async function Page(props: {
     return (
       <DynamicTheme branding={branding}>
         <div className="flex flex-col items-center space-y-4">
-          <h1>{t("disabled.title")}</h1>
+          <h1>
-          <p className="ztdl-p">{t("disabled.description")}</p>
+            <Translated i18nKey="disabled.title" namespace="register" />
+          </h1>
+          <p className="ztdl-p">
+            <Translated i18nKey="disabled.description" namespace="register" />
+          </p>
         </div>
       </DynamicTheme>
     );
@@ -80,8 +83,12 @@ export default async function Page(props: {
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("title")}</h1>
+        <h1>
-        <p className="ztdl-p">{t("description")}</p>
+          <Translated i18nKey="title" namespace="register" />
+        </h1>
+        <p className="ztdl-p">
+          <Translated i18nKey="description" namespace="register" />
+        </p>
 
         {!organization && (
           <Alert>
@@ -111,7 +118,9 @@ export default async function Page(props: {
         {loginSettings?.allowExternalIdp && !!identityProviders.length && (
           <>
             <div className="py-3 flex flex-col items-center">
-              <p className="ztdl-p text-center">{t("orUseIDP")}</p>
+              <p className="ztdl-p text-center">
+                <Translated i18nKey="orUseIDP" namespace="register" />
+              </p>
             </div>
 
             <SignInWithIdp