@andreyyolkin/keycloakify-vue 0.1.0

package/keycloakify-vue/login/lib/useUserProfileForm.d.ts

@@ -0,0 +1,53 @@
+import type { Attribute, PasswordPolicies, Validators } from 'keycloakify/login/KcContext';
+import * as reactlessApi from 'keycloakify/login/lib/getUserProfileApi';
+import { 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;
+};
+export declare namespace FormFieldError {
+    type Source = Source.Validator | Source.PasswordPolicy | Source.Server | Source.Other;
+    namespace Source {
+        type Validator = {
+            type: 'validator';
+            name: keyof Validators;
+        };
+        type PasswordPolicy = {
+            type: 'passwordPolicy';
+            name: keyof PasswordPolicies;
+        };
+        type Server = {
+            type: 'server';
+        };
+        type Other = {
+            type: 'other';
+            rule: 'passwordConfirmMatchesPassword' | 'requiredField';
+        };
+    }
+}
+export type FormFieldState = {
+    attribute: Attribute;
+    displayableErrors: FormFieldError[];
+    valueOrValues: string | string[];
+};
+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;
+};
+export type ReturnTypeOfUseUserProfileForm = {
+    formState: ComputedRef<FormState>;
+    dispatchFormAction: (action: FormAction) => void;
+};
+export declare function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTypeOfUseUserProfileForm;

package/keycloakify-vue/login/lib/useUserProfileForm.js

@@ -0,0 +1,50 @@
+import * as reactlessApi from "keycloakify/login/lib/getUserProfileApi";
+import { assert } from "tsafe/assert";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { getButtonToDisplayForMultivaluedAttributeField } from "keycloakify/login/lib/getUserProfileApi";
+{
+  assert();
+}
+{
+  assert();
+}
+{
+  assert();
+}
+{
+  assert();
+}
+function useUserProfileForm(params) {
+  const { doMakeUserConfirmPassword, i18n, kcContext } = params;
+  const { advancedMsg, advancedMsgStr } = i18n;
+  const api = reactlessApi.getUserProfileApi({
+    kcContext,
+    doMakeUserConfirmPassword
+  });
+  const formState_reactless = ref(api.getFormState());
+  let unsubscribe;
+  onMounted(() => {
+    unsubscribe = api.subscribeToFormState(() => {
+      formState_reactless.value = api.getFormState();
+    }).unsubscribe;
+  });
+  onUnmounted(() => unsubscribe?.());
+  const formState = computed(() => ({
+    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 };
+}
+export {
+  getButtonToDisplayForMultivaluedAttributeField,
+  useUserProfileForm
+};

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

@@ -0,0 +1,9 @@
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'code.ftl';
+}>, 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/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/keycloakify-vue/login/pages/DeleteAccountConfirm.vue.d.ts

@@ -0,0 +1,9 @@
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'delete-account-confirm.ftl';
+}>, 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/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/keycloakify-vue/login/pages/DeleteCredential.vue.d.ts

@@ -0,0 +1,9 @@
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'delete-credential.ftl';
+}>, 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/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/keycloakify-vue/login/pages/Error.vue.d.ts

@@ -0,0 +1,9 @@
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'error.ftl';
+}>, 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/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>

package/keycloakify-vue/login/pages/FrontchannelLogout.vue.d.ts

@@ -0,0 +1,9 @@
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'frontchannel-logout.ftl';
+}>, 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/pages/IdpReviewUserProfile.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import { ref, type Component } from 'vue';
+import type { UserProfileFormFieldsProps } from '../components/UserProfileFormFieldsProps';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<
+  PageProps<Extract<KcContext, { pageId: 'idp-review-user-profile.ftl' }>, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+  }
+>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, messagesPerField } = kcContext;
+
+const isFormSubmittable = ref(false);
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="messagesPerField.exists('global')"
+    :displayRequiredFields="true"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('loginIdpReviewProfileTitle')" />
+    </template>
+
+    <form
+      id="kc-idp-review-profile-form"
+      :class="kcClsx('kcFormClass')"
+      :action="url.loginAction"
+      method="post"
+    >
+      <component
+        :is="UserProfileFormFields"
+        :kcContext="kcContext"
+        :i18n="props.i18n"
+        :kcClsx="kcClsx"
+        :onIsFormSubmittableValueChange="(value: boolean) => (isFormSubmittable = value)"
+        :doMakeUserConfirmPassword="doMakeUserConfirmPassword"
+      />
+
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div
+          id="kc-form-options"
+          :class="kcClsx('kcFormOptionsClass')"
+        >
+          <div :class="kcClsx('kcFormOptionsWrapperClass')" />
+        </div>
+        <div
+          id="kc-form-buttons"
+          :class="kcClsx('kcFormButtonsClass')"
+        >
+          <input
+            :disabled="!isFormSubmittable"
+            :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+            type="submit"
+            :value="props.i18n.msgStr('doSubmit')"
+          />
+        </div>
+      </div>
+    </form>
+  </component>
+</template>

package/keycloakify-vue/login/pages/IdpReviewUserProfile.vue.d.ts

@@ -0,0 +1,14 @@
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { type Component } from 'vue';
+import type { UserProfileFormFieldsProps } from '../components/UserProfileFormFieldsProps';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'idp-review-user-profile.ftl';
+}>, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+};
+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/pages/Info.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { computed } from 'vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'info.ftl' }>, I18n>>();
+
+const kcContext = props.kcContext;
+const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
+
+const headerHtml = computed(() =>
+  kcSanitize(messageHeader ? props.i18n.advancedMsgStr(messageHeader) : message.summary),
+);
+
+const bodyHtml = computed(() => {
+  let html = message.summary?.trim() ?? '';
+
+  if (requiredActions) {
+    html += ' <b>';
+    html += requiredActions.map((action) => props.i18n.advancedMsgStr(`requiredAction.${action}`)).join(', ');
+    html += '</b>';
+  }
+
+  return kcSanitize(html);
+});
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="false"
+  >
+    <template #header>
+      <span v-html="headerHtml" />
+    </template>
+
+    <div id="kc-info-message">
+      <p
+        class="instruction"
+        v-html="bodyHtml"
+      />
+      <template v-if="!skipLink">
+        <p v-if="pageRedirectUri">
+          <a :href="pageRedirectUri"><component :is="props.i18n.msg('backToApplication')" /></a>
+        </p>
+        <p v-else-if="actionUri">
+          <a :href="actionUri"><component :is="props.i18n.msg('proceedWithAction')" /></a>
+        </p>
+        <p v-else-if="client.baseUrl">
+          <a :href="client.baseUrl"><component :is="props.i18n.msg('backToApplication')" /></a>
+        </p>
+      </template>
+    </div>
+  </component>
+</template>

package/keycloakify-vue/login/pages/Info.vue.d.ts

@@ -0,0 +1,9 @@
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'info.ftl';
+}>, 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;