feat(storybook): progress on many more pages

src/keycloak-theme/Template.stories.tsx

@@ -0,0 +1,32 @@
+import type {ComponentMeta} from '@storybook/react';
+import KcApp from './KcApp';
+import {template} from '../../.storybook/util'
+
+const bind = template('my-extra-page-1.ftl');
+
+export default {
+    title: 'Theme/Template',
+    component: KcApp,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as ComponentMeta<typeof KcApp>;
+
+
+export const Default = bind({})
+export const InFrench = bind({locale: {currentLanguageTag: 'fr'}})
+export const RealmDisplayNameIsHtml = bind({
+    realm: {
+        displayNameHtml: '<marquee>my realm</marquee>'
+    }
+})
+
+export const NoInternationalization = bind({
+    realm: {
+        internationalizationEnabled: false,
+    }
+})
+
+export const WithGlobalError = bind({
+    message: {type: "error", summary: "This is an error"}
+})

src/keycloak-theme/pages/Error.stories.tsx

@@ -0,0 +1,16 @@
+import {ComponentMeta} from '@storybook/react';
+import KcApp from '../KcApp';
+import {template} from '../../../.storybook/util'
+
+const bind = template('error.ftl');
+
+export default {
+    kind: 'Page',
+    title: 'Theme/Pages/Error',
+    component: KcApp,
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as ComponentMeta<typeof KcApp>;
+
+export const Default = bind({message: {type: 'error', summary: 'Something went wrong'}})

src/keycloak-theme/pages/Error.tsx

@@ -0,0 +1,34 @@
+// copied and adapted from https://github.com/InseeFrLab/keycloakify/blob/main/src/lib/pages/Error.tsx
+import React from "react";
+import type { PageProps } from "keycloakify"
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+
+export default function Error(props: PageProps<Extract<KcContext, { pageId: "error.ftl" }>, I18n>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
+
+    const { message, client } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={false}
+            headerNode={msg("errorTitle")}
+            formNode={
+                <div id="kc-error-message">
+                    <p className="instruction">{message.summary}</p>
+                    {client !== undefined && client.baseUrl !== undefined && (
+                        <p>
+                            <a id="backToApplication" href={client.baseUrl}>
+                                {msg("backToApplication")}
+                            </a>
+                        </p>
+                    )}
+                </div>
+            }
+        />
+    );
+}