5 files changed, 231 insertions, 11 deletions
diff --git a/src/keycloak-theme/kcContext.ts b/src/keycloak-theme/kcContext.ts
index ad7ab6d..078efeb 100644
--- a/src/keycloak-theme/kcContext.ts
+++ b/src/keycloak-theme/kcContext.ts
@@ -1,11 +1,6 @@
 import { getKcContext } from "keycloakify/lib/getKcContext";
 
-//NOTE: In most of the cases you do not need to overload the KcContext, you can 
-// just call getKcContext(...) without type arguments.  
-// You want to overload the KcContext only if:  
-// - You have custom plugins that add some values to the context (like https://github.com/micedre/keycloak-mail-whitelisting that adds authorizedMailDomains)
-// - You want to add support for extra pages that are not yey featured by default, see: https://docs.keycloakify.dev/contributing#adding-support-for-a-new-page
-export const { kcContext } = getKcContext<
+export type KcContextExtension =
 	// NOTE: A 'keycloakify' field must be added 
 	// in the package.json to generate theses extra pages
 	// https://docs.keycloakify.dev/build-options#keycloakify.extrapages
@@ -14,8 +9,14 @@ export const { kcContext } = getKcContext<
 	// NOTE: register.ftl is deprecated in favor of register-user-profile.ftl
 	// but let's say we use it anyway and have this plugin enabled: https://github.com/micedre/keycloak-mail-whitelisting
 	// keycloak-mail-whitelisting define the non standard ftl global authorizedMailDomains, we declare it here.
-	| { pageId: "register.ftl"; authorizedMailDomains: string[]; }
->({
+	| { pageId: "register.ftl"; authorizedMailDomains: string[]; };
+
+//NOTE: In most of the cases you do not need to overload the KcContext, you can 
+// just call getKcContext(...) without type arguments.  
+// You want to overload the KcContext only if:  
+// - You have custom plugins that add some values to the context (like https://github.com/micedre/keycloak-mail-whitelisting that adds authorizedMailDomains)
+// - You want to add support for extra pages that are not yey featured by default, see: https://docs.keycloakify.dev/contributing#adding-support-for-a-new-page
+export const { kcContext } = getKcContext<KcContextExtension>({
 	// Uncomment to test the login page for development.
 	//mockPageId: "login.ftl",
 	mockData: [
@@ -83,12 +84,12 @@ export const { kcContext } = getKcContext<
 			],
 			// Simulate we got an error with the email field
 			messagesPerField: {
-				printIfExists: <T>(fieldName: string, className: T) => { console.log({ fieldName}); return fieldName === "email" ? className : undefined; },
-				existsError: (fieldName: string)=> fieldName === "email",
+				printIfExists: <T>(fieldName: string, className: T) => { console.log({ fieldName }); return fieldName === "email" ? className : undefined; },
+				existsError: (fieldName: string) => fieldName === "email",
 				get: (fieldName: string) => `Fake error for ${fieldName}`,
 				exists: (fieldName: string) => fieldName === "email"
 			},
-			
+
 		}
 	]
 });
