@andreyyolkin/keycloakify-vue 0.1.0

package/stories/account/KcPage.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+import { DefaultPage, Template } from '../../src/account';
+import type { KcContext } from './KcContext';
+import { useI18n } from './i18n';
+
+const props = defineProps<{ kcContext: KcContext }>();
+
+const { i18n } = useI18n({ kcContext: props.kcContext });
+
+const classes = {} satisfies { [key in ClassKey]?: string };
+
+// `doUseDefaultCss: false` so Template's `isReadyToRender` gate resolves
+// immediately — pages render reliably (unstyled) in the library's Storybook.
+const doUseDefaultCss = false;
+</script>
+
+<template>
+  <DefaultPage
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :classes="classes"
+    :Template="Template"
+    :doUseDefaultCss="doUseDefaultCss"
+  />
+</template>

package/stories/account/KcPageStory.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getKcContextMock, type KcPageStoryProps } from './KcContextMock';
+import KcPage from './KcPage.vue';
+
+const props = defineProps<KcPageStoryProps>();
+
+const kcContextMock = computed(() => getKcContextMock({ pageId: props.pageId, overrides: props.kcContext }));
+</script>
+
+<template>
+  <KcPage :kcContext="kcContextMock" />
+</template>

package/stories/account/i18n.ts

