@keycloakify/angular 0.0.10 → 0.1.0

package/stories/account/pages/totp.stories.ts

@@ -0,0 +1,100 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'account/totp.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'totp.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {
+    globals: {
+        overrides: {
+            totp: {
+                enabled: false,
+                totpSecretEncoded: 'HE4W MSTC OBKU CY2M ONXF OV3Q NYYU I3SH',
+                totpSecret: '99fJbpUAcLsnWWpn1DnG',
+                manualUrl:
+                    'http://localhost:8080/realms/myrealm/account/totp?mode=manual',
+                totpSecretQrCode:
+                    'iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACk0lEQVR4Xu2YQY6DMAxFjViw5AjcBC6GBBIXozfJEbpkger53wEKqOpmFvaikQYNeVRyHPvbiejXscp95jp+/D5zHT9+n7kO8qeIFDqKzjJo9dC1wUSPP7yG4IPq41lq9ZK+keLZSwXDGwMhOCZgdX4sBVD1qld+GYg/h6ScreBuIDo5FKfVM7Z8aWs9PB2E2/73DdOlwUrK9Ck+HDnzB7ziR8fjlD/OPI8pVQwCi899TkNw2M+tp9XSLFKPIq2UySIhBB906fCQTicFwiv1EUG6+d+bl4zPIYnUk5oIcS69/evPYStUp6P0dJhD/mhauijcth76mOsfw+GFrbfXKJx7LW2N15kijuWIMCYicLQOCEimDp1c0L8PzCLTs3/d+ZQLyl6VqeSIT9nz25szf2ZybHgC31yrXEQIbqaPjX0k9GqWy0N/nLkagsHWNXR0LZwsR357c0pjC6fm+meu5f6f6oszz/qj7GpYCdHf0LVH/gTgtJ/5bVavPJ9svwnBS9qaqwoHOh3G7Ln++HIIDgpKYpFW00dlkX7ruz836THBWQpzd23/xeDsFVroz15fRjsfMyaC8JX2Y8PZf+VIoKff+uTO6WSIUIfSkrl9/rbfnbPr30R8hnMtXA/98ea5lx4ZlSMgQlMsEnb73XnP+yNl/SuR3/lzTSZHMTirMpMcXjWr0U5Mp/rnzmk/TsXkC2/iKEJ5TRG4DZ5KrP/C0RiVmkp+5I8zN1uh2vv9Vs+bzJ4947Y+bz6wl6ZIcv87ZaU2+6PwnoKdb7VYmrf9Z02MxCmNdmparbVJtrA4nA+e9LgIS6dzfvly7j+4XWIuPJp8iE9PbvkzJHYNabt/o5MP+535t/Hj95nr+PH7zHX8m/8B+RAnloz5pi4AAAAASUVORK5CYII=',
+                policy: {
+                    type: 'totp'
+                },
+                qrUrl: 'http://localhost:8080/realms/myrealm/account/totp?mode=qr',
+                otpCredentials: []
+            },
+            messagesPerField: {},
+            stateChecker: 'ihTeSAMfNsobnPjYiktV8DY-5T4sVzVdrEZRdwfMm8Y',
+            realm: {
+                userManagedAccessAllowed: true,
+                internationalizationEnabled: false
+            },
+            url: {
+                totpUrl: 'http://localhost:8080/realms/myrealm/account/totp'
+            },
+            keycloakifyVersion: '9.6.1',
+            themeVersion: '1.0.10',
+            themeType: 'account',
+            themeName: 'keycloakify',
+            pageId: 'totp.ftl'
+        }
+    }
+};
+
+export const WithTotpEnabled: Story = {
+    globals: {
+        overrides: {
+            totp: {
+                enabled: true,
+                totpSecretEncoded: 'G55E MZKC JFUD MQLT MFIF EVSB JFLG M6SO',
+                totpSecret: '7zFeBIh6AsaPRVAIVfzN',
+                manualUrl:
+                    'http://localhost:8080/realms/myrealm/account/totp?mode=manual',
+                supportedApplications: [
+                    'totpAppFreeOTPName',
+                    'totpAppMicrosoftAuthenticatorName',
+                    'totpAppGoogleName'
+                ],
+                totpSecretQrCode:
+                    'iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACo0lEQVR4Xu2YPY6DMBCFJ6JwyRF8k+RiSCBxsXATjkDpAmX2vTGBwErbbDFTZIps4s8rmfl9RvRPW+W6crYvv66c7cuvK2cjX0Tkho9yW/q5PHSc5QYA62PwXnWqmzrRSUdNL+mygRC8kzQZWhqVO1CRds3YHopnfUkzp2c7ZAY+GIdXywOb0qsdJMXiFn9serYrncxNv/PDkdfUzObk/eNaX368mnl1kML8RH1vFoGzargA1DM/VeWhOpf9+by5iL5Q0NaEUETslHiSIz+dOc4q0tqBrcg7IsnpnZ8BeLmjqjFa4Fps4vlR3484nFHH6OP8o1cTc4I/Q3D4Uqw1TjpkeHqc2R/Rjvb89OUUDAL/CpycOf/o6fUjP505/phrOf8wn+tolsxyD8GZnzyrJSScrNyEcXhHJwrBh2yj2fShPlFB2PQxn935aK1HIB1G1nczm8+P+nbmC7si+zell53a4i97fnhz5Gddxc9iSgLPpPifGn9vDqN0YBL0lpozdx7nd+dDHSiFXkV+NlZO85Efzvzda8yrwkylvlEbhxE4bTJpiCEIkWNHbxD/w/++fJMOVX8p5Q70F0V2EI4LsUWd+ov6Wtgu5aM/OXNIf6jWbKq6zmekA77t88WZr5lXO6vvWaj6kbNo4nv/ceaon0TpYPqrmNJhue/x9+ZKLchbO+cLPrb+aI09BLeob1en2nqkKsUYfOvatSGa/ircmD7i78rNmJoYzXwIKh228z3+ztzef+Cb6S/lSxoWOXM2CO/ZuvlqARtLvX8u1Ie6+d+bd/X9pdS3lrrF/8jPCPytv9AVIbfvddxE4iNFLKL+hH/xCNudKgTvGX/r33ars/y062gQjljfWN8cyKm+f2NPOvqTL//Lvvy6crYvv66c7d/8B/9RFjk6Tp30AAAAAElFTkSuQmCC',
+                policy: {
+                    type: 'totp',
+                    algorithm: 'HmacSHA1'
+                },
+                qrUrl: 'http://localhost:8080/realms/myrealm/account/totp?mode=qr',
+                otpCredentials: [
+                    {
+                        id: '7afaaf7d-f2d5-44f5-a966-e5297f0b2b7a',
+                        userLabel: 'mobile'
+                    }
+                ]
+            },
+            message: {
+                summary: 'Mobile authenticator configured.',
+                type: 'success'
+            },
+            url: {
+                totpUrl: 'http://localhost:8080/realms/myrealm/account/totp'
+            },
+            messagesPerField: {},
+            stateChecker: '0UvyCNJHRJXmdahtRmn0tTPCU2nwLtWBUfPwpJ8Ohkw',
+            realm: {
+                userManagedAccessAllowed: true,
+                internationalizationEnabled: false
+            },
+            keycloakifyVersion: '9.6.1',
+            themeVersion: '1.0.10',
+            themeType: 'account',
+            themeName: 'keycloakify',
+            pageId: 'totp.ftl'
+        }
+    }
+};

