@andreyyolkin/keycloakify-vue 0.1.0

package/src/login/components/InputTag.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { assert } from 'keycloakify/tools/assert';
+import { computed } from 'vue';
+import AddRemoveButtonsMultiValuedAttribute from './AddRemoveButtonsMultiValuedAttribute.vue';
+import FieldErrors from './FieldErrors.vue';
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+
+const props = defineProps<InputFieldByTypeProps & { fieldIndex?: number }>();
+
+const inputType = computed(() => {
+  const t = props.attribute.annotations.inputType;
+  return t?.startsWith('html5-') ? t.slice(6) : (t ?? 'text');
+});
+
+const value = computed(() => {
+  if (props.fieldIndex !== undefined) {
+    assert(props.valueOrValues instanceof Array);
+    return props.valueOrValues[props.fieldIndex];
+  }
+  assert(typeof props.valueOrValues === 'string');
+  return props.valueOrValues;
+});
+
+// NOTE: the input gets the attribute's OWN html5DataAnnotations (e.g. kcNumberFormat),
+// not the group's — matches the React source of truth (the svelte port spreads
+// `attribute.group?.html5DataAnnotations` here, which is a bug; the group annotations
+// belong on the group container, handled in GroupLabel.vue).
+const html5DataAnnotations = computed(() =>
+  Object.fromEntries(
+    Object.entries(props.attribute.html5DataAnnotations ?? {}).map(([key, val]) => [`data-${key}`, val]),
+  ),
+);
+
+const ariaInvalid = computed(
+  () => props.displayableErrors.find((error) => error.fieldIndex === props.fieldIndex) !== undefined,
+);
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  props.dispatchFormAction({
+    action: 'update',
+    name: props.attribute.name,
+    valueOrValues: (() => {
+      if (props.fieldIndex !== undefined) {
+        assert(props.valueOrValues instanceof Array);
+        return props.valueOrValues.map((v, i) => (i === props.fieldIndex ? target.value : v));
+      }
+      return target.value;
+    })(),
+  });
+}
+
+function onBlur() {
+  props.dispatchFormAction({
+    action: 'focus lost',
+    name: props.attribute.name,
+    fieldIndex: props.fieldIndex,
+  });
+}
+
+const numAnno = (v: string | number | undefined) => (v === undefined ? undefined : parseInt(`${v}`));
+</script>
+
+<template>
+  <input
+    :type="inputType"
+    :id="attribute.name"
+    :name="attribute.name"
+    :value="value"
+    :class="kcClsx('kcInputClass')"
+    :aria-invalid="ariaInvalid"
+    :disabled="attribute.readOnly"
+    :autocomplete="attribute.autocomplete as any"
+    :placeholder="
+      attribute.annotations.inputTypePlaceholder === undefined
+        ? undefined
+        : i18n.advancedMsgStr(attribute.annotations.inputTypePlaceholder)
+    "
+    :pattern="attribute.annotations.inputTypePattern"
+    :size="numAnno(attribute.annotations.inputTypeSize)"
+    :maxlength="numAnno(attribute.annotations.inputTypeMaxlength)"
+    :minlength="numAnno(attribute.annotations.inputTypeMinlength)"
+    :max="attribute.annotations.inputTypeMax"
+    :min="attribute.annotations.inputTypeMin"
+    :step="attribute.annotations.inputTypeStep"
+    v-bind="html5DataAnnotations"
+    @input="onInput"
+    @blur="onBlur"
+  />
+  <template v-if="fieldIndex !== undefined && valueOrValues instanceof Array">
+    <FieldErrors
+      :attribute="attribute"
+      :kcClsx="kcClsx"
+      :displayableErrors="displayableErrors"
+      :fieldIndex="fieldIndex"
+    />
+    <AddRemoveButtonsMultiValuedAttribute
+      :attribute="attribute"
+      :values="valueOrValues"
+      :fieldIndex="fieldIndex"
+      :dispatchFormAction="dispatchFormAction"
+      :i18n="i18n"
+    />
+  </template>
+</template>

