@keycloakify/angular 0.0.11 → 0.1.1

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

@@ -0,0 +1,133 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'account/account.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'account.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const UsernameNotEditable: Story = {
+    globals: {
+        overrides: {
+            account: {
+                username: 'john_doe',
+                email: 'john.doe@gmail.com',
+                firstName: 'John',
+                lastName: 'Doe'
+            },
+            realm: {
+                registrationEmailAsUsername: false,
+                editUsernameAllowed: false
+            },
+            referrer: {
+                url: '/home'
+            },
+            url: {
+                accountUrl: '/account'
+            },
+            messagesPerField: {
+                printIfExists: () => ''
+            },
+            stateChecker: 'state-checker'
+        }
+    }
+};
+
+export const WithValidationErrors: Story = {
+    globals: {
+        overrides: {
+            account: {
+                username: 'john_doe',
+                email: '',
+                firstName: '',
+                lastName: 'Doe'
+            },
+            realm: {
+                registrationEmailAsUsername: false,
+                editUsernameAllowed: true
+            },
+            referrer: {
+                url: '/home'
+            },
+            url: {
+                accountUrl: '/account'
+            },
+            messagesPerField: {
+                printIfExists: (field: string) =>
+                    field === 'email' || field === 'firstName' ? 'has-error' : ''
+            },
+            stateChecker: 'state-checker'
+        }
+    }
+};
+
+export const EmailAsUsername: Story = {
+    globals: {
+        overrides: {
+            account: {
+                email: 'john.doe@gmail.com',
+                firstName: 'John',
+                lastName: 'Doe'
+            },
+            realm: {
+                registrationEmailAsUsername: true
+            },
+            referrer: {
+                url: '/home'
+            },
+            url: {
+                accountUrl: '/account'
+            },
+            messagesPerField: {
+                printIfExists: () => ''
+            },
+            stateChecker: 'state-checker'
+        }
+    }
+};
+
+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/account/pages/applications.stories.ts

