fix translation logic

felixevers · felixevers · commit 2488f67dfaf2 · 2026-01-28T22:01:09.000+01:00
diff --git a/src/i18n/useTranslation.ts b/src/i18n/useTranslation.ts
@@ -3,5 +3,6 @@ import { helpwaveIdTranslation, type HelpwaveIdTranslationLocales } from './tran
 
 export function useTranslation(locale?: string) {
     const lang = (locale ?? 'en') as HelpwaveIdTranslationLocales
+    console.log(locale, lang)
     return combineTranslation(helpwaveIdTranslation, lang)
-}
+}
diff --git a/src/index.css b/src/index.css
@@ -12,3 +12,10 @@
     --hw-color-secondary-800: #1f2937;
     --hw-color-secondary-900: #111827;
 }
+
+@layer base {
+    body {
+        min-height: 100vh;
+        background-color: var(--hw-color-background) !important;
+    }
+}
diff --git a/src/login/KcPage.tsx b/src/login/KcPage.tsx
@@ -129,12 +129,14 @@ export default function KcPage(props: { kcContext: KcContext }) {
                         return <WebauthnError kcContext={kcContext} />
                     case 'webauthn-register.ftl':
                         return <WebauthnRegister kcContext={kcContext} />
-                    default:
+                    default: {
+                        const fallback = kcContext as KcContext
                         return (
                             <div>
-                                <p>Page not implemented: {kcContext.pageId}</p>
+                                <p>Page not implemented: {fallback.pageId}</p>
                             </div>
                         )
+                    }
                 }
             })()}
         </Suspense>