package/src/login/components/InputTagSelects.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { assert } from 'keycloakify/tools/assert';
+import { computed } from 'vue';
+import { inputLabel } from './inputLabel';
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+
+const props = defineProps<InputFieldByTypeProps>();
+
+const styling = computed(() => {
+  const { inputType } = props.attribute.annotations;
+  assert(inputType === 'select-radiobuttons' || inputType === 'multiselect-checkboxes');
+  switch (inputType) {
+    case 'select-radiobuttons':
+      return {
+        inputType: 'radio',
+        classDiv: props.kcClsx('kcInputClassRadio'),
+        classInput: props.kcClsx('kcInputClassRadioInput'),
+        classLabel: props.kcClsx('kcInputClassRadioLabel'),
+      };
+    case 'multiselect-checkboxes':
+      return {
+        inputType: 'checkbox',
+        classDiv: props.kcClsx('kcInputClassCheckbox'),
+        classInput: props.kcClsx('kcInputClassCheckboxInput'),
+        classLabel: props.kcClsx('kcInputClassCheckboxLabel'),
+      };
+    default:
+      return {
+        inputType: 'radio',
+        classDiv: props.kcClsx('kcInputClassRadio'),
+        classInput: props.kcClsx('kcInputClassRadioInput'),
+        classLabel: props.kcClsx('kcInputClassRadioLabel'),
+      };
+  }
+});
+
+const options = computed<string[]>(() => {
+  const { inputOptionsFromValidation } = props.attribute.annotations;
+  if (inputOptionsFromValidation !== undefined) {
+    const validator = (props.attribute.validators as Record<string, { options?: string[] }>)[
+      inputOptionsFromValidation
+    ];
+    if (validator?.options !== undefined) {
+      return validator.options;
+    }
+  }
+  return props.attribute.validators.options?.options ?? [];
+});
+
+function isChecked(option: string) {
+  return props.valueOrValues instanceof Array ? props.valueOrValues.includes(option) : props.valueOrValues === option;
+}
+
+function onChange(event: Event, option: string) {
+  const target = event.target as HTMLInputElement;
+  props.dispatchFormAction({
+    action: 'update',
+    name: props.attribute.name,
+    valueOrValues: (() => {
+      if (props.valueOrValues instanceof Array) {
+        const newValues = [...props.valueOrValues];
+        if (target.checked) {
+          newValues.push(option);
+        } else {
+          newValues.splice(newValues.indexOf(option), 1);
+        }
+        return newValues;
+      }
+      return target.checked ? option : '';
+    })(),
+  });
+}
+
+function onBlur() {
+  props.dispatchFormAction({
+    action: 'focus lost',
+    name: props.attribute.name,
+    fieldIndex: undefined,
+  });
+}
+</script>
+
+<template>
+  <div
+    v-for="option in options"
+    :key="option"
+    :class="styling.classDiv"
+  >
+    <input
+      :type="styling.inputType"
+      :id="`${attribute.name}-${option}`"
+      :name="attribute.name"
+      :value="option"
+      :class="styling.classInput"
+      :aria-invalid="displayableErrors.length !== 0"
+      :disabled="attribute.readOnly"
+      :checked="isChecked(option)"
+      @change="onChange($event, option)"
+      @blur="onBlur"
+    />
+    <label
+      :for="`${attribute.name}-${option}`"
+      :class="`${styling.classLabel}${attribute.readOnly ? ` ${kcClsx('kcInputClassRadioCheckboxLabelDisabled')}` : ''}`"
+    >
+      <component :is="inputLabel(i18n, attribute, option)" />
+    </label>
+  </div>
+</template>

package/src/login/components/LogoutOtherSessions.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+
+defineProps<{ kcClsx: KcClsx; i18n: I18n }>();
+</script>
+
+<template>
+  <div
+    id="kc-form-options"
+    :class="kcClsx('kcFormOptionsClass')"
+  >
+    <div :class="kcClsx('kcFormOptionsWrapperClass')">
+      <div class="checkbox">
+        <label>
+          <input
+            type="checkbox"
+            id="logout-sessions"
+            name="logout-sessions"
+            value="on"
+          />
+          <component :is="i18n.msg('logoutOtherSessions')" />
+        </label>
+      </div>
+    </div>
+  </div>
+</template>

