keycloakify 11.3.9-rc.0 → 11.3.9

package/stories/login/pages/LoginPassword.stories.tsx

@@ -16,3 +16,54 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithPasswordError:
+ * - Purpose: Tests the behavior when an error occurs in the password field (e.g., incorrect password).
+ * - Scenario: Simulates a scenario where an invalid password is entered, and an error message is displayed.
+ * - Key Aspect: Ensures that the password input field displays error messages correctly.
+ */
+export const WithPasswordError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: {
+                    resetPasswordAllowed: true
+                },
+                url: {
+                    loginAction: "/mock-login",
+                    loginResetCredentialsUrl: "/mock-reset-password"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "password",
+                    get: () => "Invalid password"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithoutResetPasswordOption:
+ * - Purpose: Tests the behavior when the reset password option is disabled.
+ * - Scenario: Simulates a scenario where the `resetPasswordAllowed` is set to `false`, and the "Forgot Password" link is not rendered.
+ * - Key Aspect: Ensures that the component handles cases where resetting the password is not allowed.
+ */
+export const WithoutResetPasswordOption: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: {
+                    resetPasswordAllowed: false
+                },
+                url: {
+                    loginAction: "/mock-login",
+                    loginResetCredentialsUrl: "/mock-reset-password"
+                },
+                messagesPerField: {
+                    existsError: () => false
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx

@@ -16,3 +16,25 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithErrorDuringCodeGeneration:
+ * - Purpose: Tests when an error occurs while generating recovery authentication codes.
+ * - Scenario: The component renders an error message to inform the user of the failure during code generation.
+ * - Key Aspect: Ensures that error messages are properly displayed when recovery code generation fails.
+ */
+export const WithErrorDuringCodeGeneration: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                message: {
+                    summary: "An error occurred during recovery code generation. Please try again.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginResetOtp.stories.tsx

@@ -16,3 +16,82 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithoutOtpCredentials:
+ * - Purpose: Tests the behavior when no OTP credentials are available.
+ * - Scenario: The component renders without any OTP credentials, showing only the submit button.
+ * - Key Aspect: Ensures that the component handles the absence of OTP credentials correctly.
+ */
+export const WithoutOtpCredentials: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login"
+                },
+                configuredOtpCredentials: {
+                    userOtpCredentials: [],
+                    selectedCredentialId: undefined
+                },
+                messagesPerField: {
+                    existsError: () => false
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithOtpError:
+ * - Purpose: Tests the behavior when an error occurs with the OTP selection.
+ * - Scenario: Simulates a scenario where an error occurs (e.g., no OTP selected), and an error message is displayed.
+ * - Key Aspect: Ensures that error messages are displayed correctly for OTP-related errors.
+ */
+export const WithOtpError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login"
+                },
+                configuredOtpCredentials: {
+                    userOtpCredentials: [
+                        { id: "otp1", userLabel: "Device 1" },
+                        { id: "otp2", userLabel: "Device 2" }
+                    ],
+                    selectedCredentialId: "otp1"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "totp",
+                    get: () => "Invalid OTP selection"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithOnlyOneOtpCredential:
+ * - Purpose: Tests the behavior when there is only one OTP credential available.
+ * - Scenario: Simulates the case where the user has only one OTP credential, and it is pre-selected by default.
+ * - Key Aspect: Ensures that the component renders correctly with only one OTP credential pre-selected.
+ */
+export const WithOnlyOneOtpCredential: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login"
+                },
+                configuredOtpCredentials: {
+                    userOtpCredentials: [{ id: "otp1", userLabel: "Device 1" }],
+                    selectedCredentialId: "otp1"
+                },
+                messagesPerField: {
+                    existsError: () => false
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginResetPassword.stories.tsx

@@ -29,3 +29,33 @@ export const WithEmailAsUsername: Story = {
         />
     )
 };
+/**
+ * WithUsernameError:
+ * - Purpose: Tests behavior when an error occurs with the username input (e.g., invalid username).
+ * - Scenario: The component displays an error message next to the username input field.
+ * - Key Aspect: Ensures the username input shows error messages when validation fails.
+ */
+export const WithUsernameError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: {
+                    loginWithEmailAllowed: false,
+                    registrationEmailAsUsername: false,
+                    duplicateEmailsAllowed: false
+                },
+                url: {
+                    loginAction: "/mock-login-action",
+                    loginUrl: "/mock-login-url"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "username",
+                    get: () => "Invalid username"
+                },
+                auth: {
+                    attemptedUsername: "invalid_user"
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginUpdatePassword.stories.tsx

@@ -16,3 +16,49 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithPasswordError:
+ * - Purpose: Tests when there is an error in the password input (e.g., invalid password).
+ * - Scenario: Simulates the case where the user enters an invalid password, and an error message is displayed.
+ * - Key Aspect: Ensures the password input field shows an error message when validation fails.
+ */
+export const WithPasswordError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "password",
+                    get: () => "Password must be at least 8 characters long."
+                },
+                isAppInitiatedAction: false
+            }}
+        />
+    )
+};
+
+/**
+ * WithPasswordConfirmError:
+ * - Purpose: Tests when there is an error in the password confirmation input (e.g., passwords do not match).
+ * - Scenario: Simulates the case where the user enters mismatching passwords, and an error message is displayed in the confirmation field.
+ * - Key Aspect: Ensures that the password confirmation field shows an error when passwords do not match.
+ */
+export const WithPasswordConfirmError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "password-confirm",
+                    get: () => "Passwords do not match."
+                },
+                isAppInitiatedAction: false
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginUpdateProfile.stories.tsx

