@keycloakify/angular 0.0.11 → 0.1.1

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 = {};

package/stories/login/pages/select-authenticator.stories.ts

@@ -0,0 +1,95 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/select-authenticator.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'select-authenticator.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithDifferentAuthenticationMethods: Story = {
+    globals: {
+        overrides: {
+            auth: {
+                authenticationSelections: [
+                    {
+                        authExecId: '25697c4e-0c80-4f2c-8eb7-2c16347e8e8d',
+                        displayName: 'auth-username-password-form-display-name',
+                        helpText: 'auth-username-password-form-help-text',
+                        iconCssClass: 'kcAuthenticatorPasswordClass'
+                    },
+                    {
+                        authExecId: '4cb60872-ce0d-4c8f-a806-e651ed77994b',
+                        displayName: 'webauthn-passwordless-display-name',
+                        helpText: 'webauthn-passwordless-help-text',
+                        iconCssClass: 'kcAuthenticatorWebAuthnPasswordlessClass'
+                    }
+                ]
+            }
+        }
+    }
+};
+
+export const WithRealmTranslations: Story = {
+    globals: {
+        overrides: {
+            auth: {
+                authenticationSelections: [
+                    {
+                        authExecId: 'f0c22855-eda7-4092-8565-0c22f77d2ffb',
+                        displayName: 'home-idp-discovery-display-name',
+                        helpText: 'home-idp-discovery-help-text',
+                        iconCssClass: 'kcAuthenticatorDefaultClass'
+                    },
+                    {
+                        authExecId: '20456f5a-8b2b-45f3-98e0-551dcb27e3e1',
+                        displayName: 'identity-provider-redirctor-display-name',
+                        helpText: 'identity-provider-redirctor-help-text',
+                        iconCssClass: 'kcAuthenticatorDefaultClass'
+                    },
+                    {
+                        authExecId: 'eb435db9-474e-473a-8da7-c184fa510b96',
+                        displayName: 'auth-username-password-form-display-name',
+                        helpText: 'auth-username-password-help-text',
+                        iconCssClass: 'kcAuthenticatorDefaultClass'
+                    }
+                ]
+            },
+            'x-keycloakify': {
+                messages: {
+                    'home-idp-discovery-display-name': 'Home identity provider',
+                    'home-idp-discovery-help-text':
+                        'Sign in via your home identity provider which will be automatically determined based on your provided email address.',
+                    'identity-provider-redirctor-display-name':
+                        'Identity Provider Redirector',
+                    'identity-provider-redirctor-help-text':
+                        'Sign in via your identity provider.',
+                    'auth-username-password-help-text':
+                        'Sign in via your username and password.'
+                }
+            }
+        }
+    }
+};
+
+export const WithoutAuthenticationSelections: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            auth: {
+                authenticationSelections: []
+            }
+        }
+    }
+};

package/stories/login/pages/terms.stories.ts

@@ -0,0 +1,79 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/terms.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'terms.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {
+    globals: {
+        overrides: {
+            'x-keycloakify': {
+                messages: {
+                    termsText: '<p>My terms in <strong>English</strong></p>'
+                }
+            }
+        }
+    }
+};
+
+export const French: Story = {
+    globals: {
+        overrides: {
+            locale: {
+                currentLanguageTag: 'fr'
+            },
+            'x-keycloakify': {
+                messages: {
+                    termsText: '<p>Mes terme en <strong>Français</strong></p>'
+                }
+            }
+        }
+    }
+};
+
+export const Spanish: Story = {
+    globals: {
+        overrides: {
+            locale: {
+                currentLanguageTag: 'es'
+            },
+            'x-keycloakify': {
+                messages: {
+                    termsText: '<p>Mis términos en <strong>Español</strong></p>'
+                }
+            }
+        }
+    }
+};
+
+export const LongMessage: Story = {
+    globals: {
+        overrides: {
+            'x-keycloakify': {
+                messages: {
+                    termsText: `
+                        <p>These are the terms and conditions. Please read them carefully.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.</p>
+                        <p>Cras vehicula diam vel metus faucibus, at scelerisque lacus pretium. Donec ac consectetur justo. Morbi in sollicitudin nulla.</p>
+                        <p>Suspendisse potenti. Phasellus pharetra consequat ante, at dictum ligula volutpat a. Quisque ultricies velit nec nulla gravida accumsan.</p>
+                        <p>Curabitur tristique, magna id hendrerit tristique, enim nunc laoreet erat, non accumsan lacus arcu et nulla.</p>
+                        <p>Fusce feugiat nisi orci, in placerat dui luctus ut. Suspendisse in velit eu urna auctor consequat a euismod enim.</p>
+                        <p>Etiam et massa a sapien pharetra mollis. In lacinia quam id libero tincidunt, at egestas felis viverra.</p>
+                        <p>Nunc pulvinar imperdiet facilisis. Curabitur ultricies dictum lectus, nec consectetur metus fringilla id.</p>
+                        <p><strong>Please accept the terms to proceed.</strong></p>
+                    `
+                }
+            }
+        }
+    }
+};

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

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