package/src/login/components/PasswordWrapper.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import { assert } from 'keycloakify/tools/assert';
+import { ref, watch } from 'vue';
+import type { I18n } from '../i18n/i18n';
+
+const props = defineProps<{
+  kcClsx: KcClsx;
+  i18n: I18n;
+  passwordInputId: string;
+}>();
+
+const isPasswordRevealed = ref(false);
+
+watch(
+  isPasswordRevealed,
+  (revealed) => {
+    const el = document.getElementById(props.passwordInputId);
+    assert(el instanceof HTMLInputElement);
+    el.type = revealed ? 'text' : 'password';
+  },
+  { immediate: false },
+);
+</script>
+
+<template>
+  <div :class="kcClsx('kcInputGroup')">
+    <slot />
+    <button
+      type="button"
+      :class="kcClsx('kcFormPasswordVisibilityButtonClass')"
+      :aria-label="i18n.msgStr(isPasswordRevealed ? 'hidePassword' : 'showPassword')"
+      :aria-controls="passwordInputId"
+      @click="isPasswordRevealed = !isPasswordRevealed"
+    >
+      <i
+        :class="kcClsx(isPasswordRevealed ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow')"
+        aria-hidden="true"
+      ></i>
+    </button>
+  </div>
+</template>

package/src/login/components/SelectTag.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { assert } from 'keycloakify/tools/assert';
+import { computed } from 'vue';
+import { inputLabel } from './inputLabel';
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+
+const props = defineProps<InputFieldByTypeProps>();
+
+const isMultiple = computed(() => props.attribute.annotations.inputType === 'multiselect');
+
+const options = computed<string[]>(() => {
+  const { inputOptionsFromValidation } = props.attribute.annotations;
+  if (inputOptionsFromValidation !== undefined) {
+    assert(typeof inputOptionsFromValidation === 'string');
+    const validator = (props.attribute.validators as Record<string, { options?: string[] }>)[
+      inputOptionsFromValidation
+    ];
+    if (validator?.options !== undefined) {
+      return validator.options;
+    }
+  }
+  return props.attribute.validators.options?.options ?? [];
+});
+
+function onChange(event: Event) {
+  const target = event.target as HTMLSelectElement;
+  props.dispatchFormAction({
+    action: 'update',
+    name: props.attribute.name,
+    valueOrValues: isMultiple.value ? Array.from(target.selectedOptions).map((option) => option.value) : target.value,
+  });
+}
+
+function onBlur() {
+  props.dispatchFormAction({
+    action: 'focus lost',
+    name: props.attribute.name,
+    fieldIndex: undefined,
+  });
+}
+
+const sizeAnno = computed(() =>
+  props.attribute.annotations.inputTypeSize === undefined
+    ? undefined
+    : parseInt(`${props.attribute.annotations.inputTypeSize}`),
+);
+</script>
+
+<template>
+  <select
+    :id="attribute.name"
+    :name="attribute.name"
+    :class="kcClsx('kcInputClass')"
+    :aria-invalid="displayableErrors.length !== 0"
+    :disabled="attribute.readOnly"
+    :multiple="isMultiple"
+    :size="sizeAnno"
+    :value="valueOrValues"
+    @change="onChange"
+    @blur="onBlur"
+  >
+    <option
+      v-if="!isMultiple"
+      value=""
+    ></option>
+    <option
+      v-for="option in options"
+      :key="option"
+      :value="option"
+    >
+      <component :is="inputLabel(i18n, attribute, option)" />
+    </option>
+  </select>
+</template>

package/src/login/components/TermsAcceptance.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+
+const props = defineProps<{
+  i18n: I18n;
+  kcClsx: KcClsx;
+  messagesPerField: Pick<KcContext['messagesPerField'], 'existsError' | 'get'>;
+  areTermsAccepted: boolean;
+  onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
+}>();
+
+function onChange(event: Event) {
+  props.onAreTermsAcceptedValueChange((event.target as HTMLInputElement).checked);
+}
+</script>
+
+<template>
+  <div class="form-group">
+    <div :class="kcClsx('kcInputWrapperClass')">
+      <component :is="i18n.msg('termsTitle')" />
+      <div id="kc-registration-terms-text">
+        <component :is="i18n.msg('termsText')" />
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <div :class="kcClsx('kcLabelWrapperClass')">
+      <input
+        type="checkbox"
+        id="termsAccepted"
+        name="termsAccepted"
+        :class="kcClsx('kcCheckboxInputClass')"
+        :checked="areTermsAccepted"
+        :aria-invalid="messagesPerField.existsError('termsAccepted')"
+        @change="onChange"
+      />
+      <label
+        for="termsAccepted"
+        :class="kcClsx('kcLabelClass')"
+      >
+        <component :is="i18n.msg('acceptTerms')" />
+      </label>
+    </div>
+    <div
+      v-if="messagesPerField.existsError('termsAccepted')"
+      :class="kcClsx('kcLabelWrapperClass')"
+    >
+      <span
+        id="input-error-terms-accepted"
+        :class="kcClsx('kcInputErrorMessageClass')"
+        aria-live="polite"
+        v-html="kcSanitize(messagesPerField.get('termsAccepted'))"
+      ></span>
+    </div>
+  </div>
+</template>