diff --git a/src/login/pages/FrontchannelLogout.tsx b/src/login/pages/FrontchannelLogout.tsx
@@ -34,9 +34,18 @@ export default function FrontchannelLogout({ kcContext }: FrontchannelLogoutProp
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                     <p>{t('frontchannelLogoutMessage')}</p>
 
-                    <form id="kc-frontchannel-logout-form" action={kcContext.url.logoutAction} method="POST" style={{ display: 'none' }}>
-                        {kcContext.frontchannelLogout?.map((url) => (
-                            <iframe key={url} src={url} style={{ display: 'none' }} />
+                    <form
+                        id="kc-frontchannel-logout-form"
+                        action={(kcContext.url as { logoutAction?: string }).logoutAction ?? '#'}
+                        method="POST"
+                        style={{ display: 'none' }}
+                    >
+                        {kcContext.logout.clients.map((client) => (
+                            <iframe
+                                key={client.frontChannelLogoutUrl}
+                                src={client.frontChannelLogoutUrl}
+                                style={{ display: 'none' }}
+                            />
                         ))}
                         <Button type="submit" color="primary">
                             {t('doContinue')}
diff --git a/src/login/pages/LoginConfigTotp.tsx b/src/login/pages/LoginConfigTotp.tsx
@@ -52,9 +52,9 @@ export default function LoginConfigTotp({ kcContext }: LoginConfigTotpProps) {
                     </div>
                 )}
 
-                {kcContext.totp?.qrCode && (
+                {kcContext.totp?.qrUrl && (
                     <div style={{ marginBottom: '1rem', textAlign: 'center' }}>
-                        <img src={`data:image/png;base64,${kcContext.totp.qrCode}`} alt="TOTP QR Code" style={{ maxWidth: '200px' }} />
+                        <img src={kcContext.totp.qrUrl} alt="TOTP QR Code" style={{ maxWidth: '200px' }} />
                         <p style={{ marginTop: '0.5rem', fontSize: '0.875rem' }}>
                             {t('loginTotpScanBarcode')}
                         </p>
diff --git a/src/login/pages/LoginOauthGrant.tsx b/src/login/pages/LoginOauthGrant.tsx
@@ -33,8 +33,8 @@ export default function LoginOauthGrant({ kcContext }: LoginOauthGrantProps) {
                         <div style={{ marginBottom: '1rem' }}>
                             <h3>{t('oauthGrantScopes')}</h3>
                             <ul>
-                                {kcContext.oauth.clientScopesRequested.map((scope) => (
-                                    <li key={scope.name}>{scope.displayName ?? scope.name}</li>
+                                {kcContext.oauth.clientScopesRequested.map((scope, index) => (
+                                    <li key={scope.dynamicScopeParameter ?? index}>{scope.consentScreenText}</li>
                                 ))}
                             </ul>
                         </div>
diff --git a/src/login/pages/LoginPasskeysConditionalAuthenticate.tsx b/src/login/pages/LoginPasskeysConditionalAuthenticate.tsx
@@ -4,6 +4,7 @@ import { useI18n } from '../i18n'
 import Template from 'keycloakify/login/Template'
 import { PageLayout } from '../components/PageLayout'
 import { useEffect } from 'react'
+import { useTranslation } from '../../i18n/useTranslation'
 
 type LoginPasskeysConditionalAuthenticateProps = {
     kcContext: Extract<KcContext, { pageId: 'login-passkeys-conditional-authenticate.ftl' }>,
@@ -14,16 +15,17 @@ export default function LoginPasskeysConditionalAuthenticate({ kcContext }: Logi
     const locale = kcContext.locale?.currentLanguageTag ?? 'en'
     const t = useTranslation(locale)
 
+    const webauthnScriptUrl = (kcContext.url as { webauthnScriptUrl?: string }).webauthnScriptUrl
     useEffect(() => {
+        if (!webauthnScriptUrl) return
         const script = document.createElement('script')
-        script.src = kcContext.url.webauthnScriptUrl
+        script.src = webauthnScriptUrl
         script.async = true
         document.body.appendChild(script)
-
         return () => {
             document.body.removeChild(script)
         }
-    }, [kcContext.url.webauthnScriptUrl])
+    }, [webauthnScriptUrl])
 
     return (
         <Template
diff --git a/src/login/pages/LoginResetOtp.tsx b/src/login/pages/LoginResetOtp.tsx
@@ -11,6 +11,8 @@ type LoginResetOtpProps = {
 
 export default function LoginResetOtp({ kcContext }: LoginResetOtpProps) {
     const { i18n } = useI18n({ kcContext })
+    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
+    const t = useTranslation(locale)
 
     return (
         <Template
diff --git a/src/login/pages/LoginUpdateProfile.tsx b/src/login/pages/LoginUpdateProfile.tsx
@@ -12,6 +12,8 @@ type LoginUpdateProfileProps = {
 
 export default function LoginUpdateProfile({ kcContext }: LoginUpdateProfileProps) {
     const { i18n } = useI18n({ kcContext })
+    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
+    const t = useTranslation(locale)
 
     const profile = kcContext.profile
     const attributes = profile?.attributesByName ?? {}
diff --git a/src/login/pages/LoginUsername.tsx b/src/login/pages/LoginUsername.tsx
@@ -4,6 +4,7 @@ import type { KcContext } from '../KcContext'
 import { useI18n } from '../i18n'
 import Template from 'keycloakify/login/Template'
 import { PageLayout } from '../components/PageLayout'
+import { useTranslation } from '../../i18n/useTranslation'
 
 type LoginUsernameProps = {
     kcContext: Extract<KcContext, { pageId: 'login-username.ftl' }>,
diff --git a/src/login/pages/LoginX509Info.tsx b/src/login/pages/LoginX509Info.tsx
@@ -3,6 +3,7 @@ import type { KcContext } from '../KcContext'
 import { useI18n } from '../i18n'
 import Template from 'keycloakify/login/Template'
 import { PageLayout } from '../components/PageLayout'
+import { useTranslation } from '../../i18n/useTranslation'
 
 type LoginX509InfoProps = {
     kcContext: Extract<KcContext, { pageId: 'login-x509-info.ftl' }>,
diff --git a/src/login/pages/SamlPostForm.tsx b/src/login/pages/SamlPostForm.tsx
@@ -34,10 +34,24 @@ export default function SamlPostForm({ kcContext }: SamlPostFormProps) {
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                     <p>{t('samlPostFormMessage')}</p>
 
-                    <form id="kc-saml-post-form" action={kcContext.url.loginAction} method="POST" style={{ display: 'none' }}>
-                        {kcContext.samlPost?.map((field) => (
-                            <input key={field.name} type="hidden" name={field.name} value={field.value} />
-                        ))}
+                    <form
+                        id="kc-saml-post-form"
+                        action={kcContext.samlPost?.url ?? kcContext.url.loginAction}
+                        method="POST"
+                        style={{ display: 'none' }}
+                    >
+                        {kcContext.samlPost &&
+                            (['SAMLRequest', 'SAMLResponse', 'relayState'] as const).map(
+                                (name) =>
+                                    kcContext.samlPost![name] != null && (
+                                        <input
+                                            key={name}
+                                            type="hidden"
+                                            name={name}
+                                            value={kcContext.samlPost![name]}
+                                        />
+                                    )
+                            )}
                         <Button type="submit" color="primary">
                             {t('doContinue')}
                         </Button>
diff --git a/src/login/pages/SelectAuthenticator.tsx b/src/login/pages/SelectAuthenticator.tsx
@@ -26,17 +26,17 @@ export default function SelectAuthenticator({ kcContext }: SelectAuthenticatorPr
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                     <h2>{t('selectAuthenticatorTitle')}</h2>
 
-                    {kcContext.auth?.authenticators && kcContext.auth.authenticators.length > 0 && (
+                    {kcContext.auth?.authenticationSelections && kcContext.auth.authenticationSelections.length > 0 && (
                         <form action={kcContext.url.loginAction} method="POST" style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-                            {kcContext.auth.authenticators.map((authenticator) => (
+                            {kcContext.auth.authenticationSelections.map((selection) => (
                                 <Button
-                                    key={authenticator.alias}
+                                    key={selection.authExecId}
                                     type="submit"
-                                    name="selectedCredentialId"
-                                    value={authenticator.credentialId}
+                                    name="authExecId"
+                                    value={selection.authExecId}
                                     color="primary"
                                 >
-                                    {authenticator.displayName ?? authenticator.alias}
+                                    {selection.displayName}
                                 </Button>
                             ))}
                         </form>
diff --git a/src/login/pages/SelectOrganization.tsx b/src/login/pages/SelectOrganization.tsx
@@ -26,17 +26,17 @@ export default function SelectOrganization({ kcContext }: SelectOrganizationProp
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                     <h2>{t('selectOrganizationTitle')}</h2>
 
-                    {kcContext.orgs?.orgs && kcContext.orgs.orgs.length > 0 && (
+                    {kcContext.user?.organizations && kcContext.user.organizations.length > 0 && (
                         <form action={kcContext.url.loginAction} method="POST" style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-                            {kcContext.orgs.orgs.map((org) => (
+                            {kcContext.user.organizations.map((org) => (
                                 <Button
-                                    key={org.id}
+                                    key={org.alias}
                                     type="submit"
                                     name="orgId"
-                                    value={org.id}
+                                    value={org.alias}
                                     color="primary"
                                 >
-                                    {org.name}
+                                    {org.name ?? org.alias}
                                 </Button>
                             ))}
                         </form>
diff --git a/src/login/pages/UpdateEmail.tsx b/src/login/pages/UpdateEmail.tsx
@@ -14,7 +14,7 @@ export default function UpdateEmail({ kcContext }: UpdateEmailProps) {
     const { i18n } = useI18n({ kcContext })
     const locale = kcContext.locale?.currentLanguageTag ?? 'en'
     const t = useTranslation(locale)
-    const [email, setEmail] = useState(kcContext.user?.email ?? '')
+    const [email, setEmail] = useState(kcContext.profile?.attributesByName?.email?.value ?? '')
 
     const emailError = kcContext.messagesPerField?.existsError('email')
         ? kcContext.messagesPerField.get('email')
diff --git a/src/login/pages/WebauthnAuthenticate.tsx b/src/login/pages/WebauthnAuthenticate.tsx
@@ -15,16 +15,17 @@ export default function WebauthnAuthenticate({ kcContext }: WebauthnAuthenticate
     const locale = kcContext.locale?.currentLanguageTag ?? 'en'
     const t = useTranslation(locale)
 
+    const webauthnScriptUrl = (kcContext.url as { webauthnScriptUrl?: string }).webauthnScriptUrl
     useEffect(() => {
+        if (!webauthnScriptUrl) return
         const script = document.createElement('script')
-        script.src = kcContext.url.webauthnScriptUrl
+        script.src = webauthnScriptUrl
         script.async = true
         document.body.appendChild(script)
-
         return () => {
             document.body.removeChild(script)
         }
-    }, [kcContext.url.webauthnScriptUrl])
+    }, [webauthnScriptUrl])
 
     return (
         <Template
diff --git a/src/login/pages/WebauthnRegister.tsx b/src/login/pages/WebauthnRegister.tsx
@@ -15,16 +15,17 @@ export default function WebauthnRegister({ kcContext }: WebauthnRegisterProps) {
     const locale = kcContext.locale?.currentLanguageTag ?? 'en'
     const t = useTranslation(locale)
 
+    const webauthnScriptUrl = (kcContext.url as { webauthnScriptUrl?: string }).webauthnScriptUrl
     useEffect(() => {
+        if (!webauthnScriptUrl) return
         const script = document.createElement('script')
-        script.src = kcContext.url.webauthnScriptUrl
+        script.src = webauthnScriptUrl
         script.async = true
         document.body.appendChild(script)
-
         return () => {
             document.body.removeChild(script)
         }
-    }, [kcContext.url.webauthnScriptUrl])
+    }, [webauthnScriptUrl])
 
     return (
         <Template
diff --git a/src/main.tsx b/src/main.tsx
@@ -5,14 +5,6 @@ import '@helpwave/hightide/style/globals.css'
 import './index.css'
 import { HelpwaveLogo, ThemeProvider, LocaleProvider } from '@helpwave/hightide'
 
-function mapKeycloakLocaleToHightide(keycloakLocale?: string): 'en-US' | 'de-DE' | 'system' {
-    if (!keycloakLocale) return 'system'
-    const normalized = keycloakLocale.toLowerCase()
-    if (normalized.startsWith('de')) return 'de-DE'
-    if (normalized.startsWith('en')) return 'en-US'
-    return 'system'
-}
-
 // The following block can be uncommented to test a specific page with `yarn dev`
 // Don't forget to comment back or your bundle size will increase
 /*
@@ -29,7 +21,7 @@ if (import.meta.env.DEV) {
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <ThemeProvider>
-            <LocaleProvider locale={mapKeycloakLocaleToHightide(window.kcContext?.locale?.currentLanguageTag)}>
+            <LocaleProvider>
                 {!window.kcContext ? (
                     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
                         <HelpwaveLogo animate="loading" color="currentColor" height={128} width={128} />
