@keycloakify/angular 0.0.11 → 0.1.1

package/stories/login/pages/login-update-password.stories.ts

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-update-password.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-update-password.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithPasswordError: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === 'password',
+                get: () => 'Password must be at least 8 characters long.'
+            },
+            isAppInitiatedAction: false
+        }
+    }
+};
+
+export const WithPasswordConfirmError: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === 'password-confirm',
+                get: () => 'Passwords do not match.'
+            },
+            isAppInitiatedAction: false
+        }
+    }
+};

package/stories/login/pages/login-update-profile.stories.ts

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-update-profile.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-update-profile.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithProfileError: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === 'email',
+                get: () => 'Invalid email format'
+            },
+            isAppInitiatedAction: false
+        }
+    }
+};

package/stories/login/pages/login-username.stories.ts

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-username.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-username.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithEmailAsUsername: Story = {
+    globals: {
+        overrides: {
+            realm: {
+                loginWithEmailAllowed: true,
+                registrationEmailAsUsername: true
+            }
+        }
+    }
+};

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'
+            }
+        }
+    }
+};