@andreyyolkin/keycloakify-vue 0.1.0

package/keycloakify-vue/login/pages/LoginIdpLinkConfirmOverride.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-idp-link-confirm-override.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/LoginIdpLinkEmail.vue

@@ -0,0 +1,52 @@
+<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-idp-link-email.ftl' }>, I18n>>();
+
+const kcContext = props.kcContext;
+const { url, realm, brokerContext, idpAlias } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="false"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('emailLinkIdpTitle', idpAlias)" />
+    </template>
+
+    <p
+      id="instruction1"
+      class="instruction"
+    >
+      <component :is="props.i18n.msg('emailLinkIdp1', idpAlias, brokerContext.username, realm.displayName)" />
+    </p>
+    <p
+      id="instruction2"
+      class="instruction"
+    >
+      <component :is="props.i18n.msg('emailLinkIdp2')" />
+      {{ ' ' }}
+      <a :href="url.loginAction"><component :is="props.i18n.msg('doClickHere')" /></a>
+      {{ ' ' }}
+      <component :is="props.i18n.msg('emailLinkIdp3')" />
+    </p>
+    <p
+      id="instruction3"
+      class="instruction"
+    >
+      <component :is="props.i18n.msg('emailLinkIdp4')" />
+      {{ ' ' }}
+      <a :href="url.loginAction"><component :is="props.i18n.msg('doClickHere')" /></a>
+      {{ ' ' }}
+      <component :is="props.i18n.msg('emailLinkIdp5')" />
+    </p>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginIdpLinkEmail.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-idp-link-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;

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

@@ -0,0 +1,82 @@
+<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: 'login-oauth2-device-verify-user-code.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="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <component :is="i18n.msg('oauth2DeviceVerificationTitle')" />
+    </template>
+
+    <form
+      id="kc-user-verify-device-user-code-form"
+      :class="kcClsx('kcFormClass')"
+      :action="url.oauth2DeviceVerificationAction"
+      method="post"
+    >
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div :class="kcClsx('kcLabelWrapperClass')">
+          <label
+            for="device-user-code"
+            :class="kcClsx('kcLabelClass')"
+          >
+            <component :is="i18n.msg('verifyOAuth2DeviceUserCode')" />
+          </label>
+        </div>
+
+        <div :class="kcClsx('kcInputWrapperClass')">
+          <input
+            id="device-user-code"
+            name="device_user_code"
+            autocomplete="off"
+            type="text"
+            :class="kcClsx('kcInputClass')"
+            autofocus
+          />
+        </div>
+      </div>
+
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div
+          id="kc-form-options"
+          :class="kcClsx('kcFormOptionsClass')"
+        >
+          <div :class="kcClsx('kcFormOptionsWrapperClass')"></div>
+        </div>
+
+        <div
+          id="kc-form-buttons"
+          :class="kcClsx('kcFormButtonsClass')"
+        >
+          <div :class="kcClsx('kcFormButtonsWrapperClass')">
+            <input
+              :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+              type="submit"
+              :value="i18n.msgStr('doSubmit')"
+            />
+          </div>
+        </div>
+      </div>
+    </form>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginOauth2DeviceVerifyUserCode.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-oauth2-device-verify-user-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/LoginOauthGrant.vue

