@frigear-nu/oauth-server 0.1.2 → 0.2.0

package/dist/module.d.mts

@@ -175,6 +175,13 @@ type AdminApplicationDto = Omit<OAuthApplication, 'createdAt' | 'updatedAt'> & {
     /** The redirect URI the application has to accept. */
     callbackUrl: string;
 };
+/** One page of `GET /api/admin/oauth-server/applications` (the shape `useTableQuery` speaks). */
+type AdminApplicationsPage = {
+    items: AdminApplicationDto[];
+    total: number;
+    page: number;
+    pageSize: number;
+};
 /** Returned once when an application is created. */
 type CreatedApplicationDto = AdminApplicationDto & {
     clientId: string;
@@ -221,4 +228,4 @@ declare module 'nitropack' {
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
-export type { AdminApplicationDto, ApplicationAccessContext, ApplicationInput, AuthorizeContext, ClaimsContext, ClientType, ConsentDto, CreatedApplicationDto, ModuleOptions, OAuthApplication, OAuthServerRuntimeConfig, OAuthUser, PublicModuleOptions, TokenIssuedContext, TokenRevokedContext, TokenType, UserApplicationDto, UserRolesContext };
+export type { AdminApplicationDto, AdminApplicationsPage, ApplicationAccessContext, ApplicationInput, AuthorizeContext, ClaimsContext, ClientType, ConsentDto, CreatedApplicationDto, ModuleOptions, OAuthApplication, OAuthServerRuntimeConfig, OAuthUser, PublicModuleOptions, TokenIssuedContext, TokenRevokedContext, TokenType, UserApplicationDto, UserRolesContext };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/oauth-server",
   "configKey": "oauthServer",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,11 +1,11 @@
 import { defineNuxtModule, createResolver, hasNuxtModule, addServerHandler, addServerImportsDir, addImports } from '@nuxt/kit';
-import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, registerDatabaseTable, registerBootstrapProvider, inlineModuleRuntime, addModulePages, addOptionalMenuSource, moduleApiUrl } from '@frigear-nu/module-kit/utils';
+import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, registerDatabaseTable, addModuleRoutes, registerBootstrapProvider, inlineModuleRuntime, addModulePages, addOptionalMenuSource } from '@frigear-nu/module-kit/utils';
 import { adminRoute } from '@frigear-nu/admin/utils';
 import { addAuthScope, addAuthResolver } from '@frigear-nu/auth/utils';
 import { addMcpDefinitions } from '@frigear-nu/mcp/utils';
+import { oidc } from '../dist/runtime/utils/api.js';
 
 const MODULE_NAME = "@frigear-nu/oauth-server";
