@andreyyolkin/keycloakify-vue 0.1.0

package/src/login/Template.useInitialize.ts

@@ -0,0 +1,71 @@
+import { assert } from 'keycloakify/tools/assert';
+import { watch, type Ref } from 'vue';
+import { useInsertLinkTags } from '../tools/useInsertLinkTags';
+import { useInsertScriptTags } from '../tools/useInsertScriptTags';
+import type { KcContext } from 'keycloakify/login/KcContext';
+
+export type KcContextLike = {
+  url: {
+    resourcesCommonPath: string;
+    resourcesPath: string;
+    ssoLoginInOtherTabsUrl: string;
+  };
+  scripts?: string[];
+  authenticationSession?: {
+    authSessionIdHash: string;
+  };
+};
+
+assert<keyof KcContextLike extends keyof KcContext ? true : false>();
+assert<KcContext extends KcContextLike ? true : false>();
+
+export function useInitialize(params: { kcContext: KcContextLike; doUseDefaultCss: boolean }): {
+  isReadyToRender: Ref<boolean>;
+} {
+  const { kcContext, doUseDefaultCss } = params;
+  const { url, scripts } = kcContext;
+
+  const { areAllStyleSheetsLoaded } = useInsertLinkTags({
+    componentOrHookName: 'Template',
+    hrefs: !doUseDefaultCss
+      ? []
+      : [
+          `${url.resourcesCommonPath}/node_modules/@patternfly/patternfly/patternfly.min.css`,
+          `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
+          `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+          `${url.resourcesCommonPath}/lib/pficon/pficon.css`,
+          `${url.resourcesPath}/css/login.css`,
+        ],
+  });
+
+  const { insertScriptTags } = useInsertScriptTags({
+    componentOrHookName: 'Template',
+    scriptTags: [
+      { type: 'module', src: `${url.resourcesPath}/js/menu-button-links.js` },
+      ...(scripts === undefined ? [] : scripts.map((src) => ({ type: 'text/javascript' as const, src }))),
+      {
+        type: 'module',
+        textContent: [
+          `import { startSessionPolling, checkAuthSession } from "${url.resourcesPath}/js/authChecker.js";`,
+          ``,
+          `startSessionPolling("${kcContext.url.ssoLoginInOtherTabsUrl}");`,
+          kcContext.authenticationSession === undefined
+            ? ''
+            : `checkAuthSession("${kcContext.authenticationSession.authSessionIdHash}");`,
+        ].join('\n'),
+      },
+    ],
+  });
+
+  watch(
+    areAllStyleSheetsLoaded,
+    (isReadyToRender) => {
+      if (isReadyToRender) {
+        insertScriptTags();
+      }
+    },
+    { immediate: true },
+  );
+
+  return { isReadyToRender: areAllStyleSheetsLoaded };
+}

