@andreyyolkin/keycloakify-vue 0.1.0

package/keycloakify-vue/login/pages/SelectOrganization.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: 'select-organization.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/Terms.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: 'terms.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="false"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('termsTitle')" />
+    </template>
+
+    <div id="kc-terms-text">
+      <component :is="props.i18n.msg('termsText')" />
+    </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('doAccept')"
+      />
+      <input
+        :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+        name="cancel"
+        id="kc-decline"
+        type="submit"
+        :value="props.i18n.msgStr('doDecline')"
+      />
+    </form>
+    <div class="clearfix" />
+  </component>
+</template>

package/keycloakify-vue/login/pages/Terms.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: 'terms.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/UpdateEmail.vue

@@ -0,0 +1,100 @@
+<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 LogoutOtherSessions from '../components/LogoutOtherSessions.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: 'update-email.ftl' }>, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+  }
+>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, messagesPerField, isAppInitiatedAction } = 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('updateEmailTitle')" />
+    </template>
+
+    <form
+      id="kc-update-email-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>
+
+        <LogoutOtherSessions
+          :kcClsx="kcClsx"
+          :i18n="props.i18n"
+        />
+
+        <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"
+          >
+            <component :is="props.i18n.msg('doCancel')" />
+          </button>
+        </div>
+      </div>
+    </form>
+  </component>
+</template>

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

@@ -0,0 +1,22 @@
+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;
+};
+type I18nLike = {
+    msgStr: (key: 'webauthn-unsupported-browser-text') => string;
+    isFetchingTranslations: boolean;
+};
+export declare function useScript(params: {
+    authButtonId: string;
+    kcContext: KcContextLike;
+    i18n: Ref<I18nLike>;
+}): void;
+export {};

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

@@ -0,0 +1,53 @@
+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 { authButtonId, kcContext, i18n } = params;
+  const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+  const { insertScriptTags } = useInsertScriptTags({
+    componentOrHookName: "WebauthnAuthenticate",
+    scriptTags: [
+      {
+        type: "module",
+        textContent: () => `
+
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    const authButton = document.getElementById('${authButtonId}');
+                    authButton.addEventListener("click", function() {
+                        const input = {
+                            isUserIdentified : ${isUserIdentified},
+                            challenge : '${challenge}',
+                            userVerification : '${userVerification}',
+                            rpId : '${rpId}',
+                            createTimeout : ${createTimeout},
+                            errmsg : ${JSON.stringify(i18n.value.msgStr("webauthn-unsupported-browser-text"))}
+                        };
+                        authenticateByWebAuthn(input);
+                    });
+                `
+      }
+    ]
+  });
+  onMounted(() => {
+    const stopWatch = watch(
+      () => i18n.value.isFetchingTranslations,
+      async (isFetching) => {
+        if (isFetching) {
+          return;
+        }
+        stopWatch();
+        await waitForElementMountedOnDom({
+          elementId: authButtonId
+        });
+        insertScriptTags();
+      },
+      { immediate: true }
+    );
+  });
+}
+export {
+  useScript
+};

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

