@andreyyolkin/keycloakify-vue 0.1.0

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

@@ -0,0 +1,66 @@
+<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: 'link-idp-action.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { idpDisplayName, 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('linkIdpActionTitle', idpDisplayName)" />
+    </template>
+
+    <div
+      id="kc-link-text"
+      :class="kcClsx('kcContentWrapperClass')"
+    >
+      <component :is="props.i18n.msg('linkIdpActionMessage', idpDisplayName)" />
+    </div>
+    <form
+      :class="kcClsx('kcFormClass')"
+      :action="url.loginAction"
+      method="post"
+    >
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div
+          id="kc-form-buttons"
+          :class="kcClsx('kcFormButtonsClass')"
+        >
+          <input
+            :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+            name="continue"
+            id="kc-continue"
+            type="submit"
+            :value="props.i18n.msgStr('doContinue')"
+          />
+          <input
+            :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+            name="cancel-aia"
+            id="kc-cancel"
+            type="submit"
+            :value="props.i18n.msgStr('doCancel')"
+          />
+        </div>
+      </div>
+    </form>
+    <div class="clearfix" />
+  </component>
+</template>

package/keycloakify-vue/login/pages/LinkIdpAction.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: 'link-idp-action.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/Login.vue

@@ -0,0 +1,230 @@
+<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 { computed, ref } from 'vue';
+import PasswordWrapper from '../components/PasswordWrapper.vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'login.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { social, realm, url, usernameHidden, login, auth, registrationDisabled, messagesPerField } = kcContext;
+
+const isLoginButtonDisabled = ref(false);
+
+const usernameLabelKey = computed(() =>
+  !realm.loginWithEmailAllowed ? 'username' : !realm.registrationEmailAsUsername ? 'usernameOrEmail' : 'email',
+);
+
+function onSubmit() {
+  isLoginButtonDisabled.value = true;
+  return true;
+}
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="!messagesPerField.existsError('username', 'password')"
+    :displayInfo="realm.password && realm.registrationAllowed && !registrationDisabled"
+  >
+    <template #header>
+      <component :is="i18n.msg('loginAccountTitle')" />
+    </template>
+
+    <template #info>
+      <div id="kc-registration-container">
+        <div id="kc-registration">
+          <span>
+            <component :is="i18n.msg('noAccount')" />&nbsp;
+            <a
+              :tabindex="8"
+              :href="url.registrationUrl"
+            >
+              <component :is="i18n.msg('doRegister')" />
+            </a>
+          </span>
+        </div>
+      </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="username"
+              :aria-invalid="messagesPerField.existsError('username', 'password')"
+            />
+            <span
+              v-if="messagesPerField.existsError('username', 'password')"
+              id="input-error"
+              :class="kcClsx('kcInputErrorMessageClass')"
+              aria-live="polite"
+              v-html="kcSanitize(messagesPerField.getFirstError('username', 'password'))"
+            ></span>
+          </div>
+
+          <div :class="kcClsx('kcFormGroupClass')">
+            <label
+              for="password"
+              :class="kcClsx('kcLabelClass')"
+            >
+              <component :is="i18n.msg('password')" />
+            </label>
+            <PasswordWrapper
+              :kcClsx="kcClsx"
+              :i18n="i18n"
+              passwordInputId="password"
+            >
+              <input
+                :tabindex="3"
+                id="password"
+                :class="kcClsx('kcInputClass')"
+                name="password"
+                type="password"
+                autocomplete="current-password"
+                :aria-invalid="messagesPerField.existsError('username', 'password')"
+              />
+            </PasswordWrapper>
+            <span
+              v-if="usernameHidden && messagesPerField.existsError('username', 'password')"
+              id="input-error"
+              :class="kcClsx('kcInputErrorMessageClass')"
+              aria-live="polite"
+              v-html="kcSanitize(messagesPerField.getFirstError('username', 'password'))"
+            ></span>
+          </div>
+
+          <div :class="kcClsx('kcFormGroupClass', 'kcFormSettingClass')">
+            <div id="kc-form-options">
+              <div
+                v-if="realm.rememberMe && !usernameHidden"
+                class="checkbox"
+              >
+                <label>
+                  <input
+                    :tabindex="5"
+                    id="rememberMe"
+                    name="rememberMe"
+                    type="checkbox"
+                    :checked="!!login.rememberMe"
+                  />
+                  <component :is="i18n.msg('rememberMe')" />
+                </label>
+              </div>
+            </div>
+            <div :class="kcClsx('kcFormOptionsWrapperClass')">
+              <span v-if="realm.resetPasswordAllowed">
+                <a
+                  :tabindex="6"
+                  :href="url.loginResetCredentialsUrl"
+                >
+                  <component :is="i18n.msg('doForgotPassword')" />
+                </a>
+              </span>
+            </div>
+          </div>
+
+          <div
+            id="kc-form-buttons"
+            :class="kcClsx('kcFormGroupClass')"
+          >
+            <input
+              type="hidden"
+              id="id-hidden-input"
+              name="credentialId"
+              :value="auth.selectedCredential"
+            />
+            <input
+              :tabindex="7"
+              :disabled="isLoginButtonDisabled"
+              :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+              name="login"
+              id="kc-login"
+              type="submit"
+              :value="i18n.msgStr('doLogIn')"
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  </component>
+</template>

