Implement login

src/lib/i18n/useKeycloakTranslation.tsx

@@ -3,18 +3,18 @@ import { useKeycloakLanguage } from "./useKeycloakLanguage";
 import { messages } from "./generated_messages/login";
 import { useConstCallback } from "powerhooks";
 import type { ReactNode } from "react";
+import { id } from "evt/tools/typeSafety/id";
 
-export type MessageKey = keyof typeof messages["en"]
-
+export type MessageKey = keyof typeof messages["en"];
 
 export function useKeycloakThemeTranslation() {
 
     const { keycloakLanguage } = useKeycloakLanguage();
 
-    const t = useConstCallback(
-        (key: MessageKey, ...args: (string | undefined)[]): ReactNode => {
+    const tStr = useConstCallback(
+        (key: MessageKey, ...args: (string | undefined)[]): string => {
 
-            let out: string = messages[keycloakLanguage as any as "en"][key] ?? messages["en"][key];
+            let str: string = messages[keycloakLanguage as any as "en"][key] ?? messages["en"][key];
 
             args.forEach((arg, i) => {
 
@@ -22,15 +22,22 @@ export function useKeycloakThemeTranslation() {
                     return;
                 }
 
-                out = out.replace(new RegExp(`\\{${i}\\}`, "g"), arg);
+                str = str.replace(new RegExp(`\\{${i}\\}`, "g"), arg);
 
             });
 
-            return <span className={key} dangerouslySetInnerHTML={{ "__html": out }} />;
+            return str;
 
         }
     );
 
-    return { t };
+    const t = useConstCallback(
+        id<(...args: Parameters<typeof tStr>) => ReactNode>(
+            (key, ...args) =>
+                <span className={key} dangerouslySetInnerHTML={{ "__html": tStr(key, ...args) }} />
+        )
+    );
+
+    return { t, tStr };
 
 }