@andreyyolkin/keycloakify-vue 0.1.0

package/src/account/pages/Sessions.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import type { KcContext } from 'keycloakify/account/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'sessions.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, stateChecker, sessions } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="props.doUseDefaultCss"
+    :classes="props.classes"
+    active="sessions"
+  >
+    <div :class="kcClsx('kcContentWrapperClass')">
+      <div class="col-md-10">
+        <h2><component :is="props.i18n.msg('sessionsHtmlTitle')" /></h2>
+      </div>
+    </div>
+
+    <table class="table table-striped table-bordered">
+      <thead>
+        <tr>
+          <th><component :is="props.i18n.msg('ip')" /></th>
+          <th><component :is="props.i18n.msg('started')" /></th>
+          <th><component :is="props.i18n.msg('lastAccess')" /></th>
+          <th><component :is="props.i18n.msg('expires')" /></th>
+          <th><component :is="props.i18n.msg('clients')" /></th>
+        </tr>
+      </thead>
+
+      <tbody role="rowgroup">
+        <tr
+          v-for="(session, index) in sessions.sessions"
+          :key="index"
+        >
+          <td>{{ session.ipAddress }}</td>
+          <td>{{ session.started }}</td>
+          <td>{{ session.lastAccess }}</td>
+          <td>{{ session.expires }}</td>
+          <td>
+            <div
+              v-for="(client, clientIndex) in session.clients"
+              :key="clientIndex"
+            >
+              {{ client }}<br />
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <form
+      :action="url.sessionsUrl"
+      method="post"
+    >
+      <input
+        type="hidden"
+        id="stateChecker"
+        name="stateChecker"
+        :value="stateChecker"
+      />
+      <button
+        id="logout-all-sessions"
+        type="submit"
+        :class="kcClsx('kcButtonDefaultClass', 'kcButtonClass')"
+      >
+        <component :is="props.i18n.msg('doLogOutAllSessions')" />
+      </button>
+    </form>
+  </component>
+</template>

