@andreyyolkin/keycloakify-vue 0.1.0

package/src/account/Template.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import { clsx } from 'keycloakify/tools/clsx';
+import type { KcContext } from 'keycloakify/account/KcContext';
+import type { I18n } from './i18n/i18n';
+import type { TemplateProps } from './TemplateProps';
+import { useInitialize } from './Template.useInitialize';
+import { useSetClassName } from '../tools/useSetClassName';
+
+const props = defineProps<TemplateProps<KcContext, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const { url, features, realm, message, referrer } = props.kcContext;
+
+onMounted(() => {
+  document.title = props.i18n.msgStr('accountManagementTitle');
+});
+
+useSetClassName({
+  qualifiedName: 'html',
+  className: kcClsx('kcHtmlClass'),
+});
+
+useSetClassName({
+  qualifiedName: 'body',
+  className: clsx('admin-console', 'user', kcClsx('kcBodyClass')),
+});
+
+const { isReadyToRender } = useInitialize({
+  kcContext: props.kcContext,
+  doUseDefaultCss: props.doUseDefaultCss,
+});
+</script>
+
+<template>
+  <template v-if="isReadyToRender">
+    <header class="navbar navbar-default navbar-pf navbar-main header">
+      <nav
+        class="navbar"
+        role="navigation"
+      >
+        <div class="navbar-header">
+          <div class="container">
+            <h1 class="navbar-title">Keycloak</h1>
+          </div>
+        </div>
+        <div class="navbar-collapse navbar-collapse-1">
+          <div class="container">
+            <ul class="nav navbar-nav navbar-utility">
+              <li v-if="i18n.enabledLanguages.length > 1">
+                <div
+                  class="kc-dropdown"
+                  id="kc-locale-dropdown"
+                >
+                  <a
+                    href="#"
+                    id="kc-current-locale-link"
+                  >
+                    {{ i18n.currentLanguage.label }}
+                  </a>
+                  <ul>
+                    <li
+                      v-for="enabledLanguage in i18n.enabledLanguages"
+                      :key="enabledLanguage.languageTag"
+                      class="kc-dropdown-item"
+                    >
+                      <a :href="enabledLanguage.href">{{ enabledLanguage.label }}</a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              <li v-if="referrer?.url">
+                <a
+                  :href="referrer.url"
+                  id="referrer"
+                >
+                  <component :is="i18n.msg('backTo', referrer.name)" />
+                </a>
+              </li>
+              <li>
+                <a :href="url.getLogoutUrl()">
+                  <component :is="i18n.msg('doSignOut')" />
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </header>
+
+    <div class="container">
+      <div class="bs-sidebar col-sm-3">
+        <ul>
+          <li :class="clsx(active === 'account' && 'active')">
+            <a :href="url.accountUrl">
+              <component :is="i18n.msg('account')" />
+            </a>
+          </li>
+          <li
+            v-if="features.passwordUpdateSupported"
+            :class="clsx(active === 'password' && 'active')"
+          >
+            <a :href="url.passwordUrl">
+              <component :is="i18n.msg('password')" />
+            </a>
+          </li>
+          <li :class="clsx(active === 'totp' && 'active')">
+            <a :href="url.totpUrl">
+              <component :is="i18n.msg('authenticator')" />
+            </a>
+          </li>
+          <li
+            v-if="features.identityFederation"
+            :class="clsx(active === 'social' && 'active')"
+          >
+            <a :href="url.socialUrl">
+              <component :is="i18n.msg('federatedIdentity')" />
+            </a>
+          </li>
+          <li :class="clsx(active === 'sessions' && 'active')">
+            <a :href="url.sessionsUrl">
+              <component :is="i18n.msg('sessions')" />
+            </a>
+          </li>
+          <li :class="clsx(active === 'applications' && 'active')">
+            <a :href="url.applicationsUrl">
+              <component :is="i18n.msg('applications')" />
+            </a>
+          </li>
+          <li
+            v-if="features.log"
+            :class="clsx(active === 'log' && 'active')"
+          >
+            <a :href="url.logUrl">
+              <component :is="i18n.msg('log')" />
+            </a>
+          </li>
+          <li
+            v-if="realm.userManagedAccessAllowed && features.authorization"
+            :class="clsx(active === 'authorization' && 'active')"
+          >
+            <a :href="url.resourceUrl">
+              <component :is="i18n.msg('myResources')" />
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="col-sm-9 content-area">
+        <div
+          v-if="message !== undefined"
+          :class="clsx('alert', `alert-${message.type}`)"
+        >
+          <span
+            v-if="message.type === 'success'"
+            class="pficon pficon-ok"
+          ></span>
+          <span
+            v-else-if="message.type === 'error'"
+            class="pficon pficon-error-circle-o"
+          ></span>
+          <span
+            class="kc-feedback-text"
+            v-html="kcSanitize(message.summary)"
+          ></span>
+        </div>
+
+        <slot />
+      </div>
+    </div>
+  </template>
+</template>

package/src/account/TemplateProps.ts

@@ -0,0 +1,11 @@
+import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+
+export type TemplateProps<KcContext, I18n> = {
+  kcContext: KcContext;
+  i18n: I18n;
+  doUseDefaultCss: boolean;
+  active: string;
+  classes?: Partial<Record<ClassKey, string>>;
+};
+
+export type { ClassKey };

package/src/account/i18n/i18n.ts

