fix error page

Author: felixevers

locales/de-DE.arb

@@ -400,6 +400,10 @@
   "pageTitleForgotPassword": "Passwort vergessen",
   "pageTitleInfo": "Information",
   "pageTitleError": "Fehler",
+  "pageTitlePageDisabled": "Seite deaktiviert",
+  "@pageTitlePageDisabled": {
+    "description": "Titel für deaktivierte/Fehlerseite"
+  },
   "pageTitleCode": "Bestätigungscode",
   "pageTitleLogoutConfirm": "Abmelden",
   "pageTitleTerms": "Allgemeine Geschäftsbedingungen",

locales/en-US.arb

@@ -400,6 +400,10 @@
   "pageTitleForgotPassword": "Forgot Password",
   "pageTitleInfo": "Information",
   "pageTitleError": "Error",
+  "pageTitlePageDisabled": "Page disabled",
+  "@pageTitlePageDisabled": {
+    "description": "Title for disabled/error page"
+  },
   "pageTitleCode": "Verification Code",
   "pageTitleLogoutConfirm": "Log Out",
   "pageTitleTerms": "Terms and Conditions",

src/account/pages/AccountSettings.tsx

@@ -17,6 +17,20 @@ function getDisplayName(kcContext: Extract<KcContext, { pageId: 'account.ftl' }>
     return account.username ?? ''
 }
 
+function getDeleteAccountUrl(accountUrl: string): string {
+    const base = accountUrl.replace(/\/$/, '')
+    const realmPath = base.replace(/\/account$/, '')
+    const authUrl = `${realmPath}/protocol/openid-connect/auth`
+    const params = new URLSearchParams({
+        client_id: 'account-console',
+        redirect_uri: accountUrl,
+        response_type: 'code',
+        scope: 'openid',
+        kc_action: 'delete_account'
+    })
+    return `${authUrl}?${params.toString()}`
+}
+
 export default function AccountSettings({ kcContext }: AccountSettingsProps) {
     const t = useTranslation()
     const translateError = useTranslatedFieldError()
@@ -196,11 +210,11 @@ export default function AccountSettings({ kcContext }: AccountSettingsProps) {
                             onCancel={() => setDeleteAccountDialogOpen(false)}
                             onConfirm={() => {
                                 setDeleteAccountDialogOpen(false)
-                                window.location.href = url.accountUrl.replace(/\/$/, '') + '/delete-account'
+                                window.location.href = getDeleteAccountUrl(url.accountUrl)
                             }}
                             buttonOverwrites={[
                                     { text: t('doCancel') },
-                                    undefined,
+                                    {},
                                     { text: t('doDeleteAccount') }
                                 ]}
                         />

src/i18n/translations.ts

@@ -113,6 +113,7 @@ export type HelpwaveIdTranslationEntries = {
   'pageTitleLogoutConfirm': string,
   'pageTitleOauth2DeviceVerifyUserCode': string,
   'pageTitleOauthGrant': string,
+  'pageTitlePageDisabled': string,
   'pageTitlePageExpired': string,
   'pageTitlePasskeysConditionalAuthenticate': string,
   'pageTitleRecoveryCodeConfig': string,
@@ -276,6 +277,7 @@ export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Pa
     'pageTitleLogoutConfirm': `Abmelden`,
     'pageTitleOauth2DeviceVerifyUserCode': `Geräte-Anmeldung`,
     'pageTitleOauthGrant': `Zugriff gewähren`,
+    'pageTitlePageDisabled': `Seite deaktiviert`,
     'pageTitlePageExpired': `Seite abgelaufen`,
     'pageTitlePasskeysConditionalAuthenticate': `Passkey-Anmeldung`,
     'pageTitleRecoveryCodeConfig': `Wiederherstellungscodes`,
@@ -438,6 +440,7 @@ Der Anmeldevorgang wird von vorne begonnen.`,
     'pageTitleLogoutConfirm': `Log Out`,
     'pageTitleOauth2DeviceVerifyUserCode': `Device Login`,
     'pageTitleOauthGrant': `Grant Access`,
+    'pageTitlePageDisabled': `Page disabled`,
     'pageTitlePageExpired': `Page Expired`,
     'pageTitlePasskeysConditionalAuthenticate': `Passkey Login`,
     'pageTitleRecoveryCodeConfig': `Recovery Codes`,

src/login/components/RealmChip.tsx

@@ -2,7 +2,7 @@ import { Chip } from '@helpwave/hightide'
 import { getRealmColor } from '../utils/realmColor'
 
 type RealmChipProps = {
-    kcContext: { realm: { name?: string, realm?: string } },
+    kcContext: { realm: Record<string, unknown> },
 };
 
 export function RealmChip({ kcContext }: RealmChipProps) {

src/login/pages/Error.tsx

@@ -1,12 +1,9 @@
-import { Button } from '@helpwave/hightide'
 import type { KcContext } from '../KcContext'
 import { useI18n } from '../i18n'
 import Template from 'keycloakify/login/Template'
 import { PageLayout } from '../components/PageLayout'
 import { AlertBox } from '../components/AlertBox'
-import { ArrowLeft, RotateCcw } from 'lucide-react'
 import { useTranslation } from '../../i18n/useTranslation'
-import { getPageTitleKey } from '../utils/pageTitles'
 
 type ErrorProps = {
     kcContext: Extract<KcContext, { pageId: 'error.ftl' }>,
@@ -15,6 +12,7 @@ type ErrorProps = {
 export default function Error({ kcContext }: ErrorProps) {
     const { i18n } = useI18n({ kcContext })
     const t = useTranslation()
+    const documentTitle = `${t('pageTitlePageDisabled')} | ${t('helpwaveId')}`
 
     return (
         <Template
@@ -23,37 +21,11 @@ export default function Error({ kcContext }: ErrorProps) {
             displayMessage={false}
             headerNode={null}
             doUseDefaultCss={false}
-            documentTitle={t(getPageTitleKey(kcContext.pageId))}
+            documentTitle={documentTitle}
         >
             <PageLayout kcContext={kcContext}>
+                <h1 className="text-xl font-bold text-center mb-4">{t('pageTitlePageDisabled')}</h1>
                 {kcContext.message && <AlertBox message={kcContext.message} />}
-
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                    <Button
-                        type="button"
-                        color="primary"
-                        onClick={() => {
-                            window.location.href = kcContext.url.loginRestartFlowUrl
-                        }}
-                    >
-                        <RotateCcw className="w-4 h-4" />
-                        {t('doRestart') || t('doContinue')}
-                    </Button>
-
-                    {kcContext.url.loginUrl && (
-                        <Button
-                            type="button"
-                            color="neutral"
-                            coloringStyle="outline"
-                            onClick={() => {
-                                window.location.href = kcContext.url.loginUrl
-                            }}
-                        >
-                            <ArrowLeft className="w-4 h-4" />
-                            {t('backToLogin')}
-                        </Button>
-                    )}
-                </div>
             </PageLayout>
         </Template>
     )