package/src/login/Template.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import { clsx } from 'keycloakify/tools/clsx';
+import { computed, h, onMounted, useSlots } from 'vue';
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { I18n } from './i18n/i18n';
+import type { TemplateProps } from './TemplateProps';
+import { useInitialize } from './Template.useInitialize';
+import { useSetClassName } from '../tools/useSetClassName';
+
+const props = withDefaults(defineProps<TemplateProps<KcContext, I18n>>(), {
+  displayInfo: false,
+  displayMessage: true,
+  displayRequiredFields: false,
+  showAnotherWayIfPresent: true,
+});
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { realm, auth, url, message, isAppInitiatedAction } = kcContext;
+
+const slots = useSlots();
+
+onMounted(() => {
+  document.title = props.documentTitle ?? props.i18n.msgStr('loginTitle', kcContext.realm.displayName);
+});
+
+useSetClassName({ qualifiedName: 'html', className: kcClsx('kcHtmlClass') });
+useSetClassName({
+  qualifiedName: 'body',
+  className: props.bodyClassName ?? kcClsx('kcBodyClass'),
+});
+
+const { isReadyToRender } = useInitialize({
+  kcContext,
+  doUseDefaultCss: props.doUseDefaultCss,
+});
+
+const showUsernameNode = computed(() => auth !== undefined && auth.showUsername && !auth.showResetCredentials);
+
+const headerSection = () => {
+  if (!showUsernameNode.value) {
+    return h('h1', { id: 'kc-page-title' }, slots.header?.());
+  }
+  return h('div', { id: 'kc-username', class: kcClsx('kcFormGroupClass') }, [
+    h('label', { id: 'kc-attempted-username' }, auth!.attemptedUsername),
+    h(
+      'a',
+      {
+        id: 'reset-login',
+        href: url.loginRestartFlowUrl,
+        'aria-label': props.i18n.msgStr('restartLoginTooltip'),
+      },
+      h('div', { class: 'kc-login-tooltip' }, [
+        h('i', { class: kcClsx('kcResetFlowIcon') }),
+        h('span', { class: 'kc-tooltip-text' }, props.i18n.msgStr('restartLoginTooltip')),
+      ]),
+    ),
+  ]);
+};
+
+function onTryAnotherWay() {
+  (document.getElementById('kc-select-try-another-way-form') as HTMLFormElement).requestSubmit();
+}
+</script>
+
+<template>
+  <div
+    v-if="isReadyToRender"
+    :class="kcClsx('kcLoginClass')"
+  >
+    <div
+      id="kc-header"
+      :class="kcClsx('kcHeaderClass')"
+    >
+      <div
+        id="kc-header-wrapper"
+        :class="kcClsx('kcHeaderWrapperClass')"
+      >
+        {{ i18n.msgStr('loginTitleHtml', realm.displayNameHtml) }}
+      </div>
+    </div>
+
+    <div :class="kcClsx('kcFormCardClass')">
+      <header :class="kcClsx('kcFormHeaderClass')">
+        <div
+          v-if="i18n.enabledLanguages.length > 1"
+          :class="kcClsx('kcLocaleMainClass')"
+          id="kc-locale"
+        >
+          <div
+            id="kc-locale-wrapper"
+            :class="kcClsx('kcLocaleWrapperClass')"
+          >
+            <div
+              id="kc-locale-dropdown"
+              :class="clsx('menu-button-links', kcClsx('kcLocaleDropDownClass'))"
+            >
+              <button
+                :tabindex="1"
+                id="kc-current-locale-link"
+                :aria-label="i18n.msgStr('languages')"
+                aria-haspopup="true"
+                aria-expanded="false"
+                aria-controls="language-switch1"
+              >
+                {{ i18n.currentLanguage.label }}
+              </button>
+              <ul
+                role="menu"
+                :tabindex="-1"
+                aria-labelledby="kc-current-locale-link"
+                aria-activedescendant=""
+                id="language-switch1"
+                :class="kcClsx('kcLocaleListClass')"
+              >
+                <li
+                  v-for="(enabledLanguage, i) in i18n.enabledLanguages"
+                  :key="enabledLanguage.languageTag"
+                  :class="kcClsx('kcLocaleListItemClass')"
+                  role="none"
+                >
+                  <a
+                    role="menuitem"
+                    :id="`language-${i + 1}`"
+                    :class="kcClsx('kcLocaleItemClass')"
+                    :href="enabledLanguage.href"
+                  >
+                    {{ enabledLanguage.label }}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <template v-if="displayRequiredFields">
+          <div :class="kcClsx('kcContentWrapperClass')">
+            <div :class="clsx(kcClsx('kcLabelWrapperClass'), 'subtitle')">
+              <span class="subtitle">
+                <span class="required">*</span>
+                {{ i18n.msgStr('requiredFields') }}
+              </span>
+            </div>
+            <div class="col-md-10">
+              <component :is="headerSection" />
+            </div>
+          </div>
+        </template>
+        <component
+          v-else
+          :is="headerSection"
+        />
+      </header>
+
+      <div id="kc-content">
+        <div id="kc-content-wrapper">
+          <div
+            v-if="displayMessage && message !== undefined && (message.type !== 'warning' || !isAppInitiatedAction)"
+            :class="
+              clsx(
+                `alert-${message.type}`,
+                kcClsx('kcAlertClass'),
+                `pf-m-${message?.type === 'error' ? 'danger' : message.type}`,
+              )
+            "
+          >
+            <div class="pf-c-alert__icon">
+              <span
+                v-if="message.type === 'success'"
+                :class="kcClsx('kcFeedbackSuccessIcon')"
+              ></span>
+              <span
+                v-else-if="message.type === 'warning'"
+                :class="kcClsx('kcFeedbackWarningIcon')"
+              ></span>
+              <span
+                v-else-if="message.type === 'error'"
+                :class="kcClsx('kcFeedbackErrorIcon')"
+              ></span>
+              <span
+                v-else-if="message.type === 'info'"
+                :class="kcClsx('kcFeedbackInfoIcon')"
+              ></span>
+            </div>
+            <span
+              :class="kcClsx('kcAlertTitleClass')"
+              v-html="kcSanitize(message.summary)"
+            ></span>
+          </div>
+
+          <slot />
+
+          <form
+            v-if="auth !== undefined && auth.showTryAnotherWayLink"
+            id="kc-select-try-another-way-form"
+            :action="url.loginAction"
+            method="post"
+          >
+            <div :class="kcClsx('kcFormGroupClass')">
+              <input
+                type="hidden"
+                name="tryAnotherWay"
+                value="on"
+              />
+              <a
+                href="#"
+                id="try-another-way"
+                @click.prevent="onTryAnotherWay"
+              >
+                {{ i18n.msgStr('doTryAnotherWay') }}
+              </a>
+            </div>
+          </form>
+
+          <slot name="socialProviders" />
+
+          <div
+            v-if="displayInfo"
+            id="kc-info"
+            :class="kcClsx('kcSignUpClass')"
+          >
+            <div
+              id="kc-info-wrapper"
+              :class="kcClsx('kcInfoAreaWrapperClass')"
+            >
+              <slot name="info" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/login/TemplateProps.ts

