Complete migration of storybook from @lordvlad #274

stories/login/pages/Info.stories.tsx

@@ -25,9 +25,64 @@ export const Default = () => (
     <PageStory
         kcContext={{
             message: {
-                summary: "This is the server message",
+                summary: "Server info message",
                 type: "info"
             }
         }}
     />
 );
+
+export const WithWarning = () => (
+    <PageStory
+        kcContext={{
+            message: {
+                summary: "Server warning message",
+                type: "warning"
+            }
+        }}
+    />
+);
+
+export const WithError = () => (
+    <PageStory
+        kcContext={{
+            message: {
+                summary: "Server error message",
+                type: "error"
+            }
+        }}
+    />
+);
+
+export const WithSuccess = () => (
+    <PageStory
+        kcContext={{
+            message: {
+                summary: "Server success message",
+                type: "success"
+            }
+        }}
+    />
+);
+
+export const WithLinkBack = () => (
+    <PageStory
+        kcContext={{
+            message: {
+                summary: "Server message"
+            },
+            actionUri: undefined
+        }}
+    />
+);
+
+export const WithRequiredActions = () => (
+    <PageStory
+        kcContext={{
+            message: {
+                summary: "Server message"
+            },
+            requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL"]
+        }}
+    />
+);

stories/login/pages/LoginConfigTotp.stories.tsx

@@ -22,3 +22,24 @@ const meta: ComponentMeta<any> = {
 export default meta;
 
 export const Default = () => <PageStory />;
+
+export const WithManualSetUp = () => (
+    <PageStory
+        kcContext={{
+            mode: "manual"
+        }}
+    />
+);
+
+export const WithError = () => (
+    <PageStory
+        kcContext={{
+            messagesPerField: {
+                get: (fieldName: string) => (fieldName === "totp" ? "Invalid TOTP" : undefined),
+                exists: (fieldName: string) => fieldName === "totp",
+                existsError: (fieldName: string) => fieldName === "totp",
+                printIfExists: <T,>(fieldName: string, x: T) => (fieldName === "totp" ? x : undefined)
+            }
+        }}
+    />
+);

stories/login/pages/LoginResetPassword.stories.tsx

@@ -22,3 +22,14 @@ const meta: ComponentMeta<any> = {
 export default meta;
 
 export const Default = () => <PageStory />;
+
+export const WithEmailAsUsername = () => (
+    <PageStory
+        kcContext={{
+            realm: {
+                loginWithEmailAllowed: true,
+                registrationEmailAsUsername: true
+            }
+        }}
+    />
+);

stories/login/pages/LoginUsername.stories.tsx

@@ -22,3 +22,14 @@ const meta: ComponentMeta<any> = {
 export default meta;
 
 export const Default = () => <PageStory />;
+
+export const WithEmailAsUsername = () => (
+    <PageStory
+        kcContext={{
+            realm: {
+                loginWithEmailAllowed: true,
+                registrationEmailAsUsername: true
+            }
+        }}
+    />
+);

stories/login/pages/Register.stories.tsx

@@ -22,3 +22,78 @@ const meta: ComponentMeta<any> = {
 export default meta;
 
 export const Default = () => <PageStory />;
+
+export const WithFieldError = () => (
+    <PageStory
+        kcContext={{
+            profile: {
+                attributes: [
+                    {
+                        name: "email",
+                        value: "max.mustermann@gmail.com"
+                    }
+                ]
+            },
+            messagesPerField: {
+                existsError: (fieldName: string) => fieldName === "email",
+                exists: (fieldName: string) => fieldName === "email",
+                get: (fieldName: string) => (fieldName === "email" ? "I don't like your email address" : undefined),
+                printIfExists: <T,>(fieldName: string, x: T) => (fieldName === "email" ? x : undefined)
+            }
+        }}
+    />
+);
+
+export const WithEmailAsUsername = () => (
+    <PageStory
+        kcContext={{
+            realm: {
+                registrationEmailAsUsername: true
+            }
+        }}
+    />
+);
+
+export const WithoutPassword = () => (
+    <PageStory
+        kcContext={{
+            passwordRequired: false
+        }}
+    />
+);
+
+export const WithRecaptcha = () => (
+    <PageStory
+        kcContext={{
+            recaptchaRequired: true,
+            recaptchaSiteKey: "foobar"
+        }}
+    />
+);
+
+export const WithPresets = () => (
+    <PageStory
+        kcContext={{
+            profile: {
+                attributes: [
+                    {
+                        name: "firstName",
+                        value: "Max"
+                    },
+                    {
+                        name: "lastName",
+                        value: "Mustermann"
+                    },
+                    {
+                        name: "email",
+                        value: "max.mustermann@gmail.com"
+                    },
+                    {
+                        name: "username",
+                        value: "max.mustermann"
+                    }
+                ]
+            }
+        }}
+    />
+);

stories/login/pages/SelectAuthenticator.stories.tsx

@@ -22,3 +22,26 @@ const meta: ComponentMeta<any> = {
 export default meta;
 
 export const Default = () => <PageStory />;
+
+export const WithDifferentAuthenticationMethods = () => (
+    <PageStory
+        kcContext={{
+            auth: {
+                authenticationSelections: [
+                    {
+                        authExecId: "25697c4e-0c80-4f2c-8eb7-2c16347e8e8d",
+                        displayName: "auth-username-password-form-display-name",
+                        helpText: "auth-username-password-form-help-text",
+                        iconCssClass: "kcAuthenticatorPasswordClass"
+                    },
+                    {
+                        authExecId: "4cb60872-ce0d-4c8f-a806-e651ed77994b",
+                        displayName: "webauthn-passwordless-display-name",
+                        helpText: "webauthn-passwordless-help-text",
+                        iconCssClass: "kcAuthenticatorWebAuthnPasswordlessClass"
+                    }
+                ]
+            }
+        }}
+    />
+);