@andreyyolkin/keycloakify-vue 0.1.0

package/stories/login/pages/LoginPassword.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-password.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-password.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithPasswordError: Story = {
+  args: {
+    kcContext: {
+      realm: {
+        resetPasswordAllowed: true,
+      },
+      url: {
+        loginAction: '/mock-login',
+        loginResetCredentialsUrl: '/mock-reset-password',
+      },
+      messagesPerField: {
+        existsError: (field: string, ...otherFields: string[]) => [field, ...otherFields].includes('password'),
+        get: (field: string) => (field === 'password' ? 'Invalid password' : ''),
+      },
+    },
+  },
+};
+
+export const WithoutResetPasswordOption: Story = {
+  args: {
+    kcContext: {
+      realm: {
+        resetPasswordAllowed: false,
+      },
+      url: {
+        loginAction: '/mock-login',
+        loginResetCredentialsUrl: '/mock-reset-password',
+      },
+      messagesPerField: {
+        existsError: () => false,
+      },
+    },
+  },
+};

package/stories/login/pages/LoginRecoveryAuthnCodeConfig.stories.ts

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

package/stories/login/pages/LoginRecoveryAuthnCodeInput.stories.ts

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

package/stories/login/pages/LoginResetOtp.stories.ts

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

package/stories/login/pages/LoginResetPassword.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-reset-password.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-reset-password.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithEmailAsUsername: Story = {
+  args: {
+    kcContext: {
+      realm: {
+        loginWithEmailAllowed: true,
+        registrationEmailAsUsername: true,
+      },
+    },
+  },
+};
+
+export const WithUsernameError: Story = {
+  args: {
+    kcContext: {
+      realm: {
+        loginWithEmailAllowed: false,
+        registrationEmailAsUsername: false,
+        duplicateEmailsAllowed: false,
+      },
+      url: {
+        loginAction: '/mock-login-action',
+        loginUrl: '/mock-login-url',
+      },
+      messagesPerField: {
+        existsError: (field: string, ...otherFields: string[]) => [field, ...otherFields].includes('username'),
+        get: (field: string) => (field === 'username' ? 'Invalid username' : ''),
+      },
+      auth: {
+        attemptedUsername: 'invalid_user',
+      },
+    },
+  },
+};

package/stories/login/pages/LoginUpdatePassword.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-update-password.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-update-password.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithPasswordError: Story = {
+  args: {
+    kcContext: {
+      url: {
+        loginAction: '/mock-login-action',
+      },
+      messagesPerField: {
+        existsError: (field: string, ...otherFields: string[]) => [field, ...otherFields].includes('password'),
+        get: (field: string) => (field === 'password' ? 'Password must be at least 8 characters long.' : ''),
+      },
+      isAppInitiatedAction: false,
+    },
+  },
+};
+
+export const WithPasswordConfirmError: Story = {
+  args: {
+    kcContext: {
+      url: {
+        loginAction: '/mock-login-action',
+      },
+      messagesPerField: {
+        existsError: (field: string, ...otherFields: string[]) => [field, ...otherFields].includes('password-confirm'),
+        get: (field: string) => (field === 'password-confirm' ? 'Passwords do not match.' : ''),
+      },
+      isAppInitiatedAction: false,
+    },
+  },
+};
+
+export const WithAppInitiatedAction: Story = {
+  args: {
+    kcContext: {
+      isAppInitiatedAction: true,
+    },
+  },
+};

package/stories/login/pages/LoginUpdateProfile.stories.ts

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

package/stories/login/pages/LoginUsername.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-username.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-username.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithEmailAsUsername: Story = {
+  args: {
+    kcContext: {
+      realm: {
+        loginWithEmailAllowed: true,
+        registrationEmailAsUsername: true,
+      },
+    },
+  },
+};

package/stories/login/pages/LoginVerifyEmail.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-verify-email.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-verify-email.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    kcContext: {
+      message: {
+        summary: 'You need to verify your email to activate your account.',
+        type: 'warning',
+      },
+      user: { email: 'john.doe@gmail.com' },
+    },
+  },
+};
+
+export const WithSuccessMessage: Story = {
+  args: {
+    kcContext: {
+      message: {
+        summary: 'Your email has been successfully verified.',
+        type: 'success',
+      },
+      user: { email: 'john.doe@gmail.com' },
+      url: { loginAction: '/mock-login-action' },
+    },
+  },
+};
+
+export const WithErrorMessage: Story = {
+  args: {
+    kcContext: {
+      message: {
+        summary: 'There was an error verifying your email. Please try again.',
+        type: 'error',
+      },
+      user: { email: 'john.doe@gmail.com' },
+      url: { loginAction: '/mock-login-action' },
+    },
+  },
+};
+
+export const WithInfoMessage: Story = {
+  args: {
+    kcContext: {
+      message: {
+        summary: 'Please verify your email to continue using our services.',
+        type: 'info',
+      },
+      user: { email: 'john.doe@gmail.com' },
+      url: { loginAction: '/mock-login-action' },
+    },
+  },
+};