package/stories/login/pages/code.stories.ts

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/code.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'code.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithErrorCode: Story = {
+    globals: {
+        overrides: {
+            code: {
+                success: false,
+                error: 'Failed to generate code'
+            }
+        }
+    }
+};
+export const WithFrenchLanguage: Story = {
+    globals: {
+        overrides: {
+            locale: {
+                currentLanguageTag: 'fr'
+            },
+            code: {
+                success: true,
+                code: 'XYZ789'
+            }
+        }
+    }
+};
+
+export const WithHtmlErrorMessage: Story = {
+    globals: {
+        overrides: {
+            code: {
+                success: false,
+                error: "Something went wrong. <a href='https://example.com'>Try again</a>"
+            }
+        }
+    }
+};

package/stories/login/pages/delete-account-confirm.stories.ts

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/delete-account-confirm.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'delete-account-confirm.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithAIAFlow: Story = {
+    globals: {
+        overrides: {
+            triggered_from_aia: true,
+            url: { loginAction: '/login-action' }
+        }
+    }
+};
+
+export const WithoutAIAFlow: Story = {
+    globals: {
+        overrides: {
+            triggered_from_aia: false,
+            url: { loginAction: '/login-action' }
+        }
+    }
+};
+
+export const WithCustomButtonStyle: Story = {
+    globals: {
+        overrides: {
+            triggered_from_aia: true,
+            url: { loginAction: '/login-action' }
+        }
+    }
+};

