keycloakify 11.3.9-rc.0 → 11.3.9

package/stories/account/pages/Password.stories.tsx

@@ -26,3 +26,79 @@ export const WithMessage: Story = {
         />
     )
 };
+/**
+ * FirstTimePasswordSetup:
+ * - Purpose: Tests the page when no password is set (e.g., first login).
+ * - Scenario: This renders the form without the current password field.
+ * - Key Aspect: Ensures the page only displays fields for setting a new password.
+ */
+export const FirstTimePasswordSetup: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                account: {
+                    username: "john_doe"
+                },
+                password: {
+                    passwordSet: false
+                },
+                url: {
+                    passwordUrl: "/password"
+                },
+                stateChecker: "state-checker"
+            }}
+        />
+    )
+};
+
+/**
+ * IncorrectCurrentPassword:
+ * - Purpose: Simulates validation error when the current password is incorrect.
+ * - Scenario: This renders the page with an error message indicating the current password is incorrect.
+ * - Key Aspect: Validates that an error message is correctly displayed for the current password input.
+ */
+export const IncorrectCurrentPassword: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: { type: "error", summary: "Incorrect current password." },
+                account: {
+                    username: "john_doe"
+                },
+                password: {
+                    passwordSet: true
+                },
+                url: {
+                    passwordUrl: "/password"
+                },
+                stateChecker: "state-checker"
+            }}
+        />
+    )
+};
+
+/**
+ * SubmissionSuccessWithRedirect:
+ * - Purpose: Simulates a successful form submission with a redirect or success message.
+ * - Scenario: After successfully changing the password, a success message and redirect behavior are triggered.
+ * - Key Aspect: Verifies the handling of successful submissions.
+ */
+export const SubmissionSuccessWithRedirect: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: { type: "success", summary: "Password successfully changed." },
+                account: {
+                    username: "john_doe"
+                },
+                password: {
+                    passwordSet: true
+                },
+                url: {
+                    passwordUrl: "/password"
+                },
+                stateChecker: "state-checker"
+            }}
+        />
+    )
+};

package/stories/account/pages/Sessions.stories.tsx

@@ -57,3 +57,97 @@ export const WithError: Story = {
         />
     )
 };
+/**
+ * No active sessions scenario:
+ * - Simulates the scenario where no sessions are active for the user.
+ */
+export const NoActiveSessions: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                sessions: {
+                    sessions: []
+                },
+                stateChecker: "randomStateCheckerValue"
+            }}
+        />
+    )
+};
+
+/**
+ * Single session scenario:
+ * - Displays only one active session with session details.
+ */
+export const SingleSession: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                sessions: {
+                    sessions: [
+                        {
+                            expires: "2024-04-26T18:14:19Z",
+                            clients: ["account"],
+                            ipAddress: "172.20.0.1",
+                            started: "2024-04-26T08:14:19Z",
+                            lastAccess: "2024-04-26T08:30:54Z",
+                            id: "single-session-id"
+                        }
+                    ]
+                },
+                stateChecker: "anotherStateChecker"
+            }}
+        />
+    )
+};
+
+/**
+ * Multiple clients per session scenario:
+ * - Displays sessions where each session has multiple associated clients.
+ */
+export const MultipleClientsSession: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                sessions: {
+                    sessions: [
+                        {
+                            expires: "2024-04-26T18:14:19Z",
+                            clients: ["account", "admin-console", "another-client"],
+                            ipAddress: "172.20.0.1",
+                            started: "2024-04-26T08:14:19Z",
+                            lastAccess: "2024-04-26T08:30:54Z",
+                            id: "multiple-clients-session"
+                        }
+                    ]
+                },
+                stateChecker: "multiClientsStateChecker"
+            }}
+        />
+    )
+};
+
+/**
+ * Session without client details scenario:
+ * - Simulates a session where no client information is provided.
+ */
+export const SessionWithoutClients: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                sessions: {
+                    sessions: [
+                        {
+                            expires: "2024-04-26T18:14:19Z",
+                            clients: [], // No clients information
+                            ipAddress: "172.20.0.1",
+                            started: "2024-04-26T08:14:19Z",
+                            lastAccess: "2024-04-26T08:30:54Z",
+                            id: "no-clients-session"
+                        }
+                    ]
+                },
+                stateChecker: "noClientsStateChecker"
+            }}
+        />
+    )
+};

package/stories/account/pages/Totp.stories.tsx