@@ -0,0 +1,186 @@
+<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 './WebauthnAuthenticate.useScript';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'webauthn-authenticate.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, realm, registrationDisabled, authenticators, shouldDisplayAuthenticators } = 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"
+    :displayInfo="realm.registrationAllowed && !registrationDisabled"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('webauthn-login-title')" />
+    </template>
+
+    <template #info>
+      <div id="kc-registration">
+        <span>
+          <component :is="props.i18n.msg('noAccount')" />&nbsp;
+          <a
+            :tabindex="6"
+            :href="url.registrationUrl"
+          >
+            <component :is="props.i18n.msg('doRegister')" />
+          </a>
+        </span>
+      </div>
+    </template>
+
+    <div
+      id="kc-form-webauthn"
+      :class="kcClsx('kcFormClass')"
+    >
+      <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="clsx(kcClsx('kcFormGroupClass'), 'no-bottom-margin')">
+        <template v-if="authenticators">
+          <form
+            id="authn_select"
+            :class="kcClsx('kcFormClass')"
+          >
+            <input
+              v-for="authenticator in authenticators.authenticators"
+              :key="authenticator.credentialId"
+              type="hidden"
+              name="authn_use_chk"
+              :value="authenticator.credentialId"
+            />
+          </form>
+
+          <template v-if="shouldDisplayAuthenticators">
+            <p
+              v-if="authenticators.authenticators.length > 1"
+              :class="kcClsx('kcSelectAuthListItemTitle')"
+            >
+              <component :is="props.i18n.msg('webauthn-available-authenticators')" />
+            </p>
+            <div :class="kcClsx('kcFormOptionsClass')">
+              <div
+                v-for="(authenticator, idx) in authenticators.authenticators"
+                :key="authenticator.credentialId"
+                :id="`kc-webauthn-authenticator-item-${idx}`"
+                :class="kcClsx('kcSelectAuthListItemClass')"
+              >
+                <div :class="kcClsx('kcSelectAuthListItemIconClass')">
+                  <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>
+                <div :class="kcClsx('kcSelectAuthListItemArrowIconClass')">
+                  <div
+                    :id="`kc-webauthn-authenticator-label-${idx}`"
+                    :class="kcClsx('kcSelectAuthListItemHeadingClass')"
+                  >
+                    <component :is="props.i18n.advancedMsg(authenticator.label)" />
+                  </div>
+                  <div
+                    v-if="authenticator.transports.displayNameProperties?.length"
+                    :id="`kc-webauthn-authenticator-transport-${idx}`"
+                    :class="kcClsx('kcSelectAuthListItemDescriptionClass')"
+                  >
+                    <template
+                      v-for="(displayNameProperty, dpIdx) in authenticator.transports.displayNameProperties"
+                      :key="displayNameProperty"
+                    >
+                      <component :is="props.i18n.advancedMsg(displayNameProperty)" />
+                      <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('webauthn-createdAt-label')" />
+                    </span>
+                    <span :id="`kc-webauthn-authenticator-created-${idx}`">{{ authenticator.createdAt }}</span>
+                  </div>
+                  <div :class="kcClsx('kcSelectAuthListItemFillClass')"></div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </template>
+
+        <div
+          id="kc-form-buttons"
+          :class="kcClsx('kcFormButtonsClass')"
+        >
+          <input
+            :id="authButtonId"
+            type="button"
+            autofocus
+            :value="props.i18n.msgStr('webauthn-doAuthenticate')"
+            :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+          />
+        </div>
+      </div>
+    </div>
+  </component>
+</template>

package/keycloakify-vue/login/pages/WebauthnAuthenticate.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: 'webauthn-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/WebauthnError.vue

@@ -0,0 +1,84 @@
+<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: 'webauthn-error.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, isAppInitiatedAction, execution } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="true"
+  >
+    <template #header>
+      <component :is="i18n.msg('webauthn-error-title')" />
+    </template>
+
+    <form
+      id="kc-error-credential-form"
+      :class="kcClsx('kcFormClass')"
+      :action="url.loginAction"
+      method="post"
+    >
+      <input
+        type="hidden"
+        id="executionValue"
+        name="authenticationExecution"
+      />
+      <input
+        type="hidden"
+        id="isSetRetry"
+        name="isSetRetry"
+      />
+    </form>
+    <input
+      :tabindex="4"
+      @click="
+        () => {
+          // @ts-expect-error: Trusted Keycloak's code
+          document.getElementById('isSetRetry').value = 'retry';
+          // @ts-expect-error: Trusted Keycloak's code
+          document.getElementById('executionValue').value = execution;
+          // @ts-expect-error: Trusted Keycloak's code
+          document.getElementById('kc-error-credential-form').requestSubmit();
+        }
+      "
+      type="button"
+      :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+      name="try-again"
+      id="kc-try-again"
+      :value="i18n.msgStr('doTryAgain')"
+    />
+    <form
+      v-if="isAppInitiatedAction"
+      :action="url.loginAction"
+      :class="kcClsx('kcFormClass')"
+      id="kc-webauthn-settings-form"
+      method="post"
+    >
+      <button
+        type="submit"
+        :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+        id="cancelWebAuthnAIA"
+        name="cancel-aia"
+        value="true"
+      >
+        {{ i18n.msgStr('doCancel') }}
+      </button>
+    </form>
+  </component>
+</template>