package/keycloakify-vue/login/pages/Login.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.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/LoginConfigTotp.vue

@@ -0,0 +1,233 @@
+<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 type { I18n } from '../i18n/i18n';
+import LogoutOtherSessions from '../components/LogoutOtherSessions.vue';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'login-config-totp.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="!messagesPerField.existsError('totp', 'userLabel')"
+  >
+    <template #header>
+      <component :is="i18n.msg('loginTotpTitle')" />
+    </template>
+
+    <ol id="kc-totp-settings">
+      <li>
+        <p><component :is="i18n.msg('loginTotpStep1')" /></p>
+
+        <ul id="kc-totp-supported-apps">
+          <li
+            v-for="app in totp.supportedApplications"
+            :key="app"
+          >
+            <component :is="i18n.advancedMsg(app)" />
+          </li>
+        </ul>
+      </li>
+
+      <template v-if="mode === 'manual'">
+        <li>
+          <p><component :is="i18n.msg('loginTotpManualStep2')" /></p>
+          <p>
+            <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
+          </p>
+          <p>
+            <a
+              :href="totp.qrUrl"
+              id="mode-barcode"
+            >
+              <component :is="i18n.msg('loginTotpScanBarcode')" />
+            </a>
+          </p>
+        </li>
+        <li>
+          <p><component :is="i18n.msg('loginTotpManualStep3')" /></p>
+          <ul>
+            <li id="kc-totp-type">
+              <component :is="i18n.msg('loginTotpType')" />:
+              <component :is="i18n.msg(`loginTotp.${totp.policy.type}`)" />
+            </li>
+            <li id="kc-totp-algorithm">
+              <component :is="i18n.msg('loginTotpAlgorithm')" />:
+              {{ totp.policy.getAlgorithmKey() }}
+            </li>
+            <li id="kc-totp-digits">
+              <component :is="i18n.msg('loginTotpDigits')" />:
+              {{ totp.policy.digits }}
+            </li>
+            <li
+              v-if="totp.policy.type === 'totp'"
+              id="kc-totp-period"
+            >
+              <component :is="i18n.msg('loginTotpInterval')" />:
+              {{ totp.policy.period }}
+            </li>
+            <li
+              v-else
+              id="kc-totp-counter"
+            >
+              <component :is="i18n.msg('loginTotpCounter')" />:
+              {{ totp.policy.initialCounter }}
+            </li>
+          </ul>
+        </li>
+      </template>
+
+      <li v-else>
+        <p><component :is="i18n.msg('loginTotpStep2')" /></p>
+        <img
+          id="kc-totp-secret-qr-code"
+          :src="`data:image/png;base64, ${totp.totpSecretQrCode}`"
+          alt="Figure: Barcode"
+        />
+        <br />
+        <p>
+          <a
+            :href="totp.manualUrl"
+            id="mode-manual"
+          >
+            <component :is="i18n.msg('loginTotpUnableToScan')" />
+          </a>
+        </p>
+      </li>
+
+      <li>
+        <p><component :is="i18n.msg('loginTotpStep3')" /></p>
+        <p><component :is="i18n.msg('loginTotpStep3DeviceName')" /></p>
+      </li>
+    </ol>
+
+    <form
+      :action="url.loginAction"
+      :class="kcClsx('kcFormClass')"
+      id="kc-totp-settings-form"
+      method="post"
+    >
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div :class="kcClsx('kcInputWrapperClass')">
+          <label
+            for="totp"
+            :class="kcClsx('kcLabelClass')"
+          >
+            <component :is="i18n.msg('authenticatorCode')" /> </label
+          >&nbsp;
+          <span class="required">*</span>
+        </div>
+        <div :class="kcClsx('kcInputWrapperClass')">
+          <input
+            type="text"
+            id="totp"
+            name="totp"
+            autocomplete="off"
+            :class="kcClsx('kcInputClass')"
+            :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>
+        <input
+          type="hidden"
+          id="totpSecret"
+          name="totpSecret"
+          :value="totp.totpSecret"
+        />
+        <input
+          v-if="mode"
+          type="hidden"
+          id="mode"
+          :value="mode"
+        />
+      </div>
+
+      <div :class="kcClsx('kcFormGroupClass')">
+        <div :class="kcClsx('kcInputWrapperClass')">
+          <label
+            for="userLabel"
+            :class="kcClsx('kcLabelClass')"
+          >
+            <component :is="i18n.msg('loginTotpDeviceName')" /> </label
+          >&nbsp;
+          <span
+            v-if="totp.otpCredentials.length >= 1"
+            class="required"
+            >*</span
+          >
+        </div>
+        <div :class="kcClsx('kcInputWrapperClass')">
+          <input
+            type="text"
+            id="userLabel"
+            name="userLabel"
+            autocomplete="off"
+            :class="kcClsx('kcInputClass')"
+            :aria-invalid="messagesPerField.existsError('userLabel')"
+          />
+          <span
+            v-if="messagesPerField.existsError('userLabel')"
+            id="input-error-otp-label"
+            :class="kcClsx('kcInputErrorMessageClass')"
+            aria-live="polite"
+            v-html="kcSanitize(messagesPerField.get('userLabel'))"
+          ></span>
+        </div>
+      </div>
+
+      <div :class="kcClsx('kcFormGroupClass')">
+        <LogoutOtherSessions
+          :kcClsx="kcClsx"
+          :i18n="i18n"
+        />
+      </div>
+
+      <template v-if="isAppInitiatedAction">
+        <input
+          type="submit"
+          :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+          id="saveTOTPBtn"
+          :value="i18n.msgStr('doSubmit')"
+        />
+        <button
+          type="submit"
+          :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+          id="cancelTOTPBtn"
+          name="cancel-aia"
+          value="true"
+        >
+          <component :is="i18n.msg('doCancel')" />
+        </button>
+      </template>
+      <input
+        v-else
+        type="submit"
+        :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+        id="saveTOTPBtn"
+        :value="i18n.msgStr('doSubmit')"
+      />
+    </form>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginConfigTotp.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-config-totp.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/LoginIdpLinkConfirm.vue

