@andreyyolkin/keycloakify-vue 0.1.0

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

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { getKcClsx, type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { clsx } from 'keycloakify/tools/clsx';
+import type { CxArg } from 'keycloakify/tools/clsx_withTransform';
+import { toRef } from 'vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+import { useScript } from './LoginPasskeysConditionalAuthenticate.useScript';
+
+const props =
+  defineProps<PageProps<Extract<KcContext, { pageId: 'login-passkeys-conditional-authenticate.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const {
+  messagesPerField,
+  login,
+  url,
+  usernameHidden,
+  shouldDisplayAuthenticators,
+  authenticators,
+  registrationDisabled,
+  realm,
+} = kcContext;
+
+const authButtonId = 'authenticateWebAuthnButton';
+
+useScript({ authButtonId, kcContext, i18n: toRef(props, 'i18n') });
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('passkey-login-title')" />
+    </template>
+
+    <template #info>
+      <div
+        v-if="realm.registrationAllowed && !registrationDisabled"
+        id="kc-registration"
+      >
+        <span>
+          <component :is="props.i18n.msg('noAccount')" />
+          <a
+            :tabindex="6"
+            :href="url.registrationUrl"
+          >
+            <component :is="props.i18n.msg('doRegister')" />
+          </a>
+        </span>
+      </div>
+    </template>
+
+    <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>
+
+    <div
+      :class="kcClsx('kcFormGroupClass')"
+      no-bottom-margin="true"
+      :style="{ marginBottom: 0 }"
+    >
+      <template v-if="authenticators !== undefined && Object.keys(authenticators).length !== 0">
+        <form
+          id="authn_select"
+          :class="kcClsx('kcFormClass')"
+        >
+          <input
+            v-for="authenticator in authenticators.authenticators"
+            :key="authenticator.credentialId"
+            type="hidden"
+            name="authn_use_chk"
+            readonly
+            :value="authenticator.credentialId"
+          />
+        </form>
+        <template v-if="shouldDisplayAuthenticators">
+          <p
+            v-if="authenticators.authenticators.length > 1"
+            :class="kcClsx('kcSelectAuthListItemTitle')"
+          >
+            <component :is="props.i18n.msg('passkey-available-authenticators')" />
+          </p>
+          <div :class="kcClsx('kcFormClass')">
+            <div
+              v-for="(authenticator, idx) in authenticators.authenticators"
+              :key="authenticator.credentialId"
+              :id="`kc-webauthn-authenticator-item-${idx}`"
+              :class="kcClsx('kcSelectAuthListItemClass')"
+            >
+              <i
+                :class="
+                  clsx(
+                    (() => {
+                      const klass = kcClsx(authenticator.transports.iconClass as CxArg<ClassKey>);
+                      if (klass === authenticator.transports.iconClass) {
+                        return kcClsx('kcWebAuthnDefaultIcon');
+                      }
+                      return klass;
+                    })(),
+                    kcClsx('kcSelectAuthListItemIconPropertyClass'),
+                  )
+                "
+              ></i>
+              <div :class="kcClsx('kcSelectAuthListItemBodyClass')">
+                <div
+                  :id="`kc-webauthn-authenticator-label-${idx}`"
+                  :class="kcClsx('kcSelectAuthListItemHeadingClass')"
+                >
+                  <component :is="props.i18n.advancedMsg(authenticator.label)" />
+                </div>
+                <div
+                  v-if="
+                    authenticator.transports !== undefined &&
+                    authenticator.transports.displayNameProperties !== undefined &&
+                    authenticator.transports.displayNameProperties.length !== 0
+                  "
+                  :id="`kc-webauthn-authenticator-transport-${idx}`"
+                  :class="kcClsx('kcSelectAuthListItemDescriptionClass')"
+                >
+                  <template
+                    v-for="(nameProperty, dpIdx) in authenticator.transports.displayNameProperties"
+                    :key="nameProperty"
+                  >
+                    <span>
+                      <component :is="props.i18n.advancedMsg(nameProperty)" />
+                    </span>
+                    <span v-if="dpIdx !== authenticator.transports.displayNameProperties!.length - 1">, </span>
+                  </template>
+                </div>
+                <div :class="kcClsx('kcSelectAuthListItemDescriptionClass')">
+                  <span :id="`kc-webauthn-authenticator-createdlabel-${idx}`">
+                    <component :is="props.i18n.msg('passkey-createdAt-label')" />
+                  </span>
+                  <span :id="`kc-webauthn-authenticator-created-${idx}`">{{ authenticator.createdAt }}</span>
+                </div>
+              </div>
+              <div :class="kcClsx('kcSelectAuthListItemFillClass')"></div>
+            </div>
+          </div>
+        </template>
+      </template>
+
+      <div id="kc-form">
+        <div id="kc-form-wrapper">
+          <form
+            v-if="realm.password"
+            id="kc-form-login"
+            :action="url.loginAction"
+            method="post"
+            style="display: none"
+            @submit="
+              (event) => {
+                try {
+                  // @ts-expect-error: Trusted Keycloak's code
+                  event.target.login.disabled = true;
+                } catch {}
+                return true;
+              }
+            "
+          >
+            <div
+              v-if="!usernameHidden"
+              :class="kcClsx('kcFormGroupClass')"
+            >
+              <label
+                for="username"
+                :class="kcClsx('kcLabelClass')"
+              >
+                <component :is="props.i18n.msg('passkey-autofill-select')" />
+              </label>
+              <input
+                :tabindex="1"
+                id="username"
+                :aria-invalid="messagesPerField.existsError('username')"
+                :class="kcClsx('kcInputClass')"
+                name="username"
+                :value="login.username ?? ''"
+                autocomplete="username webauthn"
+                type="text"
+                autofocus
+              />
+              <span
+                v-if="messagesPerField.existsError('username')"
+                id="input-error-username"
+                :class="kcClsx('kcInputErrorMessageClass')"
+                aria-live="polite"
+              >
+                {{ messagesPerField.get('username') }}
+              </span>
+            </div>
+          </form>
+
+          <div
+            id="kc-form-passkey-button"
+            :class="kcClsx('kcFormButtonsClass')"
+            style="display: none"
+          >
+            <input
+              :id="authButtonId"
+              type="button"
+              autofocus
+              :value="props.i18n.msgStr('passkey-doAuthenticate')"
+              :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginPasskeysConditionalAuthenticate.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-passkeys-conditional-authenticate.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/LoginPassword.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/LoginPassword.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: "LoginPassword",
+    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/LoginPassword.vue

@@ -0,0 +1,191 @@
+<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 { clsx } from 'keycloakify/tools/clsx';
+import { ref, toRef } from 'vue';
+import PasswordWrapper from '../components/PasswordWrapper.vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+import { useScript } from './LoginPassword.useScript';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'login-password.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { realm, url, messagesPerField, enableWebAuthnConditionalUI, authenticators } = kcContext;
+
+const isLoginButtonDisabled = ref(false);
+
+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('password')"
+  >
+    <template #header>
+      <component :is="i18n.msg('doLogIn')" />
+    </template>
+
+    <div id="kc-form">
+      <div id="kc-form-wrapper">
+        <form
+          id="kc-form-login"
+          @submit="onSubmit"
+          :action="url.loginAction"
+          method="post"
+        >
+          <div :class="clsx(kcClsx('kcFormGroupClass'), 'no-bottom-margin')">
+            <hr />
+            <label
+              for="password"
+              :class="kcClsx('kcLabelClass')"
+            >
+              <component :is="i18n.msg('password')" />
+            </label>
+
+            <PasswordWrapper
+              :kcClsx="kcClsx"
+              :i18n="i18n"
+              passwordInputId="password"
+            >
+              <input
+                :tabindex="2"
+                id="password"
+                :class="kcClsx('kcInputClass')"
+                name="password"
+                type="password"
+                autofocus
+                autocomplete="on"
+                :aria-invalid="messagesPerField.existsError('username', 'password')"
+              />
+            </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 :class="kcClsx('kcFormGroupClass', 'kcFormSettingClass')">
+            <div id="kc-form-options">
+              <div :class="kcClsx('kcFormOptionsWrapperClass')">
+                <span v-if="realm.resetPasswordAllowed">
+                  <a
+                    :tabindex="5"
+                    :href="url.loginResetCredentialsUrl"
+                  >
+                    <component :is="i18n.msg('doForgotPassword')" />
+                  </a>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div
+            id="kc-form-buttons"
+            :class="kcClsx('kcFormGroupClass')"
+          >
+            <input
+              :tabindex="4"
+              :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+              name="login"
+              id="kc-login"
+              type="submit"
+              :value="i18n.msgStr('doLogIn')"
+              :disabled="isLoginButtonDisabled"
+            />
+          </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/LoginPassword.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-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/LoginRecoveryAuthnCodeConfig.useScript.d.ts

@@ -0,0 +1,9 @@
+type I18nLike = {
+    msgStr: (key: 'recovery-codes-download-file-header' | 'recovery-codes-download-file-description' | 'recovery-codes-download-file-date') => string;
+    isFetchingTranslations: boolean;
+};
+export declare function useScript(params: {
+    olRecoveryCodesListId: string;
+    i18n: I18nLike;
+}): void;
+export {};