@@ -0,0 +1,196 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'account/applications.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'applications.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {
+    globals: {
+        overrides: {
+            applications: {
+                applications: [
+                    {
+                        realmRolesAvailable: [
+                            {
+                                name: 'realmRoleName1',
+                                description: 'realm role description 1'
+                            },
+                            {
+                                name: 'realmRoleName2',
+                                description: 'realm role description 2'
+                            }
+                        ],
+                        resourceRolesAvailable: {
+                            resource1: [
+                                {
+                                    roleName: 'Resource Role Name 1',
+                                    roleDescription: 'Resource role 1 description',
+                                    clientName: 'Client Name 1',
+                                    clientId: 'client1'
+                                }
+                            ],
+                            resource2: [
+                                {
+                                    roleName: 'Resource Role Name 2',
+                                    clientName: 'Client Name 1',
+                                    clientId: 'client1'
+                                }
+                            ]
+                        },
+                        additionalGrants: ['grant1', 'grant2'],
+                        clientScopesGranted: ['scope1', 'scope2'],
+                        effectiveUrl: '#',
+                        client: {
+                            clientId: 'application1',
+                            name: 'Application 1',
+                            consentRequired: true
+                        }
+                    },
+                    {
+                        realmRolesAvailable: [{ name: 'Realm Role Name 1' }],
+                        resourceRolesAvailable: {},
+                        additionalGrants: [],
+                        clientScopesGranted: [],
+                        effectiveUrl: '#',
+                        client: { clientId: 'application2', name: 'Application 2' }
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const NoAvailableRolesOrGrants: Story = {
+    globals: {
+        overrides: {
+            applications: {
+                applications: [
+                    {
+                        realmRolesAvailable: [],
+                        resourceRolesAvailable: {},
+                        additionalGrants: [],
+                        clientScopesGranted: [],
+                        effectiveUrl: '#',
+                        client: {
+                            clientId: 'application1',
+                            name: 'Application 1',
+                            consentRequired: true
+                        }
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const ConsentNotRequired: Story = {
+    globals: {
+        overrides: {
+            applications: {
+                applications: [
+                    {
+                        realmRolesAvailable: [],
+                        resourceRolesAvailable: {},
+                        additionalGrants: [],
+                        clientScopesGranted: [],
+                        effectiveUrl: '#',
+                        client: {
+                            clientId: 'application1',
+                            name: 'Application 1',
+                            consentRequired: false
+                        }
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const NoRolesButConsentRequired: Story = {
+    globals: {
+        overrides: {
+            applications: {
+                applications: [
+                    {
+                        realmRolesAvailable: [],
+                        resourceRolesAvailable: {},
+                        additionalGrants: [],
+                        clientScopesGranted: ['scope1', 'scope2'],
+                        effectiveUrl: '#',
+                        client: {
+                            clientId: 'application1',
+                            name: 'Application 1',
+                            consentRequired: true
+                        }
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const OnlyResourceRolesAvailable: Story = {
+    globals: {
+        overrides: {
+            applications: {
+                applications: [
+                    {
+                        realmRolesAvailable: [],
+                        resourceRolesAvailable: {
+                            resource1: [
+                                {
+                                    roleName: 'Resource Role Name 1',
+                                    roleDescription: 'Resource role 1 description',
+                                    clientName: 'Client Name 1',
+                                    clientId: 'client1'
+                                }
+                            ]
+                        },
+                        additionalGrants: [],
+                        clientScopesGranted: [],
+                        effectiveUrl: '#',
+                        client: {
+                            clientId: 'application1',
+                            name: 'Application 1',
+                            consentRequired: true
+                        }
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const NoAdditionalGrants: Story = {
+    globals: {
+        overrides: {
+            pageId: 'applications.ftl',
+            applications: {
+                applications: [
+                    {
+                        realmRolesAvailable: [{ name: 'Realm Role Name 1' }],
+                        resourceRolesAvailable: {},
+                        additionalGrants: [],
+                        clientScopesGranted: [],
+                        effectiveUrl: '#',
+                        client: {
+                            clientId: 'application1',
+                            name: 'Application 1',
+                            consentRequired: true
+                        }
+                    }
+                ]
+            }
+        }
+    }
+};

package/stories/account/pages/federated-identity.stories.ts

@@ -0,0 +1,78 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'account/federatedIdentity.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'federatedIdentity.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const NotConnected: Story = {
+    globals: {
+        overrides: {
+            federatedIdentity: {
+                identities: [
+                    {
+                        providerId: 'google',
+                        displayName: 'keycloak-oidc',
+                        connected: false
+                    }
+                ],
+                removeLinkPossible: true
+            }
+        }
+    }
+};
+
+export const RemoveLinkNotPossible: Story = {
+    globals: {
+        overrides: {
+            federatedIdentity: {
+                identities: [
+                    {
+                        providerId: 'google',
+                        displayName: 'Google',
+                        userName: 'john.doe@gmail.com',
+                        connected: true
+                    }
+                ],
+                removeLinkPossible: false
+            },
+            stateChecker: '1234',
+            url: {
+                socialUrl: '/social'
+            }
+        }
+    }
+};
+
+export const AddLinkForUnconnectedIdentity: Story = {
+    globals: {
+        overrides: {
+            federatedIdentity: {
+                identities: [
+                    {
+                        providerId: 'github',
+                        displayName: 'GitHub',
+                        userName: '',
+                        connected: false
+                    }
+                ],
+                removeLinkPossible: true
+            },
+            stateChecker: '1234',
+            url: {
+                socialUrl: '/social'
+            }
+        }
+    }
+};

package/stories/account/pages/log.stories.ts

@@ -0,0 +1,147 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'account/log.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'log.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {
+    globals: {
+        overrides: {
+            log: {
+                events: [
+                    {
+                        date: '2024-04-26T12:29:08Z',
+                        ipAddress: '127.0.0.1',
+                        client: 'keycloakify-frontend',
+                        details: [
+                            { key: 'auth_method', value: 'openid-connect' },
+                            { key: 'username', value: 'john.doe' }
+                        ],
+                        event: 'login'
+                    },
+                    {
+                        date: '2024-04-26T12:10:56Z',
+                        ipAddress: '127.0.0.1',
+                        client: 'keycloakify-frontend',
+                        details: [
+                            { key: 'auth_method', value: 'openid-connect' },
+                            { key: 'username', value: 'john.doe' }
+                        ],
+                        event: 'login'
+                    }
+                    // Add more log events as needed
+                ]
+            }
+        }
+    }
+};
+
+export const LogsMissingDetails: Story = {
+    globals: {
+        overrides: {
+            log: {
+                events: [
+                    {
+                        date: '2024-04-26T12:29:08Z',
+                        ipAddress: '127.0.0.1',
+                        client: '',
+                        details: [],
+                        event: 'login'
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const SingleLogEntry: Story = {
+    globals: {
+        overrides: {
+            log: {
+                events: [
+                    {
+                        date: '2024-04-26T12:29:08Z',
+                        ipAddress: '127.0.0.1',
+                        client: 'keycloakify-frontend',
+                        details: [
+                            { key: 'auth_method', value: 'openid-connect' },
+                            { key: 'username', value: 'john.doe' }
+                        ],
+                        event: 'login'
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const LogsWithLongDetails: Story = {
+    globals: {
+        overrides: {
+            log: {
+                events: [
+                    {
+                        date: '2024-04-26T12:29:08Z',
+                        ipAddress: '127.0.0.1',
+                        client: 'keycloakify-frontend',
+                        details: [
+                            { key: 'auth_method', value: 'openid-connect' },
+                            { key: 'username', value: 'john.doe' },
+                            {
+                                key: 'session_duration',
+                                value: '2 hours 30 minutes 45 seconds'
+                            },
+                            { key: 'location', value: 'Windsor, Ontario, Canada' },
+                            {
+                                key: 'user_agent',
+                                value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'
+                            }
+                        ],
+                        event: 'login'
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const EmptyClientField: Story = {
+    globals: {
+        overrides: {
+            log: {
+                events: [
+                    {
+                        date: '2024-04-26T12:29:08Z',
+                        ipAddress: '127.0.0.1',
+                        client: '', // Empty client field
+                        details: [
+                            { key: 'auth_method', value: 'openid-connect' },
+                            { key: 'username', value: 'john.doe' }
+                        ],
+                        event: 'login'
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const NoLogsAvailable: Story = {
+    globals: {
+        overrides: {
+            log: {
+                events: [] // No log events
+            }
+        }
+    }
+};

package/stories/account/pages/password.stories.ts

@@ -0,0 +1,104 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'account/password.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'password.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithMessage: Story = {
+    globals: {
+        overrides: {
+            kcContext: {
+                message: { type: 'success', summary: 'This is a test message' }
+            }
+        }
+    }
+};
+
+/**
+ * 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 = {
+    globals: {
+        overrides: {
+            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 = {
+    globals: {
+        overrides: {
+            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 = {
+    globals: {
+        overrides: {
+            kcContext: {
+                message: { type: 'success', summary: 'Password successfully changed.' },
+                account: {
+                    username: 'john_doe'
+                },
+                password: {
+                    passwordSet: true
+                },
+                url: {
+                    passwordUrl: '/password'
+                },
+                stateChecker: 'state-checker'
+            }
+        }
+    }
+};