@andreyyolkin/keycloakify-vue 0.1.0

package/keycloakify-vue/login/pages/LoginUpdatePassword.vue

@@ -0,0 +1,145 @@
+<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 LogoutOtherSessions from '../components/LogoutOtherSessions.vue';
+import PasswordWrapper from '../components/PasswordWrapper.vue';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'login-update-password.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, messagesPerField, isAppInitiatedAction } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="!messagesPerField.existsError('password', 'password-confirm')"
+  >
+    <template #header>
+      <component :is="i18n.msg('updatePasswordTitle')" />
+    </template>
+
+    <form
+      id="kc-passwd-update-form"
+      :class="kcClsx('kcFormClass')"
+      :action="url.loginAction"
+      method="post"
+    >
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div :class="kcClsx('kcLabelWrapperClass')">
+          <label
+            for="password-new"
+            :class="kcClsx('kcLabelClass')"
+          >
+            <component :is="i18n.msg('passwordNew')" />
+          </label>
+        </div>
+        <div :class="kcClsx('kcInputWrapperClass')">
+          <PasswordWrapper
+            :kcClsx="kcClsx"
+            :i18n="i18n"
+            passwordInputId="password-new"
+          >
+            <input
+              type="password"
+              id="password-new"
+              name="password-new"
+              :class="kcClsx('kcInputClass')"
+              autofocus
+              autocomplete="new-password"
+              :aria-invalid="messagesPerField.existsError('password', 'password-confirm')"
+            />
+          </PasswordWrapper>
+
+          <span
+            v-if="messagesPerField.existsError('password')"
+            id="input-error-password"
+            :class="kcClsx('kcInputErrorMessageClass')"
+            aria-live="polite"
+            v-html="kcSanitize(messagesPerField.get('password'))"
+          ></span>
+        </div>
+      </div>
+
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div :class="kcClsx('kcLabelWrapperClass')">
+          <label
+            for="password-confirm"
+            :class="kcClsx('kcLabelClass')"
+          >
+            <component :is="i18n.msg('passwordConfirm')" />
+          </label>
+        </div>
+        <div :class="kcClsx('kcInputWrapperClass')">
+          <PasswordWrapper
+            :kcClsx="kcClsx"
+            :i18n="i18n"
+            passwordInputId="password-confirm"
+          >
+            <input
+              type="password"
+              id="password-confirm"
+              name="password-confirm"
+              :class="kcClsx('kcInputClass')"
+              autocomplete="new-password"
+              :aria-invalid="messagesPerField.existsError('password', 'password-confirm')"
+            />
+          </PasswordWrapper>
+
+          <span
+            v-if="messagesPerField.existsError('password-confirm')"
+            id="input-error-password-confirm"
+            :class="kcClsx('kcInputErrorMessageClass')"
+            aria-live="polite"
+            v-html="kcSanitize(messagesPerField.get('password-confirm'))"
+          ></span>
+        </div>
+      </div>
+
+      <div :class="kcClsx('kcFormGroupClass')">
+        <LogoutOtherSessions
+          :kcClsx="kcClsx"
+          :i18n="i18n"
+        />
+        <div
+          id="kc-form-buttons"
+          :class="kcClsx('kcFormButtonsClass')"
+        >
+          <input
+            :class="
+              kcClsx(
+                'kcButtonClass',
+                'kcButtonPrimaryClass',
+                !isAppInitiatedAction && 'kcButtonBlockClass',
+                'kcButtonLargeClass',
+              )
+            "
+            type="submit"
+            :value="i18n.msgStr('doSubmit')"
+          />
+          <button
+            v-if="isAppInitiatedAction"
+            :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+            type="submit"
+            name="cancel-aia"
+            value="true"
+          >
+            <component :is="i18n.msg('doCancel')" />
+          </button>
+        </div>
+      </div>
+    </form>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginUpdatePassword.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: 'login-update-password.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/LoginUpdateProfile.vue

@@ -0,0 +1,94 @@
+<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: 'login-update-profile.ftl' }>, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+  }
+>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { messagesPerField, url, isAppInitiatedAction } = kcContext;
+
+const isFormSubmittable = ref(false);
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayRequiredFields="true"
+    :displayMessage="messagesPerField.exists('global')"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('loginProfileTitle')" />
+    </template>
+
+    <form
+      id="kc-update-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',
+                !isAppInitiatedAction ? 'kcButtonBlockClass' : undefined,
+                'kcButtonLargeClass',
+              )
+            "
+            type="submit"
+            :value="props.i18n.msgStr('doSubmit')"
+          />
+          <button
+            v-if="isAppInitiatedAction"
+            :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+            type="submit"
+            name="cancel-aia"
+            value="true"
+            formnovalidate
+          >
+            <component :is="props.i18n.msg('doCancel')" />
+          </button>
+        </div>
+      </div>
+    </form>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginUpdateProfile.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: 'login-update-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/LoginUsername.useScript.d.ts

