From 0889d1e043043d4f25dee792f0f2bb535cc595f4 Mon Sep 17 00:00:00 2001
From: Max Peintner <peintnerm@gmail.com>
Date: Thu, 19 Jun 2025 15:00:44 +0200
Subject: [PATCH] data prop for i18n

---
 apps/login/src/components/consent.tsx            |  6 +++++-
 apps/login/src/components/session-clear-item.tsx | 11 +++++++----
 apps/login/src/components/translated.tsx         |  4 +++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/login/src/components/consent.tsx b/apps/login/src/components/consent.tsx
index 5b21ac2a9d..e60ed2901b 100644
--- a/apps/login/src/components/consent.tsx
+++ b/apps/login/src/components/consent.tsx
@@ -74,7 +74,11 @@ export function ConsentScreen({
       </ul>
 
       <p className="ztdl-p text-xs text-left">
-        {t("device.request.disclaimer", { appName: appName })}
+        <Translated
+          i18nKey="request.disclaimer"
+          namespace="device"
+          data={{ appName: appName }}
+        />
       </p>
 
       {error && (
diff --git a/apps/login/src/components/session-clear-item.tsx b/apps/login/src/components/session-clear-item.tsx
index 72cf51d6f5..c219f42eb0 100644
--- a/apps/login/src/components/session-clear-item.tsx
+++ b/apps/login/src/components/session-clear-item.tsx
@@ -71,10 +71,13 @@ export function SessionClearItem({
         </span>
         {valid ? (
           <span className="text-xs opacity-80 text-ellipsis">
-            {verifiedAt &&
-              t("verfiedAt", {
-                time: moment(timestampDate(verifiedAt)).fromNow(),
-              })}
+            {verifiedAt && (
+              <Translated
+                i18nKey="verfiedAt"
+                namespace="logout"
+                data={{ time: moment(timestampDate(verifiedAt)).fromNow() }}
+              />
+            )}
           </span>
         ) : (
           verifiedAt && (
diff --git a/apps/login/src/components/translated.tsx b/apps/login/src/components/translated.tsx
index 60cab58256..807ea18e8f 100644
--- a/apps/login/src/components/translated.tsx
+++ b/apps/login/src/components/translated.tsx
@@ -4,18 +4,20 @@ export function Translated({
   i18nKey,
   children,
   namespace,
+  data,
   ...props
 }: {
   i18nKey: string;
   children?: React.ReactNode;
   namespace?: string;
+  data?: any;
 } & React.HTMLAttributes<HTMLSpanElement>) {
   const t = useTranslations(namespace);
   const helperKey = `${namespace ? `${namespace}.` : ""}${i18nKey}`;
 
   return (
     <span data-i18n-key={helperKey} {...props}>
-      {t(i18nKey)}
+      {t(i18nKey, data)}
     </span>
   );
 }