@andreyyolkin/keycloakify-vue 0.1.0

package/src/login/pages/PageProps.ts

@@ -0,0 +1,10 @@
+import { type ClassKey, type TemplateProps } from '../TemplateProps';
+import type { Component } from 'vue';
+
+export type PageProps<NarrowedKcContext, I18n> = {
+  Template: Component<TemplateProps<NarrowedKcContext, I18n>>;
+  kcContext: NarrowedKcContext;
+  i18n: I18n;
+  doUseDefaultCss: boolean;
+  classes?: Partial<Record<ClassKey, string>>;
+};

package/src/login/pages/Register.vue

@@ -0,0 +1,158 @@
+<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 { onMounted, onUnmounted, ref, useTemplateRef, type Component } from 'vue';
+import TermsAcceptance from '../components/TermsAcceptance.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: 'register.ftl' }>, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+  }
+>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const {
+  messageHeader,
+  url,
+  messagesPerField,
+  recaptchaRequired,
+  recaptchaVisible,
+  recaptchaSiteKey,
+  recaptchaAction,
+  termsAcceptanceRequired,
+} = kcContext;
+
+const isFormSubmittable = ref(false);
+const areTermsAccepted = ref(false);
+
+const formRef = useTemplateRef<HTMLFormElement>('formRef');
+
+onMounted(() => {
+  (window as any)['onSubmitRecaptcha'] = () => {
+    formRef.value?.requestSubmit();
+  };
+});
+
+onUnmounted(() => {
+  delete (window as any)['onSubmitRecaptcha'];
+});
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="messagesPerField.exists('global')"
+    :displayRequiredFields="true"
+  >
+    <template #header>
+      <component
+        v-if="messageHeader !== undefined"
+        :is="props.i18n.advancedMsg(messageHeader)"
+      />
+      <component
+        v-else
+        :is="props.i18n.msg('registerTitle')"
+      />
+    </template>
+
+    <form
+      id="kc-register-form"
+      :class="kcClsx('kcFormClass')"
+      :action="url.registrationAction"
+      method="post"
+      ref="formRef"
+    >
+      <component
+        :is="UserProfileFormFields"
+        :kcContext="kcContext"
+        :i18n="props.i18n"
+        :kcClsx="kcClsx"
+        :onIsFormSubmittableValueChange="(value: boolean) => (isFormSubmittable = value)"
+        :doMakeUserConfirmPassword="doMakeUserConfirmPassword"
+      />
+
+      <TermsAcceptance
+        v-if="termsAcceptanceRequired"
+        :i18n="props.i18n"
+        :kcClsx="kcClsx"
+        :messagesPerField="messagesPerField"
+        :areTermsAccepted="areTermsAccepted"
+        :onAreTermsAcceptedValueChange="(value: boolean) => (areTermsAccepted = value)"
+      />
+
+      <div
+        v-if="recaptchaRequired && (recaptchaVisible || recaptchaAction === undefined)"
+        class="form-group"
+      >
+        <div :class="kcClsx('kcInputWrapperClass')">
+          <div
+            class="g-recaptcha"
+            data-size="compact"
+            :data-sitekey="recaptchaSiteKey"
+            :data-action="recaptchaAction"
+          ></div>
+        </div>
+      </div>
+
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div
+          id="kc-form-options"
+          :class="kcClsx('kcFormOptionsClass')"
+        >
+          <div :class="kcClsx('kcFormOptionsWrapperClass')">
+            <span
+              ><a :href="url.loginUrl"><component :is="props.i18n.msg('backToLogin')" /></a
+            ></span>
+          </div>
+        </div>
+
+        <div
+          v-if="recaptchaRequired && !recaptchaVisible && recaptchaAction !== undefined"
+          id="kc-form-buttons"
+          :class="kcClsx('kcFormButtonsClass')"
+        >
+          <button
+            :class="
+              clsx(
+                kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass'),
+                'g-recaptcha',
+              )
+            "
+            :data-sitekey="recaptchaSiteKey"
+            data-callback="onSubmitRecaptcha"
+            :data-action="recaptchaAction"
+            type="submit"
+          >
+            <component :is="props.i18n.msg('doRegister')" />
+          </button>
+        </div>
+        <div
+          v-else
+          id="kc-form-buttons"
+          :class="kcClsx('kcFormButtonsClass')"
+        >
+          <input
+            :disabled="!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)"
+            :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+            type="submit"
+            :value="props.i18n.msgStr('doRegister')"
+          />
+        </div>
+      </div>
+    </form>
+  </component>
+</template>