@@ -0,0 +1,16 @@
+import type { GenericI18n_noJsx } from 'keycloakify/account/i18n/noJsx/GenericI18n_noJsx';
+import { type MessageKey as MessageKey_defaultSet } from 'keycloakify/account/i18n/messages_defaultSet/types';
+import type { VNode } from 'vue';
+
+/** INTERNAL: DO NOT IMPORT THIS */
+export type GenericI18n_vue<MessageKey extends string, LanguageTag extends string> = GenericI18n_noJsx<
+  MessageKey,
+  LanguageTag
+> & {
+  /** Same as msgStr but returns a VNode with the html string rendered as html. */
+  msg: (key: MessageKey_defaultSet, ...args: (string | undefined)[]) => VNode;
+  /** Same as advancedMsgStr but returns a VNode with the html string rendered as html. */
+  advancedMsg: (key: string, ...args: (string | undefined)[]) => VNode;
+};
+
+export type I18n = GenericI18n_vue<MessageKey_defaultSet, string>;

package/src/account/i18n/i18nBuilder.ts

@@ -0,0 +1,100 @@
+import type {
+  LanguageTag as LanguageTag_defaultSet,
+  MessageKey as MessageKey_defaultSet,
+} from 'keycloakify/account/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/account/i18n/index.ts

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

package/src/account/i18n/useI18n.ts

@@ -0,0 +1,128 @@
+import {
+  type LanguageTag as LanguageTag_defaultSet,
+  type MessageKey as MessageKey_defaultSet,
+} from 'keycloakify/account/i18n/messages_defaultSet/types';
+import type { GenericI18n_noJsx } from 'keycloakify/account/i18n/noJsx/GenericI18n_noJsx';
+import { createGetI18n, type KcContextLike } from 'keycloakify/account/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/account/index.ts

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

package/src/account/pages/Account.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { clsx } from 'keycloakify/tools/clsx';
+import type { KcContext } from 'keycloakify/account/KcContext';
+import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'account.ftl' }>, I18n>>();
+
+const classes = {
+  ...props.classes,
+  kcBodyClass: clsx(props.classes?.kcBodyClass, 'user'),
+};
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes,
+});
+
+const kcContext = props.kcContext;
+const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="props.doUseDefaultCss"
+    :classes="classes"
+    active="account"
+  >
+    <div class="row">
+      <div class="col-md-10">
+        <h2><component :is="props.i18n.msg('editAccountHtmlTitle')" /></h2>
+      </div>
+      <div class="col-md-2 subtitle">
+        <span class="subtitle">
+          <span class="required">*</span>
+          <component :is="props.i18n.msg('requiredFields')" />
+        </span>
+      </div>
+    </div>
+
+    <form
+      :action="url.accountUrl"
+      class="form-horizontal"
+      method="post"
+    >
+      <input
+        type="hidden"
+        id="stateChecker"
+        name="stateChecker"
+        :value="stateChecker"
+      />
+
+      <template v-if="!realm.registrationEmailAsUsername">
+        <div :class="clsx('form-group', messagesPerField.printIfExists('username', 'has-error'))">
+          <div class="col-sm-2 col-md-2">
+            <label
+              for="username"
+              class="control-label"
+            >
+              <component :is="props.i18n.msg('username')" />
+            </label>
+            <span
+              v-if="realm.editUsernameAllowed"
+              class="required"
+              >*</span
+            >
+          </div>
+          <div class="col-sm-10 col-md-10">
+            <input
+              type="text"
+              class="form-control"
+              id="username"
+              name="username"
+              :disabled="!realm.editUsernameAllowed"
+              :value="account.username ?? ''"
+            />
+          </div>
+        </div>
+      </template>
+
+      <div :class="clsx('form-group', messagesPerField.printIfExists('email', 'has-error'))">
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="email"
+            class="control-label"
+          >
+            <component :is="props.i18n.msg('email')" />
+          </label>
+          <span class="required">*</span>
+        </div>
+        <div class="col-sm-10 col-md-10">
+          <input
+            type="text"
+            class="form-control"
+            id="email"
+            name="email"
+            autofocus
+            :value="account.email ?? ''"
+          />
+        </div>
+      </div>
+
+      <div :class="clsx('form-group', messagesPerField.printIfExists('firstName', 'has-error'))">
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="firstName"
+            class="control-label"
+          >
+            <component :is="props.i18n.msg('firstName')" />
+          </label>
+          <span class="required">*</span>
+        </div>
+        <div class="col-sm-10 col-md-10">
+          <input
+            type="text"
+            class="form-control"
+            id="firstName"
+            name="firstName"
+            :value="account.firstName ?? ''"
+          />
+        </div>
+      </div>
+
+      <div :class="clsx('form-group', messagesPerField.printIfExists('lastName', 'has-error'))">
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="lastName"
+            class="control-label"
+          >
+            <component :is="props.i18n.msg('lastName')" />
+          </label>
+          <span class="required">*</span>
+        </div>
+        <div class="col-sm-10 col-md-10">
+          <input
+            type="text"
+            class="form-control"
+            id="lastName"
+            name="lastName"
+            :value="account.lastName ?? ''"
+          />
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div
+          id="kc-form-buttons"
+          class="col-md-offset-2 col-md-10 submit"
+        >
+          <div>
+            <a
+              v-if="referrer !== undefined"
+              :href="referrer?.url"
+            >
+              <component :is="props.i18n.msg('backToApplication')" />
+            </a>
+            <button
+              type="submit"
+              :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+              name="submitAction"
+              value="Save"
+            >
+              <component :is="props.i18n.msg('doSave')" />
+            </button>
+            <button
+              type="submit"
+              :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+              name="submitAction"
+              value="Cancel"
+            >
+              <component :is="props.i18n.msg('doCancel')" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </component>
+</template>