@@ -0,0 +1,17 @@
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+
+export type TemplateProps<KcContext, I18n> = {
+  kcContext: KcContext;
+  i18n: I18n;
+  doUseDefaultCss: boolean;
+  classes?: Partial<Record<ClassKey, string>>;
+
+  displayInfo?: boolean;
+  displayMessage?: boolean;
+  displayRequiredFields?: boolean;
+  showAnotherWayIfPresent?: boolean;
+  documentTitle?: string;
+  bodyClassName?: string;
+};
+
+export type { ClassKey };

package/src/login/components/AddRemoveButtonsMultiValuedAttribute.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { Attribute } from 'keycloakify/login/KcContext';
+import { computed } from 'vue';
+import { getButtonToDisplayForMultivaluedAttributeField, type FormAction } from '../lib/useUserProfileForm';
+import type { I18n } from '../i18n/i18n';
+
+const props = defineProps<{
+  attribute: Attribute;
+  values: string[];
+  fieldIndex: number;
+  dispatchFormAction: (action: Extract<FormAction, { action: 'update' }>) => void;
+  i18n: I18n;
+}>();
+
+const buttons = computed(() =>
+  getButtonToDisplayForMultivaluedAttributeField({
+    attribute: props.attribute,
+    values: props.values,
+    fieldIndex: props.fieldIndex,
+  }),
+);
+
+const idPostfix = `-${props.attribute.name}-${props.fieldIndex + 1}`;
+</script>
+
+<template>
+  <template v-if="buttons.hasRemove">
+    <button
+      :id="`kc-remove${idPostfix}`"
+      type="button"
+      class="pf-c-button pf-m-inline pf-m-link"
+      @click="
+        dispatchFormAction({
+          action: 'update',
+          name: attribute.name,
+          valueOrValues: values.filter((_, i) => i !== fieldIndex),
+        })
+      "
+    >
+      <component :is="i18n.msg('remove')" />
+    </button>
+    <template v-if="buttons.hasAdd">&nbsp;|&nbsp;</template>
+  </template>
+  <button
+    v-if="buttons.hasAdd"
+    :id="`kc-add${idPostfix}`"
+    type="button"
+    class="pf-c-button pf-m-inline pf-m-link"
+    @click="
+      dispatchFormAction({
+        action: 'update',
+        name: attribute.name,
+        valueOrValues: [...values, ''],
+      })
+    "
+  >
+    <component :is="i18n.msg('addValue')" />
+  </button>
+</template>