-const API_NAME = "oauthServer";
 const module$1 = defineNuxtModule({
   meta: { name: MODULE_NAME, configKey: "oauthServer" },
   defaults: {
@@ -81,29 +81,33 @@ const module$1 = defineNuxtModule({
       schema: (dialect) => `./runtime/server/db/schema.${dialect}`
     });
     addServerHandler({ middleware: true, handler: resolver.resolve("./runtime/server/middleware/oauth-cors") });
-    const handler = (file) => resolver.resolve(`./runtime/server/routes/${file}`);
-    addServerHandler({ route: "/.well-known/openid-configuration", method: "get", handler: handler("oidc/openid-configuration.get") });
-    addServerHandler({ route: "/.well-known/jwks.json", method: "get", handler: handler("oidc/jwks.get") });
-    addServerHandler({ route: "/oauth/authorize", method: "get", handler: handler("oidc/authorize.get") });
-    addServerHandler({ route: "/oauth/authorize", method: "post", handler: handler("oidc/authorize.post") });
-    addServerHandler({ route: "/oauth/token", method: "post", handler: handler("oidc/token.post") });
-    addServerHandler({ route: "/oauth/revoke", method: "post", handler: handler("oidc/revoke.post") });
-    addServerHandler({ route: "/oauth/userinfo", method: "get", handler: handler("oidc/userinfo.get") });
-    const api = (method, path, file) => addServerHandler({ route: moduleApiUrl(API_NAME, path), method, handler: handler(file) });
-    api("get", "consent", "api/consent.get");
-    api("get", "me/applications", "api/me-applications.get");
+    addModuleRoutes(resolver, [
+      { method: "get", path: oidc.configuration, file: "oidc/openid-configuration.get" },
+      { method: "get", path: oidc.jwks, file: "oidc/jwks.get" },
+      { method: "get", path: oidc.authorize, file: "oidc/authorize.get" },
+      { method: "post", path: oidc.authorize, file: "oidc/authorize.post" },
+      { method: "post", path: oidc.token, file: "oidc/token.post" },
+      { method: "post", path: oidc.revoke, file: "oidc/revoke.post" },
+      { method: "get", path: oidc.userinfo, file: "oidc/userinfo.get" }
+    ], { base: "/" });
+    addModuleRoutes(resolver, [
+      { method: "get", path: "consent", file: "api/consent.get" },
+      { method: "get", path: "me/applications", file: "api/me-applications.get" }
+    ], { base: "/api/oauth-server" });
     registerBootstrapProvider(nuxt, {
       scope: "account",
       key: "oauth-server:mine",
       handler: resolver.resolve("./runtime/server/bootstrap/my-applications")
     });
-    api("get", "admin/applications", "api/admin/applications.get");
-    api("post", "admin/applications", "api/admin/applications.post");
-    api("get", "admin/applications/:id", "api/admin/application.get");
-    api("patch", "admin/applications/:id", "api/admin/application.patch");
-    api("delete", "admin/applications/:id", "api/admin/application.delete");
-    api("post", "admin/applications/:id/secret", "api/admin/application-secret.post");
-    api("post", "admin/applications/:id/revoke", "api/admin/application-revoke.post");
+    addModuleRoutes(resolver, [
+      { method: "get", path: "applications", file: "api/admin/applications.get" },
+      { method: "post", path: "applications", file: "api/admin/applications.post" },
+      { method: "get", path: "applications/:id", file: "api/admin/application.get" },
+      { method: "patch", path: "applications/:id", file: "api/admin/application.patch" },
+      { method: "delete", path: "applications/:id", file: "api/admin/application.delete" },
+      { method: "post", path: "applications/:id/secret", file: "api/admin/application-secret.post" },
+      { method: "post", path: "applications/:id/revoke", file: "api/admin/application-revoke.post" }
+    ], { base: "/api/admin/oauth-server" });
     addServerImportsDir(resolver.resolve("./runtime/server/utils"));
     inlineModuleRuntime(nuxt, resolver);
     if (settings.mcp === true) addMcpDefinitions(nuxt, resolver.resolve("./runtime/server/mcp"));

package/dist/runtime/app/components/OAuthApplicationSlideover.vue

@@ -1,6 +1,7 @@
 <script setup>
 import * as z from "zod";
 import { isNativeRedirectUri, isSecureOrigin } from "../../utils";
+import { computed, reactive, useAction, useModuleT } from "#imports";
 defineOptions({ name: "OAuthApplicationSlideover" });
 const props = defineProps({
   application: { type: Object, required: false },

package/dist/runtime/app/components/OAuthCredentialsModal.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useCopyToClipboard, useModuleT } from "#imports";
 defineOptions({ name: "OAuthCredentialsModal" });
 defineProps({
   name: { type: String, required: true },

package/dist/runtime/app/composables/useOAuthApplicationActions.d.ts

@@ -5,6 +5,9 @@ type SavedApplication = AdminApplicationDto | CreatedApplicationDto | false | un
  * Everything you can do to an application: `create` / `edit` (a `FormSlideover`), `remove`, `toggle`, `rotateSecret`,
  * `signOutEveryone`, `copyClientId` and `menu(application)` for the row menu. Toasts, confirmations and the refresh
  * of the admin list are handled here.
+ *
+ * `edit` owns the `?application=<id>` query parameter of the page it is opened from: it is set while the form is open
+ * and cleared when it closes, so an edit can be linked to and survives a reload (the admin page opens it again).
  */
 export declare function useOAuthApplicationActions(): {
     busy: any;

package/dist/runtime/app/composables/useOAuthApplicationActions.js

@@ -1,6 +1,7 @@
 import OAuthApplicationSlideover from "../components/OAuthApplicationSlideover.vue";
 import OAuthCredentialsModal from "../components/OAuthCredentialsModal.vue";
 import { OAUTH_APPLICATIONS_KEY, oauthApplicationsApi } from "./useOAuthApplications.js";
+import { ref, refreshNuxtData, useAction, useConfirmDialog, useCopyToClipboard, useModuleT, useOverlay, useRoute, useRouter, useToast } from "#imports";
 export function useOAuthApplicationActions() {
   const t = useModuleT("oauthServer");
   const overlay = useOverlay();
@@ -8,7 +9,14 @@ export function useOAuthApplicationActions() {
   const toast = useToast();
   const { busy, run } = useAction();
   const { copy } = useCopyToClipboard();
+  const route = useRoute();
+  const router = useRouter();
+  const editing = ref(null);
   const refresh = () => refreshNuxtData(OAUTH_APPLICATIONS_KEY);
+  function setQuery(id) {
+    const { application: _previous, ...rest } = route.query;
+    return router.replace({ query: id ? { ...rest, application: id } : rest });
+  }
   function showCredentials(credentials) {
     overlay.create(OAuthCredentialsModal, { destroyOnClose: true, props: credentials }).open();
   }
@@ -30,19 +38,28 @@ export function useOAuthApplicationActions() {
     return saved;
   }
   async function edit(application) {
-    const saved = await overlay.create(OAuthApplicationSlideover, {
-      destroyOnClose: true,
-      props: {
-        application,
-        save: async (input) => {
-          const updated = await oauthApplicationsApi.update(application.id, input);
-          await refresh();
-          return updated;
+    if (editing.value === application.id) return void 0;
+    editing.value = application.id;
+    const path = route.path;
+    await setQuery(application.id);
+    try {
+      const saved = await overlay.create(OAuthApplicationSlideover, {
+        destroyOnClose: true,
+        props: {
+          application,
+          save: async (input) => {
+            const updated = await oauthApplicationsApi.update(application.id, input);
+            await refresh();
+            return updated;
+          }
         }
-      }
-    }).open();
-    if (saved) toast.add({ title: t("admin.updated", "Application updated"), description: saved.name, color: "success", icon: "i-lucide-check" });
-    return saved;
+      }).open();
+      if (saved) toast.add({ title: t("admin.updated", "Application updated"), description: saved.name, color: "success", icon: "i-lucide-check" });
+      return saved;
+    } finally {
+      editing.value = null;
+      if (route.path === path && route.query.application === application.id) await setQuery(null);
+    }
   }
   async function remove(application) {
     const confirmed = await confirm({
@@ -116,7 +133,7 @@ export function useOAuthApplicationActions() {
       void signOutEveryone(application);
     } }
   ], [
-    { label: t("admin.delete", "Delete application"), icon: "i-lucide-trash", color: "error", onSelect: () => {
+    { label: t("admin.delete", "Delete application"), icon: "i-lucide-trash-2", color: "error", onSelect: () => {
       void remove(application);
     } }
   ]];

package/dist/runtime/app/composables/useOAuthApplications.d.ts

@@ -1,29 +1,50 @@
-import type { AdminApplicationDto, ApplicationInput, CreatedApplicationDto } from '../../../types.js';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { AsyncData, NuxtError } from 'nuxt/app';
+import type { AdminApplicationDto, AdminApplicationsPage, ApplicationInput, CreatedApplicationDto } from '../../../types.js';
+type Application = AdminApplicationDto;
 /** The `useFetch` key of the admin list; `refreshNuxtData(OAUTH_APPLICATIONS_KEY)` reloads it from anywhere. */
 export declare const OAUTH_APPLICATIONS_KEY = "oauth-server:applications";
 /** The admin endpoints as plain calls (no refresh). Every call needs the host's `oauth:authorize` hook to allow the user. */
 export declare const oauthApplicationsApi: {
+    get: (id: string) => Promise<AdminApplicationDto>;
     create: (input: ApplicationInput) => Promise<CreatedApplicationDto>;
     update: (id: string, patch: Partial<ApplicationInput>) => Promise<AdminApplicationDto>;
-    remove: (id: string) => Promise<unknown>;
+    /** 204: resolves with `null`. */
+    remove: (id: string) => Promise<null>;
     /** Returns the new client secret; the old one stops working. */
     rotateSecret: (id: string) => Promise<string>;
-    revokeGrants: (id: string) => Promise<unknown>;
+    /** Signs everyone out of the application; resolves with the application. */
+    revokeGrants: (id: string) => Promise<AdminApplicationDto>;
 };
-/** Admin CRUD for applications. Every call needs the host's `oauth:authorize` hook to allow the user. */
-export declare function useOAuthApplications(): {
-    applications: any;
-    status: any;
-    error: any;
-    refresh: any;
+/** The list query: `page`, `pageSize`, `q` (name or client id), `sort` (`createdAt`, `name`, `priority`) and `order`. */
+export type OAuthApplicationsQuery = Record<string, string | number | undefined>;
+type ApplicationsAsyncData = Awaited<AsyncData<AdminApplicationsPage | undefined, NuxtError | undefined>>;
+/** What `useOAuthApplications` returns (and resolves with when awaited). */
+export interface OAuthApplicationsState {
+    applications: ComputedRef<Application[]>;
+    total: ComputedRef<number>;
+    data: ApplicationsAsyncData['data'];
+    status: ApplicationsAsyncData['status'];
+    error: ApplicationsAsyncData['error'];
+    loading: ComputedRef<boolean>;
+    refreshing: ComputedRef<boolean>;
+    refresh: ApplicationsAsyncData['refresh'];
     create: (input: ApplicationInput) => Promise<CreatedApplicationDto>;
-    update: (id: string, patch: Partial<ApplicationInput>) => Promise<AdminApplicationDto>;
-    remove: (id: string) => Promise<void>;
+    update: (id: string, patch: Partial<ApplicationInput>) => Promise<Application>;
+    remove: (id: string) => Promise<null>;
     rotateSecret: (id: string) => Promise<string>;
-    revokeGrants: (id: string) => Promise<void>;
-};
+    revokeGrants: (id: string) => Promise<Application>;
+}
+/**
+ * Admin CRUD for applications, with one page of the list. Awaitable: `await useOAuthApplications(query)` in a page
+ * renders the list on the server; pass `useTableQuery().query` to page, search and sort it. `applications` is `[]`
+ * until loaded and after an error: check `loading` and `error` first. Every call needs the host's `oauth:authorize`
+ * hook to allow the user.
+ */
+export declare function useOAuthApplications(query?: MaybeRefOrGetter<OAuthApplicationsQuery>): OAuthApplicationsState & Promise<OAuthApplicationsState>;
 /**
  * The applications the signed-in user may sign in to. Awaitable: `await useMyApplications()` in a page renders them on
  * the server. `applications` is `[]` until loaded and after an error: check `loading` and `error` first.
  */
 export declare function useMyApplications(): any;
+export {};

package/dist/runtime/app/composables/useOAuthApplications.js

@@ -1,18 +1,27 @@
-const BASE = "/api/oauth-server";
+import { oauthServerApi } from "../../utils/api.js";
+import { $fetch, computed, useCachedFetch, useFetch, useUserSession, watch } from "#imports";
 export const OAUTH_APPLICATIONS_KEY = "oauth-server:applications";
 export const oauthApplicationsApi = {
-  create: (input) => $fetch(`${BASE}/admin/applications`, { method: "POST", body: input }),
-  update: (id, patch) => $fetch(`${BASE}/admin/applications/${id}`, { method: "PATCH", body: patch }),
-  remove: (id) => $fetch(`${BASE}/admin/applications/${id}`, { method: "DELETE" }),
+  get: (id) => $fetch(oauthServerApi.admin.application(id)),
+  create: (input) => $fetch(oauthServerApi.admin.applications, { method: "POST", body: input }),
+  update: (id, patch) => $fetch(oauthServerApi.admin.application(id), { method: "PATCH", body: patch }),
+  /** 204: resolves with `null`. */
+  remove: async (id) => {
+    await $fetch(oauthServerApi.admin.application(id), { method: "DELETE" });
+    return null;
+  },
   /** Returns the new client secret; the old one stops working. */
-  rotateSecret: async (id) => (await $fetch(`${BASE}/admin/applications/${id}/secret`, { method: "POST" })).clientSecret,
-  revokeGrants: (id) => $fetch(`${BASE}/admin/applications/${id}/revoke`, { method: "POST" })
+  rotateSecret: async (id) => (await $fetch(oauthServerApi.admin.rotateSecret(id), { method: "POST" })).clientSecret,
+  /** Signs everyone out of the application; resolves with the application. */
+  revokeGrants: (id) => $fetch(oauthServerApi.admin.revoke(id), { method: "POST" })
 };
-export function useOAuthApplications() {
-  const { data, status, error, refresh } = useFetch(`${BASE}/admin/applications`, {
-    key: OAUTH_APPLICATIONS_KEY,
-    default: () => []
-  });
+export function useOAuthApplications(query = {}) {
+  const fetched = useFetch(oauthServerApi.admin.applications, { key: OAUTH_APPLICATIONS_KEY, query });
+  const { data, status, error, refresh } = fetched;
+  const applications = computed(() => data.value?.items ?? []);
+  const total = computed(() => data.value?.total ?? 0);
+  const loading = computed(() => status.value === "pending" && !data.value);
+  const refreshing = computed(() => status.value === "pending" && !!data.value);
   async function create(input) {
     const created = await oauthApplicationsApi.create(input);
     await refresh();
@@ -26,6 +35,7 @@ export function useOAuthApplications() {
   async function remove(id) {
     await oauthApplicationsApi.remove(id);
     await refresh();
+    return null;
   }
   async function rotateSecret(id) {
     const clientSecret = await oauthApplicationsApi.rotateSecret(id);
@@ -33,14 +43,16 @@ export function useOAuthApplications() {
     return clientSecret;
   }
   async function revokeGrants(id) {
-    await oauthApplicationsApi.revokeGrants(id);
+    const application = await oauthApplicationsApi.revokeGrants(id);
     await refresh();
+    return application;
   }
-  return { applications: data, status, error, refresh, create, update, remove, rotateSecret, revokeGrants };
+  const api = { applications, total, data, status, error, loading, refreshing, refresh, create, update, remove, rotateSecret, revokeGrants };
+  return Object.assign(fetched.then(() => api), api);
 }
 export function useMyApplications() {
   const { loggedIn } = useUserSession();
-  const fetched = useCachedFetch(`${BASE}/me/applications`, {
+  const fetched = useCachedFetch(oauthServerApi.me.applications, {
     key: "oauth-server:mine",
     ttl: 5 * 60 * 1e3,
     watch: false

package/dist/runtime/app/pages/admin.vue

@@ -1,15 +1,32 @@
 <script setup>
+import { oauthApplicationsApi } from "../composables/useOAuthApplications";
+import { computed, numericColumn, onMounted, useModuleT, useOAuthApplicationActions, useOAuthApplications, useRoute, useTableQuery, useTableSort, watch } from "#imports";
 defineOptions({ name: "OAuthAdminPage" });
 const t = useModuleT("oauthServer");
-const { applications, status, error } = useOAuthApplications();
+const route = useRoute();
+const { page, pageSize, search, sort: sortState, query, filtered, reset } = useTableQuery({
+  sort: { id: "createdAt", desc: true }
+});
+const sort = useTableSort(null, sortState);
+const { sorting } = sort;
+const { applications, total, data, status, error, loading, refreshing, refresh } = await useOAuthApplications(query);
 const actions = useOAuthApplicationActions();
 const forbidden = computed(() => error.value?.statusCode === 401 || error.value?.statusCode === 403);
+const failed = computed(() => !!error.value && !forbidden.value && !data.value);
 const columns = computed(() => [
-  { accessorKey: "name", header: t("admin.application", "Application") },
+  { accessorKey: "name", header: sort.header("name", t("admin.application", "Application")) },
   { id: "access", header: t("admin.access", "Access") },
-  { id: "grants", header: t("admin.signedIn", "Signed in"), meta: numericColumn },
+  { id: "grants", accessorFn: (row) => row.activeGrants ?? 0, header: t("admin.signedIn", "Signed in"), meta: numericColumn },
   { id: "actions", header: "", meta: { class: { th: "w-0", td: "w-0" } } }
 ]);
+async function openFromQuery() {
+  const id = route.query.application;
+  if (typeof id !== "string" || !id) return;
+  const application = applications.value.find((item) => item.id === id) ?? await oauthApplicationsApi.get(id).catch(() => void 0);
+  if (application) void actions.edit(application);
+}
+onMounted(openFromQuery);
+watch(() => route.query.application, openFromQuery);
 </script>
 
 <template>
@@ -36,76 +53,111 @@ const columns = computed(() => [
       :title="t('admin.forbiddenTitle', 'You are not allowed to manage OAuth applications')"
       :description="t('admin.forbiddenDescription', 'Ask an administrator for access.')"
     />
-    <TableCard
-      v-else
-      :loading="status === 'pending' && !applications.length"
-      :refreshing="status === 'pending' && !!applications.length"
-    >
-      <UTable
-        :data="applications"
-        :columns="columns"
-        :ui="tableUi()"
-        @select="(_event, row2) => actions.edit(row2.original)"
+    <UEmpty
+      v-else-if="failed"
+      icon="i-lucide-circle-alert"
+      :title="t('admin.loadFailed', 'OAuth applications could not be loaded')"
+      :description="errorMessage(error, '')"
+      :actions="[{ label: t('admin.tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
+    />
+    <template v-else>
+      <PageToolbar>
+        <UInput
+          v-model="search"
+          class="w-full max-w-sm"
+          icon="i-lucide-search"
+          :loading="status === 'pending'"
+          :placeholder="t('admin.search', 'Search name or client ID...')"
+        />
+      </PageToolbar>
+
+      <TableCard
+        :loading="loading"
+        :refreshing="refreshing"
       >
-        <template #name-cell="{ row }">
-          <TableIdentity
-            :title="row.original.name"
-            :description="row.original.websiteUrl"
-            :avatar="{ icon: row.original.icon || 'i-lucide-globe' }"
-          >
-            <template #badges>
+        <UTable
+          v-model:sorting="sorting"
+          :data="applications"
+          :columns="columns"
+          :sorting-options="{ manualSorting: true }"
+          :ui="tableUi()"
+          @select="(_event, row2) => actions.edit(row2.original)"
+        >
+          <template #name-cell="{ row }">
+            <TableIdentity
+              :title="row.original.name"
+              :description="row.original.websiteUrl"
+              :avatar="{ icon: row.original.icon || 'i-lucide-globe' }"
+            >
+              <template #badges>
+                <UBadge
+                  v-if="row.original.clientType === 'public'"
+                  color="info"
+                  variant="subtle"
+                  size="sm"
+                  :label="t('admin.public', 'Public')"
+                />
+                <UBadge
+                  v-if="!row.original.isActive"
+                  color="neutral"
+                  variant="subtle"
+                  size="sm"
+                  :label="t('admin.disabled', 'Disabled')"
+                />
+              </template>
+            </TableIdentity>
+          </template>
+          <template #access-cell="{ row }">
+            <div class="flex flex-wrap gap-1">
               <UBadge
-                v-if="row.original.clientType === 'public'"
-                color="info"
+                v-for="role in row.original.allowedRoles"
+                :key="role"
                 variant="subtle"
-                size="sm"
-                :label="t('admin.public', 'Public')"
+                :label="role"
               />
               <UBadge
-                v-if="!row.original.isActive"
+                v-if="!row.original.allowedRoles.length"
                 color="neutral"
                 variant="subtle"
-                size="sm"
-                :label="t('admin.disabled', 'Disabled')"
+                :label="t('admin.everyone', 'Every signed-in user')"
               />
-            </template>
-          </TableIdentity>
-        </template>
-        <template #access-cell="{ row }">
-          <div class="flex flex-wrap gap-1">
-            <UBadge
-              v-for="role in row.original.allowedRoles"
-              :key="role"
-              variant="subtle"
-              :label="role"
+            </div>
+          </template>
+          <template #grants-cell="{ row }">
+            {{ row.original.activeGrants ?? 0 }}
+          </template>
+          <template #actions-cell="{ row }">
+            <RowMenu
+              :items="actions.menu(row.original)"
+              :subject="row.original.name"
             />
-            <UBadge
-              v-if="!row.original.allowedRoles.length"
-              color="neutral"
-              variant="subtle"
-              :label="t('admin.everyone', 'Every signed-in user')"
+          </template>
+          <template #empty>
+            <UEmpty
+              v-if="filtered"
+              variant="naked"
+              icon="i-lucide-search"
+              :title="t('admin.noMatches', 'No applications match')"
+              :actions="[{ label: t('admin.clearSearch', 'Clear search'), color: 'neutral', variant: 'outline', onClick: reset }]"
             />
-          </div>
-        </template>
-        <template #grants-cell="{ row }">
-          {{ row.original.activeGrants ?? 0 }}
-        </template>
-        <template #actions-cell="{ row }">
-          <RowMenu
-            :items="actions.menu(row.original)"
-            :subject="row.original.name"
-          />
-        </template>
-        <template #empty>
-          <UEmpty
-            variant="naked"
-            icon="i-lucide-app-window"
-            :title="t('admin.emptyTitle', 'No applications yet')"
-            :description="t('admin.emptyDescription', 'Add an application to let users sign in to it with their account.')"
-            :actions="[{ label: t('admin.new', 'Add application'), icon: 'i-lucide-plus', onClick: () => actions.create() }]"
+            <UEmpty
+              v-else
+              variant="naked"
+              icon="i-lucide-app-window"
+              :title="t('admin.emptyTitle', 'No applications yet')"
+              :description="t('admin.emptyDescription', 'Add an application to let users sign in to it with their account.')"
+              :actions="[{ label: t('admin.new', 'Add application'), icon: 'i-lucide-plus', onClick: () => actions.create() }]"
+            />
+          </template>
+        </UTable>
+        <template #footer>
+          <TablePagination
+            v-model:page="page"
+            v-model:page-size="pageSize"
+            :total="total"
           />
         </template>
-      </UTable>
-    </TableCard>
+      </TableCard>
+    </template>
   </div>
 </template>