@@ -180,3 +180,64 @@ export const MoreThanOneTotpProviders: Story = {
         />
     )
 };
+
+// TOTP Enabled but No Existing OTP Credentials
+export const TotpEnabledNoOtpCredentials: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                totp: {
+                    enabled: true,
+                    totpSecretEncoded: "HE4W MSTC OBKU CY2M",
+                    otpCredentials: [] // No OTP Credentials
+                },
+                stateChecker: "stateChecker123",
+                url: {
+                    totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
+                }
+            }}
+        />
+    )
+};
+
+// Manual Mode TOTP without Scanning
+export const ManualModeTotp: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                mode: "manual", // Manual mode
+                totp: {
+                    enabled: false,
+                    totpSecretEncoded: "HE4W MSTC OBKU CY2M",
+                    otpCredentials: []
+                },
+                stateChecker: "stateChecker123",
+                url: {
+                    totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
+                }
+            }}
+        />
+    )
+};
+
+// Multiple OTP Devices Scenario
+export const MultipleOtpDevices: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                totp: {
+                    enabled: true,
+                    totpSecretEncoded: "G55E MZKC JFUD",
+                    otpCredentials: [
+                        { id: "1", userLabel: "Phone 1" },
+                        { id: "2", userLabel: "Tablet" }
+                    ]
+                },
+                stateChecker: "stateChecker123",
+                url: {
+                    totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginIdpLinkConfirm.stories.tsx

@@ -2,6 +2,14 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { createKcPageStory } from "../KcPageStory";
 
+// Mock kcContext to avoid the TS2304 error
+const mockKcContext = {
+    url: {
+        loginAction: "/login-action"
+    },
+    idpAlias: "mockIdpAlias"
+};
+
 const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-confirm.ftl" });
 
 const meta = {
@@ -13,6 +21,35 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/**
+ * Default:
+ * - Purpose: Tests standard behavior with mock data.
+ * - Scenario: The component renders with a mocked identity provider alias (`mockIdpAlias`) and a login action URL (`/login-action`).
+ * - Key Aspect: Ensures the default behavior of the component with standard values for kcContext.
+ */
 export const Default: Story = {
-    render: () => <KcPageStory />
+    render: () => <KcPageStory kcContext={mockKcContext} />
+};
+
+/**
+ * WithFormSubmissionError:
+ * - Purpose: Tests how the component handles form submission errors.
+ * - Scenario: Simulates a form submission error by setting the login action URL to `/error` and displays an error message.
+ * - Key Aspect: Verifies that the component can display error messages during form submission failure, ensuring proper error handling.
+ */
+export const WithFormSubmissionError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                ...mockKcContext,
+                url: {
+                    loginAction: "/error"
+                },
+                message: {
+                    type: "error",
+                    summary: "An error occurred during form submission."
+                }
+            }}
+        />
+    )
 };

package/stories/login/pages/LoginIdpLinkEmail.stories.tsx

@@ -2,6 +2,20 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { createKcPageStory } from "../KcPageStory";
 
+// Mock kcContext to avoid TS2304 error and to simulate the real environment
+const mockKcContext = {
+    url: {
+        loginAction: "/login-action"
+    },
+    idpAlias: "mockIdpAlias",
+    brokerContext: {
+        username: "mockUser"
+    },
+    realm: {
+        displayName: "MockRealm"
+    }
+};
+
 const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-email.ftl" });
 
 const meta = {
@@ -13,13 +27,27 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/**
+ * Default:
+ * - Purpose: Tests the default behavior with mock data.
+ * - Scenario: The component renders with a mocked identity provider alias (`mockIdpAlias`), a default broker username (`mockUser`), and a default realm name (`MockRealm`).
+ * - Key Aspect: Ensures the default behavior of the component with typical kcContext values.
+ */
 export const Default: Story = {
-    render: () => <KcPageStory />
+    render: () => <KcPageStory kcContext={mockKcContext} />
 };
+
+/**
+ * WithIdpAlias:
+ * - Purpose: Tests behavior when the idpAlias is set to "Google".
+ * - Scenario: Simulates the component being used with a Google identity provider, showing the username "john.doe" and realm "MyRealm".
+ * - Key Aspect: Ensures the correct identity provider alias ("Google") and broker context (user info) are displayed in the email linking instructions.
+ */
 export const WithIdpAlias: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
+                ...mockKcContext,
                 idpAlias: "Google",
                 brokerContext: {
                     username: "john.doe"
@@ -31,32 +59,47 @@ export const WithIdpAlias: Story = {
         />
     )
 };
-export const WithoutIdpAlias: Story = {
+
+/**
+ * WithCustomRealmDisplayName:
+ * - Purpose: Tests behavior when the realm display name is customized.
+ * - Scenario: Simulates the component with a Facebook identity provider, a broker username "jane.doe", and a custom realm name "CustomRealm".
+ * - Key Aspect: Ensures that custom realm display names are rendered correctly alongside the idpAlias and broker context.
+ */
+export const WithCustomRealmDisplayName: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
-                idpAlias: undefined,
+                ...mockKcContext,
+                idpAlias: "Facebook",
                 brokerContext: {
-                    username: "john.doe"
+                    username: "jane.doe"
                 },
                 realm: {
-                    displayName: "MyRealm"
+                    displayName: "CUSTOM REALM DISPLAY NAME"
                 }
             }}
         />
     )
 };
 