@@ -0,0 +1,131 @@
+<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: 'login-oauth-grant.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, oauth, client } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    bodyClassName="oauth"
+  >
+    <template #header>
+      <img
+        v-if="client.attributes.logoUri"
+        :src="client.attributes.logoUri"
+        alt="logo"
+      />
+      <p>
+        <component
+          v-if="client.name"
+          :is="i18n.msg('oauthGrantTitle', i18n.advancedMsgStr(client.name))"
+        />
+        <component
+          v-else
+          :is="i18n.msg('oauthGrantTitle', client.clientId)"
+        />
+      </p>
+    </template>
+
+    <div
+      id="kc-oauth"
+      class="content-area"
+    >
+      <h3><component :is="i18n.msg('oauthGrantRequest')" /></h3>
+      <ul>
+        <li
+          v-for="clientScope in oauth.clientScopesRequested"
+          :key="clientScope.consentScreenText"
+        >
+          <span>
+            <component :is="i18n.advancedMsg(clientScope.consentScreenText)" />
+            <template v-if="clientScope.dynamicScopeParameter">
+              : <b>{{ clientScope.dynamicScopeParameter }}</b>
+            </template>
+          </span>
+        </li>
+      </ul>
+
+      <h3 v-if="client.attributes.policyUri || client.attributes.tosUri">
+        <component
+          v-if="client.name"
+          :is="i18n.msg('oauthGrantInformation', i18n.advancedMsgStr(client.name))"
+        />
+        <component
+          v-else
+          :is="i18n.msg('oauthGrantInformation', client.clientId)"
+        />
+        <template v-if="client.attributes.tosUri">
+          <component :is="i18n.msg('oauthGrantReview')" />
+          <a
+            :href="client.attributes.tosUri"
+            target="_blank"
+          >
+            <component :is="i18n.msg('oauthGrantTos')" />
+          </a>
+        </template>
+        <template v-if="client.attributes.policyUri">
+          <component :is="i18n.msg('oauthGrantReview')" />
+          <a
+            :href="client.attributes.policyUri"
+            target="_blank"
+          >
+            <component :is="i18n.msg('oauthGrantPolicy')" />
+          </a>
+        </template>
+      </h3>
+
+      <form
+        class="form-actions"
+        :action="url.oauthAction"
+        method="POST"
+      >
+        <input
+          type="hidden"
+          name="code"
+          :value="oauth.code"
+        />
+        <div :class="kcClsx('kcFormGroupClass')">
+          <div id="kc-form-options">
+            <div :class="kcClsx('kcFormOptionsWrapperClass')"></div>
+          </div>
+
+          <div id="kc-form-buttons">
+            <div :class="kcClsx('kcFormButtonsWrapperClass')">
+              <input
+                :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+                name="accept"
+                id="kc-login"
+                type="submit"
+                :value="i18n.msgStr('doYes')"
+              />
+              <input
+                :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+                name="cancel"
+                id="kc-cancel"
+                type="submit"
+                :value="i18n.msgStr('doNo')"
+              />
+            </div>
+          </div>
+        </div>
+      </form>
+      <div class="clearfix"></div>
+    </div>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginOauthGrant.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-oauth-grant.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/LoginOtp.vue

@@ -0,0 +1,135 @@
+<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 { ref } from 'vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'login-otp.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { otpLogin, url, messagesPerField } = kcContext;
+
+const isSubmitting = ref(false);
+
+function onSubmit() {
+  isSubmitting.value = true;
+  return true;
+}
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="!messagesPerField.existsError('totp')"
+  >
+    <template #header>
+      <component :is="i18n.msg('doLogIn')" />
+    </template>
+
+    <form
+      id="kc-otp-login-form"
+      :class="kcClsx('kcFormClass')"
+      :action="url.loginAction"
+      method="post"
+      @submit="onSubmit"
+    >
+      <div
+        v-if="otpLogin.userOtpCredentials.length > 1"
+        :class="kcClsx('kcFormGroupClass')"
+      >
+        <div :class="kcClsx('kcInputWrapperClass')">
+          <template
+            v-for="(otpCredential, index) in otpLogin.userOtpCredentials"
+            :key="otpCredential.id"
+          >
+            <input
+              :id="`kc-otp-credential-${index}`"
+              :class="kcClsx('kcLoginOTPListInputClass')"
+              type="radio"
+              name="selectedCredentialId"
+              :value="otpCredential.id"
+              :checked="otpCredential.id === otpLogin.selectedCredentialId"
+            />
+            <label
+              :for="`kc-otp-credential-${index}`"
+              :class="kcClsx('kcLoginOTPListClass')"
+              :tabindex="index"
+            >
+              <span :class="kcClsx('kcLoginOTPListItemHeaderClass')">
+                <span :class="kcClsx('kcLoginOTPListItemIconBodyClass')">
+                  <i
+                    :class="kcClsx('kcLoginOTPListItemIconClass')"
+                    aria-hidden="true"
+                  ></i>
+                </span>
+                <span :class="kcClsx('kcLoginOTPListItemTitleClass')">{{ otpCredential.userLabel }}</span>
+              </span>
+            </label>
+          </template>
+        </div>
+      </div>
+
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div :class="kcClsx('kcLabelWrapperClass')">
+          <label
+            for="otp"
+            :class="kcClsx('kcLabelClass')"
+          >
+            <component :is="i18n.msg('loginOtpOneTime')" />
+          </label>
+        </div>
+        <div :class="kcClsx('kcInputWrapperClass')">
+          <input
+            id="otp"
+            name="otp"
+            autocomplete="off"
+            type="text"
+            :class="kcClsx('kcInputClass')"
+            autofocus
+            :aria-invalid="messagesPerField.existsError('totp')"
+          />
+          <span
+            v-if="messagesPerField.existsError('totp')"
+            id="input-error-otp-code"
+            :class="kcClsx('kcInputErrorMessageClass')"
+            aria-live="polite"
+            v-html="kcSanitize(messagesPerField.get('totp'))"
+          ></span>
+        </div>
+      </div>
+
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div
+          id="kc-form-options"
+          :class="kcClsx('kcFormOptionsClass')"
+        >
+          <div :class="kcClsx('kcFormOptionsWrapperClass')"></div>
+        </div>
+        <div
+          id="kc-form-buttons"
+          :class="kcClsx('kcFormButtonsClass')"
+        >
+          <input
+            :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+            name="login"
+            id="kc-login"
+            type="submit"
+            :value="i18n.msgStr('doLogIn')"
+            :disabled="isSubmitting"
+          />
+        </div>
+      </div>
+    </form>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginOtp.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-otp.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/LoginPageExpired.vue

