@andreyyolkin/keycloakify-vue 0.1.0

package/src/account/pages/Applications.vue

@@ -0,0 +1,192 @@
+<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: 'applications.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const {
+  url,
+  applications: { applications },
+  stateChecker,
+} = kcContext;
+
+function isArrayWithEmptyObject(variable: unknown): boolean {
+  return (
+    Array.isArray(variable) &&
+    variable.length === 1 &&
+    typeof variable[0] === 'object' &&
+    variable[0] !== null &&
+    Object.keys(variable[0]).length === 0
+  );
+}
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="props.doUseDefaultCss"
+    :classes="props.classes"
+    active="applications"
+  >
+    <div class="row">
+      <div class="col-md-10">
+        <h2><component :is="props.i18n.msg('applicationsHtmlTitle')" /></h2>
+      </div>
+
+      <form
+        :action="url.applicationsUrl"
+        method="post"
+      >
+        <input
+          type="hidden"
+          id="stateChecker"
+          name="stateChecker"
+          :value="stateChecker"
+        />
+        <input
+          type="hidden"
+          id="referrer"
+          name="referrer"
+          :value="stateChecker"
+        />
+
+        <table class="table table-striped table-bordered">
+          <thead>
+            <tr>
+              <td><component :is="props.i18n.msg('application')" /></td>
+              <td><component :is="props.i18n.msg('availableRoles')" /></td>
+              <td><component :is="props.i18n.msg('grantedPermissions')" /></td>
+              <td><component :is="props.i18n.msg('additionalGrants')" /></td>
+              <td><component :is="props.i18n.msg('action')" /></td>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="application in applications"
+              :key="application.client.clientId"
+            >
+              <!-- Application name cell -->
+              <td>
+                <template v-if="application.effectiveUrl">
+                  <a :href="application.effectiveUrl">
+                    <template v-if="application.client.name">
+                      <component :is="props.i18n.advancedMsg(application.client.name)" />
+                    </template>
+                    <template v-else>{{ application.client.clientId }}</template>
+                  </a>
+                </template>
+                <template v-else>
+                  <template v-if="application.client.name">
+                    <component :is="props.i18n.advancedMsg(application.client.name)" />
+                  </template>
+                  <template v-else>{{ application.client.clientId }}</template>
+                </template>
+              </td>
+
+              <!-- Available roles cell -->
+              <td>
+                <template v-if="!isArrayWithEmptyObject(application.realmRolesAvailable)">
+                  <span
+                    v-for="(role, index) in application.realmRolesAvailable"
+                    :key="role.name"
+                  >
+                    <template v-if="role.description">
+                      <component :is="props.i18n.advancedMsg(role.description)" />
+                    </template>
+                    <template v-else>
+                      <component :is="props.i18n.advancedMsg(role.name)" />
+                    </template>
+                    <template v-if="index < application.realmRolesAvailable.length - 1">, </template>
+                  </span>
+                </template>
+
+                <template v-if="application.resourceRolesAvailable">
+                  <span
+                    v-for="resource in Object.keys(application.resourceRolesAvailable)"
+                    :key="resource"
+                  >
+                    <template v-if="!isArrayWithEmptyObject(application.realmRolesAvailable)">, </template>
+                    <span
+                      v-for="(clientRole, roleIndex) in application.resourceRolesAvailable[resource]"
+                      :key="clientRole.roleName"
+                    >
+                      <template v-if="clientRole.roleDescription">
+                        <component :is="props.i18n.advancedMsg(clientRole.roleDescription)" />
+                      </template>
+                      <template v-else>
+                        <component :is="props.i18n.advancedMsg(clientRole.roleName)" />
+                      </template>
+                      {{ ' ' }}<component :is="props.i18n.msg('inResource')" />{{ ' ' }}
+                      <strong>
+                        <template v-if="clientRole.clientName">
+                          <component :is="props.i18n.advancedMsg(clientRole.clientName)" />
+                        </template>
+                        <template v-else>{{ clientRole.clientId }}</template>
+                      </strong>
+                      <template v-if="roleIndex < application.resourceRolesAvailable[resource].length - 1">, </template>
+                    </span>
+                  </span>
+                </template>
+              </td>
+
+              <!-- Granted permissions cell -->
+              <td>
+                <template v-if="application.client.consentRequired">
+                  <span
+                    v-for="(claim, claimIndex) in application.clientScopesGranted"
+                    :key="claim"
+                  >
+                    <component :is="props.i18n.advancedMsg(claim)" />
+                    <template v-if="claimIndex < application.clientScopesGranted.length - 1">, </template>
+                  </span>
+                </template>
+                <template v-else>
+                  <strong><component :is="props.i18n.msg('fullAccess')" /></strong>
+                </template>
+              </td>
+
+              <!-- Additional grants cell -->
+              <td>
+                <span
+                  v-for="(grant, grantIndex) in application.additionalGrants"
+                  :key="grant"
+                >
+                  <component :is="props.i18n.advancedMsg(grant)" />
+                  <template v-if="grantIndex < application.additionalGrants.length - 1">, </template>
+                </span>
+              </td>
+
+              <!-- Action cell -->
+              <td>
+                <button
+                  v-if="
+                    (application.client.consentRequired && application.clientScopesGranted.length > 0) ||
+                    application.additionalGrants.length > 0
+                  "
+                  type="submit"
+                  :class="kcClsx('kcButtonPrimaryClass', 'kcButtonClass')"
+                  :id="`revoke-${application.client.clientId}`"
+                  name="clientId"
+                  :value="application.client.id"
+                >
+                  <component :is="props.i18n.msg('revoke')" />
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </form>
+    </div>
+  </component>
+</template>

