@andreyyolkin/keycloakify-vue 0.1.0

package/src/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/src/login/pages/LoginUsername.useScript.ts

@@ -0,0 +1,88 @@
+import { onMounted, watch, type Ref } from 'vue';
+import { useInsertScriptTags } from '../../tools/useInsertScriptTags';
+import { assert } from 'keycloakify/tools/assert';
+import { waitForElementMountedOnDom } from 'keycloakify/tools/waitForElementMountedOnDom';
+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;
+};
+
+assert<keyof KcContextLike extends keyof KcContext.LoginUsername ? true : false>();
+assert<KcContext.LoginUsername extends KcContextLike ? true : false>();
+
+type I18nLike = {
+  msgStr: (key: 'webauthn-unsupported-browser-text' | 'passkey-unsupported-browser-text') => string;
+  isFetchingTranslations: boolean;
+};
+
+export function useScript(params: { webAuthnButtonId: string; kcContext: KcContextLike; i18n: Ref<I18nLike> }) {
+  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 },
+    );
+  });
+}

package/src/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/src/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/src/login/pages/LoginX509Info.vue

@@ -0,0 +1,120 @@
+<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-x509-info.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, x509 } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('doLogIn')" />
+    </template>
+
+    <form
+      id="kc-x509-login-info"
+      :class="kcClsx('kcFormClass')"
+      :action="url.loginAction"
+      method="post"
+    >
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div :class="kcClsx('kcLabelWrapperClass')">
+          <label
+            for="certificate_subjectDN"
+            :class="kcClsx('kcLabelClass')"
+          >
+            <component :is="props.i18n.msg('clientCertificate')" />
+          </label>
+        </div>
+        <div
+          v-if="x509.formData.subjectDN"
+          :class="kcClsx('kcLabelWrapperClass')"
+        >
+          <label
+            id="certificate_subjectDN"
+            :class="kcClsx('kcLabelClass')"
+          >
+            {{ x509.formData.subjectDN }}
+          </label>
+        </div>
+        <div
+          v-else
+          :class="kcClsx('kcLabelWrapperClass')"
+        >
+          <label
+            id="certificate_subjectDN"
+            :class="kcClsx('kcLabelClass')"
+          >
+            <component :is="props.i18n.msg('noCertificate')" />
+          </label>
+        </div>
+      </div>
+      <div :class="kcClsx('kcFormGroupClass')">
+        <template v-if="x509.formData.isUserEnabled">
+          <div :class="kcClsx('kcLabelWrapperClass')">
+            <label
+              for="username"
+              :class="kcClsx('kcLabelClass')"
+            >
+              <component :is="props.i18n.msg('doX509Login')" />
+            </label>
+          </div>
+          <div :class="kcClsx('kcLabelWrapperClass')">
+            <label
+              id="username"
+              :class="kcClsx('kcLabelClass')"
+            >
+              {{ x509.formData.username }}
+            </label>
+          </div>
+        </template>
+      </div>
+      <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')"
+        >
+          <div :class="kcClsx('kcFormButtonsWrapperClass')">
+            <input
+              :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+              name="login"
+              id="kc-login"
+              type="submit"
+              :value="props.i18n.msgStr('doContinue')"
+            />
+            <input
+              v-if="x509.formData.isUserEnabled"
+              :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+              name="cancel"
+              id="kc-cancel"
+              type="submit"
+              :value="props.i18n.msgStr('doIgnore')"
+            />
+          </div>
+        </div>
+      </div>
+    </form>
+  </component>
+</template>

package/src/login/pages/LogoutConfirm.vue

@@ -0,0 +1,73 @@
+<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: 'logout-confirm.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, client, logoutConfirm } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('logoutConfirmTitle')" />
+    </template>
+
+    <div
+      id="kc-logout-confirm"
+      class="content-area"
+    >
+      <p class="instruction">
+        <component :is="props.i18n.msg('logoutConfirmHeader')" />
+      </p>
+      <form
+        class="form-actions"
+        :action="url.logoutConfirmAction"
+        method="POST"
+      >
+        <input
+          type="hidden"
+          name="session_code"
+          :value="logoutConfirm.code"
+        />
+        <div :class="kcClsx('kcFormGroupClass')">
+          <div id="kc-form-options">
+            <div :class="kcClsx('kcFormOptionsWrapperClass')"></div>
+          </div>
+          <div
+            id="kc-form-buttons"
+            :class="kcClsx('kcFormGroupClass')"
+          >
+            <input
+              :tabindex="4"
+              :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+              name="confirmLogout"
+              id="kc-logout"
+              type="submit"
+              :value="props.i18n.msgStr('doLogout')"
+            />
+          </div>
+        </div>
+      </form>
+      <div id="kc-info-message">
+        <p v-if="!logoutConfirm.skipLink && client.baseUrl">
+          <a :href="client.baseUrl"><component :is="props.i18n.msg('backToApplication')" /></a>
+        </p>
+      </div>
+    </div>
+  </component>
+</template>

package/src/login/pages/NotImplemented.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const props = defineProps<{ pageId: string }>();
+</script>
+
+<template>
+  <div style="padding: 2rem; font-family: sans-serif">
+    <h1>Not implemented yet</h1>
+    <p>
+      Page <code>{{ props.pageId }}</code> does not have a Vue implementation yet.
+    </p>
+  </div>
+</template>