package/src/account/pages/Totp.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { clsx } from 'keycloakify/tools/clsx';
+import type { KcContext } from 'keycloakify/account/KcContext';
+import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'totp.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const { totp, mode, url, messagesPerField, stateChecker } = props.kcContext;
+const { msg, msgStr, advancedMsg } = props.i18n;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="props.kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="props.doUseDefaultCss"
+    :classes="props.classes"
+    active="totp"
+  >
+    <div class="row">
+      <div class="col-md-10">
+        <h2><component :is="msg('authenticatorTitle')" /></h2>
+      </div>
+      <div
+        v-if="totp.otpCredentials.length === 0"
+        class="subtitle col-md-2"
+      >
+        <span class="required">*</span>
+        <component :is="msg('requiredFields')" />
+      </div>
+    </div>
+
+    <!-- Enabled: list existing OTP credentials -->
+    <template v-if="totp.enabled">
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr v-if="totp.otpCredentials.length > 1">
+            <th :colSpan="4"><component :is="msg('configureAuthenticators')" /></th>
+          </tr>
+          <tr v-else>
+            <th :colSpan="3"><component :is="msg('configureAuthenticators')" /></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(credential, index) in totp.otpCredentials"
+            :key="index"
+          >
+            <td class="provider"><component :is="msg('mobile')" /></td>
+            <td
+              v-if="totp.otpCredentials.length > 1"
+              class="provider"
+            >
+              {{ credential.id }}
+            </td>
+            <td class="provider">{{ credential.userLabel || '' }}</td>
+            <td class="action">
+              <form
+                :action="url.totpUrl"
+                method="post"
+                class="form-inline"
+              >
+                <input
+                  type="hidden"
+                  id="stateChecker"
+                  name="stateChecker"
+                  :value="stateChecker"
+                />
+                <input
+                  type="hidden"
+                  id="submitAction"
+                  name="submitAction"
+                  value="Delete"
+                />
+                <input
+                  type="hidden"
+                  id="credentialId"
+                  name="credentialId"
+                  :value="credential.id"
+                />
+                <button
+                  :id="`remove-mobile-${index}`"
+                  class="btn btn-default"
+                >
+                  <i class="pficon pficon-delete"></i>
+                </button>
+              </form>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+
+    <!-- Not enabled: setup wizard -->
+    <template v-else>
+      <div>
+        <hr />
+        <ol id="kc-totp-settings">
+          <li>
+            <p><component :is="msg('totpStep1')" /></p>
+            <ul id="kc-totp-supported-apps">
+              <li
+                v-for="app in totp.supportedApplications"
+                :key="app"
+              >
+                <component :is="advancedMsg(app)" />
+              </li>
+            </ul>
+          </li>
+
+          <!-- Manual mode -->
+          <template v-if="mode === 'manual'">
+            <li>
+              <p><component :is="msg('totpManualStep2')" /></p>
+              <p>
+                <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
+              </p>
+              <p>
+                <a
+                  :href="totp.qrUrl"
+                  id="mode-barcode"
+                >
+                  <component :is="msg('totpScanBarcode')" />
+                </a>
+              </p>
+            </li>
+            <li>
+              <p><component :is="msg('totpManualStep3')" /></p>
+              <ul>
+                <li id="kc-totp-type">
+                  <component :is="msg('totpType')" />: <component :is="msg(`totp.${totp.policy.type}`)" />
+                </li>
+                <li id="kc-totp-algorithm">
+                  <component :is="msg('totpAlgorithm')" />: {{ totp.policy.getAlgorithmKey() }}
+                </li>
+                <li id="kc-totp-digits"><component :is="msg('totpDigits')" />: {{ totp.policy.digits }}</li>
+                <li
+                  v-if="totp.policy.type === 'totp'"
+                  id="kc-totp-period"
+                >
+                  <component :is="msg('totpInterval')" />: {{ totp.policy.period }}
+                </li>
+                <li
+                  v-else
+                  id="kc-totp-counter"
+                >
+                  <component :is="msg('totpCounter')" />: {{ totp.policy.initialCounter }}
+                </li>
+              </ul>
+            </li>
+          </template>
+
+          <!-- QR mode (default) -->
+          <template v-else>
+            <li>
+              <p><component :is="msg('totpStep2')" /></p>
+              <p>
+                <img
+                  id="kc-totp-secret-qr-code"
+                  :src="`data:image/png;base64, ${totp.totpSecretQrCode}`"
+                  alt="Figure: Barcode"
+                />
+              </p>
+              <p>
+                <a
+                  :href="totp.manualUrl"
+                  id="mode-manual"
+                >
+                  <component :is="msg('totpUnableToScan')" />
+                </a>
+              </p>
+            </li>
+          </template>
+
+          <li>
+            <p><component :is="msg('totpStep3')" /></p>
+            <p><component :is="msg('totpStep3DeviceName')" /></p>
+          </li>
+        </ol>
+        <hr />
+
+        <!-- Enrollment form -->
+        <form
+          :action="url.totpUrl"
+          :class="kcClsx('kcFormClass')"
+          id="kc-totp-settings-form"
+          method="post"
+        >
+          <input
+            type="hidden"
+            id="stateChecker"
+            name="stateChecker"
+            :value="stateChecker"
+          />
+
+          <!-- OTP code field -->
+          <div :class="kcClsx('kcFormGroupClass')">
+            <div class="col-sm-2 col-md-2">
+              <label
+                for="totp"
+                class="control-label"
+              >
+                <component :is="msg('authenticatorCode')" />
+              </label>
+              <span class="required">*</span>
+            </div>
+            <div class="col-sm-10 col-md-10">
+              <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'))"
+              />
+            </div>
+            <input
+              type="hidden"
+              id="totpSecret"
+              name="totpSecret"
+              :value="totp.totpSecret"
+            />
+            <input
+              v-if="mode"
+              type="hidden"
+              id="mode"
+              :value="mode"
+            />
+          </div>
+
+          <!-- Device name field -->
+          <div :class="kcClsx('kcFormGroupClass')">
+            <div class="col-sm-2 col-md-2">
+              <label
+                for="userLabel"
+                :class="kcClsx('kcLabelClass')"
+              >
+                <component :is="msg('totpDeviceName')" />
+              </label>
+              <span
+                v-if="totp.otpCredentials.length >= 1"
+                class="required"
+                >*</span
+              >
+            </div>
+            <div class="col-sm-10 col-md-10">
+              <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'))"
+              />
+            </div>
+          </div>
+
+          <!-- Submit/Cancel buttons -->
+          <div
+            id="kc-form-buttons"
+            :class="clsx(kcClsx('kcFormGroupClass'), 'text-right')"
+          >
+            <div :class="kcClsx('kcInputWrapperClass')">
+              <input
+                type="submit"
+                :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+                id="saveTOTPBtn"
+                :value="msgStr('doSave')"
+              />
+              <button
+                type="submit"
+                :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+                id="cancelTOTPBtn"
+                name="submitAction"
+                value="Cancel"
+              >
+                <component :is="msg('doCancel')" />
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </template>
+  </component>
+</template>