package/src/account/pages/FederatedIdentity.vue

@@ -0,0 +1,123 @@
+<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: 'federatedIdentity.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, federatedIdentity, stateChecker } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="props.doUseDefaultCss"
+    :classes="props.classes"
+    active="social"
+  >
+    <div class="main-layout social">
+      <div class="row">
+        <div class="col-md-10">
+          <h2><component :is="props.i18n.msg('federatedIdentitiesHtmlTitle')" /></h2>
+        </div>
+      </div>
+
+      <div id="federated-identities">
+        <div
+          v-for="identity in federatedIdentity.identities"
+          :key="identity.providerId"
+          class="row margin-bottom"
+        >
+          <div class="col-sm-2 col-md-2">
+            <label
+              :for="identity.providerId"
+              class="control-label"
+            >
+              {{ identity.displayName }}
+            </label>
+          </div>
+
+          <div class="col-sm-5 col-md-5">
+            <input
+              disabled
+              class="form-control"
+              :value="identity.userName"
+            />
+          </div>
+
+          <div class="col-sm-5 col-md-5">
+            <template v-if="identity.connected">
+              <form
+                v-if="federatedIdentity.removeLinkPossible"
+                :action="url.socialUrl"
+                method="post"
+                class="form-inline"
+              >
+                <input
+                  type="hidden"
+                  name="stateChecker"
+                  :value="stateChecker"
+                />
+                <input
+                  type="hidden"
+                  name="action"
+                  value="remove"
+                />
+                <input
+                  type="hidden"
+                  name="providerId"
+                  :value="identity.providerId"
+                />
+                <button
+                  :id="`remove-link-${identity.providerId}`"
+                  class="btn btn-default"
+                >
+                  <component :is="props.i18n.msg('doRemove')" />
+                </button>
+              </form>
+            </template>
+
+            <template v-else>
+              <form
+                :action="url.socialUrl"
+                method="post"
+                class="form-inline"
+              >
+                <input
+                  type="hidden"
+                  name="stateChecker"
+                  :value="stateChecker"
+                />
+                <input
+                  type="hidden"
+                  name="action"
+                  value="add"
+                />
+                <input
+                  type="hidden"
+                  name="providerId"
+                  :value="identity.providerId"
+                />
+                <button
+                  :id="`add-link-${identity.providerId}`"
+                  class="btn btn-default"
+                >
+                  <component :is="props.i18n.msg('doAdd')" />
+                </button>
+              </form>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </component>
+</template>

