implement simple account theme

Author: felixevers

locales/de-DE.arb

@@ -112,6 +112,38 @@
   "@doLogout": {
     "description": "Abmelden Button Text"
   },
+  "doSave": "Speichern",
+  "@doSave": {
+    "description": "Speichern Button Text"
+  },
+  "updatePassword": "Passwort ändern",
+  "@updatePassword": {
+    "description": "Passwort ändern Button Text"
+  },
+  "accountStatusActive": "Aktiv",
+  "@accountStatusActive": {
+    "description": "Kontostatus wenn angemeldet"
+  },
+  "profilePicture": "Profilbild",
+  "@profilePicture": {
+    "description": "Profilbild Abschnittsüberschrift"
+  },
+  "profilePictureComingSoon": "Profilbild hochladen – in Kürze.",
+  "@profilePictureComingSoon": {
+    "description": "Platzhalter für Profilbild-Upload"
+  },
+  "accountSectionProfile": "Profil",
+  "@accountSectionProfile": {
+    "description": "Profil-Abschnittsüberschrift"
+  },
+  "personalInfoTitle": "Persönliche Angaben",
+  "@personalInfoTitle": {
+    "description": "Persönliche Angaben Abschnittsüberschrift"
+  },
+  "passwordSectionTitle": "Passwort",
+  "@passwordSectionTitle": {
+    "description": "Passwort-Abschnittsüberschrift"
+  },
   "doCancel": "Abbrechen",
   "@doCancel": {
     "description": "Abbrechen Button Text"

locales/en-US.arb

@@ -112,6 +112,38 @@
   "@doLogout": {
     "description": "Logout button text"
   },
+  "doSave": "Save",
+  "@doSave": {
+    "description": "Save button text"
+  },
+  "updatePassword": "Update Password",
+  "@updatePassword": {
+    "description": "Update password button text"
+  },
+  "accountStatusActive": "Active",
+  "@accountStatusActive": {
+    "description": "Account status label when signed in"
+  },
+  "profilePicture": "Profile picture",
+  "@profilePicture": {
+    "description": "Profile picture section heading"
+  },
+  "profilePictureComingSoon": "Upload profile picture – coming soon.",
+  "@profilePictureComingSoon": {
+    "description": "Placeholder for profile picture upload"
+  },
+  "accountSectionProfile": "Profile",
+  "@accountSectionProfile": {
+    "description": "Account profile section title"
+  },
+  "personalInfoTitle": "Personal information",
+  "@personalInfoTitle": {
+    "description": "Personal info section title"
+  },
+  "passwordSectionTitle": "Password",
+  "@passwordSectionTitle": {
+    "description": "Password section title"
+  },
   "doCancel": "Cancel",
   "@doCancel": {
     "description": "Cancel button text"

src/account/KcContext.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import type { ExtendKcContext } from 'keycloakify/account'
+import type { KcEnvName, ThemeName } from '../kc.gen'
+
+export type KcContextExtension = {
+    themeName: ThemeName,
+    properties: Record<KcEnvName, string> & {},
+}
+
+export type KcContextExtensionPerPage = {}
+
+export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>

src/account/KcPage.tsx

@@ -0,0 +1,50 @@
+import { Suspense } from 'react'
+import type { KcContext } from './KcContext'
+import { AccountPageLayout } from './components/AccountPageLayout'
+import AccountSettings from './pages/AccountSettings'
+
+export default function KcPage(props: { kcContext: KcContext }) {
+    const { kcContext } = props
+
+    return (
+        <Suspense>
+            {(() => {
+                if (kcContext.pageId === 'account.ftl') {
+                    return (
+                        <AccountPageLayout kcContext={kcContext}>
+                            <AccountSettings
+                                kcContext={kcContext}
+                            />
+                        </AccountPageLayout>
+                    )
+                }
+
+                return (
+                    <AccountPageLayout kcContext={kcContext}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                            <p>
+                                {kcContext.pageId === 'password.ftl'
+                                    ? 'Use the link below to update your password.'
+                                    : 'Use the link below to return to your account.'}
+                            </p>
+                            {kcContext.pageId === 'password.ftl' && (
+                                <a
+                                    href={kcContext.url.passwordUrl}
+                                    className="text-[var(--hw-color-primary-600)] underline"
+                                >
+                                    Update Password
+                                </a>
+                            )}
+                            <a
+                                href={kcContext.url.accountUrl}
+                                className="text-[var(--hw-color-primary-600)] underline"
+                            >
+                                Back to Account
+                            </a>
+                        </div>
+                    </AccountPageLayout>
+                )
+            })()}
+        </Suspense>
+    )
+}

src/account/KcPageStory.tsx

@@ -0,0 +1,40 @@
+import type { DeepPartial } from 'keycloakify/tools/DeepPartial'
+import type { KcContext } from './KcContext'
+import { createGetKcContextMock } from 'keycloakify/account/KcContext'
+import type { KcContextExtension, KcContextExtensionPerPage } from './KcContext'
+import KcPage from './KcPage'
+import { themeNames, kcEnvDefaults } from '../kc.gen'
+
+const kcContextExtension: KcContextExtension = {
+    themeName: themeNames[0],
+    properties: {
+        ...kcEnvDefaults
+    }
+}
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {}
+
+export const { getKcContextMock } = createGetKcContextMock({
+    kcContextExtension,
+    kcContextExtensionPerPage,
+    overrides: {},
+    overridesPerPage: {}
+})
+
+export function createKcPageStory<PageId extends KcContext['pageId']>(params: { pageId: PageId }) {
+    const { pageId } = params
+
+    function KcPageStory(props: {
+        kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>>,
+    }) {
+        const { kcContext: overrides } = props
+
+        const kcContextMock = getKcContextMock({
+            pageId,
+            overrides
+        })
+
+        return <KcPage kcContext={kcContextMock} />
+    }
+
+    return { KcPageStory }
+}

src/account/components/AccountPageLayout.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react'
+import type { KcContext } from '../KcContext'
+import { Branding } from '../../login/components/Branding'
+import { ThemeSwitcher } from '../../login/components/ThemeSwitcher'
+import { LanguageSwitcher } from '../../login/components/LanguageSwitcher'
+import { Footer } from '../../login/components/Footer'
+import { hideKeycloakStyles } from '../../login/utils/hideKeycloakStyles'
+import { Button } from '@helpwave/hightide'
+import { useTranslation } from '../../i18n/useTranslation'
+
+type AccountPageLayoutProps = {
+    kcContext: KcContext,
+    children: ReactNode,
+}
+
+export function AccountPageLayout({ kcContext, children }: AccountPageLayoutProps) {
+    const t = useTranslation()
+
+    return (
+        <>
+            <style>{hideKeycloakStyles}</style>
+            <div className="flex flex-col min-h-screen p-4 relative">
+                <div className="absolute top-4 right-4 flex gap-2 z-[1000] sm:top-2 sm:right-2 sm:gap-1 items-center">
+                    <ThemeSwitcher />
+                    <LanguageSwitcher />
+                    <Button
+                        type="button"
+                        color="negative"
+                        onClick={() => {
+                            window.location.href = kcContext.url.getLogoutUrl()
+                        }}
+                    >
+                        {t('doLogout')}
+                    </Button>
+                </div>
+
+                <div className="flex flex-col items-center justify-center flex-1 w-[360px] max-w-[360px] mx-auto py-8 px-4 md:w-full md:max-w-[360px] md:py-6 md:px-4 sm:w-full sm:max-w-full sm:py-4 sm:px-2">
+                    <Branding />
+
+                    <div className="w-full max-w-full mt-8 box-border [&_form]:w-full [&_form]:max-w-full [&_form]:box-border [&_>*]:w-full [&_>*]:max-w-full [&_>*]:box-border [&_input]:w-full [&_input]:max-w-full [&_input]:box-border [&_button]:w-full [&_button]:max-w-full [&_button]:box-border">
+                        {children}
+                    </div>
+                </div>
+
+                <Footer />
+            </div>
+        </>
+    )
+}

src/account/i18n.ts

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { i18nBuilder } from 'keycloakify/account'
+import type { ThemeName } from '../kc.gen'
+
+const { useI18n, ofTypeI18n } = i18nBuilder.withThemeName<ThemeName>().build()
+
+type I18n = typeof ofTypeI18n
+
+export { useI18n, type I18n }

src/account/pages/AccountSettings.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { createKcPageStory } from '../KcPageStory'
+
+const { KcPageStory } = createKcPageStory({ pageId: 'account.ftl' })
+
+const meta = {
+    title: 'account/account.ftl',
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+}
+
+export const WithUser: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                account: {
+                    username: 'jane.doe',
+                    email: 'jane.doe@example.com',
+                    firstName: 'Jane',
+                    lastName: 'Doe'
+                },
+                realm: {
+                    registrationEmailAsUsername: false,
+                    editUsernameAllowed: true
+                }
+            }}
+        />
+    )
+}
+
+export const WithMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                account: {
+                    username: 'user',
+                    email: 'user@example.com',
+                    firstName: 'Test',
+                    lastName: 'User'
+                },
+                message: {
+                    type: 'success',
+                    summary: 'Your account has been updated.'
+                }
+            }}
+        />
+    )
+}
+
+export const UsernameReadOnly: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                account: {
+                    username: 'fixed.username',
+                    email: 'user@example.com',
+                    firstName: 'Test',
+                    lastName: 'User'
+                },
+                realm: {
+                    registrationEmailAsUsername: false,
+                    editUsernameAllowed: false
+                }
+            }}
+        />
+    )
+}