@@ -0,0 +1,57 @@
+<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-idp-link-confirm.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, idpAlias } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('confirmLinkIdpTitle')" />
+    </template>
+
+    <form
+      id="kc-register-form"
+      :action="url.loginAction"
+      method="post"
+    >
+      <div :class="kcClsx('kcFormGroupClass')">
+        <button
+          type="submit"
+          :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+          name="submitAction"
+          id="updateProfile"
+          value="updateProfile"
+        >
+          <component :is="props.i18n.msg('confirmLinkIdpReviewProfile')" />
+        </button>
+        <button
+          type="submit"
+          :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+          name="submitAction"
+          id="linkAccount"
+          value="linkAccount"
+        >
+          <component :is="props.i18n.msg('confirmLinkIdpContinue', idpAlias)" />
+        </button>
+      </div>
+    </form>
+  </component>
+</template>

package/keycloakify-vue/login/pages/LoginIdpLinkConfirm.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.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/LoginIdpLinkConfirmOverride.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: 'login-idp-link-confirm-override.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, idpDisplayName } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('confirmOverrideIdpTitle')" />
+    </template>
+
+    <form
+      id="kc-register-form"
+      :action="url.loginAction"
+      method="post"
+    >
+      <component :is="props.i18n.msg('pageExpiredMsg1')" />
+      {{ ' ' }}
+      <a
+        id="loginRestartLink"
+        :href="url.loginRestartFlowUrl"
+      >
+        <component :is="props.i18n.msg('doClickHere')" />
+      </a>
+      <br />
+      <br />
+      <button
+        type="submit"
+        :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+        name="submitAction"
+        id="confirmOverride"
+        value="confirmOverride"
+      >
+        <component :is="props.i18n.msg('confirmOverrideIdpContinue', idpDisplayName)" />
+      </button>
+    </form>
+  </component>
+</template>