@andreyyolkin/keycloakify-vue 0.1.0

package/keycloakify-vue/account/pages/Account.vue

@@ -0,0 +1,182 @@
+<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 type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'account.ftl' }>, I18n>>();
+
+const classes = {
+  ...props.classes,
+  kcBodyClass: clsx(props.classes?.kcBodyClass, 'user'),
+};
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes,
+});
+
+const kcContext = props.kcContext;
+const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="props.doUseDefaultCss"
+    :classes="classes"
+    active="account"
+  >
+    <div class="row">
+      <div class="col-md-10">
+        <h2><component :is="props.i18n.msg('editAccountHtmlTitle')" /></h2>
+      </div>
+      <div class="col-md-2 subtitle">
+        <span class="subtitle">
+          <span class="required">*</span>
+          <component :is="props.i18n.msg('requiredFields')" />
+        </span>
+      </div>
+    </div>
+
+    <form
+      :action="url.accountUrl"
+      class="form-horizontal"
+      method="post"
+    >
+      <input
+        type="hidden"
+        id="stateChecker"
+        name="stateChecker"
+        :value="stateChecker"
+      />
+
+      <template v-if="!realm.registrationEmailAsUsername">
+        <div :class="clsx('form-group', messagesPerField.printIfExists('username', 'has-error'))">
+          <div class="col-sm-2 col-md-2">
+            <label
+              for="username"
+              class="control-label"
+            >
+              <component :is="props.i18n.msg('username')" />
+            </label>
+            <span
+              v-if="realm.editUsernameAllowed"
+              class="required"
+              >*</span
+            >
+          </div>
+          <div class="col-sm-10 col-md-10">
+            <input
+              type="text"
+              class="form-control"
+              id="username"
+              name="username"
+              :disabled="!realm.editUsernameAllowed"
+              :value="account.username ?? ''"
+            />
+          </div>
+        </div>
+      </template>
+
+      <div :class="clsx('form-group', messagesPerField.printIfExists('email', 'has-error'))">
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="email"
+            class="control-label"
+          >
+            <component :is="props.i18n.msg('email')" />
+          </label>
+          <span class="required">*</span>
+        </div>
+        <div class="col-sm-10 col-md-10">
+          <input
+            type="text"
+            class="form-control"
+            id="email"
+            name="email"
+            autofocus
+            :value="account.email ?? ''"
+          />
+        </div>
+      </div>
+
+      <div :class="clsx('form-group', messagesPerField.printIfExists('firstName', 'has-error'))">
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="firstName"
+            class="control-label"
+          >
+            <component :is="props.i18n.msg('firstName')" />
+          </label>
+          <span class="required">*</span>
+        </div>
+        <div class="col-sm-10 col-md-10">
+          <input
+            type="text"
+            class="form-control"
+            id="firstName"
+            name="firstName"
+            :value="account.firstName ?? ''"
+          />
+        </div>
+      </div>
+
+      <div :class="clsx('form-group', messagesPerField.printIfExists('lastName', 'has-error'))">
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="lastName"
+            class="control-label"
+          >
+            <component :is="props.i18n.msg('lastName')" />
+          </label>
+          <span class="required">*</span>
+        </div>
+        <div class="col-sm-10 col-md-10">
+          <input
+            type="text"
+            class="form-control"
+            id="lastName"
+            name="lastName"
+            :value="account.lastName ?? ''"
+          />
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div
+          id="kc-form-buttons"
+          class="col-md-offset-2 col-md-10 submit"
+        >
+          <div>
+            <a
+              v-if="referrer !== undefined"
+              :href="referrer?.url"
+            >
+              <component :is="props.i18n.msg('backToApplication')" />
+            </a>
+            <button
+              type="submit"
+              :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')"
+              name="submitAction"
+              value="Save"
+            >
+              <component :is="props.i18n.msg('doSave')" />
+            </button>
+            <button
+              type="submit"
+              :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')"
+              name="submitAction"
+              value="Cancel"
+            >
+              <component :is="props.i18n.msg('doCancel')" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </component>
+</template>

package/keycloakify-vue/account/pages/Account.vue.d.ts

@@ -0,0 +1,9 @@
+import type { KcContext } from 'keycloakify/account/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'account.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/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/keycloakify-vue/account/pages/Applications.vue.d.ts

@@ -0,0 +1,9 @@
+import type { KcContext } from 'keycloakify/account/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'applications.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/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/keycloakify-vue/account/pages/FederatedIdentity.vue.d.ts

@@ -0,0 +1,9 @@
+import type { KcContext } from 'keycloakify/account/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'federatedIdentity.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/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/keycloakify-vue/account/pages/Log.vue.d.ts

@@ -0,0 +1,9 @@
+import type { KcContext } from 'keycloakify/account/KcContext';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<Extract<KcContext, {
+    pageId: 'log.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/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/keycloakify-vue/account/pages/NotImplemented.vue.d.ts

@@ -0,0 +1,6 @@
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+type __VLS_Props = PageProps<any, 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/account/pages/PageProps.d.ts

@@ -0,0 +1,9 @@
+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>>;
+};