package/src/account/pages/Log.vue

@@ -0,0 +1,64 @@
+<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: 'log.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { log } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="props.doUseDefaultCss"
+    :classes="props.classes"
+    active="log"
+  >
+    <div :class="kcClsx('kcContentWrapperClass')">
+      <div class="col-md-10">
+        <h2><component :is="props.i18n.msg('accountLogHtmlTitle')" /></h2>
+      </div>
+    </div>
+
+    <table class="table table-striped table-bordered">
+      <thead>
+        <tr>
+          <td><component :is="props.i18n.msg('date')" /></td>
+          <td><component :is="props.i18n.msg('event')" /></td>
+          <td><component :is="props.i18n.msg('ip')" /></td>
+          <td><component :is="props.i18n.msg('client')" /></td>
+          <td><component :is="props.i18n.msg('details')" /></td>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr
+          v-for="(event, index) in log.events"
+          :key="index"
+        >
+          <td>{{ event.date ? new Date(event.date).toLocaleString() : '' }}</td>
+          <td>{{ event.event }}</td>
+          <td>{{ event.ipAddress }}</td>
+          <td>{{ event.client || '' }}</td>
+          <td>
+            <span
+              v-for="(detail, detailIndex) in event.details"
+              :key="detailIndex"
+              >{{ `${detail.key} = ${detail.value}` }}{{ detailIndex < event.details.length - 1 ? ', ' : '' }}</span
+            >
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </component>
+</template>

package/src/account/pages/NotImplemented.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<any, I18n>>();
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="props.kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="props.doUseDefaultCss"
+    :classes="props.classes"
+    active=""
+  >
+    <div style="padding: 2rem; font-family: sans-serif">
+      <h1>Not implemented yet</h1>
+      <p>
+        Page <code>{{ props.kcContext.pageId }}</code> does not have a Vue implementation yet.
+      </p>
+    </div>
+  </component>
+</template>