package/src/bin/initialize-account-theme/boilerplate/KcContext.ts

@@ -0,0 +1,11 @@
+import type { ExtendKcContext } from 'keycloakify/account';
+import type { KcEnvName, ThemeName } from '../kc.gen';
+
+export type KcContextExtension = {
+  themeName: ThemeName;
+  properties: Record<KcEnvName, string> & {};
+};
+
+export type KcContextExtensionPerPage = Record<string, Record<string, unknown>>;
+
+export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;

package/src/bin/initialize-account-theme/boilerplate/KcPage.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+import DefaultPage from '@andreyyolkin/keycloakify-vue/account/DefaultPage.vue';
+import Template from '@andreyyolkin/keycloakify-vue/account/Template.vue';
+import type { KcContext } from './KcContext';
+import { useI18n } from './i18n';
+
+const props = defineProps<{ kcContext: KcContext }>();
+
+const { i18n } = useI18n({ kcContext: props.kcContext });
+
+const classes = {} satisfies { [key in ClassKey]?: string };
+</script>
+
+<template>
+  <DefaultPage
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :classes="classes"
+    :Template="Template"
+    :doUseDefaultCss="true"
+  />
+</template>

package/src/bin/initialize-account-theme/boilerplate/KcPageStory.ts

@@ -0,0 +1,22 @@
+import { createGetKcContextMock } from 'keycloakify/account/KcContext';
+import type { DeepPartial } from 'keycloakify/tools/DeepPartial';
+import { kcEnvDefaults, themeNames } from '../kc.gen';
+import type { KcContext, KcContextExtension, KcContextExtensionPerPage } from './KcContext';
+
+const kcContextExtension: KcContextExtension = {
+  themeName: themeNames[0],
+  properties: {
+    ...kcEnvDefaults,
+  },
+};
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
+
+export const { getKcContextMock } = createGetKcContextMock({
+  kcContextExtension,
+  kcContextExtensionPerPage,
+  overrides: {},
+  overridesPerPage: {},
+});
+
+type PageId = KcContext['pageId'];
+export type KcPageStoryProps = { pageId: PageId; kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> };

package/src/bin/initialize-account-theme/boilerplate/KcPageStory.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import KcPage from './KcPage.vue';
+import { getKcContextMock, type KcPageStoryProps } from './KcPageStory';
+
+const props = defineProps<KcPageStoryProps>();
+
+const kcContextMock = computed(() => getKcContextMock({ pageId: props.pageId, overrides: props.kcContext }));
+</script>
+
+<template>
+  <KcPage :kcContext="kcContextMock" />
+</template>

package/src/bin/initialize-account-theme/boilerplate/i18n.ts

@@ -0,0 +1,8 @@
+import { i18nBuilder } from '@andreyyolkin/keycloakify-vue/account';
+import type { ThemeName } from '../kc.gen';
+
+/** @see: https://docs.keycloakify.dev/features/i18n */
+const { useI18n, ofTypeI18n } = i18nBuilder.withThemeName<ThemeName>().build();
+
+type I18n = typeof ofTypeI18n;
+export { useI18n, type I18n };