@@ -0,0 +1,23 @@
+import { type Ref } from 'vue';
+import type { KcContext } from 'keycloakify/login/KcContext';
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    isUserIdentified: 'true' | 'false';
+    challenge: string;
+    userVerification: KcContext.WebauthnAuthenticate['userVerification'];
+    rpId: string;
+    createTimeout: number | string;
+    enableWebAuthnConditionalUI?: boolean;
+};
+type I18nLike = {
+    msgStr: (key: 'webauthn-unsupported-browser-text' | 'passkey-unsupported-browser-text') => string;
+    isFetchingTranslations: boolean;
+};
+export declare function useScript(params: {
+    webAuthnButtonId: string;
+    kcContext: KcContextLike;
+    i18n: Ref<I18nLike>;
+}): void;
+export {};

package/keycloakify-vue/login/pages/LoginUsername.useScript.js

@@ -0,0 +1,64 @@
+import { onMounted, watch } from "vue";
+import { useInsertScriptTags } from "../../tools/useInsertScriptTags";
+import { assert } from "keycloakify/tools/assert";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
+assert();
+assert();
+function useScript(params) {
+  const { webAuthnButtonId, kcContext, i18n } = params;
+  const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+  const { insertScriptTags } = useInsertScriptTags({
+    componentOrHookName: "LoginUsername",
+    scriptTags: [
+      {
+        type: "module",
+        textContent: () => `
+
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
+                    const authButton = document.getElementById('${webAuthnButtonId}');
+                    const input = {
+                        isUserIdentified : ${isUserIdentified},
+                        challenge : ${JSON.stringify(challenge)},
+                        userVerification : ${JSON.stringify(userVerification)},
+                        rpId : ${JSON.stringify(rpId)},
+                        createTimeout : ${createTimeout}
+                    };
+                    authButton.addEventListener("click", () => {
+                        authenticateByWebAuthn({
+                            ...input,
+                            errmsg : ${JSON.stringify(i18n.value.msgStr("webauthn-unsupported-browser-text"))}
+                        });
+                    }, { once: true });
+
+                    initAuthenticate({
+                        ...input,
+                        errmsg : ${JSON.stringify(i18n.value.msgStr("passkey-unsupported-browser-text"))}
+                    });
+                `
+      }
+    ]
+  });
+  onMounted(() => {
+    if (kcContext.enableWebAuthnConditionalUI !== true) {
+      return;
+    }
+    const stopWatch = watch(
+      () => i18n.value.isFetchingTranslations,
+      async (isFetching) => {
+        if (isFetching) {
+          return;
+        }
+        stopWatch();
+        await waitForElementMountedOnDom({
+          elementId: webAuthnButtonId
+        });
+        insertScriptTags();
+      },
+      { immediate: true }
+    );
+  });
+}
+export {
+  useScript
+};

