@andreyyolkin/keycloakify-vue 0.1.0

package/stories/login/pages/IdpReviewUserProfile.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/idp-review-user-profile.ftl',
+  component: KcPageStory,
+  args: { pageId: 'idp-review-user-profile.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithFormValidationErrors: Story = {
+  args: {
+    kcContext: {
+      messagesPerField: {
+        existsError: (fieldName: string) => ['email', 'firstName'].includes(fieldName),
+        get: (fieldName: string) => {
+          if (fieldName === 'email') return 'Invalid email format.';
+          if (fieldName === 'firstName') return 'First name is required.';
+          return '';
+        },
+      },
+    },
+  },
+};
+
+export const WithReadOnlyFields: Story = {
+  args: {
+    kcContext: {
+      profile: {
+        attributesByName: {
+          email: { value: 'jane.doe@example.com', readOnly: true },
+          firstName: { value: 'Jane', readOnly: false },
+        },
+      },
+    },
+  },
+};
+
+export const WithPrefilledFormFields: Story = {
+  args: {
+    kcContext: {
+      profile: {
+        attributesByName: {
+          firstName: { value: 'Jane' },
+          lastName: { value: 'Doe' },
+          email: { value: 'jane.doe@example.com' },
+        },
+      },
+    },
+  },
+};

package/stories/login/pages/Info.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/info.ftl',
+  component: KcPageStory,
+  args: { pageId: 'info.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    kcContext: {
+      messageHeader: 'Message header',
+      message: {
+        summary: 'Server info message',
+      },
+    },
+  },
+};
+
+export const WithLinkBack: Story = {
+  args: {
+    kcContext: {
+      messageHeader: 'Message header',
+      message: {
+        summary: 'Server message',
+      },
+      actionUri: undefined,
+    },
+  },
+};
+
+export const WithRequiredActions: Story = {
+  args: {
+    kcContext: {
+      messageHeader: 'Message header',
+      message: {
+        summary: 'Required actions: ',
+      },
+      requiredActions: ['CONFIGURE_TOTP', 'UPDATE_PROFILE', 'VERIFY_EMAIL', 'CUSTOM_ACTION'],
+      'x-keycloakify': {
+        messages: {
+          'requiredAction.CUSTOM_ACTION': 'Custom action',
+        },
+      },
+    },
+  },
+};

package/stories/login/pages/LinkIdpAction.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/link-idp-action.ftl',
+  component: KcPageStory,
+  args: { pageId: 'link-idp-action.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    kcContext: {
+      idpDisplayName: 'GitHub',
+      url: { loginAction: '/mock-login-action' },
+    },
+  },
+};
+
+export const DifferentProvider: Story = {
+  args: {
+    kcContext: {
+      idpDisplayName: 'Google',
+      url: { loginAction: '/custom-login-action' },
+    },
+  },
+};

package/stories/login/pages/Login.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithInvalidCredential: Story = {
+  args: {
+    kcContext: {
+      login: { username: 'johndoe' },
+      messagesPerField: {
+        existsError: (fieldName: string, ...otherFieldNames: string[]) => {
+          const fieldNames = [fieldName, ...otherFieldNames];
+          return fieldNames.includes('username') || fieldNames.includes('password');
+        },
+        get: (fieldName: string) =>
+          fieldName === 'username' || fieldName === 'password' ? 'Invalid username or password.' : '',
+      },
+    },
+  },
+};
+
+export const WithoutRegistration: Story = {
+  args: { kcContext: { realm: { registrationAllowed: false } } },
+};
+
+export const WithoutRememberMe: Story = {
+  args: { kcContext: { realm: { rememberMe: false } } },
+};
+
+export const WithSocialProviders: Story = {
+  args: {
+    kcContext: {
+      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 WithErrorMessage: Story = {
+  args: {
+    kcContext: {
+      message: {
+        type: 'error',
+        summary:
+          'The time allotted for the connection has elapsed.<br/>The login process will restart from the beginning.',
+      },
+    },
+  },
+};

package/stories/login/pages/LoginConfigTotp.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-config-totp.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-config-totp.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithManualSetUp: Story = {
+  args: {
+    kcContext: {
+      mode: 'manual',
+    },
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    kcContext: {
+      messagesPerField: {
+        get: (fieldName: string) => (fieldName === 'totp' ? 'Invalid TOTP' : ''),
+        exists: (fieldName: string) => fieldName === 'totp',
+        existsError: (fieldName: string, ...otherFields: string[]) => [fieldName, ...otherFields].includes('totp'),
+        printIfExists: <T>(fieldName: string, x: T) => (fieldName === 'totp' ? x : undefined),
+      },
+    },
+  },
+};
+
+export const WithAppInitiatedAction: Story = {
+  args: {
+    kcContext: {
+      isAppInitiatedAction: true,
+    },
+  },
+};
+
+export const WithPreFilledUserLabel: Story = {
+  args: {
+    kcContext: {
+      totp: {
+        otpCredentials: [{ userLabel: 'MyDevice' }],
+      },
+    },
+  },
+};

package/stories/login/pages/LoginIdpLinkConfirm.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-idp-link-confirm.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-idp-link-confirm.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    kcContext: {
+      url: { loginAction: '/login-action' },
+      idpAlias: 'mockIdpAlias',
+    },
+  },
+};
+
+export const WithFormSubmissionError: Story = {
+  args: {
+    kcContext: {
+      url: { loginAction: '/error' },
+      idpAlias: 'mockIdpAlias',
+      message: {
+        type: 'error',
+        summary: 'An error occurred during form submission.',
+      },
+    },
+  },
+};

package/stories/login/pages/LoginIdpLinkConfirmOverride.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-idp-link-confirm-override.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-idp-link-confirm-override.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/stories/login/pages/LoginIdpLinkEmail.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-idp-link-email.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-idp-link-email.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    kcContext: {
+      url: { loginAction: '/login-action' },
+      idpAlias: 'mockIdpAlias',
+      brokerContext: { username: 'mockUser' },
+      realm: { displayName: 'MockRealm' },
+    },
+  },
+};
+
+export const WithIdpAlias: Story = {
+  args: {
+    kcContext: {
+      url: { loginAction: '/login-action' },
+      idpAlias: 'Google',
+      brokerContext: { username: 'john.doe' },
+      realm: { displayName: 'MyRealm' },
+    },
+  },
+};
+
+export const WithCustomRealmDisplayName: Story = {
+  args: {
+    kcContext: {
+      url: { loginAction: '/login-action' },
+      idpAlias: 'Facebook',
+      brokerContext: { username: 'jane.doe' },
+      realm: { displayName: 'CUSTOM REALM DISPLAY NAME' },
+    },
+  },
+};
+
+export const WithFormSubmissionError: Story = {
+  args: {
+    kcContext: {
+      url: { loginAction: '/error' },
+      idpAlias: 'mockIdpAlias',
+      brokerContext: { username: 'mockUser' },
+      realm: { displayName: 'MockRealm' },
+      message: {
+        type: 'error',
+        summary: 'An error occurred during form submission.',
+      },
+    },
+  },
+};