package/stories/login/pages/delete-credential.stories.ts

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/delete-credential.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'delete-credential.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithCustomCredentialLabel: Story = {
+    globals: {
+        overrides: {
+            credentialLabel: 'Test Credential',
+            url: { loginAction: '/login-action' }
+        }
+    }
+};
+
+export const WithSuccessMessage: Story = {
+    globals: {
+        overrides: {
+            message: {
+                type: 'success',
+                summary: 'Credential has been successfully deleted.'
+            }
+        }
+    }
+};
+
+export const WithErrorMessage: Story = {
+    globals: {
+        overrides: {
+            message: {
+                type: 'error',
+                summary: 'Failed to delete the credential. Please try again.'
+            }
+        }
+    }
+};
+
+export const WithDisabledDeleteButton: Story = {
+    globals: {
+        overrides: {
+            isDeleteButtonDisabled: true,
+            credentialLabel: 'Non-deletable Credential'
+        }
+    }
+};

package/stories/login/pages/error.stories.ts

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/error.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'error.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithAnotherMessage: Story = {
+    globals: {
+        overrides: {
+            message: { summary: 'With another error message' }
+        }
+    }
+};
+
+export const WithHtmlErrorMessage: Story = {
+    globals: {
+        overrides: {
+            message: {
+                summary:
+                    "<strong>Error:</strong> Something went wrong. <a href='https://example.com'>Go back</a>"
+            }
+        }
+    }
+};
+
+export const FrenchError: Story = {
+    globals: {
+        overrides: {
+            locale: { currentLanguageTag: 'fr' },
+            message: { summary: "Une erreur s'est produite" }
+        }
+    }
+};
+
+export const WithSkipLink: Story = {
+    globals: {
+        overrides: {
+            message: { summary: 'An error occurred' },
+            skipLink: true,
+            client: {
+                baseUrl: 'https://example.com'
+            }
+        }
+    }
+};

package/stories/login/pages/frontchannel-logout.stories.ts

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/frontchannel-logout.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'frontchannel-logout.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithoutRedirectUrl: Story = {
+    globals: {
+        overrides: {
+            logout: {
+                clients: []
+            }
+        }
+    }
+};

package/stories/login/pages/idp-review-user-profile.stories.ts

@@ -0,0 +1,60 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/idp-review-user-profile.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'idp-review-user-profile.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithFormValidationErrors: Story = {
+    globals: {
+        overrides: {
+            messagesPerField: {
+                existsError: (fieldName: string) =>
+                    ['email', 'firstName'].includes(fieldName),
+                get: (fieldName: string) => {
+                    if (fieldName === 'email') return 'Invalid email format.';
+                    if (fieldName === 'firstName') return 'First name is required.';
+                    return '';
+                }
+            }
+        }
+    }
+};
+
+export const WithReadOnlyFields: Story = {
+    globals: {
+        overrides: {
+            profile: {
+                attributesByName: {
+                    email: { value: 'jane.doe@example.com', readOnly: true },
+                    firstName: { value: 'Jane', readOnly: false }
+                }
+            }
+        }
+    }
+};
+
+export const WithPrefilledFormFields: Story = {
+    globals: {
+        overrides: {
+            profile: {
+                attributesByName: {
+                    firstName: { value: 'Jane' },
+                    lastName: { value: 'Doe' },
+                    email: { value: 'jane.doe@example.com' }
+                }
+            }
+        }
+    }
+};

package/stories/login/pages/info.stories.ts

