@andreyyolkin/keycloakify-vue 0.1.0

package/stories/login/pages/Terms.stories.ts

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/terms.ftl',
+  component: KcPageStory,
+  args: { pageId: 'terms.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    kcContext: {
+      'x-keycloakify': {
+        messages: {
+          termsText: '<p>My terms in <strong>English</strong></p>',
+        },
+      },
+    },
+  },
+};
+
+export const French: Story = {
+  args: {
+    kcContext: {
+      locale: {
+        currentLanguageTag: 'fr',
+      },
+      'x-keycloakify': {
+        messages: {
+          // cSpell: disable
+          termsText: '<p>Mes terme en <strong>Français</strong></p>',
+          // cSpell: enable
+        },
+      },
+    },
+  },
+};
+
+export const Spanish: Story = {
+  args: {
+    kcContext: {
+      locale: {
+        currentLanguageTag: 'es',
+      },
+      'x-keycloakify': {
+        messages: {
+          termsText: '<p>Mis términos en <strong>Español</strong></p>',
+        },
+      },
+    },
+  },
+};
+
+export const LongMessage: Story = {
+  args: {
+    kcContext: {
+      '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/UpdateEmail.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/update-email.ftl',
+  component: KcPageStory,
+  args: { pageId: 'update-email.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithAppInitiatedAction: Story = {
+  args: {
+    kcContext: {
+      url: {
+        loginAction: '/mock-login-action',
+      },
+      messagesPerField: {
+        exists: () => false,
+      },
+      isAppInitiatedAction: true,
+    },
+  },
+};

package/stories/login/pages/WebauthnAuthenticate.stories.ts

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/webauthn-authenticate.ftl',
+  component: KcPageStory,
+  args: { pageId: 'webauthn-authenticate.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * WithMultipleAuthenticators:
+ * - Purpose: Tests when multiple WebAuthn authenticators are available for selection.
+ * - Scenario: The component renders multiple authenticators, allowing the user to choose between them.
+ * - Key Aspect: Ensures that the available authenticators are displayed, and the user can select one.
+ */
+export const WithMultipleAuthenticators: Story = {
+  args: {
+    kcContext: {
+      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,
+    },
+  },
+};
+
+/**
+ * WithSingleAuthenticator:
+ * - Purpose: Tests when only one WebAuthn authenticator is available.
+ * - Scenario: The component renders the WebAuthn form with a single available authenticator.
+ * - Key Aspect: Ensures the form renders correctly when there is only one authenticator available.
+ */
+export const WithSingleAuthenticator: Story = {
+  args: {
+    kcContext: {
+      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,
+    },
+  },
+};
+
+/**
+ * WithErrorDuringAuthentication:
+ * - Purpose: Tests the behavior when an error occurs during WebAuthn authentication.
+ * - Scenario: The component renders with an error message displayed to the user.
+ * - Key Aspect: Ensures the form handles authentication errors and displays a relevant message.
+ */
+export const WithErrorDuringAuthentication: Story = {
+  args: {
+    kcContext: {
+      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',
+      },
+    },
+  },
+};
+
+/**
+ * WithJavaScriptDisabled:
+ * - Purpose: Tests the behavior when JavaScript is disabled or not functioning.
+ * - Scenario: The component renders a fallback message prompting the user to enable JavaScript for WebAuthn authentication.
+ * - Key Aspect: Ensures the form provides a clear message when JavaScript is required but unavailable.
+ */
+export const WithJavaScriptDisabled: Story = {
+  args: {
+    kcContext: {
+      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/WebauthnError.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/webauthn-error.ftl',
+  component: KcPageStory,
+  args: { pageId: 'webauthn-error.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * WithRetryAvailable:
+ * - Purpose: Tests when the user can retry the WebAuthn authentication after an error.
+ * - Scenario: The component renders with a "Try Again" button to allow retrying the authentication process.
+ * - Key Aspect: Ensures the retry button functionality is visible and the user can retry authentication.
+ */
+export const WithRetryAvailable: Story = {
+  args: {
+    kcContext: {
+      url: {
+        loginAction: '/mock-login-action',
+      },
+      isAppInitiatedAction: false,
+      message: {
+        summary: 'WebAuthn authentication failed. Please try again.',
+        type: 'error',
+      },
+    },
+  },
+};
+
+/**
+ * WithAppInitiatedAction:
+ * - Purpose: Tests when the WebAuthn error form is part of an application-initiated action.
+ * - Scenario: The component renders with both a "Try Again" button and a "Cancel" button for app-initiated actions.
+ * - Key Aspect: Ensures the form renders correctly with both "Try Again" and "Cancel" options.
+ */
+export const WithAppInitiatedAction: Story = {
+  args: {
+    kcContext: {
+      url: {
+        loginAction: '/mock-login-action',
+      },
+      isAppInitiatedAction: true,
+      message: {
+        summary: 'WebAuthn authentication failed. You can try again or cancel.',
+        type: 'error',
+      },
+    },
+  },
+};
+
+/**
+ * WithJavaScriptDisabled:
+ * - Purpose: Tests the behavior when JavaScript is disabled or not functioning.
+ * - Scenario: The component renders with a message prompting the user to retry manually without JavaScript.
+ * - Key Aspect: Ensures the retry mechanism works properly when JavaScript is disabled or unavailable.
+ */
+export const WithJavaScriptDisabled: Story = {
+  args: {
+    kcContext: {
+      url: {
+        loginAction: '/mock-login-action',
+      },
+      isAppInitiatedAction: false,
+      message: {
+        summary: 'JavaScript is disabled or not working. Please retry manually.',
+        type: 'warning',
+      },
+    },
+  },
+};

package/stories/login/pages/WebauthnRegister.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/webauthn-register.ftl',
+  component: KcPageStory,
+  args: { pageId: 'webauthn-register.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * WithRetryAvailable:
+ * - Purpose: Tests when the user is allowed to retry WebAuthn registration after a failure.
+ * - Scenario: The component renders the form with a retry option.
+ * - Key Aspect: Ensures the retry functionality is available and the form allows the user to retry.
+ */
+export const WithRetryAvailable: Story = {
+  args: {
+    kcContext: {
+      url: {
+        loginAction: '/mock-login-action',
+      },
+      isSetRetry: true,
+      isAppInitiatedAction: false,
+    },
+  },
+};
+
+/**
+ * WithErrorDuringRegistration:
+ * - Purpose: Tests when an error occurs during WebAuthn registration.
+ * - Scenario: The component displays an error message related to WebAuthn registration failure.
+ * - Key Aspect: Ensures the error message is displayed correctly, informing the user of the registration failure.
+ */
+export const WithErrorDuringRegistration: Story = {
+  args: {
+    kcContext: {
+      url: {
+        loginAction: '/mock-login-action',
+      },
+      isSetRetry: false,
+      isAppInitiatedAction: false,
+      message: {
+        summary: 'An error occurred during WebAuthn registration. Please try again.',
+        type: 'error',
+      },
+    },
+  },
+};