package/keycloakify-vue/login/pages/LoginUsername.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import { clsx } from 'keycloakify/tools/clsx';
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import { computed, ref, toRef } from 'vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+import { useScript } from './LoginUsername.useScript';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'login-username.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const {
+  social,
+  realm,
+  url,
+  usernameHidden,
+  login,
+  registrationDisabled,
+  messagesPerField,
+  enableWebAuthnConditionalUI,
+  authenticators,
+} = kcContext;
+
+const isLoginButtonDisabled = ref(false);
+
+const usernameLabelKey = computed(() =>
+  !realm.loginWithEmailAllowed ? 'username' : !realm.registrationEmailAsUsername ? 'usernameOrEmail' : 'email',
+);
+
+function onSubmit() {
+  isLoginButtonDisabled.value = true;
+  return true;
+}
+
+const webAuthnButtonId = 'authenticateWebAuthnButton';
+
+useScript({
+  webAuthnButtonId,
+  kcContext,
+  i18n: toRef(props, 'i18n'),
+});
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="!messagesPerField.existsError('username')"
+    :displayInfo="realm.password && realm.registrationAllowed && !registrationDisabled"
+  >
+    <template #header>
+      <component :is="i18n.msg('doLogIn')" />
+    </template>
+
+    <template #info>
+      <div id="kc-registration">
+        <span>
+          <component :is="i18n.msg('noAccount')" />
+          <a
+            :tabindex="6"
+            :href="url.registrationUrl"
+          >
+            <component :is="i18n.msg('doRegister')" />
+          </a>
+        </span>
+      </div>
+    </template>
+
+    <template #socialProviders>
+      <div
+        v-if="realm.password && social?.providers?.length"
+        id="kc-social-providers"
+        :class="kcClsx('kcFormSocialAccountSectionClass')"
+      >
+        <hr />
+        <h2><component :is="i18n.msg('identity-provider-login-label')" /></h2>
+        <ul
+          :class="
+            kcClsx('kcFormSocialAccountListClass', social.providers.length > 3 && 'kcFormSocialAccountListGridClass')
+          "
+        >
+          <li
+            v-for="p in social.providers"
+            :key="p.providerId"
+          >
+            <a
+              :id="`social-${p.alias}`"
+              :class="
+                kcClsx(
+                  'kcFormSocialAccountListButtonClass',
+                  social.providers.length > 3 && 'kcFormSocialAccountGridItem',
+                )
+              "
+              type="button"
+              :href="p.loginUrl"
+            >
+              <i
+                v-if="p.iconClasses"
+                :class="clsx(kcClsx('kcCommonLogoIdP'), p.iconClasses)"
+                aria-hidden="true"
+              ></i>
+              <span
+                :class="clsx(kcClsx('kcFormSocialAccountNameClass'), p.iconClasses && 'kc-social-icon-text')"
+                v-html="kcSanitize(p.displayName)"
+              ></span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </template>
+
+    <div id="kc-form">
+      <div id="kc-form-wrapper">
+        <form
+          v-if="realm.password"
+          id="kc-form-login"
+          :action="url.loginAction"
+          method="post"
+          @submit="onSubmit"
+        >
+          <div
+            v-if="!usernameHidden"
+            :class="kcClsx('kcFormGroupClass')"
+          >
+            <label
+              for="username"
+              :class="kcClsx('kcLabelClass')"
+            >
+              <component :is="i18n.msg(usernameLabelKey)" />
+            </label>
+            <input
+              :tabindex="2"
+              id="username"
+              :class="kcClsx('kcInputClass')"
+              name="username"
+              :value="login.username ?? ''"
+              type="text"
+              autofocus
+              :autocomplete="enableWebAuthnConditionalUI ? 'username webauthn' : 'username'"
+              :aria-invalid="messagesPerField.existsError('username')"
+            />
+            <span
+              v-if="messagesPerField.existsError('username')"
+              id="input-error"
+              :class="kcClsx('kcInputErrorMessageClass')"
+              aria-live="polite"
+              v-html="kcSanitize(messagesPerField.getFirstError('username'))"
+            ></span>
+          </div>
+
+          <div :class="kcClsx('kcFormGroupClass', 'kcFormSettingClass')">
+            <div id="kc-form-options">
+              <div
+                v-if="realm.rememberMe && !usernameHidden"
+                class="checkbox"
+              >
+                <label>
+                  <input
+                    :tabindex="3"
+                    id="rememberMe"
+                    name="rememberMe"
+                    type="checkbox"
+                    :checked="!!login.rememberMe"
+                  />
+                  <component :is="i18n.msg('rememberMe')" />
+                </label>
+              </div>
+            </div>
+          </div>
+
+          <div
+            id="kc-form-buttons"
+            :class="kcClsx('kcFormGroupClass')"
+          >
+            <input
+              :tabindex="4"
+              :disabled="isLoginButtonDisabled"
+              :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+              name="login"
+              id="kc-login"
+              type="submit"
+              :value="i18n.msgStr('doLogIn')"
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <template v-if="enableWebAuthnConditionalUI">
+      <form
+        id="webauth"
+        :action="url.loginAction"
+        method="post"
+      >
+        <input
+          type="hidden"
+          id="clientDataJSON"
+          name="clientDataJSON"
+        />
+        <input
+          type="hidden"
+          id="authenticatorData"
+          name="authenticatorData"
+        />
+        <input
+          type="hidden"
+          id="signature"
+          name="signature"
+        />
+        <input
+          type="hidden"
+          id="credentialId"
+          name="credentialId"
+        />
+        <input
+          type="hidden"
+          id="userHandle"
+          name="userHandle"
+        />
+        <input
+          type="hidden"
+          id="error"
+          name="error"
+        />
+      </form>
+
+      <template v-if="authenticators !== undefined && authenticators.authenticators.length !== 0">
+        <form
+          id="authn_select"
+          :class="kcClsx('kcFormClass')"
+        >
+          <input
+            v-for="(authenticator, i) in authenticators.authenticators"
+            :key="i"
+            type="hidden"
+            name="authn_use_chk"
+            :value="authenticator.credentialId"
+            readonly
+          />
+        </form>
+      </template>
+
+      <br />
+
+      <input
+        :id="webAuthnButtonId"
+        type="button"
+        :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+        :value="i18n.msgStr('passkey-doAuthenticate')"
+      />
+    </template>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginUsername.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: 'login-username.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/LoginVerifyEmail.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+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: 'login-verify-email.ftl' }>, I18n>>();
+
+const kcContext = props.kcContext;
+const { url, user } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayInfo="true"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('emailVerifyTitle')" />
+    </template>
+
+    <template #info>
+      <p class="instruction">
+        <component :is="props.i18n.msg('emailVerifyInstruction2')" />
+        <br />
+        <a :href="url.loginAction"><component :is="props.i18n.msg('doClickHere')" /></a>
+        &nbsp;
+        <component :is="props.i18n.msg('emailVerifyInstruction3')" />
+      </p>
+    </template>
+
+    <p class="instruction">
+      <component :is="props.i18n.msg('emailVerifyInstruction1', user?.email ?? '')" />
+    </p>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginVerifyEmail.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: 'login-verify-email.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;