package/src/login/components/TextareaTag.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { assert } from 'keycloakify/tools/assert';
+import { computed } from 'vue';
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+
+const props = defineProps<InputFieldByTypeProps>();
+
+const value = computed(() => {
+  assert(typeof props.valueOrValues === 'string');
+  return props.valueOrValues;
+});
+
+const numAnno = (v: string | number | undefined) => (v === undefined ? undefined : parseInt(`${v}`));
+
+function onChange(event: Event) {
+  const target = event.target as HTMLTextAreaElement;
+  props.dispatchFormAction({
+    action: 'update',
+    name: props.attribute.name,
+    valueOrValues: target.value,
+  });
+}
+
+function onBlur() {
+  props.dispatchFormAction({
+    action: 'focus lost',
+    name: props.attribute.name,
+    fieldIndex: undefined,
+  });
+}
+</script>
+
+<template>
+  <textarea
+    :id="attribute.name"
+    :name="attribute.name"
+    :class="kcClsx('kcInputClass')"
+    :aria-invalid="displayableErrors.length !== 0"
+    :disabled="attribute.readOnly"
+    :cols="numAnno(attribute.annotations.inputTypeCols)"
+    :rows="numAnno(attribute.annotations.inputTypeRows)"
+    :maxlength="numAnno(attribute.annotations.inputTypeMaxlength)"
+    :value="value"
+    @input="onChange"
+    @blur="onBlur"
+  ></textarea>
+</template>