package/src/login/DefaultPage.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { computed, defineAsyncComponent, type Component } from 'vue';
+import DefaultUserProfileFormFields from './components/UserProfileFormFields.vue';
+import type { ClassKey } from './TemplateProps';
+import type { I18n } from './i18n/i18n';
+import NotImplemented from './pages/NotImplemented.vue';
+
+const Login = defineAsyncComponent(() => import('./pages/Login.vue'));
+const Register = defineAsyncComponent(() => import('./pages/Register.vue'));
+const Code = defineAsyncComponent(() => import('./pages/Code.vue'));
+const DeleteAccountConfirm = defineAsyncComponent(() => import('./pages/DeleteAccountConfirm.vue'));
+const DeleteCredential = defineAsyncComponent(() => import('./pages/DeleteCredential.vue'));
+const Error = defineAsyncComponent(() => import('./pages/Error.vue'));
+const FrontchannelLogout = defineAsyncComponent(() => import('./pages/FrontchannelLogout.vue'));
+const IdpReviewUserProfile = defineAsyncComponent(() => import('./pages/IdpReviewUserProfile.vue'));
+const Info = defineAsyncComponent(() => import('./pages/Info.vue'));
+const LinkIdpAction = defineAsyncComponent(() => import('./pages/LinkIdpAction.vue'));
+const LoginIdpLinkConfirm = defineAsyncComponent(() => import('./pages/LoginIdpLinkConfirm.vue'));
+const LoginIdpLinkConfirmOverride = defineAsyncComponent(() => import('./pages/LoginIdpLinkConfirmOverride.vue'));
+const LoginIdpLinkEmail = defineAsyncComponent(() => import('./pages/LoginIdpLinkEmail.vue'));
+const LoginOauth2DeviceVerifyUserCode = defineAsyncComponent(
+  () => import('./pages/LoginOauth2DeviceVerifyUserCode.vue'),
+);
+const LoginOauthGrant = defineAsyncComponent(() => import('./pages/LoginOauthGrant.vue'));
+const LoginPageExpired = defineAsyncComponent(() => import('./pages/LoginPageExpired.vue'));
+const LoginUpdateProfile = defineAsyncComponent(() => import('./pages/LoginUpdateProfile.vue'));
+const LoginVerifyEmail = defineAsyncComponent(() => import('./pages/LoginVerifyEmail.vue'));
+const LoginX509Info = defineAsyncComponent(() => import('./pages/LoginX509Info.vue'));
+const LogoutConfirm = defineAsyncComponent(() => import('./pages/LogoutConfirm.vue'));
+const SamlPostForm = defineAsyncComponent(() => import('./pages/SamlPostForm.vue'));
+const SelectAuthenticator = defineAsyncComponent(() => import('./pages/SelectAuthenticator.vue'));
+const SelectOrganization = defineAsyncComponent(() => import('./pages/SelectOrganization.vue'));
+const Terms = defineAsyncComponent(() => import('./pages/Terms.vue'));
+const UpdateEmail = defineAsyncComponent(() => import('./pages/UpdateEmail.vue'));
+const LoginResetOtp = defineAsyncComponent(() => import('./pages/LoginResetOtp.vue'));
+const LoginRecoveryAuthnCodeInput = defineAsyncComponent(() => import('./pages/LoginRecoveryAuthnCodeInput.vue'));
+const LoginOtp = defineAsyncComponent(() => import('./pages/LoginOtp.vue'));
+const LoginRecoveryAuthnCodeConfig = defineAsyncComponent(() => import('./pages/LoginRecoveryAuthnCodeConfig.vue'));
+const LoginResetPassword = defineAsyncComponent(() => import('./pages/LoginResetPassword.vue'));
+const LoginUpdatePassword = defineAsyncComponent(() => import('./pages/LoginUpdatePassword.vue'));
+const LoginPassword = defineAsyncComponent(() => import('./pages/LoginPassword.vue'));
+const LoginConfigTotp = defineAsyncComponent(() => import('./pages/LoginConfigTotp.vue'));
+const LoginUsername = defineAsyncComponent(() => import('./pages/LoginUsername.vue'));
+const WebauthnError = defineAsyncComponent(() => import('./pages/WebauthnError.vue'));
+const WebauthnRegister = defineAsyncComponent(() => import('./pages/WebauthnRegister.vue'));
+const WebauthnAuthenticate = defineAsyncComponent(() => import('./pages/WebauthnAuthenticate.vue'));
+const LoginPasskeysConditionalAuthenticate = defineAsyncComponent(
+  () => import('./pages/LoginPasskeysConditionalAuthenticate.vue'),
+);
+
+const props = withDefaults(
+  defineProps<{
+    kcContext: KcContext;
+    i18n: I18n;
+    classes?: Partial<Record<ClassKey, string>>;
+    Template: Component;
+    UserProfileFormFields?: Component;
+    doUseDefaultCss: boolean;
+    doMakeUserConfirmPassword?: boolean;
+  }>(),
+  {
+    classes: undefined,
+    UserProfileFormFields: undefined,
+    doMakeUserConfirmPassword: true,
+  },
+);
+
+const userProfileFormFields = computed<Component>(() => props.UserProfileFormFields ?? DefaultUserProfileFormFields);
+
+const pageComponent = computed<Component>(() => {
+  switch (props.kcContext.pageId) {
+    case 'login.ftl':
+      return Login;
+    case 'register.ftl':
+      return Register;
+    case 'code.ftl':
+      return Code;
+    case 'delete-account-confirm.ftl':
+      return DeleteAccountConfirm;
+    case 'delete-credential.ftl':
+      return DeleteCredential;
+    case 'error.ftl':
+      return Error;
+    case 'frontchannel-logout.ftl':
+      return FrontchannelLogout;
+    case 'idp-review-user-profile.ftl':
+      return IdpReviewUserProfile;
+    case 'info.ftl':
+      return Info;
+    case 'link-idp-action.ftl':
+      return LinkIdpAction;
+    case 'login-idp-link-confirm.ftl':
+      return LoginIdpLinkConfirm;
+    case 'login-idp-link-confirm-override.ftl':
+      return LoginIdpLinkConfirmOverride;
+    case 'login-idp-link-email.ftl':
+      return LoginIdpLinkEmail;
+    case 'login-oauth2-device-verify-user-code.ftl':
+      return LoginOauth2DeviceVerifyUserCode;
+    case 'login-oauth-grant.ftl':
+      return LoginOauthGrant;
+    case 'login-page-expired.ftl':
+      return LoginPageExpired;
+    case 'login-update-profile.ftl':
+      return LoginUpdateProfile;
+    case 'login-verify-email.ftl':
+      return LoginVerifyEmail;
+    case 'login-x509-info.ftl':
+      return LoginX509Info;
+    case 'logout-confirm.ftl':
+      return LogoutConfirm;
+    case 'saml-post-form.ftl':
+      return SamlPostForm;
+    case 'select-authenticator.ftl':
+      return SelectAuthenticator;
+    case 'select-organization.ftl':
+      return SelectOrganization;
+    case 'terms.ftl':
+      return Terms;
+    case 'update-email.ftl':
+      return UpdateEmail;
+    case 'login-reset-otp.ftl':
+      return LoginResetOtp;
+    case 'login-recovery-authn-code-input.ftl':
+      return LoginRecoveryAuthnCodeInput;
+    case 'login-otp.ftl':
+      return LoginOtp;
+    case 'login-recovery-authn-code-config.ftl':
+      return LoginRecoveryAuthnCodeConfig;
+    case 'login-reset-password.ftl':
+      return LoginResetPassword;
+    case 'login-update-password.ftl':
+      return LoginUpdatePassword;
+    case 'login-password.ftl':
+      return LoginPassword;
+    case 'login-config-totp.ftl':
+      return LoginConfigTotp;
+    case 'login-username.ftl':
+      return LoginUsername;
+    case 'webauthn-error.ftl':
+      return WebauthnError;
+    case 'webauthn-register.ftl':
+      return WebauthnRegister;
+    case 'webauthn-authenticate.ftl':
+      return WebauthnAuthenticate;
+    case 'login-passkeys-conditional-authenticate.ftl':
+      return LoginPasskeysConditionalAuthenticate;
+    default:
+      return NotImplemented;
+  }
+});
+</script>
+
+<template>
+  <component
+    :is="pageComponent"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :classes="classes"
+    :Template="Template"
+    :UserProfileFormFields="userProfileFormFields"
+    :doUseDefaultCss="doUseDefaultCss"
+    :doMakeUserConfirmPassword="doMakeUserConfirmPassword"
+    :pageId="kcContext.pageId"
+  />
+</template>