@@ -16,3 +16,26 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithProfileError:
+ * - Purpose: Tests when an error occurs in one or more profile fields (e.g., invalid email format).
+ * - Scenario: The component displays error messages next to the affected fields.
+ * - Key Aspect: Ensures the profile fields show error messages when validation fails.
+ */
+export const WithProfileError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "email",
+                    get: () => "Invalid email format"
+                },
+                isAppInitiatedAction: false
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginVerifyEmail.stories.tsx

@@ -28,3 +28,78 @@ export const Default: Story = {
         />
     )
 };
+
+/**
+ * WithSuccessMessage:
+ * - Purpose: Tests when the email verification is successful, and the user receives a confirmation message.
+ * - Scenario: The component renders a success message instead of a warning or error.
+ * - Key Aspect: Ensures the success message is displayed correctly when the email is successfully verified.
+ */
+export const WithSuccessMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "Your email has been successfully verified.",
+                    type: "success"
+                },
+                user: {
+                    email: "john.doe@gmail.com"
+                },
+                url: {
+                    loginAction: "/mock-login-action"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithErrorMessage:
+ * - Purpose: Tests when there is an error during the email verification process.
+ * - Scenario: The component renders an error message indicating the email verification failed.
+ * - Key Aspect: Ensures the error message is shown correctly when the verification process encounters an issue.
+ */
+export const WithErrorMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "There was an error verifying your email. Please try again.",
+                    type: "error"
+                },
+                user: {
+                    email: "john.doe@gmail.com"
+                },
+                url: {
+                    loginAction: "/mock-login-action"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithInfoMessage:
+ * - Purpose: Tests when the user is prompted to verify their email without any urgency.
+ * - Scenario: The component renders with an informational message for email verification.
+ * - Key Aspect: Ensures the informational message is displayed properly.
+ */
+export const WithInfoMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "Please verify your email to continue using our services.",
+                    type: "info"
+                },
+                user: {
+                    email: "john.doe@gmail.com"
+                },
+                url: {
+                    loginAction: "/mock-login-action"
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginX509Info.stories.tsx

@@ -16,3 +16,28 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithoutUserEnabled:
+ * - Purpose: Tests when the user is not enabled to log in via x509.
+ * - Scenario: The component renders the certificate details but does not provide the option to log in or cancel.
+ * - Key Aspect: Ensures that the login buttons are not displayed when the user is not enabled.
+ */
+export const WithoutUserEnabled: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                x509: {
+                    formData: {
+                        subjectDN: "CN=John Doe, OU=Example Org, O=Example Inc, C=US",
+                        username: "johndoe",
+                        isUserEnabled: false // User not enabled for login
+                    }
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LogoutConfirm.stories.tsx

@@ -16,3 +16,32 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithCustomLogoutMessage:
+ * - Purpose: Tests when a custom message is displayed for the logout confirmation.
+ * - Scenario: The component renders with a custom logout confirmation message instead of the default one.
+ * - Key Aspect: Ensures the custom logout message is displayed correctly.
+ */
+export const WithCustomLogoutMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    logoutConfirmAction: "/mock-logout-action"
+                },
+                client: {
+                    baseUrl: "/mock-client-url"
+                },
+                logoutConfirm: {
+                    code: "mock-session-code",
+                    skipLink: false
+                },
+                message: {
+                    summary: "Are you sure you want to log out from all sessions?",
+                    type: "warning"
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/SelectAuthenticator.stories.tsx

@@ -82,3 +82,24 @@ export const WithRealmTranslations: Story = {
         />
     )
 };
+
+/**
+ * WithoutAuthenticationSelections:
+ * - Purpose: Tests when no authentication methods are available for selection.
+ * - Scenario: The component renders without any authentication options, providing a default message or fallback.
+ * - Key Aspect: Ensures that the component gracefully handles the absence of available authentication methods.
+ */
+export const WithoutAuthenticationSelections: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                auth: {
+                    authenticationSelections: [] // No authentication methods available
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/UpdateEmail.stories.tsx

@@ -16,3 +16,25 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithAppInitiatedAction:
+ * - Purpose: Tests when the form is displayed as part of an application-initiated action.
+ * - Scenario: The component renders the form with additional buttons like "Cancel."
+ * - Key Aspect: Ensures the "Cancel" button is visible and functional during app-initiated actions.
+ */
+export const WithAppInitiatedAction: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                messagesPerField: {
+                    exists: () => false
+                },
+                isAppInitiatedAction: true
+            }}
+        />
+    )
+};

package/stories/login/pages/WebauthnAuthenticate.stories.tsx