package/src/login/components/UserProfileFormFields.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { computed, watch } from 'vue';
+import FieldErrors from './FieldErrors.vue';
+import GroupLabel from './GroupLabel.vue';
+import InputFieldByType from './InputFieldByType.vue';
+import type { UserProfileFormFieldsProps } from './UserProfileFormFieldsProps';
+import { useUserProfileForm } from '../lib/useUserProfileForm';
+import type { I18n } from '../i18n/i18n';
+
+const props = defineProps<UserProfileFormFieldsProps<KcContext, I18n>>();
+
+const { formState, dispatchFormAction } = useUserProfileForm({
+  kcContext: props.kcContext,
+  i18n: props.i18n,
+  doMakeUserConfirmPassword: props.doMakeUserConfirmPassword,
+});
+
+watch(
+  () => formState.value.isFormSubmittable,
+  (isFormSubmittable) => props.onIsFormSubmittableValueChange(isFormSubmittable),
+  { immediate: true },
+);
+
+const groupNameRef = { current: '' };
+
+const fieldRows = computed(() =>
+  formState.value.formFieldStates.map((formFieldState) => {
+    const { attribute, valueOrValues, displayableErrors } = formFieldState;
+    const isHidden =
+      attribute.annotations.inputType === 'hidden' ||
+      (attribute.name === 'password-confirm' && !props.doMakeUserConfirmPassword);
+    return { attribute, valueOrValues, displayableErrors, isHidden };
+  }),
+);
+</script>
+
+<template>
+  <template
+    v-for="(row, i) in fieldRows"
+    :key="i"
+  >
+    <GroupLabel
+      :attribute="row.attribute"
+      :groupNameRef="groupNameRef"
+      :i18n="i18n"
+      :kcClsx="kcClsx"
+    />
+
+    <slot
+      name="beforeField"
+      :attribute="row.attribute"
+      :dispatchFormAction="dispatchFormAction"
+      :displayableErrors="row.displayableErrors"
+      :valueOrValues="row.valueOrValues"
+      :kcClsx="kcClsx"
+      :i18n="i18n"
+    />
+
+    <div
+      :class="kcClsx('kcFormGroupClass')"
+      :style="{ display: row.isHidden ? 'none' : undefined }"
+    >
+      <div :class="kcClsx('kcLabelWrapperClass')">
+        <label
+          :for="row.attribute.name"
+          :class="kcClsx('kcLabelClass')"
+        >
+          <component :is="i18n.advancedMsg(row.attribute.displayName ?? '')" />
+        </label>
+        <template v-if="row.attribute.required">&nbsp;*</template>
+      </div>
+      <div :class="kcClsx('kcInputWrapperClass')">
+        <div
+          v-if="row.attribute.annotations.inputHelperTextBefore !== undefined"
+          :class="kcClsx('kcInputHelperTextBeforeClass')"
+          :id="`form-help-text-before-${row.attribute.name}`"
+          aria-live="polite"
+        >
+          <component :is="i18n.advancedMsg(row.attribute.annotations.inputHelperTextBefore)" />
+        </div>
+
+        <InputFieldByType
+          :attribute="row.attribute"
+          :valueOrValues="row.valueOrValues"
+          :displayableErrors="row.displayableErrors"
+          :dispatchFormAction="dispatchFormAction"
+          :kcClsx="kcClsx"
+          :i18n="i18n"
+        />
+
+        <FieldErrors
+          :attribute="row.attribute"
+          :displayableErrors="row.displayableErrors"
+          :kcClsx="kcClsx"
+        />
+
+        <div
+          v-if="row.attribute.annotations.inputHelperTextAfter !== undefined"
+          :class="kcClsx('kcInputHelperTextAfterClass')"
+          :id="`form-help-text-after-${row.attribute.name}`"
+          aria-live="polite"
+        >
+          <component :is="i18n.advancedMsg(row.attribute.annotations.inputHelperTextAfter)" />
+        </div>
+
+        <slot
+          name="afterField"
+          :attribute="row.attribute"
+          :dispatchFormAction="dispatchFormAction"
+          :displayableErrors="row.displayableErrors"
+          :valueOrValues="row.valueOrValues"
+          :kcClsx="kcClsx"
+          :i18n="i18n"
+        />
+      </div>
+    </div>
+  </template>
+</template>

package/src/login/components/UserProfileFormFieldsProps.ts

@@ -0,0 +1,22 @@
+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 UserProfileFormFieldsProps<KcContext = any, I18nType = I18n> = {
+  kcContext: Extract<KcContext, { profile: unknown }>;
+  i18n: I18nType;
+  kcClsx: KcClsx;
+  onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+  doMakeUserConfirmPassword: boolean;
+};
+
+/** Scoped-slot payload for the optional `beforeField` / `afterField` slots. */
+export type BeforeAfterFieldSlotProps = {
+  attribute: Attribute;
+  dispatchFormAction: (action: FormAction) => void;
+  displayableErrors: FormFieldError[];
+  valueOrValues: string | string[];
+  kcClsx: KcClsx;
+  i18n: I18n;
+};

package/src/login/components/inputLabel.ts

@@ -0,0 +1,18 @@
+import type { Attribute } from 'keycloakify/login/KcContext';
+import { createTextVNode, type VNode } from 'vue';
+import type { I18n } from '../i18n/i18n';
+
+export const inputLabel = (i18n: I18n, attribute: Attribute, option: string): VNode => {
+  const { advancedMsg } = i18n;
+
+  if (attribute.annotations.inputOptionLabels !== undefined) {
+    const { inputOptionLabels } = attribute.annotations;
+    return advancedMsg(inputOptionLabels[option] ?? option);
+  }
+
+  if (attribute.annotations.inputOptionLabelsI18nPrefix !== undefined) {
+    return advancedMsg(`${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}`);
+  }
+
+  return createTextVNode(option);
+};

package/src/login/i18n/i18n.ts

@@ -0,0 +1,16 @@
+import type { GenericI18n_noJsx } from 'keycloakify/login/i18n/noJsx/GenericI18n_noJsx';
+import { type MessageKey as MessageKey_defaultSet } from 'keycloakify/login/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>;