translated component

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

@@ -6,15 +6,12 @@ import { UserAvatar } from "@/components/user-avatar";
 import { getServiceUrlFromHeaders } from "@/lib/service-url";
 import { loadMostRecentSession } from "@/lib/session";
 import { 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: "passkey" });
 
   const { loginName, prompt, organization, requestId, userId } = searchParams;
 
@@ -37,7 +34,9 @@ export default async function Page(props: {
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("set.title")}</h1>
+        <h1>
+          <Translated i18nKey="set.title" namespace="passkey" />
+        </h1>
 
         {session && (
           <UserAvatar
@@ -47,17 +46,19 @@ export default async function Page(props: {
             searchParams={searchParams}
           ></UserAvatar>
         )}
-        <p className="ztdl-p mb-6 block">{t("set.description")}</p>
+        <p className="ztdl-p mb-6 block">
+          <Translated i18nKey="set.description" namespace="passkey" />
+        </p>
 
         <Alert type={AlertType.INFO}>
           <span>
-            {t("set.info.description")}
+            <Translated i18nKey="set.info.description" namespace="passkey" />
             <a
               className="text-primary-light-500 dark:text-primary-dark-500 hover:text-primary-light-300 hover:dark:text-primary-dark-300"
               target="_blank"
               href="https://zitadel.com/docs/guides/manage/user/reg-create-user#with-passwordless"
             >
-              {t("set.info.link")}
+              <Translated i18nKey="set.info.link" namespace="passkey" />
             </a>
           </span>
         </Alert>

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

@@ -1,5 +1,6 @@
 import { DynamicTheme } from "@/components/dynamic-theme";
 import { SetRegisterPasswordForm } from "@/components/set-register-password-form";
+import { Translated } from "@/components/translated";
 import { getServiceUrlFromHeaders } from "@/lib/service-url";
 import {
   getBrandingSettings,
@@ -9,15 +10,12 @@ import {
   getPasswordComplexitySettings,
 } 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";
 
 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: "register" });
 
   let { firstname, lastname, email, organization, requestId } = searchParams;
 
@@ -57,15 +55,23 @@ export default async function Page(props: {
   return missingData ? (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("missingdata.title")}</h1>
-        <p className="ztdl-p">{t("missingdata.description")}</p>
+        <h1>
+          <Translated i18nKey="missingdata.title" namespace="register" />
+        </h1>
+        <p className="ztdl-p">
+          <Translated i18nKey="missingdata.description" namespace="register" />
+        </p>
       </div>
     </DynamicTheme>
   ) : loginSettings?.allowRegister && loginSettings.allowUsernamePassword ? (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("password.title")}</h1>
-        <p className="ztdl-p">{t("description")}</p>
+        <h1>
+          <Translated i18nKey="password.title" namespace="register" />
+        </h1>
+        <p className="ztdl-p">
+          <Translated i18nKey="description" namespace="register" />
+        </p>
 
         {legal && passwordComplexitySettings && (
           <SetRegisterPasswordForm
@@ -82,8 +88,12 @@ export default async function Page(props: {
   ) : (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("disabled.title")}</h1>
-        <p className="ztdl-p">{t("disabled.description")}</p>
+        <h1>
+          <Translated i18nKey="disabled.title" namespace="register" />
+        </h1>
+        <p className="ztdl-p">
+          <Translated i18nKey="disabled.description" namespace="register" />
+        </p>
       </div>
     </DynamicTheme>
   );

apps/login/src/components/choose-authenticator-to-login.tsx

@@ -3,8 +3,8 @@ import {
   PasskeysType,
 } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
-import { useTranslations } from "next-intl";
 import { PASSKEYS, PASSWORD } from "./auth-methods";
+import { Translated } from "./translated";
 
 type Props = {
   authMethods: AuthenticationMethodType[];
@@ -17,13 +17,13 @@ export function ChooseAuthenticatorToLogin({
   params,
   loginSettings,
 }: Props) {
-  const t = useTranslations("idp");
-
   return (
     <>
       {authMethods.includes(AuthenticationMethodType.PASSWORD) &&
         loginSettings?.allowUsernamePassword && (
-          <div className="ztdl-p">Choose an alternative method to login </div>
+          <div className="ztdl-p">
+            <Translated i18nKey="chooseAlternativeMethod" namespace="idp" />
+          </div>
         )}
       <div className="grid grid-cols-1 gap-5 w-full pt-4">
         {authMethods.includes(AuthenticationMethodType.PASSWORD) &&

apps/login/src/components/username-form.tsx

@@ -151,7 +151,7 @@ export function UsernameForm({
           onClick={handleSubmit((e) => submitLoginName(e, organization))}
         >
           {loading && <Spinner className="h-5 w-5 mr-2" />}
-          continue
+          <Translated i18nKey="submit" namespace="loginname" />
         </Button>
       </div>
     </form>