translated

apps/login/src/app/(login)/otp/[method]/page.tsx

@@ -11,7 +11,7 @@ import {
   getLoginSettings,
   getSession,
 } from "@/lib/zitadel";
-import { getLocale, getTranslations } from "next-intl/server";
+import { getLocale } from "next-intl/server";
 import { headers } from "next/headers";
 
 export default async function Page(props: {
@@ -21,7 +21,6 @@ export default async function Page(props: {
   const params = await props.params;
   const searchParams = await props.searchParams;
   const locale = getLocale();
-  const t = await getTranslations({ locale, namespace: "otp" });
 
   const _headers = await headers();
   const { serviceUrl } = getServiceUrlFromHeaders(_headers);
@@ -81,15 +80,23 @@ export default async function Page(props: {
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
-        <h1>{t("verify.title")}</h1>
+        <h1>
+          <Translated i18nKey="verify.title" namespace="otp" />
+        </h1>
         {method === "time-based" && (
-          <p className="ztdl-p">{t("verify.totpDescription")}</p>
+          <p className="ztdl-p">
+            <Translated i18nKey="verify.totpDescription" namespace="otp" />
+          </p>
         )}
         {method === "sms" && (
-          <p className="ztdl-p">{t("verify.smsDescription")}</p>
+          <p className="ztdl-p">
+            <Translated i18nKey="verify.smsDescription" namespace="otp" />
+          </p>
         )}
         {method === "email" && (
-          <p className="ztdl-p">{t("verify.emailDescription")}</p>
+          <p className="ztdl-p">
+            <Translated i18nKey="verify.emailDescription" namespace="otp" />
+          </p>
         )}
 
         {!session && (

apps/login/src/components/authentication-method-radio.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { RadioGroup } from "@headlessui/react";
-import { useTranslations } from "next-intl";
+import { Translated } from "./translated";
 
 export enum AuthenticationMethod {
   Passkey = "passkey",
@@ -20,8 +20,6 @@ export function AuthenticationMethodRadio({
   selected: any;
   selectionChanged: (value: any) => void;
 }) {
-  const t = useTranslations("register");
-
   return (
     <div className="w-full">
       <div className="mx-auto w-full max-w-md">
@@ -80,7 +78,18 @@ export function AuthenticationMethodRadio({
                         as="p"
                         className={`font-medium  ${checked ? "" : ""}`}
                       >
-                        {t(`methods.${method}`)}
+                        {method === AuthenticationMethod.Passkey && (
+                          <Translated
+                            i18nKey="methods.passkey"
+                            namespace="register"
+                          />
+                        )}
+                        {method === AuthenticationMethod.Password && (
+                          <Translated
+                            i18nKey="methods.password"
+                            namespace="register"
+                          />
+                        )}
                       </RadioGroup.Label>
                     </div>
                   </>

apps/login/src/components/back-button.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { Button, ButtonVariants } from "./button";
+import { Translated } from "./translated";
 
 export function BackButton() {
-  const t = useTranslations("common");
   const router = useRouter();
   return (
     <Button
@@ -13,7 +12,7 @@ export function BackButton() {
       type="button"
       variant={ButtonVariants.Secondary}
     >
-      {t("back")}
+      <Translated i18nKey="back" namespace="common" />
     </Button>
   );
 }

apps/login/src/components/set-password-form.tsx

@@ -14,7 +14,6 @@ import {
 import { create } from "@zitadel/client";
 import { ChecksSchema } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
-import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
@@ -53,8 +52,6 @@ export function SetPasswordForm({
   code,
   codeRequired,
 }: Props) {
-  const t = useTranslations("password");
-
   const { register, handleSubmit, watch, formState } = useForm<Inputs>({
     mode: "onBlur",
     defaultValues: {
@@ -196,7 +193,7 @@ export function SetPasswordForm({
           <Alert type={AlertType.INFO}>
             <div className="flex flex-row">
               <span className="flex-1 mr-auto text-left">
-                {t("set.noCodeReceived")}
+                <Translated i18nKey="set.noCodeReceived" namespace="password" />
               </span>
               <button
                 aria-label="Resend OTP Code"

apps/login/src/components/totp-register.tsx

@@ -3,7 +3,6 @@
 import { getNextUrl } from "@/lib/client";
 import { verifyTOTP } from "@/lib/server/verify";
 import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
-import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { QRCodeSVG } from "qrcode.react";
@@ -14,6 +13,7 @@ import { Button, ButtonVariants } from "./button";
 import { CopyToClipboard } from "./copy-to-clipboard";
 import { TextInput } from "./input";
 import { Spinner } from "./spinner";
+import { Translated } from "./translated";
 
 type Inputs = {
   code: string;
@@ -39,8 +39,6 @@ export function TotpRegister({
   checkAfter,
   loginSettings,
 }: Props) {
-  const t = useTranslations("otp");
-
   const [error, setError] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
   const router = useRouter();
@@ -148,7 +146,7 @@ export function TotpRegister({
                 data-testid="submit-button"
               >
                 {loading && <Spinner className="h-5 w-5 mr-2" />}
-                {t("set.submit")}
+                <Translated i18nKey="set.submit" namespace="otp" />
               </Button>
             </div>
           </form>

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

@@ -2,7 +2,6 @@
 
 import { sendLoginname } from "@/lib/server/loginname";
 import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
-import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { ReactNode, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -11,6 +10,7 @@ import { BackButton } from "./back-button";
 import { Button, ButtonVariants } from "./button";
 import { TextInput } from "./input";
 import { Spinner } from "./spinner";
+import { Translated } from "./translated";
 
 type Inputs = {
   loginName: string;
@@ -37,7 +37,6 @@ export function UsernameForm({
   allowRegister,
   children,
 }: Props) {
-  const t = useTranslations("loginname");
   const { register, handleSubmit, formState } = useForm<Inputs>({
     mode: "onBlur",
     defaultValues: {
@@ -127,7 +126,7 @@ export function UsernameForm({
             disabled={loading}
             data-testid="register-button"
           >
-            {t("register")}
+            <Translated i18nKey="register" namespace="loginname" />
           </button>
         )}
       </div>

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

@@ -2,7 +2,6 @@
 
 import { Alert, AlertType } from "@/components/alert";
 import { resendVerification, sendVerification } from "@/lib/server/verify";
-import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -10,6 +9,7 @@ import { BackButton } from "./back-button";
 import { Button, ButtonVariants } from "./button";
 import { TextInput } from "./input";
 import { Spinner } from "./spinner";
+import { Translated } from "./translated";
 
 type Inputs = {
   code: string;
@@ -32,8 +32,6 @@ export function VerifyForm({
   code,
   isInvite,
 }: Props) {
-  const t = useTranslations("verify");
-
   const router = useRouter();
 
   const { register, handleSubmit, formState } = useForm<Inputs>({
@@ -117,7 +115,7 @@ export function VerifyForm({
         <Alert type={AlertType.INFO}>
           <div className="flex flex-row">
             <span className="flex-1 mr-auto text-left">
-              {t("verify.noCodeReceived")}
+              <Translated i18nKey="verify.noCodeReceived" namespace="verify" />
             </span>
             <button
               aria-label="Resend Code"
@@ -129,7 +127,7 @@ export function VerifyForm({
               }}
               data-testid="resend-button"
             >
-              {t("verify.resendCode")}
+              <Translated i18nKey="verify.resendCode" namespace="verify" />
             </button>
           </div>
         </Alert>
@@ -161,7 +159,7 @@ export function VerifyForm({
             data-testid="submit-button"
           >
             {loading && <Spinner className="h-5 w-5 mr-2" />}
-            {t("verify.submit")}
+            <Translated i18nKey="verify.submit" namespace="verify" />
           </Button>
         </div>
       </form>