@@ -16,3 +16,144 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithMultipleAuthenticators:
+ * - Purpose: Tests when multiple WebAuthn authenticators are available for selection.
+ * - Scenario: The component renders multiple authenticators, allowing the user to choose between them.
+ * - Key Aspect: Ensures that the available authenticators are displayed, and the user can select one.
+ */
+export const WithMultipleAuthenticators: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                authenticators: {
+                    authenticators: [
+                        {
+                            credentialId: "authenticator-1",
+                            label: "Security Key 1",
+                            transports: {
+                                iconClass: "kcAuthenticatorUsbIcon",
+                                displayNameProperties: ["USB"]
+                            },
+                            createdAt: "2023-01-01"
+                        },
+                        {
+                            credentialId: "authenticator-2",
+                            label: "Security Key 2",
+                            transports: {
+                                iconClass: "kcAuthenticatorNfcIcon",
+                                displayNameProperties: ["NFC"]
+                            },
+                            createdAt: "2023-02-01"
+                        }
+                    ]
+                },
+                shouldDisplayAuthenticators: true
+            }}
+        />
+    )
+};
+
+/**
+ * WithSingleAuthenticator:
+ * - Purpose: Tests when only one WebAuthn authenticator is available.
+ * - Scenario: The component renders the WebAuthn form with a single available authenticator.
+ * - Key Aspect: Ensures the form renders correctly when there is only one authenticator available.
+ */
+export const WithSingleAuthenticator: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                authenticators: {
+                    authenticators: [
+                        {
+                            credentialId: "authenticator-1",
+                            label: "My Security Key",
+                            transports: {
+                                iconClass: "kcAuthenticatorUsbIcon",
+                                displayNameProperties: ["USB"]
+                            },
+                            createdAt: "2023-01-01"
+                        }
+                    ]
+                },
+                shouldDisplayAuthenticators: true
+            }}
+        />
+    )
+};
+
+/**
+ * WithErrorDuringAuthentication:
+ * - Purpose: Tests the behavior when an error occurs during WebAuthn authentication.
+ * - Scenario: The component renders with an error message displayed to the user.
+ * - Key Aspect: Ensures the form handles authentication errors and displays a relevant message.
+ */
+export const WithErrorDuringAuthentication: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                authenticators: {
+                    authenticators: [
+                        {
+                            credentialId: "authenticator-1",
+                            label: "My Security Key",
+                            transports: {
+                                iconClass: "kcAuthenticatorUsbIcon",
+                                displayNameProperties: ["USB"]
+                            },
+                            createdAt: "2023-01-01"
+                        }
+                    ]
+                },
+                shouldDisplayAuthenticators: true,
+                message: {
+                    summary: "An error occurred during WebAuthn authentication.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithJavaScriptDisabled:
+ * - Purpose: Tests the behavior when JavaScript is disabled or not functioning.
+ * - Scenario: The component renders a fallback message prompting the user to enable JavaScript for WebAuthn authentication.
+ * - Key Aspect: Ensures the form provides a clear message when JavaScript is required but unavailable.
+ */
+export const WithJavaScriptDisabled: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                authenticators: {
+                    authenticators: [
+                        {
+                            credentialId: "authenticator-1",
+                            label: "My Security Key",
+                            transports: {
+                                iconClass: "kcAuthenticatorUsbIcon",
+                                displayNameProperties: ["USB"]
+                            },
+                            createdAt: "2023-01-01"
+                        }
+                    ]
+                },
+                shouldDisplayAuthenticators: true
+            }}
+        />
+    )
+};

package/stories/login/pages/WebauthnError.stories.tsx

@@ -16,3 +16,72 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithRetryAvailable:
+ * - Purpose: Tests when the user can retry the WebAuthn authentication after an error.
+ * - Scenario: The component renders with a "Try Again" button to allow retrying the authentication process.
+ * - Key Aspect: Ensures the retry button functionality is visible and the user can retry authentication.
+ */
+export const WithRetryAvailable: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                isAppInitiatedAction: false,
+                message: {
+                    summary: "WebAuthn authentication failed. Please try again.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithAppInitiatedAction:
+ * - Purpose: Tests when the WebAuthn error form is part of an application-initiated action.
+ * - Scenario: The component renders with both a "Try Again" button and a "Cancel" button for app-initiated actions.
+ * - Key Aspect: Ensures the form renders correctly with both "Try Again" and "Cancel" options.
+ */
+export const WithAppInitiatedAction: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                isAppInitiatedAction: true,
+                message: {
+                    summary: "WebAuthn authentication failed. You can try again or cancel.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithJavaScriptDisabled:
+ * - Purpose: Tests the behavior when JavaScript is disabled or not functioning.
+ * - Scenario: The component renders with a message prompting the user to retry manually without JavaScript.
+ * - Key Aspect: Ensures the retry mechanism works properly when JavaScript is disabled or unavailable.
+ */
+export const WithJavaScriptDisabled: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                isAppInitiatedAction: false,
+                message: {
+                    summary: "JavaScript is disabled or not working. Please retry manually.",
+                    type: "warning"
+                }
+            }}
+        />
+    )
+};