package/stories/login/pages/webauthn-authenticate.stories.ts

@@ -0,0 +1,126 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/webauthn-authenticate.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'webauthn-authenticate.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithMultipleAuthenticators: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            authenticators: {
+                authenticators: [
+                    {
+                        credentialId: 'authenticator-1',
+                        label: 'Security Key 1',
+                        transports: {
+                            iconClass: 'kcAuthenticatorUsbIcon',
+                            displayNameProperties: ['USB']
+                        },
+                        createdAt: '2023-01-01'
+                    },
+                    {
+                        credentialId: 'authenticator-2',
+                        label: 'Security Key 2',
+                        transports: {
+                            iconClass: 'kcAuthenticatorNfcIcon',
+                            displayNameProperties: ['NFC']
+                        },
+                        createdAt: '2023-02-01'
+                    }
+                ]
+            },
+            shouldDisplayAuthenticators: true
+        }
+    }
+};
+
+export const WithSingleAuthenticator: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            authenticators: {
+                authenticators: [
+                    {
+                        credentialId: 'authenticator-1',
+                        label: 'My Security Key',
+                        transports: {
+                            iconClass: 'kcAuthenticatorUsbIcon',
+                            displayNameProperties: ['USB']
+                        },
+                        createdAt: '2023-01-01'
+                    }
+                ]
+            },
+            shouldDisplayAuthenticators: true
+        }
+    }
+};
+
+export const WithErrorDuringAuthentication: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            authenticators: {
+                authenticators: [
+                    {
+                        credentialId: 'authenticator-1',
+                        label: 'My Security Key',
+                        transports: {
+                            iconClass: 'kcAuthenticatorUsbIcon',
+                            displayNameProperties: ['USB']
+                        },
+                        createdAt: '2023-01-01'
+                    }
+                ]
+            },
+            shouldDisplayAuthenticators: true,
+            message: {
+                summary: 'An error occurred during WebAuthn authentication.',
+                type: 'error'
+            }
+        }
+    }
+};
+
+export const WithJavaScriptDisabled: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            authenticators: {
+                authenticators: [
+                    {
+                        credentialId: 'authenticator-1',
+                        label: 'My Security Key',
+                        transports: {
+                            iconClass: 'kcAuthenticatorUsbIcon',
+                            displayNameProperties: ['USB']
+                        },
+                        createdAt: '2023-01-01'
+                    }
+                ]
+            },
+            shouldDisplayAuthenticators: true
+        }
+    }
+};

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

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/webauthn-error.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'webauthn-error.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithRetryAvailable: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            isAppInitiatedAction: false,
+            message: {
+                summary: 'WebAuthn authentication failed. Please try again.',
+                type: 'error'
+            }
+        }
+    }
+};
+
+export const WithAppInitiatedAction: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            isAppInitiatedAction: true,
+            message: {
+                summary: 'WebAuthn authentication failed. You can try again or cancel.',
+                type: 'error'
+            }
+        }
+    }
+};
+
+export const WithJavaScriptDisabled: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            isAppInitiatedAction: false,
+            message: {
+                summary: 'JavaScript is disabled or not working. Please retry manually.',
+                type: 'warning'
+            }
+        }
+    }
+};

package/stories/login/pages/webauthn-register.stories.ts

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { decorators, KcPageStory } from '../KcPageStory';
+
+const meta: Meta<KcPageStory> = {
+    title: 'login/webauthn-register.ftl',
+    component: KcPageStory,
+    decorators: decorators,
+    globals: {
+        pageId: 'webauthn-register.ftl'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<KcPageStory>;
+
+export const Default: Story = {};
+
+export const WithRetryAvailable: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            isSetRetry: true,
+            isAppInitiatedAction: false
+        }
+    }
+};
+
+export const WithErrorDuringRegistration: Story = {
+    globals: {
+        overrides: {
+            url: {
+                loginAction: '/mock-login-action'
+            },
+            isSetRetry: false,
+            isAppInitiatedAction: false,
+            message: {
+                summary:
+                    'An error occurred during WebAuthn registration. Please try again.',
+                type: 'error'
+            }
+        }
+    }
+};