@@ -0,0 +1,94 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/info.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'info.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {
+    globals: {
+        overrides: {
+            message: {
+                summary: 'Server info message'
+            }
+        }
+    }
+};
+
+export const WithLinkBack: Story = {
+    globals: {
+        overrides: {
+            message: {
+                summary: 'Server message'
+            },
+            actionUri: undefined
+        }
+    }
+};
+
+export const WithRequiredActions: Story = {
+    globals: {
+        overrides: {
+            message: {
+                summary: 'Required actions: '
+            },
+            requiredActions: [
+                'CONFIGURE_TOTP',
+                'UPDATE_PROFILE',
+                'VERIFY_EMAIL',
+                'CUSTOM_ACTION'
+            ],
+            'x-keycloakify': {
+                messages: {
+                    'requiredAction.CUSTOM_ACTION': 'Custom action'
+                }
+            }
+        }
+    }
+};
+
+export const WithPageRedirect: Story = {
+    globals: {
+        overrides: {
+            message: { summary: 'You will be redirected shortly.' },
+            pageRedirectUri: 'https://example.com'
+        }
+    }
+};
+
+export const WithoutClientBaseUrl: Story = {
+    globals: {
+        overrides: {
+            message: { summary: 'No client base URL defined.' },
+            client: { baseUrl: undefined }
+        }
+    }
+};
+
+export const WithMessageHeader: Story = {
+    globals: {
+        overrides: {
+            messageHeader: 'Important Notice',
+            message: { summary: 'This is an important message.' }
+        }
+    }
+};
+
+export const WithAdvancedMessage: Story = {
+    globals: {
+        overrides: {
+            message: {
+                summary:
+                    'Please take note of this <strong>important</strong> information.'
+            }
+        }
+    }
+};

package/stories/login/pages/login-config-totp.stories.ts

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-config-totp.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-config-totp.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithManualSetUp: Story = {
+    globals: {
+        overrides: {
+            mode: 'manual'
+        }
+    }
+};
+
+export const WithError: Story = {
+    globals: {
+        overrides: {
+            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
+            }
+        }
+    }
+};
+
+export const WithAppInitiatedAction: Story = {
+    globals: {
+        overrides: {
+            isAppInitiatedAction: true
+        }
+    }
+};
+
+export const WithPreFilledUserLabel: Story = {
+    globals: {
+        overrides: {
+            totp: {
+                otpCredentials: [{ userLabel: 'MyDevice' }]
+            }
+        }
+    }
+};

package/stories/login/pages/login-device-verify-user-code.stories.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-device-verify-user-code.ftl',
+    component: KcPageStory,
+    decorators: decorators
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};

package/stories/login/pages/login-idp-link-confirm-override.stories.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-idp-link-confirm-override.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-idp-link-confirm-override.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};

package/stories/login/pages/login-idp-link-confirm.stories.ts

@@ -0,0 +1,103 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+// Mock kcContext to avoid errors
+const mockKcContext = {
+    url: {
+        loginAction: '/login-action'
+    },
+    idpAlias: 'mockIdpAlias',
+    brokerContext: {
+        username: 'mockUser'
+    },
+    realm: {
+        displayName: 'MockRealm'
+    }
+};
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-idp-link-confirm.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-idp-link-confirm.ftl',
+        overrides: {
+            kcContext: mockKcContext
+        }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+/**
+ * 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 = {};
+
+/**
+ * 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 = {
+    globals: {
+        overrides: {
+            ...mockKcContext,
+            idpAlias: 'Google',
+            brokerContext: {
+                username: 'john.doe'
+            },
+            realm: {
+                displayName: 'MyRealm'
+            }
+        }
+    }
+};
+
+/**
+ * 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 = {
+    globals: {
+        overrides: {
+            ...mockKcContext,
+            idpAlias: 'Facebook',
+            brokerContext: {
+                username: 'jane.doe'
+            },
+            realm: {
+                displayName: 'CUSTOM REALM DISPLAY NAME'
+            }
+        }
+    }
+};
+
+/**
+ * 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 = {
+    globals: {
+        overrides: {
+            ...mockKcContext,
+            url: {
+                loginAction: '/error'
+            },
+            message: {
+                type: 'error',
+                summary: 'An error occurred during form submission.'
+            }
+        }
+    }
+};