@@ -0,0 +1,7 @@
+import { i18nBuilder } from '../../src/account/i18n/i18nBuilder';
+import type { ThemeName } from '../kc.gen';
+
+const { useI18n, ofTypeI18n } = i18nBuilder.withThemeName<ThemeName>().build();
+
+type I18n = typeof ofTypeI18n;
+export { useI18n, type I18n };

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'account/account.ftl',
+  component: KcPageStory,
+  args: { pageId: 'account.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithReferrer: Story = {
+  args: {
+    kcContext: {
+      referrer: { url: '#', name: 'myApp' },
+    },
+  },
+};

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'account/applications.ftl',
+  component: KcPageStory,
+  args: { pageId: 'applications.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithConsentedScopes: Story = {
+  args: {
+    kcContext: {
+      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',
+                },
+              ],
+            },
+            additionalGrants: ['offline_access'],
+            clientScopesGranted: ['openid', 'profile', 'email'],
+            effectiveUrl: '#',
+            client: {
+              clientId: 'my-app',
+              name: 'My Application',
+              consentRequired: true,
+              id: 'my-app-id',
+            },
+          },
+          {
+            realmRolesAvailable: [],
+            resourceRolesAvailable: {},
+            additionalGrants: [],
+            clientScopesGranted: [],
+            effectiveUrl: '#',
+            client: {
+              clientId: 'another-app',
+              name: 'Another Application',
+              consentRequired: false,
+              id: 'another-app-id',
+            },
+          },
+        ],
+      },
+      stateChecker: 'test-state-checker',
+    },
+  },
+};

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'account/federatedIdentity.ftl',
+  component: KcPageStory,
+  args: { pageId: 'federatedIdentity.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const ConnectedAndUnconnected: Story = {
+  args: {
+    kcContext: {
+      federatedIdentity: {
+        identities: [
+          {
+            providerId: 'google',
+            displayName: 'Google',
+            userName: 'john.doe@gmail.com',
+            connected: true,
+          },
+          {
+            providerId: 'github',
+            displayName: 'GitHub',
+            userName: '',
+            connected: false,
+          },
+        ],
+        removeLinkPossible: true,
+      },
+      stateChecker: 'test-state-checker',
+      url: {
+        socialUrl: '/social',
+      },
+    },
+  },
+};
+
+export const RemoveLinkNotPossible: Story = {
+  args: {
+    kcContext: {
+      federatedIdentity: {
+        identities: [
+          {
+            providerId: 'google',
+            displayName: 'Google',
+            userName: 'john.doe@gmail.com',
+            connected: true,
+          },
+        ],
+        removeLinkPossible: false,
+      },
+      stateChecker: 'test-state-checker',
+      url: {
+        socialUrl: '/social',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'account/log.ftl',
+  component: KcPageStory,
+  args: { pageId: 'log.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithEvents: Story = {
+  args: {
+    kcContext: {
+      log: {
+        events: [
+          {
+            date: new Date('2024-01-15T10:30:00Z').getTime(),
+            event: 'LOGIN',
+            ipAddress: '192.168.1.100',
+            client: 'my-app',
+            details: [
+              { key: 'auth_method', value: 'openid-connect' },
+              { key: 'token_id', value: 'abc123' },
+            ],
+          },
+          {
+            date: new Date('2024-01-14T08:15:00Z').getTime(),
+            event: 'LOGOUT',
+            ipAddress: '192.168.1.101',
+            client: 'another-app',
+            details: [],
+          },
+        ],
+      },
+    },
+  },
+};

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'account/password.ftl',
+  component: KcPageStory,
+  args: { pageId: 'password.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const PasswordNotSet: Story = {
+  args: {
+    kcContext: {
+      password: { passwordSet: false },
+    },
+  },
+};

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'account/sessions.ftl',
+  component: KcPageStory,
+  args: { pageId: 'sessions.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithSessions: Story = {
+  args: {
+    kcContext: {
+      sessions: {
+        sessions: [
+          {
+            id: 'session-1',
+            ipAddress: '192.168.1.100',
+            started: '1/15/2024, 10:30:00 AM',
+            lastAccess: '1/15/2024, 11:45:00 AM',
+            expires: '1/15/2024, 12:30:00 PM',
+            clients: ['my-app', 'another-app'],
+          },
+          {
+            id: 'session-2',
+            ipAddress: '10.0.0.5',
+            started: '1/14/2024, 9:00:00 AM',
+            lastAccess: '1/14/2024, 9:30:00 AM',
+            expires: '1/14/2024, 10:00:00 AM',
+            clients: ['mobile-app'],
+          },
+        ],
+      },
+    },
+  },
+};

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'account/totp.ftl',
+  component: KcPageStory,
+  args: { pageId: 'totp.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Manual: Story = {
+  args: {
+    kcContext: {
+      mode: 'manual',
+    },
+  },
+};
+
+export const Enabled: Story = {
+  args: {
+    kcContext: {
+      totp: {
+        enabled: true,
+        otpCredentials: [{ id: 'cred1', userLabel: 'My Phone' }],
+      },
+    },
+  },
+};

package/stories/kc.gen.ts

@@ -0,0 +1,17 @@
+export type ThemeName = 'keycloakify-vue';
+
+export const themeNames: ThemeName[] = ['keycloakify-vue'];
+
+export type KcEnvName = never;
+
+export const kcEnvNames: KcEnvName[] = [];
+
+export const kcEnvDefaults: Record<KcEnvName, string> = {};
+
+export type KcContext = import('./login/KcContext').KcContext;
+
+declare global {
+  interface Window {
+    kcContext?: KcContext;
+  }
+}

package/stories/login/KcContext.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import type { ExtendKcContext } from 'keycloakify/login';
+import type { KcEnvName, ThemeName } from '../kc.gen';
+
+export type KcContextExtension = {
+  themeName: ThemeName;
+
+  properties: Record<KcEnvName, string> & {};
+};
+
+export type KcContextExtensionPerPage = {};
+
+export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;

package/stories/login/KcContextMock.ts

@@ -0,0 +1,26 @@
+import { createGetKcContextMock } from 'keycloakify/login/KcContext';
+import type { DeepPartial } from 'keycloakify/tools/DeepPartial';
+import { kcEnvDefaults, themeNames } from '../kc.gen';
+import type { KcContext, KcContextExtension, KcContextExtensionPerPage } from './KcContext';
+
+const kcContextExtension: KcContextExtension = {
+  themeName: themeNames[0],
+  properties: {
+    ...kcEnvDefaults,
+  },
+};
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
+
+export const { getKcContextMock } = createGetKcContextMock({
+  kcContextExtension,
+  kcContextExtensionPerPage,
+  overrides: {},
+  overridesPerPage: {},
+});
+
+type PageId = KcContext['pageId'];
+
+export type KcPageStoryProps = {
+  pageId: PageId;
+  kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>>;
+};

package/stories/login/KcPage.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { DefaultPage, Template, UserProfileFormFields } from '../../src/login';
+import type { KcContext } from './KcContext';
+import { useI18n } from './i18n';
+
+const props = defineProps<{ kcContext: KcContext }>();
+
+const { i18n } = useI18n({ kcContext: props.kcContext });
+
+const classes = {} satisfies { [key in ClassKey]?: string };
+
+// `doUseDefaultCss: false` so Template's `isReadyToRender` gate resolves
+// immediately — pages render reliably (unstyled) in the library's Storybook.
+const doUseDefaultCss = false;
+</script>
+
+<template>
+  <DefaultPage
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :classes="classes"
+    :Template="Template"
+    :UserProfileFormFields="UserProfileFormFields"
+    :doUseDefaultCss="doUseDefaultCss"
+    :doMakeUserConfirmPassword="true"
+  />
+</template>

package/stories/login/KcPageStory.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { getKcContextMock, type KcPageStoryProps } from './KcContextMock';
+import KcPage from './KcPage.vue';
+
+const props = defineProps<KcPageStoryProps>();
+
+const kcContextMock = computed(() => getKcContextMock({ pageId: props.pageId, overrides: props.kcContext }));
+</script>
+
+<template>
+  <KcPage :kcContext="kcContextMock" />
+</template>

package/stories/login/i18n.ts

@@ -0,0 +1,7 @@
+import { i18nBuilder } from '../../src/login';
+import type { ThemeName } from '../kc.gen';
+
+const { useI18n, ofTypeI18n } = i18nBuilder.withThemeName<ThemeName>().build();
+
+type I18n = typeof ofTypeI18n;
+export { useI18n, type I18n };

package/stories/login/pages/Code.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/code.ftl',
+  component: KcPageStory,
+  args: { pageId: 'code.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithErrorCode: Story = {
+  args: {
+    kcContext: {
+      code: {
+        success: false,
+        error: 'Failed to generate code',
+      },
+    },
+  },
+};
+
+export const WithFrenchLanguage: Story = {
+  args: {
+    kcContext: {
+      locale: {
+        currentLanguageTag: 'fr',
+      },
+      code: {
+        success: true,
+        code: 'XYZ789',
+      },
+    },
+  },
+};
+
+export const WithHtmlErrorMessage: Story = {
+  args: {
+    kcContext: {
+      code: {
+        success: false,
+        error: "Something went wrong. <a href='https://example.com'>Try again</a>",
+      },
+    },
+  },
+};

package/stories/login/pages/DeleteAccountConfirm.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/delete-account-confirm.ftl',
+  component: KcPageStory,
+  args: { pageId: 'delete-account-confirm.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithAIAFlow: Story = {
+  args: {
+    kcContext: {
+      triggered_from_aia: true,
+      url: { loginAction: '/login-action' },
+    },
+  },
+};
+
+export const WithoutAIAFlow: Story = {
+  args: {
+    kcContext: {
+      triggered_from_aia: false,
+      url: { loginAction: '/login-action' },
+    },
+  },
+};

package/stories/login/pages/DeleteCredential.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/delete-credential.ftl',
+  component: KcPageStory,
+  args: { pageId: 'delete-credential.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithCustomCredentialLabel: Story = {
+  args: {
+    kcContext: {
+      credentialLabel: 'Test Credential',
+      url: { loginAction: '/login-action' },
+    },
+  },
+};

package/stories/login/pages/Error.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/error.ftl',
+  component: KcPageStory,
+  args: { pageId: 'error.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithAnotherMessage: Story = {
+  args: {
+    kcContext: {
+      message: { summary: 'With another error message' },
+    },
+  },
+};
+
+export const WithHtmlErrorMessage: Story = {
+  args: {
+    kcContext: {
+      message: {
+        summary: "<strong>Error:</strong> Something went wrong. <a href='https://example.com'>Go back</a>",
+      },
+    },
+  },
+};
+
+export const FrenchError: Story = {
+  args: {
+    kcContext: {
+      locale: { currentLanguageTag: 'fr' },
+      message: { summary: "Une erreur s'est produite" },
+    },
+  },
+};
+
+export const WithSkipLink: Story = {
+  args: {
+    kcContext: {
+      message: { summary: 'An error occurred' },
+      skipLink: true,
+      client: {
+        baseUrl: 'https://example.com',
+      },
+    },
+  },
+};

package/stories/login/pages/FrontchannelLogout.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/frontchannel-logout.ftl',
+  component: KcPageStory,
+  args: { pageId: 'frontchannel-logout.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutRedirectUrl: Story = {
+  args: {
+    kcContext: {
+      logout: {
+        clients: [],
+      },
+    },
+  },
+};