package/src/login/components/FieldErrors.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import { computed } from 'vue';
+import type { FormFieldError } from '../lib/useUserProfileForm';
+
+const props = withDefaults(
+  defineProps<{
+    attribute: Attribute;
+    displayableErrors: FormFieldError[];
+    fieldIndex?: number;
+    kcClsx: KcClsx;
+  }>(),
+  { fieldIndex: undefined },
+);
+
+const errors = computed(() => props.displayableErrors.filter((error) => error.fieldIndex === props.fieldIndex));
+</script>
+
+<template>
+  <span
+    v-if="errors.length !== 0"
+    :id="`input-error-${attribute.name}${fieldIndex === undefined ? '' : `-${fieldIndex}`}`"
+    :class="kcClsx('kcInputErrorMessageClass')"
+    aria-live="polite"
+  >
+    <template
+      v-for="(displayableError, i) in errors"
+      :key="i"
+    >
+      <component :is="displayableError.errorMessage" />
+      <br v-if="errors.length - 1 !== i" />
+    </template>
+  </span>
+</template>

package/src/login/components/GroupLabel.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import { computed } from 'vue';
+import type { I18n } from '../i18n/i18n';
+
+const props = defineProps<{
+  attribute: Attribute;
+  groupNameRef: { current: string };
+  i18n: I18n;
+  kcClsx: KcClsx;
+}>();
+
+// Mirrors the svelte $effect: the first attribute of each new group renders the
+// group header once. Group structure is static per mount, so compute in setup.
+const isGroupLabel = (() => {
+  if (props.attribute.group?.name !== props.groupNameRef.current) {
+    // groupNameRef is a mutable ref-object (not a Vue prop value), mutation is intentional
+    // eslint-disable-next-line vue/no-mutating-props
+    props.groupNameRef.current = props.attribute.group?.name ?? '';
+    if (props.groupNameRef.current !== '') {
+      return true;
+    }
+  }
+  return false;
+})();
+
+const html5DataAnnotations = computed(() =>
+  Object.fromEntries(
+    Object.entries(props.attribute.group?.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]),
+  ),
+);
+
+const groupDisplayHeader = computed(() => props.attribute.group?.displayHeader ?? '');
+const groupDisplayDescription = computed(() => props.attribute.group?.displayDescription ?? '');
+</script>
+
+<template>
+  <div
+    v-if="isGroupLabel"
+    :class="kcClsx('kcFormGroupClass')"
+    v-bind="html5DataAnnotations"
+  >
+    <div :class="kcClsx('kcContentWrapperClass')">
+      <label
+        :id="`header-${attribute.group?.name}`"
+        :class="kcClsx('kcFormGroupHeader')"
+      >
+        <component
+          v-if="groupDisplayHeader !== ''"
+          :is="i18n.advancedMsg(groupDisplayHeader)"
+        />
+        <template v-else>{{ attribute.group?.name ?? '' }}</template>
+      </label>
+    </div>
+    <div
+      v-if="groupDisplayDescription !== ''"
+      :class="kcClsx('kcLabelWrapperClass')"
+    >
+      <label
+        :id="`description-${attribute.group?.name}`"
+        :class="kcClsx('kcLabelClass')"
+      >
+        <component :is="i18n.advancedMsg(groupDisplayDescription)" />
+      </label>
+    </div>
+  </div>
+</template>

