@andreyyolkin/keycloakify-vue 0.1.0

package/src/login/i18n/i18nBuilder.ts

@@ -0,0 +1,100 @@
+import type {
+  LanguageTag as LanguageTag_defaultSet,
+  MessageKey as MessageKey_defaultSet,
+} from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { type ReturnTypeOfCreateUseI18n, createUseI18n } from './useI18n';
+
+export type I18nBuilder<
+  ThemeName extends string = never,
+  MessageKey_themeDefined extends string = never,
+  LanguageTag_notInDefaultSet extends string = never,
+  ExcludedMethod extends 'withThemeName' | 'withExtraLanguages' | 'withCustomTranslations' = never,
+> = Omit<
+  {
+    withThemeName: <ThemeName extends string>() => I18nBuilder<
+      ThemeName,
+      MessageKey_themeDefined,
+      LanguageTag_notInDefaultSet,
+      ExcludedMethod | 'withThemeName'
+    >;
+    withExtraLanguages: <LanguageTag_notInDefaultSet extends string>(extraLanguageTranslations: {
+      [LanguageTag in LanguageTag_notInDefaultSet]: {
+        label: string;
+        getMessages: () => Promise<{
+          default: Record<MessageKey_defaultSet, string>;
+        }>;
+      };
+    }) => I18nBuilder<
+      ThemeName,
+      MessageKey_themeDefined,
+      LanguageTag_notInDefaultSet,
+      ExcludedMethod | 'withExtraLanguages'
+    >;
+    withCustomTranslations: <MessageKey_themeDefined extends string>(
+      messagesByLanguageTag_themeDefined: Partial<{
+        [LanguageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: Record<
+          MessageKey_themeDefined,
+          string | Record<ThemeName, string>
+        >;
+      }>,
+    ) => I18nBuilder<
+      ThemeName,
+      MessageKey_themeDefined,
+      LanguageTag_notInDefaultSet,
+      ExcludedMethod | 'withCustomTranslations'
+    >;
+    build: () => ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet>;
+  },
+  ExcludedMethod
+>;
+
+function createI18nBuilder<
+  ThemeName extends string = never,
+  MessageKey_themeDefined extends string = never,
+  LanguageTag_notInDefaultSet extends string = never,
+>(params: {
+  extraLanguageTranslations: {
+    [LanguageTag in LanguageTag_notInDefaultSet]: {
+      label: string;
+      getMessages: () => Promise<{
+        default: Record<MessageKey_defaultSet, string>;
+      }>;
+    };
+  };
+  messagesByLanguageTag_themeDefined: Partial<{
+    [LanguageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: Record<
+      MessageKey_themeDefined,
+      string | Record<ThemeName, string>
+    >;
+  }>;
+}): I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet> {
+  const i18nBuilder: I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet> = {
+    withThemeName: () =>
+      createI18nBuilder({
+        extraLanguageTranslations: params.extraLanguageTranslations,
+        messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined as any,
+      }),
+    withExtraLanguages: (extraLanguageTranslations) =>
+      createI18nBuilder({
+        extraLanguageTranslations,
+        messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined as any,
+      }),
+    withCustomTranslations: (messagesByLanguageTag_themeDefined) =>
+      createI18nBuilder({
+        extraLanguageTranslations: params.extraLanguageTranslations,
+        messagesByLanguageTag_themeDefined,
+      }),
+    build: () =>
+      createUseI18n({
+        extraLanguageTranslations: params.extraLanguageTranslations,
+        messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined,
+      }),
+  };
+
+  return i18nBuilder;
+}
+
+export const i18nBuilder = createI18nBuilder({
+  extraLanguageTranslations: {},
+  messagesByLanguageTag_themeDefined: {},
+});

package/src/login/i18n/index.ts

@@ -0,0 +1 @@
+export * from './i18n';

package/src/login/i18n/useI18n.ts

@@ -0,0 +1,128 @@
+import {
+  type LanguageTag as LanguageTag_defaultSet,
+  type MessageKey as MessageKey_defaultSet,
+} from 'keycloakify/login/i18n/messages_defaultSet/types';
+import type { GenericI18n_noJsx } from 'keycloakify/login/i18n/noJsx/GenericI18n_noJsx';
+import { createGetI18n, type KcContextLike } from 'keycloakify/login/i18n/noJsx/getI18n';
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import { Reflect } from 'tsafe/Reflect';
+import { getCurrentInstance, h, onMounted, onUnmounted, ref, type Ref, type VNode } from 'vue';
+import type { GenericI18n_vue } from './i18n';
+
+export type ReturnTypeOfCreateUseI18n<
+  MessageKey_themeDefined extends string,
+  LanguageTag_notInDefaultSet extends string,
+> = {
+  useI18n: (params: { kcContext: KcContextLike }) => {
+    i18n: Ref<
+      GenericI18n_vue<
+        MessageKey_defaultSet | MessageKey_themeDefined,
+        LanguageTag_defaultSet | LanguageTag_notInDefaultSet
+      >
+    >;
+  };
+  ofTypeI18n: GenericI18n_vue<
+    MessageKey_defaultSet | MessageKey_themeDefined,
+    LanguageTag_defaultSet | LanguageTag_notInDefaultSet
+  >;
+};
+
+export type { KcContextLike };
+
+export function createUseI18n<
+  ThemeName extends string = string,
+  MessageKey_themeDefined extends string = never,
+  LanguageTag_notInDefaultSet extends string = never,
+>(params: {
+  extraLanguageTranslations: {
+    [languageTag in LanguageTag_notInDefaultSet]: {
+      label: string;
+      getMessages: () => Promise<{
+        default: Record<MessageKey_defaultSet, string>;
+      }>;
+    };
+  };
+  messagesByLanguageTag_themeDefined: Partial<{
+    [languageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: {
+      [key in MessageKey_themeDefined]: string | Record<ThemeName, string>;
+    };
+  }>;
+}): ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet> {
+  const { extraLanguageTranslations, messagesByLanguageTag_themeDefined } = params;
+
+  type LanguageTag = LanguageTag_defaultSet | LanguageTag_notInDefaultSet;
+  type MessageKey = MessageKey_defaultSet | MessageKey_themeDefined;
+  type I18n = GenericI18n_vue<MessageKey, LanguageTag>;
+
+  const cache = new WeakMap<GenericI18n_noJsx<MessageKey, LanguageTag>, I18n>();
+
+  function renderHtmlString(htmlString: string, msgKey: string): VNode {
+    const hasBlockLevelTag =
+      htmlString.includes('<') &&
+      htmlString.includes('>') &&
+      ['div', 'section', 'article', 'ul', 'ol'].some((tagName) => htmlString.includes(`<${tagName}`));
+    const elementName = hasBlockLevelTag ? 'div' : 'span';
+    return h(elementName, {
+      'data-kc-msg': msgKey,
+      innerHTML: kcSanitize(htmlString),
+    });
+  }
+
+  function withVue(i18n_noJsx: GenericI18n_noJsx<MessageKey, LanguageTag>): I18n {
+    const cached = cache.get(i18n_noJsx);
+    if (cached !== undefined) {
+      return cached;
+    }
+    const i18n: I18n = {
+      ...i18n_noJsx,
+      msg: (msgKey, ...args) => renderHtmlString(i18n_noJsx.msgStr(msgKey, ...args), msgKey),
+      advancedMsg: (msgKey, ...args) => renderHtmlString(i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey),
+    };
+    cache.set(i18n_noJsx, i18n);
+    return i18n;
+  }
+
+  // Make block-level kc messages render inline (mirrors the Svelte port).
+  if (typeof document !== 'undefined' && document.querySelector('style[data-kc-i18n]') === null) {
+    const styleElement = document.createElement('style');
+    styleElement.setAttribute('data-kc-i18n', '');
+    styleElement.textContent = `div[data-kc-msg] { display: inline-block; }`;
+    document.head.prepend(styleElement);
+  }
+
+  const { getI18n } = createGetI18n({
+    extraLanguageTranslations,
+    messagesByLanguageTag_themeDefined,
+  });
+
+  function useI18n(params: { kcContext: KcContextLike }): { i18n: Ref<I18n> } {
+    const { kcContext } = params;
+    const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+
+    const i18nRef = ref(withVue(i18n)) as Ref<I18n>;
+
+    if (getCurrentInstance() !== null) {
+      onMounted(() => {
+        let isActive = true;
+        onUnmounted(() => {
+          isActive = false;
+        });
+        prI18n_currentLanguage?.then((i18n_currentLanguage) => {
+          if (!isActive) {
+            return;
+          }
+          i18nRef.value = withVue(i18n_currentLanguage);
+        });
+      });
+    } else {
+      // Outside component context (e.g. tests): resolve the promise directly.
+      prI18n_currentLanguage?.then((i18n_currentLanguage) => {
+        i18nRef.value = withVue(i18n_currentLanguage);
+      });
+    }
+
+    return { i18n: i18nRef };
+  }
+
+  return { useI18n, ofTypeI18n: Reflect<I18n>() };
+}

package/src/login/index.ts

@@ -0,0 +1,5 @@
+export type { ExtendKcContext } from 'keycloakify/login/KcContext';
+export { i18nBuilder } from './i18n/i18nBuilder';
+export { default as DefaultPage } from './DefaultPage.vue';
+export { default as Template } from './Template.vue';
+export { default as UserProfileFormFields } from './components/UserProfileFormFields.vue';

package/src/login/lib/useUserProfileForm.ts

@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import type { Attribute, PasswordPolicies, Validators } from 'keycloakify/login/KcContext';
+import * as reactlessApi from 'keycloakify/login/lib/getUserProfileApi';
+import { assert, type Equals } from 'tsafe/assert';
+import { computed, onMounted, onUnmounted, ref, type ComputedRef, type VNode } from 'vue';
+import type { I18n } from '../i18n/i18n';
+export { getButtonToDisplayForMultivaluedAttributeField } from 'keycloakify/login/lib/getUserProfileApi';
+
+export type FormFieldError = {
+  errorMessage: VNode;
+  errorMessageStr: string;
+  source: FormFieldError.Source;
+  fieldIndex: number | undefined;
+};
+
+{
+  type A = Omit<FormFieldError, 'errorMessage' | 'errorMessageStr'>;
+  type B = Omit<reactlessApi.FormFieldError, 'advancedMsgArgs'>;
+  assert<Equals<A, B>>();
+}
+
+export namespace FormFieldError {
+  export type Source = Source.Validator | Source.PasswordPolicy | Source.Server | Source.Other;
+  export namespace Source {
+    export type Validator = { type: 'validator'; name: keyof Validators };
+    export type PasswordPolicy = {
+      type: 'passwordPolicy';
+      name: keyof PasswordPolicies;
+    };
+    export type Server = { type: 'server' };
+    export type Other = {
+      type: 'other';
+      rule: 'passwordConfirmMatchesPassword' | 'requiredField';
+    };
+  }
+}
+
+{
+  type A = FormFieldError.Source;
+  type B = reactlessApi.FormFieldError.Source;
+  assert<Equals<A, B>>();
+}
+
+export type FormFieldState = {
+  attribute: Attribute;
+  displayableErrors: FormFieldError[];
+  valueOrValues: string | string[];
+};
+
+{
+  type A = Omit<FormFieldState, 'displayableErrors'>;
+  type B = Omit<reactlessApi.FormFieldState, 'displayableErrors'>;
+  assert<Equals<A, B>>();
+}
+
+export type FormState = {
+  isFormSubmittable: boolean;
+  formFieldStates: FormFieldState[];
+};
+
+export type FormAction = reactlessApi.FormAction;
+
+export type KcContextLike = reactlessApi.KcContextLike;
+
+export type I18nLike = Pick<I18n, 'advancedMsg' | 'advancedMsgStr'>;
+
+export type ParamsOfUseUserProfileForm = {
+  kcContext: KcContextLike;
+  doMakeUserConfirmPassword: boolean;
+  i18n: I18nLike;
+};
+
+{
+  type A = Omit<ParamsOfUseUserProfileForm, 'i18n'>;
+  type B = reactlessApi.ParamsOfGetUserProfileApi;
+  assert<Equals<A, B>>();
+}
+
+export type ReturnTypeOfUseUserProfileForm = {
+  formState: ComputedRef<FormState>;
+  dispatchFormAction: (action: FormAction) => void;
+};
+
+export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTypeOfUseUserProfileForm {
+  const { doMakeUserConfirmPassword, i18n, kcContext } = params;
+
+  const { advancedMsg, advancedMsgStr } = i18n;
+
+  const api = reactlessApi.getUserProfileApi({
+    kcContext,
+    doMakeUserConfirmPassword,
+  });
+
+  const formState_reactless = ref(api.getFormState());
+
+  let unsubscribe: (() => void) | undefined;
+
+  onMounted(() => {
+    unsubscribe = api.subscribeToFormState(() => {
+      formState_reactless.value = api.getFormState();
+    }).unsubscribe;
+  });
+
+  onUnmounted(() => unsubscribe?.());
+
+  const formState = computed<FormState>(() => ({
+    isFormSubmittable: formState_reactless.value.isFormSubmittable,
+    formFieldStates: formState_reactless.value.formFieldStates.map((formFieldState_reactless) => ({
+      attribute: formFieldState_reactless.attribute,
+      valueOrValues: formFieldState_reactless.valueOrValues,
+      displayableErrors: formFieldState_reactless.displayableErrors.map((formFieldError_reactless) => ({
+        errorMessage: advancedMsg(...formFieldError_reactless.advancedMsgArgs),
+        errorMessageStr: advancedMsgStr(...formFieldError_reactless.advancedMsgArgs),
+        source: formFieldError_reactless.source,
+        fieldIndex: formFieldError_reactless.fieldIndex,
+      })),
+    })),
+  }));
+
+  return { formState, dispatchFormAction: api.dispatchFormAction };
+}

package/src/login/pages/Code.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'code.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { code } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <component
+        v-if="code.success"
+        :is="props.i18n.msg('codeSuccessTitle')"
+      />
+      <component
+        v-else
+        :is="props.i18n.msg('codeErrorTitle', code.error)"
+      />
+    </template>
+
+    <div id="kc-code">
+      <template v-if="code.success">
+        <p><component :is="props.i18n.msg('copyCodeInstruction')" /></p>
+        <input
+          id="code"
+          :class="kcClsx('kcTextareaClass')"
+          :value="code.code"
+        />
+      </template>
+      <p
+        v-else-if="code.error"
+        id="error"
+        v-html="kcSanitize(code.error)"
+      />
+    </div>
+  </component>
+</template>

package/src/login/pages/DeleteAccountConfirm.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'delete-account-confirm.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, triggered_from_aia } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('deleteAccountConfirm')" />
+    </template>
+
+    <form
+      :action="url.loginAction"
+      class="form-vertical"
+      method="post"
+    >
+      <div
+        class="alert alert-warning"
+        style="margin-top: 0; margin-bottom: 30px"
+      >
+        <span class="pficon pficon-warning-triangle-o"></span>
+        <component :is="props.i18n.msg('irreversibleAction')" />
+      </div>
+      <p><component :is="props.i18n.msg('deletingImplies')" /></p>
+      <ul style="color: #72767b; list-style: disc; list-style-position: inside">
+        <li><component :is="props.i18n.msg('loggingOutImmediately')" /></li>
+        <li><component :is="props.i18n.msg('errasingData')" /></li>
+      </ul>
+      <p class="delete-account-text">
+        <component :is="props.i18n.msg('finalDeletionConfirmation')" />
+      </p>
+      <div id="kc-form-buttons">
+        <input
+          :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+          type="submit"
+          :value="props.i18n.msgStr('doConfirmDelete')"
+        />
+        <button
+          v-if="triggered_from_aia"
+          :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+          style="margin-left: calc(100% - 220px)"
+          type="submit"
+          name="cancel-aia"
+          value="true"
+        >
+          {{ props.i18n.msgStr('doCancel') }}
+        </button>
+      </div>
+    </form>
+  </component>
+</template>

package/src/login/pages/DeleteCredential.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'delete-credential.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, credentialLabel } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="false"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('deleteCredentialTitle', credentialLabel)" />
+    </template>
+
+    <div id="kc-delete-text">
+      <component :is="props.i18n.msg('deleteCredentialMessage', credentialLabel)" />
+    </div>
+    <form
+      class="form-actions"
+      :action="url.loginAction"
+      method="POST"
+    >
+      <input
+        :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+        name="accept"
+        id="kc-accept"
+        type="submit"
+        :value="props.i18n.msgStr('doConfirmDelete')"
+      />
+      <input
+        :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+        name="cancel-aia"
+        :value="props.i18n.msgStr('doCancel')"
+        id="kc-decline"
+        type="submit"
+      />
+    </form>
+    <div class="clearfix" />
+  </component>
+</template>

package/src/login/pages/Error.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'error.ftl' }>, I18n>>();
+
+const kcContext = props.kcContext;
+const { message, client, skipLink } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="false"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('errorTitle')" />
+    </template>
+
+    <div id="kc-error-message">
+      <p
+        class="instruction"
+        v-html="kcSanitize(message.summary)"
+      />
+      <p v-if="!skipLink && !!client?.baseUrl">
+        <a
+          id="backToApplication"
+          :href="client.baseUrl"
+        >
+          <component :is="props.i18n.msg('backToApplication')" />
+        </a>
+      </p>
+    </div>
+  </component>
+</template>

package/src/login/pages/FrontchannelLogout.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { ref, watch } from 'vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'frontchannel-logout.ftl' }>, I18n>>();
+
+const kcContext = props.kcContext;
+const { logout } = kcContext;
+
+const iframeLoadCount = ref(0);
+
+watch(iframeLoadCount, (count) => {
+  if (!logout.logoutRedirectUri) {
+    return;
+  }
+
+  if (count !== logout.clients.length) {
+    return;
+  }
+
+  window.location.replace(logout.logoutRedirectUri);
+});
+
+function onIframeLoad() {
+  iframeLoadCount.value++;
+}
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :documentTitle="props.i18n.msgStr('frontchannel-logout.title')"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('frontchannel-logout.title')" />
+    </template>
+
+    <p><component :is="props.i18n.msg('frontchannel-logout.message')" /></p>
+    <ul>
+      <li
+        v-for="client in logout.clients"
+        :key="client.name"
+      >
+        {{ client.name }}
+        <iframe
+          :src="client.frontChannelLogoutUrl"
+          style="display: none"
+          @load="onIframeLoad"
+        />
+      </li>
+    </ul>
+    <a
+      v-if="logout.logoutRedirectUri !== undefined"
+      id="continue"
+      class="btn btn-primary"
+      :href="logout.logoutRedirectUri"
+    >
+      <component :is="props.i18n.msg('doContinue')" />
+    </a>
+  </component>
+</template>