@keycloakify/angular 0.0.10 → 0.1.0

package/stories/login/pages/login-verify-email.stories.ts

@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-verify-email.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-verify-email.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {
+    globals: {
+        overrides: {
+            message: {
+                summary: 'You need to verify your email to activate your account.',
+                type: 'warning'
+            },
+            user: {
+                email: 'john.doe@gmail.com'
+            }
+        }
+    }
+};
+
+/**
+ * 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 = {
+    globals: {
+        overrides: {
+            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 = {
+    globals: {
+        overrides: {
+            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 = {
+    globals: {
+        overrides: {
+            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/login-x509-info.stories.ts

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-x509-info.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-x509-info.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+/**
+ * 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 = {
+    globals: {
+        overrides: {
+            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/login.stories.ts

@@ -0,0 +1,260 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithInvalidCredential: Story = {
+    globals: {
+        overrides: {
+            login: {
+                username: 'johndoe'
+            },
+            messagesPerField: {
+                existsError: (fieldName: string, ...otherFieldNames: string[]) => {
+                    const fieldNames = [fieldName, ...otherFieldNames];
+                    return (
+                        fieldNames.includes('username') || fieldNames.includes('password')
+                    );
+                },
+                get: (fieldName: string) => {
+                    return fieldName === 'username' || fieldName === 'password'
+                        ? 'Invalid username or password.'
+                        : '';
+                }
+            }
+        }
+    }
+};
+
+export const WithoutRegistration: Story = {
+    globals: {
+        overrides: {
+            realm: { registrationAllowed: false }
+        }
+    }
+};
+
+export const WithoutRememberMe: Story = {
+    globals: {
+        overrides: {
+            realm: { rememberMe: false }
+        }
+    }
+};
+
+export const WithoutPasswordReset: Story = {
+    globals: {
+        overrides: {
+            realm: { resetPasswordAllowed: false }
+        }
+    }
+};
+
+export const WithEmailAsUsername: Story = {
+    globals: {
+        overrides: {
+            realm: { loginWithEmailAllowed: false }
+        }
+    }
+};
+
+export const WithPresetUsername: Story = {
+    globals: {
+        overrides: {
+            login: { username: 'max.mustermann@mail.com' }
+        }
+    }
+};
+
+export const WithImmutablePresetUsername: Story = {
+    globals: {
+        overrides: {
+            auth: {
+                attemptedUsername: 'max.mustermann@mail.com',
+                showUsername: true
+            },
+            usernameHidden: true,
+            message: {
+                type: 'info',
+                summary: 'Please re-authenticate to continue'
+            }
+        }
+    }
+};
+
+export const WithSocialProviders: Story = {
+    globals: {
+        overrides: {
+            social: {
+                displayInfo: true,
+                providers: [
+                    {
+                        loginUrl: 'google',
+                        alias: 'google',
+                        providerId: 'google',
+                        displayName: 'Google',
+                        iconClasses: 'fa fa-google'
+                    },
+                    {
+                        loginUrl: 'microsoft',
+                        alias: 'microsoft',
+                        providerId: 'microsoft',
+                        displayName: 'Microsoft',
+                        iconClasses: 'fa fa-windows'
+                    },
+                    {
+                        loginUrl: 'facebook',
+                        alias: 'facebook',
+                        providerId: 'facebook',
+                        displayName: 'Facebook',
+                        iconClasses: 'fa fa-facebook'
+                    },
+                    {
+                        loginUrl: 'github',
+                        alias: 'github',
+                        providerId: 'github',
+                        displayName: 'Github',
+                        iconClasses: 'fa fa-github'
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const WithoutPasswordField: Story = {
+    globals: {
+        overrides: {
+            realm: { password: false }
+        }
+    }
+};
+
+export const WithErrorMessage: Story = {
+    globals: {
+        overrides: {
+            message: {
+                summary:
+                    'The time allotted for the connection has elapsed.<br/>The login process will restart from the beginning.',
+                type: 'error'
+            }
+        }
+    }
+};
+
+export const WithOneSocialProvider: Story = {
+    globals: {
+        overrides: {
+            social: {
+                displayInfo: true,
+                providers: [
+                    {
+                        loginUrl: 'google',
+                        alias: 'google',
+                        providerId: 'google',
+                        displayName: 'Google',
+                        iconClasses: 'fa fa-google'
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const WithTwoSocialProviders: Story = {
+    globals: {
+        overrides: {
+            social: {
+                displayInfo: true,
+                providers: [
+                    {
+                        loginUrl: 'google',
+                        alias: 'google',
+                        providerId: 'google',
+                        displayName: 'Google',
+                        iconClasses: 'fa fa-google'
+                    },
+                    {
+                        loginUrl: 'microsoft',
+                        alias: 'microsoft',
+                        providerId: 'microsoft',
+                        displayName: 'Microsoft',
+                        iconClasses: 'fa fa-windows'
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const WithMoreThanTwoSocialProviders: Story = {
+    globals: {
+        overrides: {
+            social: {
+                displayInfo: true,
+                providers: [
+                    {
+                        loginUrl: 'google',
+                        alias: 'google',
+                        providerId: 'google',
+                        displayName: 'Google',
+                        iconClasses: 'fa fa-google'
+                    },
+                    {
+                        loginUrl: 'microsoft',
+                        alias: 'microsoft',
+                        providerId: 'microsoft',
+                        displayName: 'Microsoft',
+                        iconClasses: 'fa fa-windows'
+                    },
+                    {
+                        loginUrl: 'facebook',
+                        alias: 'facebook',
+                        providerId: 'facebook',
+                        displayName: 'Facebook',
+                        iconClasses: 'fa fa-facebook'
+                    },
+                    {
+                        loginUrl: 'twitter',
+                        alias: 'twitter',
+                        providerId: 'twitter',
+                        displayName: 'Twitter',
+                        iconClasses: 'fa fa-twitter'
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const WithSocialProvidersAndWithoutRememberMe: Story = {
+    globals: {
+        overrides: {
+            social: {
+                displayInfo: true,
+                providers: [
+                    {
+                        loginUrl: 'google',
+                        alias: 'google',
+                        providerId: 'google',
+                        displayName: 'Google',
+                        iconClasses: 'fa fa-google'
+                    }
+                ]
+            },
+            realm: { rememberMe: false }
+        }
+    }
+};

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

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/logout-confirm.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'logout-confirm.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+/**
+ * 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 = {
+    globals: {
+        overrides: {
+            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/register.stories.ts

@@ -0,0 +1,230 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+import { Attribute } from 'keycloakify/login';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/register.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'register.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithEmailAlreadyExists: Story = {
+    globals: {
+        overrides: {
+            messagesPerField: {
+                existsError: (fieldName: string, ...otherFieldNames: string[]) =>
+                    [fieldName, ...otherFieldNames].includes('email'),
+                get: (fieldName: string) =>
+                    fieldName === 'email' ? 'Email already exists.' : ''
+            }
+        }
+    }
+};
+
+export const WithRestrictedToMITStudents: Story = {
+    globals: {
+        overrides: {
+            'x-keycloakify': {
+                messages: {
+                    'profile.attributes.email.inputHelperTextBefore':
+                        'Please use your MIT or Berkeley email.',
+                    'profile.attributes.email.pattern.error':
+                        'This is not an MIT (<strong>@mit.edu</strong>) nor a Berkeley (<strong>@berkeley.edu</strong>) email.'
+                }
+            }
+        }
+    }
+};
+
+export const WithFavoritePet: Story = {
+    globals: {
+        overrides: {
+            profile: {
+                attributesByName: {
+                    favoritePet: {
+                        name: 'favorite-pet',
+                        displayName: '${profile.attributes.favoritePet}',
+                        validators: {
+                            options: {
+                                options: ['cat', 'dog', 'fish']
+                            }
+                        },
+                        annotations: {
+                            inputOptionLabelsI18nPrefix:
+                                'profile.attributes.favoritePet.options'
+                        },
+                        required: false,
+                        readOnly: false
+                    } satisfies Attribute
+                }
+            },
+            'x-keycloakify': {
+                messages: {
+                    'profile.attributes.favoritePet': 'Favorite Pet',
+                    'profile.attributes.favoritePet.options.cat': 'Fluffy Cat',
+                    'profile.attributes.favoritePet.options.dog': 'Loyal Dog',
+                    'profile.attributes.favoritePet.options.fish': 'Peaceful Fish'
+                }
+            }
+        }
+    }
+};
+
+export const WithNewsletter: Story = {
+    globals: {
+        overrides: {
+            profile: {
+                attributesByName: {
+                    newsletter: {
+                        name: 'newsletter',
+                        displayName: 'Sign up to the newsletter',
+                        validators: {
+                            options: {
+                                options: ['yes']
+                            }
+                        },
+                        annotations: {
+                            inputOptionLabels: {
+                                yes: 'I want my email inbox filled with spam'
+                            },
+                            inputType: 'multiselect-checkboxes'
+                        },
+                        required: false,
+                        readOnly: false
+                    } satisfies Attribute
+                }
+            }
+        }
+    }
+};
+
+export const WithEmailAsUsername: Story = {
+    globals: {
+        overrides: {
+            realm: {
+                registrationEmailAsUsername: true
+            },
+            profile: {
+                attributesByName: {
+                    username: undefined
+                }
+            }
+        }
+    }
+};
+
+export const WithRecaptcha: Story = {
+    globals: {
+        overrides: {
+            scripts: ['https://www.google.com/recaptcha/api.js?hl=en'],
+            recaptchaRequired: true,
+            recaptchaSiteKey: '6LfQHvApAAAAAE73SYTd5vS0lB1Xr7zdiQ-6iBVa'
+        }
+    }
+};
+
+export const WithRecaptchaFrench: Story = {
+    globals: {
+        overrides: {
+            locale: {
+                currentLanguageTag: 'fr'
+            },
+            scripts: ['https://www.google.com/recaptcha/api.js?hl=fr'],
+            recaptchaRequired: true,
+            recaptchaSiteKey: '6LfQHvApAAAAAE73SYTd5vS0lB1Xr7zdiQ-6iBVa'
+        }
+    }
+};
+
+export const WithPasswordMinLength8: Story = {
+    globals: {
+        overrides: {
+            passwordPolicies: {
+                length: 8
+            }
+        }
+    }
+};
+
+export const WithTermsAcceptance: Story = {
+    globals: {
+        overrides: {
+            termsAcceptanceRequired: true,
+            'x-keycloakify': {
+                messages: {
+                    termsText:
+                        "<a href='https://example.com/terms'>Service Terms of Use</a>"
+                }
+            }
+        }
+    }
+};
+
+export const WithTermsNotAccepted: Story = {
+    globals: {
+        overrides: {
+            termsAcceptanceRequired: true,
+            messagesPerField: {
+                existsError: (fieldName: string) => fieldName === 'termsAccepted',
+                get: (fieldName: string) =>
+                    fieldName === 'termsAccepted' ? 'You must accept the terms.' : ''
+            }
+        }
+    }
+};
+
+export const WithFieldErrors: Story = {
+    globals: {
+        overrides: {
+            profile: {
+                attributesByName: {
+                    username: { value: '' },
+                    email: { value: 'invalid-email' }
+                }
+            },
+            messagesPerField: {
+                existsError: (fieldName: string) =>
+                    ['username', 'email'].includes(fieldName),
+                get: (fieldName: string) => {
+                    if (fieldName === 'username') return 'Username is required.';
+                    if (fieldName === 'email') return 'Invalid email format.';
+                    return '';
+                }
+            }
+        }
+    }
+};
+
+export const WithReadOnlyFields: Story = {
+    globals: {
+        overrides: {
+            profile: {
+                attributesByName: {
+                    username: { value: 'johndoe', readOnly: true },
+                    email: { value: 'jhon.doe@gmail.com', readOnly: false }
+                }
+            }
+        }
+    }
+};
+
+export const WithAutoGeneratedUsername: Story = {
+    globals: {
+        overrides: {
+            profile: {
+                attributesByName: {
+                    username: { value: 'autogenerated_username' }
+                }
+            }
+        }
+    }
+};

package/stories/login/pages/saml-post-form.stories.ts

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