@keycloakify/angular 0.0.11 → 0.1.0

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

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

@@ -0,0 +1,102 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const mockKcContext = {
+    url: {
+        loginAction: '/login-action'
+    },
+    idpAlias: 'mockIdpAlias',
+    brokerContext: {
+        username: 'mockUser'
+    },
+    realm: {
+        displayName: 'MockRealm'
+    }
+};
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-idp-link-email.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-idp-link-email.ftl',
+        overrides: {
+            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.'
+            }
+        }
+    }
+};

package/stories/login/pages/login-oauth-grant.stories.ts

@@ -0,0 +1,68 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const mockKcContext = {
+    url: {
+        oauthAction: '/oauth-action'
+    },
+    oauth: {
+        clientScopesRequested: [
+            { consentScreenText: 'Scope1', dynamicScopeParameter: 'dynamicScope1' },
+            { consentScreenText: 'Scope2' }
+        ],
+        code: 'mockCode'
+    },
+    client: {
+        attributes: {
+            policyUri: 'https://twitter.com/en/tos',
+            tosUri: 'https://twitter.com/en/privacy'
+        },
+        name: 'Twitter',
+        clientId: 'twitter-client-id'
+    }
+};
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-oauth-grant.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-oauth-grant.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {
+    globals: {
+        overrides: mockKcContext
+    }
+};
+
+export const WithoutScopes: Story = {
+    globals: {
+        overrides: {
+            ...mockKcContext,
+            oauth: {
+                ...mockKcContext.oauth,
+                clientScopesRequested: []
+            }
+        }
+    }
+};
+
+export const WithFormSubmissionError: Story = {
+    globals: {
+        overrides: {
+            ...mockKcContext,
+            url: {
+                oauthAction: '/error'
+            },
+            message: {
+                type: 'error',
+                summary: 'An error occurred during form submission.'
+            }
+        }
+    }
+};

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

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

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

@@ -0,0 +1,94 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-otp.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-otp.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const MultipleOtpCredentials: Story = {
+    globals: {
+        overrides: {
+            otpLogin: {
+                userOtpCredentials: [
+                    { id: 'credential1', userLabel: 'Device 1' },
+                    { id: 'credential2', userLabel: 'Device 2' },
+                    { id: 'credential2', userLabel: 'Device 3' },
+                    { id: 'credential2', userLabel: 'Device 4' },
+                    { id: 'credential2', userLabel: 'Device 5' },
+                    { id: 'credential2', userLabel: 'Device 6' }
+                ],
+                selectedCredentialId: 'credential1'
+            },
+            url: {
+                loginAction: '/login-action'
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
+};
+
+export const WithOtpError: Story = {
+    globals: {
+        overrides: {
+            otpLogin: {
+                userOtpCredentials: []
+            },
+            url: {
+                loginAction: '/login-action'
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === 'totp',
+                get: () => 'Invalid OTP code'
+            }
+        }
+    }
+};
+
+export const NoOtpCredentials: Story = {
+    globals: {
+        overrides: {
+            otpLogin: {
+                userOtpCredentials: []
+            },
+            url: {
+                loginAction: '/login-action'
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
+};
+
+export const WithErrorAndMultipleOtpCredentials: Story = {
+    globals: {
+        overrides: {
+            otpLogin: {
+                userOtpCredentials: [
+                    { id: 'credential1', userLabel: 'Device 1' },
+                    { id: 'credential2', userLabel: 'Device 2' }
+                ],
+                selectedCredentialId: 'credential1'
+            },
+            url: {
+                loginAction: '/login-action'
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === 'totp',
+                get: () => 'Invalid OTP code'
+            }
+        }
+    }
+};

package/stories/login/pages/login-page-expired.stories.ts

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-page-expired.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-page-expired.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithErrorMessage: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginRestartFlowUrl: '/mock-restart-flow',
+                loginAction: '/mock-continue-login'
+            },
+            message: {
+                type: 'error',
+                summary: 'An error occurred while processing your session.'
+            }
+        }
+    }
+};

package/stories/login/pages/login-passkeys-conditional-authenticate.stories.ts

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

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

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-password.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-password.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithPasswordError: Story = {
+    globals: {
+        overrides: {
+            realm: {
+                resetPasswordAllowed: true
+            },
+            url: {
+                loginAction: '/mock-login',
+                loginResetCredentialsUrl: '/mock-reset-password'
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === 'password',
+                get: () => 'Invalid password'
+            }
+        }
+    }
+};
+
+export const WithoutResetPasswordOption: Story = {
+    globals: {
+        overrides: {
+            realm: {
+                resetPasswordAllowed: false
+            },
+            url: {
+                loginAction: '/mock-login',
+                loginResetCredentialsUrl: '/mock-reset-password'
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
+};

package/stories/login/pages/login-recovery-authn-code-config.stories.ts

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-recovery-authn-code-config.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-recovery-authn-code-config.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithErrorDuringCodeGeneration: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            message: {
+                summary:
+                    'An error occurred during recovery code generation. Please try again.',
+                type: 'error'
+            }
+        }
+    }
+};

package/stories/login/pages/login-recovery-authn-code-input.stories.ts

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

package/stories/login/pages/login-reset-otp.stories.ts

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-reset-otp.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-reset-otp.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithoutOtpCredentials: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login'
+            },
+            configuredOtpCredentials: {
+                userOtpCredentials: [],
+                selectedCredentialId: undefined
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
+};
+
+export const WithOtpError: Story = {
+    globals: {
+        overrides: {
+            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'
+            }
+        }
+    }
+};
+
+export const WithOnlyOneOtpCredential: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login'
+            },
+            configuredOtpCredentials: {
+                userOtpCredentials: [{ id: 'otp1', userLabel: 'Device 1' }],
+                selectedCredentialId: 'otp1'
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
+};

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

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/login-reset-password.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'login-reset-password.ftl'
+    }
+};
+
+export default meta;
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithEmailAsUsername: Story = {
+    globals: {
+        overrides: {
+            realm: {
+                loginWithEmailAllowed: true,
+                registrationEmailAsUsername: true
+            }
+        }
+    }
+};
+
+export const WithUsernameError: Story = {
+    globals: {
+        overrides: {
+            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'
+            }
+        }
+    }
+};