package/src/account/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/account/pages/Password.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { clsx } from 'keycloakify/tools/clsx';
+import type { KcContext } from 'keycloakify/account/KcContext';
+import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'password.ftl' }>, I18n>>();
+
+const classes = {
+  ...props.classes,
+  kcBodyClass: clsx(props.classes?.kcBodyClass, 'password'),
+};
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes,
+});
+
+const { url, password, account, stateChecker } = props.kcContext;
+const { msgStr, msg } = props.i18n;
+
+// Reactive state for password fields
+const currentPassword = ref('');
+const newPassword = ref('');
+const newPasswordConfirm = ref('');
+const newPasswordError = ref('');
+const newPasswordConfirmError = ref('');
+const hasNewPasswordBlurred = ref(false);
+const hasNewPasswordConfirmBlurred = ref(false);
+
+function checkNewPassword(value: string) {
+  if (!password.passwordSet) {
+    return;
+  }
+  if (value === currentPassword.value) {
+    newPasswordError.value = msgStr('newPasswordSameAsOld');
+  } else {
+    newPasswordError.value = '';
+  }
+}
+
+function checkNewPasswordConfirm(value: string) {
+  if (value === '') {
+    return;
+  }
+  if (newPassword.value !== value) {
+    newPasswordConfirmError.value = msgStr('passwordConfirmNotMatch');
+  } else {
+    newPasswordConfirmError.value = '';
+  }
+}
+
+function onNewPasswordChange(event: Event) {
+  const value = (event.target as HTMLInputElement).value;
+  newPassword.value = value;
+  if (hasNewPasswordBlurred.value) {
+    checkNewPassword(value);
+  }
+}
+
+function onNewPasswordBlur() {
+  hasNewPasswordBlurred.value = true;
+  checkNewPassword(newPassword.value);
+}
+
+function onNewPasswordConfirmChange(event: Event) {
+  const value = (event.target as HTMLInputElement).value;
+  newPasswordConfirm.value = value;
+  if (hasNewPasswordConfirmBlurred.value) {
+    checkNewPasswordConfirm(value);
+  }
+}
+
+function onNewPasswordConfirmBlur() {
+  hasNewPasswordConfirmBlurred.value = true;
+  checkNewPasswordConfirm(newPasswordConfirm.value);
+}
+
+// Synthetic kcContext override: replace message with client-side validation error
+const kcContextWithMessageOverride = computed(() => ({
+  ...props.kcContext,
+  message: (() => {
+    if (newPasswordError.value !== '') {
+      return {
+        type: 'error' as const,
+        summary: newPasswordError.value,
+      };
+    }
+    if (newPasswordConfirmError.value !== '') {
+      return {
+        type: 'error' as const,
+        summary: newPasswordConfirmError.value,
+      };
+    }
+    return props.kcContext.message;
+  })(),
+}));
+
+const isSubmitDisabled = computed(() => newPasswordError.value !== '' || newPasswordConfirmError.value !== '');
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContextWithMessageOverride"
+    :i18n="props.i18n"
+    :doUseDefaultCss="props.doUseDefaultCss"
+    :classes="classes"
+    active="password"
+  >
+    <div class="row">
+      <div class="col-md-10">
+        <h2><component :is="msg('changePasswordHtmlTitle')" /></h2>
+      </div>
+      <div class="col-md-2 subtitle">
+        <span class="subtitle">
+          <component :is="msg('allFieldsRequired')" />
+        </span>
+      </div>
+    </div>
+
+    <form
+      :action="url.passwordUrl"
+      class="form-horizontal"
+      method="post"
+    >
+      <!-- Hidden username input for password-manager autocomplete -->
+      <input
+        type="text"
+        id="username"
+        name="username"
+        :value="account.username ?? ''"
+        autocomplete="username"
+        readonly
+        style="display: none"
+      />
+
+      <!-- Current password (only shown when password is already set) -->
+      <div
+        v-if="password.passwordSet"
+        class="form-group"
+      >
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="password"
+            class="control-label"
+          >
+            <component :is="msg('password')" />
+          </label>
+        </div>
+        <div class="col-sm-10 col-md-10">
+          <input
+            type="password"
+            class="form-control"
+            id="password"
+            name="password"
+            autofocus
+            autocomplete="current-password"
+            :value="currentPassword"
+            @input="
+              (e) => {
+                currentPassword = (e.target as HTMLInputElement).value;
+              }
+            "
+          />
+        </div>
+      </div>
+
+      <input
+        type="hidden"
+        id="stateChecker"
+        name="stateChecker"
+        :value="stateChecker"
+      />
+
+      <!-- New password -->
+      <div class="form-group">
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="password-new"
+            class="control-label"
+          >
+            <component :is="msg('passwordNew')" />
+          </label>
+        </div>
+        <div class="col-sm-10 col-md-10">
+          <input
+            type="password"
+            class="form-control"
+            id="password-new"
+            name="password-new"
+            autocomplete="new-password"
+            :value="newPassword"
+            @input="onNewPasswordChange"
+            @blur="onNewPasswordBlur"
+          />
+        </div>
+      </div>
+
+      <!-- Confirm new password -->
+      <div class="form-group">
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="password-confirm"
+            class="control-label two-lines"
+          >
+            <component :is="msg('passwordConfirm')" />
+          </label>
+        </div>
+        <div class="col-sm-10 col-md-10">
+          <input
+            type="password"
+            class="form-control"
+            id="password-confirm"
+            name="password-confirm"
+            autocomplete="new-password"
+            :value="newPasswordConfirm"
+            @input="onNewPasswordConfirmChange"
+            @blur="onNewPasswordConfirmBlur"
+          />
+        </div>
+      </div>
+
+      <!-- Submit -->
+      <div class="form-group">
+        <div
+          id="kc-form-buttons"
+          class="col-md-offset-2 col-md-10 submit"
+        >
+          <div>
+            <button
+              :disabled="isSubmitDisabled"
+              type="submit"
+              :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+              name="submitAction"
+              value="Save"
+            >
+              <component :is="msg('doSave')" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </component>
+</template>