package/keycloakify-vue/login/pages/WebauthnError.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: 'webauthn-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/WebauthnRegister.useScript.d.ts

@@ -0,0 +1,28 @@
+import { type Ref } from 'vue';
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    challenge: string;
+    userid: string;
+    username: string;
+    signatureAlgorithms: string[];
+    rpEntityName: string;
+    rpId: string;
+    attestationConveyancePreference: string;
+    authenticatorAttachment: string;
+    requireResidentKey: string;
+    userVerificationRequirement: string;
+    createTimeout: number | string;
+    excludeCredentialIds: string;
+};
+type I18nLike = {
+    msgStr: (key: 'webauthn-registration-init-label' | 'webauthn-registration-init-label-prompt' | 'webauthn-unsupported-browser-text') => string;
+    isFetchingTranslations: boolean;
+};
+export declare function useScript(params: {
+    authButtonId: string;
+    kcContext: KcContextLike;
+    i18n: Ref<I18nLike>;
+}): void;
+export {};

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

@@ -0,0 +1,75 @@
+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 { authButtonId, kcContext, i18n } = params;
+  const {
+    url,
+    challenge,
+    userid,
+    username,
+    signatureAlgorithms,
+    rpEntityName,
+    rpId,
+    attestationConveyancePreference,
+    authenticatorAttachment,
+    requireResidentKey,
+    userVerificationRequirement,
+    createTimeout,
+    excludeCredentialIds
+  } = kcContext;
+  const { insertScriptTags } = useInsertScriptTags({
+    componentOrHookName: "WebauthnRegister",
+    scriptTags: [
+      {
+        type: "module",
+        textContent: () => `
+                    import { registerByWebAuthn } from "${url.resourcesPath}/js/webauthnRegister.js";
+                    const registerButton = document.getElementById('${authButtonId}');
+                    registerButton.addEventListener("click", function() {
+                        const input = {
+                            challenge : '${challenge}',
+                            userid : '${userid}',
+                            username : '${username}',
+                            signatureAlgorithms : ${JSON.stringify(signatureAlgorithms)},
+                            rpEntityName : ${JSON.stringify(rpEntityName)},
+                            rpId : ${JSON.stringify(rpId)},
+                            attestationConveyancePreference : ${JSON.stringify(attestationConveyancePreference)},
+                            authenticatorAttachment : ${JSON.stringify(authenticatorAttachment)},
+                            requireResidentKey : ${JSON.stringify(requireResidentKey)},
+                            userVerificationRequirement : ${JSON.stringify(userVerificationRequirement)},
+                            createTimeout : ${createTimeout},
+                            excludeCredentialIds : ${JSON.stringify(excludeCredentialIds)},
+                            initLabel : ${JSON.stringify(i18n.value.msgStr("webauthn-registration-init-label"))},
+                            initLabelPrompt : ${JSON.stringify(i18n.value.msgStr("webauthn-registration-init-label-prompt"))},
+                            errmsg : ${JSON.stringify(i18n.value.msgStr("webauthn-unsupported-browser-text"))}
+                        };
+                        registerByWebAuthn(input);
+                    });
+                `
+      }
+    ]
+  });
+  onMounted(() => {
+    const stopWatch = watch(
+      () => i18n.value.isFetchingTranslations,
+      async (isFetching) => {
+        if (isFetching) {
+          return;
+        }
+        stopWatch();
+        await waitForElementMountedOnDom({
+          elementId: authButtonId
+        });
+        insertScriptTags();
+      },
+      { immediate: true }
+    );
+  });
+}
+export {
+  useScript
+};