-export const WithCustomRealmDisplayName: Story = {
+/**
+ * WithFormSubmissionError:
+ * - Purpose: Tests how the component handles form submission errors.
+ * - Scenario: Simulates a form submission error by setting the login action URL to `/error` and displays an error message.
+ * - Key Aspect: Verifies that the component can display error messages during form submission failure, ensuring proper error handling.
+ */
+export const WithFormSubmissionError: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
-                idpAlias: "Facebook",
-                brokerContext: {
-                    username: "jane.doe"
+                ...mockKcContext,
+                url: {
+                    loginAction: "/error"
                 },
-                realm: {
-                    displayName: "CustomRealm"
+                message: {
+                    type: "error",
+                    summary: "An error occurred during form submission."
                 }
             }}
         />

package/stories/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx

@@ -16,3 +16,47 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithErrorMessage:
+ * - Purpose: Tests when there is an error with the OAuth2 device user code entry.
+ * - Scenario: The component renders with an error message displayed to the user.
+ * - Key Aspect: Ensures the error message is properly shown when the user enters an invalid code.
+ */
+export const WithErrorMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    oauth2DeviceVerificationAction: "/mock-oauth2-device-verification"
+                },
+                message: {
+                    summary: "The user code you entered is invalid. Please try again.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithEmptyInputField:
+ * - Purpose: Tests when the user code field is left empty.
+ * - Scenario: The component renders the form, and the user tries to submit without entering any code.
+ * - Key Aspect: Ensures the form displays validation errors when the field is left empty.
+ */
+export const WithEmptyInputField: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    oauth2DeviceVerificationAction: "/mock-oauth2-device-verification"
+                },
+                message: {
+                    summary: "User code cannot be empty. Please enter a valid code.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginOauthGrant.stories.tsx

@@ -2,6 +2,25 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { createKcPageStory } from "../KcPageStory";
 
+// Mock kcContext to simulate real environment
+const mockKcContext = {
+    url: {
+        oauthAction: "/oauth-action"
+    },
+    oauth: {
+        clientScopesRequested: [{ consentScreenText: "Scope1", dynamicScopeParameter: "dynamicScope1" }, { consentScreenText: "Scope2" }],
+        code: "mockCode"
+    },
+    client: {
+        attributes: {
+            policyUri: "https://twitter.com/en/tos",
+            tosUri: "https://twitter.com/en/privacy"
+        },
+        name: "Twitter",
+        clientId: "twitter-client-id"
+    }
+};
+
 const { KcPageStory } = createKcPageStory({ pageId: "login-oauth-grant.ftl" });
 
 const meta = {
@@ -13,6 +32,55 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/**
+ * Default:
+ * - Purpose: Tests the default behavior with meaningful logo (Twitter).
+ * - Scenario: The component renders with Twitter as the client, displaying its logo, policy, and terms of service links.
+ * - Key Aspect: Ensures the component works with a realistic `logoUri` and client name.
+ */
 export const Default: Story = {
-    render: () => <KcPageStory />
+    render: () => <KcPageStory kcContext={mockKcContext} />
+};
+
+/**
+ * WithoutScopes:
+ * - Purpose: Tests the component when no OAuth scopes are requested.
+ * - Scenario: The component renders with no scopes listed under the consent screen.
+ * - Key Aspect: Ensures the component renders correctly when there are no requested scopes.
+ */
+export const WithoutScopes: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                ...mockKcContext,
+                oauth: {
+                    ...mockKcContext.oauth,
+                    clientScopesRequested: []
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithFormSubmissionError:
+ * - Purpose: Tests how the component handles form submission errors.
+ * - Scenario: The `oauthAction` URL is set to an error route and an error message is displayed.
+ * - Key Aspect: Ensures that the component can display error messages when form submission fails.
+ */
+export const WithFormSubmissionError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                ...mockKcContext,
+                url: {
+                    oauthAction: "/error"
+                },
+                message: {
+                    type: "error",
+                    summary: "An error occurred during form submission."
+                }
+            }}
+        />
+    )
 };