package/src/login/components/InputFieldByType.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import InputTag from './InputTag.vue';
+import InputTagSelects from './InputTagSelects.vue';
+import PasswordWrapper from './PasswordWrapper.vue';
+import SelectTag from './SelectTag.vue';
+import TextareaTag from './TextareaTag.vue';
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+
+const props = defineProps<InputFieldByTypeProps>();
+
+const inputType = computed(() => props.attribute.annotations.inputType ?? '');
+
+const isPasswordField = computed(() => ['password', 'password-confirm'].includes(props.attribute.name));
+</script>
+
+<template>
+  <input
+    v-if="inputType === 'hidden'"
+    type="hidden"
+    :name="attribute.name"
+    :value="valueOrValues"
+  />
+
+  <TextareaTag
+    v-else-if="inputType === 'textarea'"
+    :attribute="attribute"
+    :valueOrValues="valueOrValues"
+    :displayableErrors="displayableErrors"
+    :dispatchFormAction="dispatchFormAction"
+    :i18n="i18n"
+    :kcClsx="kcClsx"
+  />
+
+  <SelectTag
+    v-else-if="['select', 'multiselect'].includes(inputType)"
+    :attribute="attribute"
+    :valueOrValues="valueOrValues"
+    :displayableErrors="displayableErrors"
+    :dispatchFormAction="dispatchFormAction"
+    :i18n="i18n"
+    :kcClsx="kcClsx"
+  />
+
+  <InputTagSelects
+    v-else-if="['select-radiobuttons', 'multiselect-checkboxes'].includes(inputType)"
+    :attribute="attribute"
+    :valueOrValues="valueOrValues"
+    :displayableErrors="displayableErrors"
+    :dispatchFormAction="dispatchFormAction"
+    :i18n="i18n"
+    :kcClsx="kcClsx"
+  />
+
+  <template v-else-if="valueOrValues instanceof Array">
+    <InputTag
+      v-for="(_, i) in valueOrValues"
+      :key="i"
+      :attribute="attribute"
+      :valueOrValues="valueOrValues"
+      :displayableErrors="displayableErrors"
+      :dispatchFormAction="dispatchFormAction"
+      :i18n="i18n"
+      :kcClsx="kcClsx"
+      :fieldIndex="i"
+    />
+  </template>
+
+  <PasswordWrapper
+    v-else-if="isPasswordField"
+    :kcClsx="kcClsx"
+    :i18n="i18n"
+    :passwordInputId="attribute.name"
+  >
+    <InputTag
+      :attribute="attribute"
+      :valueOrValues="valueOrValues"
+      :displayableErrors="displayableErrors"
+      :dispatchFormAction="dispatchFormAction"
+      :i18n="i18n"
+      :kcClsx="kcClsx"
+    />
+  </PasswordWrapper>
+
+  <InputTag
+    v-else
+    :attribute="attribute"
+    :valueOrValues="valueOrValues"
+    :displayableErrors="displayableErrors"
+    :dispatchFormAction="dispatchFormAction"
+    :i18n="i18n"
+    :kcClsx="kcClsx"
+  />
+</template>

package/src/login/components/InputFieldByTypeProps.ts

@@ -0,0 +1,13 @@
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { FormAction, FormFieldError } from '../lib/useUserProfileForm';
+import type { I18n } from '../i18n/i18n';
+
+export type InputFieldByTypeProps = {
+  attribute: Attribute;
+  valueOrValues: string | string[];
+  displayableErrors: FormFieldError[];
+  dispatchFormAction: (action: FormAction) => void;
+  i18n: I18n;
+  kcClsx: KcClsx;
+};