diff --git a/src/keycloak-theme/pages/Login.stories.tsx b/src/keycloak-theme/pages/Login.stories.tsx
new file mode 100644
index 0000000..1d52e6d
--- /dev/null
+++ b/src/keycloak-theme/pages/Login.stories.tsx
@@ -0,0 +1,97 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+
+import { useKcStoryData, socialProviders } from '../../../.storybook/data'
+
+export default {
+  title: 'Login',
+  component: KcApp,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof KcApp>;
+
+const pageId = 'login.ftl'
+
+export const Default = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const InFrench = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, locale: { currentLanguageTag: 'fr' } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const RealmDisplayNameIsHtml = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined, realm: {
+      displayNameHtml: '<marquee>my realm</marquee>'
+    }
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const NoInternationalization = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined, realm: {
+      internationalizationEnabled: false,
+    }
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const NoPasswordField = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, realm: { password: false } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const RegistrationNotAllowed = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, realm: { registrationAllowed: false } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const RememberMeNotAllowed = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, realm: { rememberMe: false } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const PasswordResetNotAllowed = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, realm: { resetPasswordAllowed: false } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const EmailIsUsername = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, realm: { loginWithEmailAllowed: false } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const TryAnotherWay = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, auth: { showTryAnotherWayLink: true } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const PresetUsername = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, login: { username: '[email protected]' } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const ReadOnlyPresetUsername = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, login: { username: '[email protected]' }, usernameEditDisabled: true })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithSocialProviders = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined, social: {
+      displayInfo: true,
+      providers: socialProviders
+    }
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithError = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: { type: "error", summary: "This is an error" } })
+  return <KcApp kcContext={kcContext} />
+}
diff --git a/src/keycloak-theme/pages/MyExtraPage1.stories.tsx b/src/keycloak-theme/pages/MyExtraPage1.stories.tsx
new file mode 100644
index 0000000..9315151
--- /dev/null
+++ b/src/keycloak-theme/pages/MyExtraPage1.stories.tsx
@@ -0,0 +1,24 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+
+import { useKcStoryData } from '../../../.storybook/data'
+
+export default {
+  title: 'My Extra Page 1',
+  component: KcApp,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof KcApp>;
+
+const pageId = 'my-extra-page-1.ftl'
+
+export const Default = () => {
+  const { kcContext } = useKcStoryData({ pageId })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const InFrench = () => {
+  const { kcContext } = useKcStoryData({ pageId, locale: { currentLanguageTag: 'fr' } })
+  return <KcApp kcContext={kcContext} />
+}
diff --git a/src/keycloak-theme/pages/MyExtraPage2.stories.tsx b/src/keycloak-theme/pages/MyExtraPage2.stories.tsx
new file mode 100644
index 0000000..4fb29d3
--- /dev/null
+++ b/src/keycloak-theme/pages/MyExtraPage2.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+
+import { useKcStoryData } from '../../../.storybook/data'
+
+export default {
+  title: 'My Extra Page 2',
+  component: KcApp,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof KcApp>;
+
+const pageId = 'my-extra-page-2.ftl'
+
+export const Default = () => {
+  const { kcContext } = useKcStoryData({ pageId })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const InFrench = () => {
+  const { kcContext } = useKcStoryData({ pageId, locale: { currentLanguageTag: 'fr' } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithCustomValue = () => {
+  const { kcContext } = useKcStoryData({ pageId, someCustomValue: 'Foo Bar Baz' })
+  return <KcApp kcContext={kcContext} />
+}
diff --git a/src/keycloak-theme/pages/Register.stories.tsx b/src/keycloak-theme/pages/Register.stories.tsx
new file mode 100644
index 0000000..2fac548
--- /dev/null
+++ b/src/keycloak-theme/pages/Register.stories.tsx
@@ -0,0 +1,69 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+
+import { useKcStoryData, socialProviders } from '../../../.storybook/data'
+
+export default {
+  title: 'Register',
+  component: KcApp,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof KcApp>;
+
+const pageId = 'register.ftl'
+
+export const Default = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const InFrench = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, locale: { currentLanguageTag: 'fr' } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithError = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: { type: "error", summary: "This is an error" } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const EmailIsUsername = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined,
+    realm: { registrationEmailAsUsername: true }
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const NoPassword = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined, passwordRequired: false
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithRecaptcha = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined,
+    recaptchaRequired: true,
+    recaptchaSiteKey: 'foobar'
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithPresets = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined,
+    register: {
+      formData: {
+        firstName: 'Max',
+        lastName: 'Mustermann',
+        email: '[email protected]',
+        username: 'max.mustermann'
+      }
+    }
+  })
+  return <KcApp kcContext={kcContext} />
+
+}
+\ No newline at end of file