@andreyyolkin/keycloakify-vue 0.1.0

package/keycloakify-vue/login/Template.vue.d.ts

@@ -0,0 +1,26 @@
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { I18n } from './i18n/i18n';
+import type { TemplateProps } from './TemplateProps';
+type __VLS_Props = TemplateProps<KcContext, I18n>;
+declare var __VLS_11: {}, __VLS_13: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    socialProviders?: (props: typeof __VLS_13) => any;
+} & {
+    info?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    displayInfo: boolean;
+    displayMessage: boolean;
+    displayRequiredFields: boolean;
+    showAnotherWayIfPresent: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/keycloakify-vue/login/TemplateProps.d.ts

@@ -0,0 +1,14 @@
+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/keycloakify-vue/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/keycloakify-vue/login/components/AddRemoveButtonsMultiValuedAttribute.vue.d.ts

@@ -0,0 +1,15 @@
+import type { Attribute } from 'keycloakify/login/KcContext';
+import { type FormAction } from '../lib/useUserProfileForm';
+import type { I18n } from '../i18n/i18n';
+type __VLS_Props = {
+    attribute: Attribute;
+    values: string[];
+    fieldIndex: number;
+    dispatchFormAction: (action: Extract<FormAction, {
+        action: 'update';
+    }>) => void;
+    i18n: I18n;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/keycloakify-vue/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/keycloakify-vue/login/components/FieldErrors.vue.d.ts

@@ -0,0 +1,14 @@
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { FormFieldError } from '../lib/useUserProfileForm';
+type __VLS_Props = {
+    attribute: Attribute;
+    displayableErrors: FormFieldError[];
+    fieldIndex?: number;
+    kcClsx: KcClsx;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fieldIndex: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/keycloakify-vue/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/keycloakify-vue/login/components/GroupLabel.vue.d.ts

@@ -0,0 +1,14 @@
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+type __VLS_Props = {
+    attribute: Attribute;
+    groupNameRef: {
+        current: string;
+    };
+    i18n: I18n;
+    kcClsx: KcClsx;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/keycloakify-vue/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/keycloakify-vue/login/components/InputFieldByType.vue.d.ts

@@ -0,0 +1,4 @@
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+declare const __VLS_export: import("vue").DefineComponent<InputFieldByTypeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputFieldByTypeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/keycloakify-vue/login/components/InputFieldByTypeProps.d.ts

@@ -0,0 +1,12 @@
+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;
+};

package/keycloakify-vue/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/keycloakify-vue/login/components/InputTag.vue.d.ts

@@ -0,0 +1,7 @@
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+type __VLS_Props = InputFieldByTypeProps & {
+    fieldIndex?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/keycloakify-vue/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/keycloakify-vue/login/components/InputTagSelects.vue.d.ts

@@ -0,0 +1,4 @@
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+declare const __VLS_export: import("vue").DefineComponent<InputFieldByTypeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputFieldByTypeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/keycloakify-vue/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/keycloakify-vue/login/components/LogoutOtherSessions.vue.d.ts

@@ -0,0 +1,9 @@
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+type __VLS_Props = {
+    kcClsx: KcClsx;
+    i18n: I18n;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;