package/stories/login/pages/LoginOauth2DeviceVerifyUserCode.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-oauth2-device-verify-user-code.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-oauth2-device-verify-user-code.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithErrorMessage: Story = {
+  args: {
+    kcContext: {
+      url: {
+        oauth2DeviceVerificationAction: '/mock-oauth2-device-verification',
+      },
+      message: {
+        summary: 'The user code you entered is invalid. Please try again.',
+        type: 'error',
+      },
+    },
+  },
+};
+
+export const WithEmptyInputField: Story = {
+  args: {
+    kcContext: {
+      url: {
+        oauth2DeviceVerificationAction: '/mock-oauth2-device-verification',
+      },
+      message: {
+        summary: 'User code cannot be empty. Please enter a valid code.',
+        type: 'error',
+      },
+    },
+  },
+};

package/stories/login/pages/LoginOauthGrant.stories.ts

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-oauth-grant.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-oauth-grant.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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',
+  },
+};
+
+export const Default: Story = {
+  args: {
+    kcContext: mockKcContext,
+  },
+};
+
+export const WithoutScopes: Story = {
+  args: {
+    kcContext: {
+      ...mockKcContext,
+      oauth: {
+        ...mockKcContext.oauth,
+        clientScopesRequested: [],
+      },
+    },
+  },
+};
+
+export const WithFormSubmissionError: Story = {
+  args: {
+    kcContext: {
+      ...mockKcContext,
+      url: {
+        oauthAction: '/error',
+      },
+      message: {
+        type: 'error',
+        summary: 'An error occurred during form submission.',
+      },
+    },
+  },
+};
+
+export const WithLogoUri: Story = {
+  args: {
+    kcContext: {
+      ...mockKcContext,
+      client: {
+        ...mockKcContext.client,
+        attributes: {
+          ...mockKcContext.client.attributes,
+          logoUri:
+            'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Logo_of_Twitter.svg/512px-Logo_of_Twitter.svg.png',
+        },
+      },
+    },
+  },
+};
+
+export const WithClientIdInsteadOfName: Story = {
+  args: {
+    kcContext: {
+      ...mockKcContext,
+      client: {
+        ...mockKcContext.client,
+        name: undefined,
+        clientId: 'my-client-app',
+      },
+    },
+  },
+};

package/stories/login/pages/LoginOtp.stories.ts

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-otp.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-otp.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const MultipleOtpCredentials: Story = {
+  args: {
+    kcContext: {
+      otpLogin: {
+        userOtpCredentials: [
+          { id: 'credential1', userLabel: 'Device 1' },
+          { id: 'credential2', userLabel: 'Device 2' },
+          { id: 'credential3', userLabel: 'Device 3' },
+          { id: 'credential4', userLabel: 'Device 4' },
+          { id: 'credential5', userLabel: 'Device 5' },
+          { id: 'credential6', userLabel: 'Device 6' },
+        ],
+        selectedCredentialId: 'credential1',
+      },
+      url: {
+        loginAction: '/login-action',
+      },
+      messagesPerField: {
+        existsError: () => false,
+      },
+    },
+  },
+};
+
+export const WithOtpError: Story = {
+  args: {
+    kcContext: {
+      otpLogin: {
+        userOtpCredentials: [],
+      },
+      url: {
+        loginAction: '/login-action',
+      },
+      messagesPerField: {
+        existsError: (field: string) => field === 'totp',
+        get: () => 'Invalid OTP code',
+      },
+    },
+  },
+};
+
+export const NoOtpCredentials: Story = {
+  args: {
+    kcContext: {
+      otpLogin: {
+        userOtpCredentials: [],
+      },
+      url: {
+        loginAction: '/login-action',
+      },
+      messagesPerField: {
+        existsError: () => false,
+      },
+    },
+  },
+};
+
+export const WithErrorAndMultipleOtpCredentials: Story = {
+  args: {
+    kcContext: {
+      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/LoginPageExpired.stories.ts

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

package/stories/login/pages/LoginPasskeysConditionalAuthenticate.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-passkeys-conditional-authenticate.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-passkeys-conditional-authenticate.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};