@@ -0,0 +1,44 @@
+<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-page-expired.ftl' }>, I18n>>();
+
+const kcContext = props.kcContext;
+const { url } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('pageExpiredTitle')" />
+    </template>
+
+    <p
+      id="instruction1"
+      class="instruction"
+    >
+      <component :is="props.i18n.msg('pageExpiredMsg1')" />
+      <a
+        id="loginRestartLink"
+        :href="url.loginRestartFlowUrl"
+      >
+        <component :is="props.i18n.msg('doClickHere')" />&nbsp; </a
+      >&nbsp;.<br />
+      <component :is="props.i18n.msg('pageExpiredMsg2')" />&nbsp;
+      <a
+        id="loginContinueLink"
+        :href="url.loginAction"
+      >
+        <component :is="props.i18n.msg('doClickHere')" /> </a
+      >&nbsp;.
+    </p>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginPageExpired.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-page-expired.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/LoginPasskeysConditionalAuthenticate.useScript.d.ts

@@ -0,0 +1,21 @@
+import { type Ref } from 'vue';
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    isUserIdentified: boolean | 'true' | 'false';
+    challenge: string;
+    userVerification: string;
+    rpId: string;
+    createTimeout: number | string;
+};
+type I18nLike = {
+    msgStr: (key: 'webauthn-unsupported-browser-text' | 'passkey-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/LoginPasskeysConditionalAuthenticate.useScript.js

@@ -0,0 +1,74 @@
+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: "LoginPasskeysConditionalAuthenticate",
+    scriptTags: [
+      {
+        type: "module",
+        textContent: () => `
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
+
+                    const authButton = document.getElementById("${authButtonId}");
+                    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"))}
+                    }, available => {
+                        const loginForm = document.getElementById("kc-form-login");
+                        const passkeyButton = document.getElementById("kc-form-passkey-button");
+
+                        if (!loginForm || !passkeyButton) {
+                            return;
+                        }
+
+                        if (available) {
+                            loginForm.style.display = "block";
+                        } else {
+                            passkeyButton.style.display = "block";
+                        }
+                    });
+                `
+      }
+    ]
+  });
+  onMounted(() => {
+    const stopWatch = watch(
+      () => i18n.value.isFetchingTranslations,
+      async (isFetching) => {
+        if (isFetching) {
+          return;
+        }
+        stopWatch();
+        await waitForElementMountedOnDom({
+          elementId: authButtonId
+        });
+        insertScriptTags();
+      },
+      { immediate: true }
+    );
+  });
+}
+export {
+  useScript
+};