package/stories/login/pages/LoginOtp.stories.tsx

@@ -16,3 +16,113 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * MultipleOtpCredentials:
+ * - Purpose: Tests the behavior when the user has multiple OTP credentials to choose from.
+ * - Scenario: Simulates the scenario where the user is presented with multiple OTP credentials and must select one to proceed.
+ * - Key Aspect: Ensures that multiple OTP credentials are listed and selectable, and the correct credential is selected by default.
+ */
+export const MultipleOtpCredentials: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                otpLogin: {
+                    userOtpCredentials: [
+                        { id: "credential1", userLabel: "Device 1" },
+                        { id: "credential2", userLabel: "Device 2" },
+                        { id: "credential2", userLabel: "Device 3" },
+                        { id: "credential2", userLabel: "Device 4" },
+                        { id: "credential2", userLabel: "Device 5" },
+                        { id: "credential2", userLabel: "Device 6" }
+                    ],
+                    selectedCredentialId: "credential1"
+                },
+                url: {
+                    loginAction: "/login-action"
+                },
+                messagesPerField: {
+                    existsError: () => false
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithOtpError:
+ * - Purpose: Tests the behavior when an error occurs with the OTP field (e.g., invalid OTP code).
+ * - Scenario: Simulates an invalid OTP code scenario where an error message is displayed.
+ * - Key Aspect: Ensures that the OTP input displays error messages correctly and the error is visible.
+ */
+export const WithOtpError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                otpLogin: {
+                    userOtpCredentials: []
+                },
+                url: {
+                    loginAction: "/login-action"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "totp",
+                    get: () => "Invalid OTP code"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * NoOtpCredentials:
+ * - Purpose: Tests the behavior when no OTP credentials are provided for the user.
+ * - Scenario: Simulates the scenario where the user is not presented with any OTP credentials, and only the OTP input is displayed.
+ * - Key Aspect: Ensures that the component handles cases where there are no user OTP credentials, and the user is only prompted for the OTP code.
+ */
+export const NoOtpCredentials: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                otpLogin: {
+                    userOtpCredentials: []
+                },
+                url: {
+                    loginAction: "/login-action"
+                },
+                messagesPerField: {
+                    existsError: () => false
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithErrorAndMultipleOtpCredentials:
+ * - Purpose: Tests behavior when there is both an error in the OTP field and multiple OTP credentials.
+ * - Scenario: Simulates the case where the user has multiple OTP credentials and encounters an error with the OTP input.
+ * - Key Aspect: Ensures that the component can handle both multiple OTP credentials and display an error message simultaneously.
+ */
+export const WithErrorAndMultipleOtpCredentials: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                otpLogin: {
+                    userOtpCredentials: [
+                        { id: "credential1", userLabel: "Device 1" },
+                        { id: "credential2", userLabel: "Device 2" }
+                    ],
+                    selectedCredentialId: "credential1"
+                },
+                url: {
+                    loginAction: "/login-action"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "totp",
+                    get: () => "Invalid OTP code"
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginPageExpired.stories.tsx

@@ -16,3 +16,26 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithErrorMessage:
+ * - Purpose: Tests behavior when an error message is displayed along with the page expiration message.
+ * - Scenario: Simulates a case where the session expired due to an error, and an error message is displayed alongside the expiration message.
+ * - Key Aspect: Ensures that error messages are displayed correctly in addition to the page expiration notice.
+ */
+export const WithErrorMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginRestartFlowUrl: "/mock-restart-flow",
+                    loginAction: "/mock-continue-login"
+                },
+                message: {
+                    type: "error",
+                    summary: "An error occurred while processing your session."
+                }
+            }}
+        />
+    )
+};