package/stories/login/pages/LoginX509Info.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/login-x509-info.ftl',
+  component: KcPageStory,
+  args: { pageId: 'login-x509-info.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutUserEnabled: Story = {
+  args: {
+    kcContext: {
+      url: { loginAction: '/mock-login-action' },
+      x509: {
+        formData: {
+          subjectDN: 'CN=John Doe, OU=Example Org, O=Example Inc, C=US',
+          username: 'johndoe',
+          isUserEnabled: false,
+        },
+      },
+    },
+  },
+};

package/stories/login/pages/LogoutConfirm.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/logout-confirm.ftl',
+  component: KcPageStory,
+  args: { pageId: 'logout-confirm.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithCustomLogoutMessage: Story = {
+  args: {
+    kcContext: {
+      url: {
+        logoutConfirmAction: '/mock-logout-action',
+      },
+      client: {
+        baseUrl: '/mock-client-url',
+      },
+      logoutConfirm: {
+        code: 'mock-session-code',
+        skipLink: false,
+      },
+      message: {
+        summary: 'Are you sure you want to log out from all sessions?',
+        type: 'warning',
+      },
+    },
+  },
+};

package/stories/login/pages/Register.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/register.ftl',
+  component: KcPageStory,
+  args: { pageId: 'register.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutPasswordField: Story = {
+  args: { kcContext: { passwordRequired: false } },
+};
+
+export const WithEmailAlreadyExists: Story = {
+  args: {
+    kcContext: {
+      profile: {
+        attributesByName: {
+          email: {
+            value: 'max.mustermann@mail.com',
+          },
+        },
+      },
+      messagesPerField: {
+        existsError: (fieldName: string) => fieldName === 'email',
+        get: (fieldName: string) => (fieldName === 'email' ? 'Email already exists.' : ''),
+      },
+    },
+  },
+};
+
+export const WithRecaptcha: Story = {
+  args: {
+    kcContext: {
+      recaptchaRequired: true,
+      recaptchaVisible: true,
+      recaptchaSiteKey: '6LfQHvApAAAAAA',
+    },
+  },
+};
+
+export const WithTermsAcceptance: Story = {
+  args: {
+    kcContext: {
+      termsAcceptanceRequired: true,
+    },
+  },
+};
+
+export const WithRestrictedToMITStudents: Story = {
+  args: {
+    kcContext: {
+      profile: {
+        attributesByName: {
+          email: {
+            validators: {
+              pattern: {
+                pattern: '^[^@]+@([^.]+\\.)*((mit\\.edu)|(berkeley\\.edu))$',
+                'error-message': '${profile.attributes.email.pattern.error}',
+              },
+            },
+            annotations: {
+              inputHelperTextBefore: 'Only students from the MIT or Berkeley are allowed to register',
+            },
+          },
+        },
+      },
+    },
+  },
+};

package/stories/login/pages/SamlPostForm.stories.ts

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

package/stories/login/pages/SelectAuthenticator.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/select-authenticator.ftl',
+  component: KcPageStory,
+  args: { pageId: 'select-authenticator.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithDifferentAuthenticationMethods: Story = {
+  args: {
+    kcContext: {
+      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 = {
+  args: {
+    kcContext: {
+      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 = {
+  args: {
+    kcContext: {
+      url: {
+        loginAction: '/mock-login-action',
+      },
+      auth: {
+        authenticationSelections: [],
+      },
+    },
+  },
+};

package/stories/login/pages/SelectOrganization.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import KcPageStory from '../KcPageStory.vue';
+
+const meta = {
+  title: 'login/select-organization.ftl',
+  component: KcPageStory,
+  args: { pageId: 'select-organization.ftl' },
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithMultipleOrganizations: Story = {
+  args: {
+    kcContext: {
+      user: {
+        organizations: [
+          { alias: 'acme', name: 'Acme Corp' },
+          { alias: 'globex', name: 'Globex Corporation' },
+          { alias: 'initech', name: 'Initech' },
+        ],
+      },
+    },
+  },
+};
+
+export const WithGridLayout: Story = {
+  args: {
+    kcContext: {
+      user: {
+        organizations: [
+          { alias: 'acme', name: 'Acme Corp' },
+          { alias: 'globex', name: 'Globex Corporation' },
+          { alias: 'initech', name: 'Initech' },
+          { alias: 'umbrella', name: 'Umbrella Corp' },
+        ],
+      },
+    },
+  },
+};
+
+export const WithAliasAsFallbackName: Story = {
+  args: {
+    kcContext: {
+      user: {
+        organizations: [{ alias: 'my-org' }, { alias: 'another-org', name: 'Another Org' }],
+      },
+    },
+  },
+};
+
+export const WithNoOrganizations: Story = {
+  args: {
+    kcContext: {
+      user: {
+        organizations: [],
+      },
+    },
+  },
+};