package/src/login/pages/SamlPostForm.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { onMounted, useTemplateRef } from 'vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'saml-post-form.ftl' }>, I18n>>();
+
+const kcContext = props.kcContext;
+const { samlPost } = kcContext;
+
+const formRef = useTemplateRef<HTMLFormElement>('formRef');
+
+onMounted(() => {
+  if (formRef.value === null) {
+    return;
+  }
+
+  // Storybook
+  if (samlPost.url === '#') {
+    alert('In a real Keycloak the user would be redirected immediately');
+    return;
+  }
+
+  formRef.value.requestSubmit();
+});
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('saml.post-form.title')" />
+    </template>
+
+    <p><component :is="props.i18n.msg('saml.post-form.message')" /></p>
+    <form
+      name="saml-post-binding"
+      method="post"
+      :action="samlPost.url"
+      ref="formRef"
+    >
+      <input
+        v-if="samlPost.SAMLRequest"
+        type="hidden"
+        name="SAMLRequest"
+        :value="samlPost.SAMLRequest"
+      />
+      <input
+        v-if="samlPost.SAMLResponse"
+        type="hidden"
+        name="SAMLResponse"
+        :value="samlPost.SAMLResponse"
+      />
+      <input
+        v-if="samlPost.relayState"
+        type="hidden"
+        name="RelayState"
+        :value="samlPost.relayState"
+      />
+      <noscript>
+        <p><component :is="props.i18n.msg('saml.post-form.js-disabled')" /></p>
+        <input
+          type="submit"
+          :value="props.i18n.msgStr('doContinue')"
+        />
+      </noscript>
+    </form>
+  </component>
+</template>

package/src/login/pages/SelectAuthenticator.vue

@@ -0,0 +1,65 @@
+<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: 'select-authenticator.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, auth } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayInfo="false"
+  >
+    <template #header>
+      <component :is="i18n.msg('loginChooseAuthenticator')" />
+    </template>
+
+    <form
+      id="kc-select-credential-form"
+      :class="kcClsx('kcFormClass')"
+      :action="url.loginAction"
+      method="post"
+    >
+      <div :class="kcClsx('kcSelectAuthListClass')">
+        <button
+          v-for="(authenticationSelection, i) in auth.authenticationSelections"
+          :key="i"
+          :class="kcClsx('kcSelectAuthListItemClass')"
+          type="submit"
+          name="authenticationExecution"
+          :value="authenticationSelection.authExecId"
+        >
+          <div :class="kcClsx('kcSelectAuthListItemIconClass')">
+            <i :class="kcClsx('kcSelectAuthListItemIconPropertyClass', authenticationSelection.iconCssClass)"></i>
+          </div>
+          <div :class="kcClsx('kcSelectAuthListItemBodyClass')">
+            <div :class="kcClsx('kcSelectAuthListItemHeadingClass')">
+              <component :is="i18n.advancedMsg(authenticationSelection.displayName)" />
+            </div>
+            <div :class="kcClsx('kcSelectAuthListItemDescriptionClass')">
+              <component :is="i18n.advancedMsg(authenticationSelection.helpText)" />
+            </div>
+          </div>
+          <div :class="kcClsx('kcSelectAuthListItemFillClass')"></div>
+          <div :class="kcClsx('kcSelectAuthListItemArrowClass')">
+            <i :class="kcClsx('kcSelectAuthListItemArrowIconClass')"></i>
+          </div>
+        </button>
+      </div>
+    </form>
+  </component>
+</template>

package/src/login/pages/SelectOrganization.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import { ref, useTemplateRef } from 'vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'select-organization.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, user } = kcContext;
+
+const isSubmitting = ref(false);
+const formRef = useTemplateRef<HTMLFormElement>('formRef');
+const organizationInputRef = useTemplateRef<HTMLInputElement>('organizationInputRef');
+
+const organizations = user.organizations ?? [];
+const shouldDisplayGrid = organizations.length > 3;
+
+function onOrganizationClick(organizationAlias: string) {
+  return (event: MouseEvent) => {
+    event.preventDefault();
+
+    if (!organizationInputRef.value || !formRef.value) {
+      return;
+    }
+
+    organizationInputRef.value.value = organizationAlias;
+    isSubmitting.value = true;
+
+    if (typeof formRef.value.requestSubmit === 'function') {
+      formRef.value.requestSubmit();
+      return;
+    }
+
+    formRef.value.submit();
+  };
+}
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <form
+      ref="formRef"
+      :action="url.loginAction"
+      class="form-vertical"
+      method="post"
+    >
+      <div
+        id="kc-user-organizations"
+        :class="kcClsx('kcFormGroupClass')"
+      >
+        <h2><component :is="i18n.msg('organization.select')" /></h2>
+        <ul :class="kcClsx('kcFormSocialAccountListClass', shouldDisplayGrid && 'kcFormSocialAccountListGridClass')">
+          <li
+            v-for="{ alias, name } in organizations"
+            :key="alias"
+          >
+            <button
+              :id="`organization-${alias}`"
+              :class="kcClsx('kcFormSocialAccountListButtonClass', shouldDisplayGrid && 'kcFormSocialAccountGridItem')"
+              type="button"
+              :disabled="isSubmitting"
+              @click="onOrganizationClick(alias)"
+            >
+              <span :class="kcClsx('kcFormSocialAccountNameClass')">{{ name ?? alias }}</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+      <input
+        ref="organizationInputRef"
+        type="hidden"
+        name="kc.org"
+      />
+    </form>
+  </component>
+</template>

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

@@ -0,0 +1,75 @@
+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;
+};
+
+assert<keyof KcContextLike extends keyof KcContext.WebauthnAuthenticate ? true : false>();
+assert<KcContext.WebauthnAuthenticate extends KcContextLike ? true : false>();
+
+type I18nLike = {
+  msgStr: (key: 'webauthn-unsupported-browser-text') => string;
+  isFetchingTranslations: boolean;
+};
+
+export function useScript(params: { authButtonId: string; kcContext: KcContextLike; i18n: Ref<I18nLike> }) {
+  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 },
+    );
+  });
+}