@frigear-nu/oauth-server 0.0.10 → 0.1.1

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

@@ -1,184 +1,68 @@
 <script setup>
 defineOptions({ name: "OAuthAdminPage" });
 const t = useModuleT("oauthServer");
-const confirmAction = useConfirmDialog();
-const { applications, status, error, create, update, remove, rotateSecret, revokeGrants } = useOAuthApplications();
-const emptyForm = () => ({
-  name: "",
-  websiteUrl: "",
-  loginUrl: "",
-  previewUrlPattern: "",
-  description: "",
-  icon: "i-lucide-globe",
-  priority: 0,
-  allowedRoles: [],
-  tags: []
-});
-const formOpen = ref(false);
-const editingId = ref(null);
-const form = ref(emptyForm());
-const busy = ref(false);
-const failure = ref(null);
-const secret = ref(null);
+const { applications, status, error } = useOAuthApplications();
+const actions = useOAuthApplicationActions();
 const forbidden = computed(() => error.value?.statusCode === 401 || error.value?.statusCode === 403);
-function openCreate() {
-  editingId.value = null;
-  form.value = emptyForm();
-  failure.value = null;
-  formOpen.value = true;
-}
-function openEdit(application) {
-  editingId.value = application.id;
-  form.value = {
-    name: application.name,
-    websiteUrl: application.websiteUrl,
-    loginUrl: application.loginUrl ?? "",
-    previewUrlPattern: application.previewUrlPattern ?? "",
-    description: application.description ?? "",
-    icon: application.icon ?? "",
-    priority: application.priority,
-    allowedRoles: [...application.allowedRoles],
-    tags: [...application.tags]
-  };
-  failure.value = null;
-  formOpen.value = true;
-}
-const message = (err) => err.statusMessage || err.data?.message || "Something went wrong.";
-async function run(task) {
-  busy.value = true;
-  failure.value = null;
-  try {
-    await task();
-  } catch (err) {
-    failure.value = message(err);
-  } finally {
-    busy.value = false;
-  }
-}
-function submit() {
-  const value = form.value;
-  const input = {
-    name: value.name,
-    websiteUrl: value.websiteUrl,
-    loginUrl: value.loginUrl || null,
-    previewUrlPattern: value.previewUrlPattern || null,
-    description: value.description || null,
-    icon: value.icon || null,
-    priority: Number(value.priority) || 0,
-    allowedRoles: value.allowedRoles,
-    tags: value.tags
-  };
-  return run(async () => {
-    if (editingId.value) {
-      await update(editingId.value, input);
-    } else {
-      const created = await create(input);
-      secret.value = { name: created.name, clientId: created.clientId, clientSecret: created.clientSecret };
-    }
-    formOpen.value = false;
-  });
-}
-const rotate = (application) => run(async () => {
-  if (!await confirmAction({
-    title: t("admin.rotateTitle", "Replace the client secret of {name}?", { name: application.name }),
-    description: t("admin.rotateDescription", "The old secret stops working and users are signed out."),
-    confirmText: t("admin.newSecret", "New secret"),
-    destructive: true
-  })) return;
-  const clientSecret = await rotateSecret(application.id);
-  secret.value = { name: application.name, clientId: application.id, clientSecret };
-});
-const toggle = (application) => run(async () => {
-  await update(application.id, { isActive: !application.isActive });
-});
-const signOutEveryone = (application) => run(async () => {
-  if (await confirmAction({
-    title: t("admin.signOutTitle", "Sign everyone out of {name}?", { name: application.name }),
-    confirmText: t("admin.signOutEveryone", "Sign everyone out"),
-    destructive: true
-  })) await revokeGrants(application.id);
-});
-const destroy = (application) => run(async () => {
-  if (await confirmAction({
-    title: t("admin.deleteTitle", "Delete {name}?", { name: application.name }),
-    description: t("admin.deleteDescription", "This cannot be undone."),
-    confirmText: t("admin.delete", "Delete"),
-    destructive: true
-  })) await remove(application.id);
-});
-const columns = [
+const columns = computed(() => [
   { accessorKey: "name", header: t("admin.application", "Application") },
   { id: "access", header: t("admin.access", "Access") },
-  { id: "grants", header: t("admin.signedIn", "Signed in") },
-  { id: "actions", header: "" }
-];
-const rowActions = (application) => [[
-  { label: t("admin.edit", "Edit"), icon: "i-lucide-pencil", onSelect: () => openEdit(application) },
-  { label: application.isActive ? t("admin.disable", "Disable") : t("admin.enable", "Enable"), icon: application.isActive ? "i-lucide-pause" : "i-lucide-play", onSelect: () => toggle(application) },
-  { label: t("admin.newSecret", "New secret"), icon: "i-lucide-key-round", onSelect: () => rotate(application) },
-  { label: t("admin.signOutEveryone", "Sign everyone out"), icon: "i-lucide-log-out", onSelect: () => signOutEveryone(application) }
-], [
-  { label: t("admin.delete", "Delete"), icon: "i-lucide-trash", color: "error", onSelect: () => destroy(application) }
-]];
-const copy = (value) => navigator.clipboard?.writeText(value);
+  { id: "grants", header: t("admin.signedIn", "Signed in"), meta: numericColumn },
+  { id: "actions", header: "", meta: { class: { th: "w-0", td: "w-0" } } }
+]);
 </script>
 
 <template>
-  <AdminPage>
-    <AdminPageHeader :title="t('admin.title', 'OAuth applications')">
-      <template #actions>
+  <div class="flex flex-col gap-4">
+    <PageHeading
+      :title="t('admin.title', 'OAuth applications')"
+      :description="t('admin.description', 'The applications users can sign in to with their account.')"
+    >
+      <template
+        v-if="!forbidden"
+        #actions
+      >
         <UButton
-          v-if="!forbidden"
           icon="i-lucide-plus"
-          :label="t('admin.new', 'New application')"
-          @click="openCreate"
+          :label="t('admin.new', 'Add application')"
+          @click="actions.create()"
         />
       </template>
-    </AdminPageHeader>
+    </PageHeading>
 
-    <UAlert
+    <UEmpty
       v-if="forbidden"
-      color="error"
-      variant="subtle"
-      :title="t('admin.forbidden', 'You are not allowed to manage OAuth applications.')"
+      icon="i-lucide-lock"
+      :title="t('admin.forbiddenTitle', 'You are not allowed to manage OAuth applications')"
+      :description="t('admin.forbiddenDescription', 'Ask an administrator for access.')"
     />
-    <template v-else>
-      <UAlert
-        v-if="failure && !formOpen"
-        color="error"
-        variant="subtle"
-        :title="failure"
-      />
-
-      <AdminTable
+    <TableCard
+      v-else
+      :loading="status === 'pending' && !applications.length"
+      :refreshing="status === 'pending' && !!applications.length"
+    >
+      <UTable
         :data="applications"
         :columns="columns"
-        :loading="status === 'pending'"
+        :ui="tableUi()"
+        @select="(_event, row2) => actions.edit(row2.original)"
       >
         <template #name-cell="{ row }">
-          <div class="flex min-w-0 items-start gap-3">
-            <UIcon
-              :name="row.original.icon || 'i-lucide-globe'"
-              class="mt-0.5 size-5 shrink-0"
-            />
-            <div class="min-w-0">
-              <p class="flex items-center gap-2 font-medium">
-                {{ row.original.name }}
-                <UBadge
-                  v-if="!row.original.isActive"
-                  color="neutral"
-                  variant="subtle"
-                  :label="t('admin.disabled', 'Disabled')"
-                />
-              </p>
-              <p class="truncate text-sm text-muted">
-                {{ row.original.websiteUrl }}
-              </p>
-              <p class="truncate text-xs text-muted">
-                {{ t("admin.callback", "Callback") }}: {{ row.original.callbackUrl }}
-              </p>
-            </div>
-          </div>
+          <TableIdentity
+            :title="row.original.name"
+            :description="row.original.websiteUrl"
+            :avatar="{ icon: row.original.icon || 'i-lucide-globe' }"
+          >
+            <template #badges>
+              <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">
@@ -200,181 +84,21 @@ const copy = (value) => navigator.clipboard?.writeText(value);
           {{ row.original.activeGrants ?? 0 }}
         </template>
         <template #actions-cell="{ row }">
-          <div class="flex justify-end">
-            <UDropdownMenu :items="rowActions(row.original)">
-              <UButton
-                icon="i-lucide-ellipsis"
-                color="neutral"
-                variant="ghost"
-                size="sm"
-                :disabled="busy"
-                :aria-label="t('admin.actions', 'Actions')"
-              />
-            </UDropdownMenu>
-          </div>
+          <RowMenu
+            :items="actions.menu(row.original)"
+            :subject="row.original.name"
+          />
         </template>
         <template #empty>
-          <AdminEmpty
+          <UEmpty
+            variant="naked"
             icon="i-lucide-app-window"
-            :title="t('admin.empty', 'No applications yet.')"
+            :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>
-      </AdminTable>
-    </template>
-
-    <UModal
-      v-model:open="formOpen"
-      :title="editingId ? 'Edit application' : 'New application'"
-    >
-      <template #body>
-        <form
-          id="oauth-application-form"
-          class="grid gap-4"
-          @submit.prevent="submit"
-        >
-          <UFormField
-            label="Name"
-            required
-          >
-            <UInput
-              v-model="form.name"
-              class="w-full"
-              required
-            />
-          </UFormField>
-          <UFormField
-            label="Website URL"
-            description="The origin of the application, without a path. The callback is the website URL plus the configured callback path."
-            required
-          >
-            <UInput
-              v-model="form.websiteUrl"
-              class="w-full"
-              placeholder="https://app.example.com"
-              required
-            />
-          </UFormField>
-          <UFormField
-            label="Login URL"
-            description="Where the Open button goes. Defaults to the website URL."
-          >
-            <UInput
-              v-model="form.loginUrl"
-              class="w-full"
-            />
-          </UFormField>
-          <UFormField
-            label="Preview URL pattern"
-            description="Optional, e.g. https://*.vercel.app, for preview deployments."
-          >
-            <UInput
-              v-model="form.previewUrlPattern"
-              class="w-full"
-            />
-          </UFormField>
-          <UFormField
-            label="Allowed roles"
-            description="Leave empty to allow every signed-in user."
-          >
-            <UInputTags
-              v-model="form.allowedRoles"
-              class="w-full"
-            />
-          </UFormField>
-          <UFormField label="Tags">
-            <UInputTags
-              v-model="form.tags"
-              class="w-full"
-            />
-          </UFormField>
-          <UFormField label="Description">
-            <UTextarea
-              v-model="form.description"
-              class="w-full"
-            />
-          </UFormField>
-          <div class="grid grid-cols-2 gap-4">
-            <UFormField label="Icon">
-              <UInput
-                v-model="form.icon"
-                class="w-full"
-              />
-            </UFormField>
-            <UFormField label="Priority">
-              <UInput
-                v-model.number="form.priority"
-                type="number"
-                class="w-full"
-              />
-            </UFormField>
-          </div>
-          <UAlert
-            v-if="failure"
-            color="error"
-            variant="subtle"
-            :title="failure"
-          />
-        </form>
-      </template>
-      <template #footer>
-        <div class="flex w-full justify-end gap-2">
-          <UButton
-            color="neutral"
-            variant="outline"
-            @click="formOpen = false"
-          >
-            Cancel
-          </UButton>
-          <UButton
-            type="submit"
-            form="oauth-application-form"
-            :loading="busy"
-          >
-            {{ editingId ? "Save" : "Create" }}
-          </UButton>
-        </div>
-      </template>
-    </UModal>
-
-    <UModal
-      :open="!!secret"
-      :title="secret ? `Credentials for ${secret.name}` : ''"
-      description="Copy the client secret now. It is only shown once."
-      @update:open="secret = null"
-    >
-      <template #body>
-        <div
-          v-if="secret"
-          class="grid gap-3 text-sm"
-        >
-          <div>
-            <div class="text-muted">
-              Client ID
-            </div>
-            <code class="break-all">{{ secret.clientId }}</code>
-            <UButton
-              size="xs"
-              variant="link"
-              @click="copy(secret.clientId)"
-            >
-              Copy
-            </UButton>
-          </div>
-          <div>
-            <div class="text-muted">
-              Client secret
-            </div>
-            <code class="break-all">{{ secret.clientSecret }}</code>
-            <UButton
-              size="xs"
-              variant="link"
-              @click="copy(secret.clientSecret)"
-            >
-              Copy
-            </UButton>
-          </div>
-        </div>
-      </template>
-    </UModal>
-  </AdminPage>
+      </UTable>
+    </TableCard>
+  </div>
 </template>

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

@@ -1,50 +1,38 @@
 <script setup>
 defineOptions({ name: "OAuthApplicationsPage" });
+const t = useModuleT("oauthServer");
 const { applications, status } = useMyApplications();
 </script>
 
 <template>
-  <UContainer class="py-10">
-    <h1 class="mb-6 text-2xl font-semibold">
-      Applications
-    </h1>
-    <p
+  <div class="flex flex-col gap-4">
+    <UEmpty
       v-if="status !== 'pending' && !applications.length"
-      class="text-muted"
+      icon="i-lucide-layout-grid"
+      :title="t('applications.emptyTitle', 'No applications yet')"
+      :description="t('applications.emptyDescription', 'There are no applications you can sign in to yet.')"
+    />
+    <div
+      v-else
+      class="grid gap-4 md:grid-cols-2"
     >
-      There are no applications you can sign in to yet.
-    </p>
-    <div class="grid gap-4 md:grid-cols-2">
-      <UCard
+      <UPageCard
         v-for="application in applications"
         :key="application.id"
+        variant="outline"
+        :title="application.name"
+        :description="application.description ?? application.websiteUrl"
+        :icon="application.icon || 'i-lucide-globe'"
       >
-        <div class="flex items-start gap-3">
-          <UIcon
-            :name="application.icon || 'i-lucide-globe'"
-            class="mt-1 size-6 shrink-0"
-          />
-          <div class="min-w-0 flex-1">
-            <h2 class="font-medium">
-              {{ application.name }}
-            </h2>
-            <p
-              v-if="application.description"
-              class="text-sm text-muted"
-            >
-              {{ application.description }}
-            </p>
-          </div>
-          <UButton
-            :to="application.loginUrl"
-            external
-            trailing-icon="i-lucide-arrow-up-right"
-            size="sm"
-          >
-            Open
-          </UButton>
-        </div>
-      </UCard>
+        <UButton
+          :to="application.loginUrl"
+          external
+          trailing-icon="i-lucide-arrow-up-right"
+          size="sm"
+          :label="t('applications.open', 'Open')"
+          :aria-label="t('applications.openApplication', 'Open {name}', { name: application.name })"
+        />
+      </UPageCard>
     </div>
-  </UContainer>
+  </div>
 </template>

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

@@ -1,7 +1,9 @@
 <script setup>
 defineOptions({ name: "OAuthAuthorizePage" });
+const t = useModuleT("oauthServer");
 const route = useRoute();
 const signInPath = useAuthPages().login;
+const showError = useErrorToast();
 const { data: consent, error } = await useFetch("/api/oauth-server/consent", {
   query: route.query,
   key: `oauth-server:consent:${route.fullPath}`
@@ -9,16 +11,17 @@ const { data: consent, error } = await useFetch("/api/oauth-server/consent", {
 if (error.value?.statusCode === 401) {
   await navigateTo(`${signInPath}?redirect=${encodeURIComponent(route.fullPath)}`);
 }
-const scopeLabels = {
-  openid: "Verify your identity",
-  profile: "Your name and profile picture",
-  email: "Your email address"
+const scopeLabel = (scope) => {
+  const known = {
+    openid: t("authorize.scope.openid", "Verify your identity"),
+    profile: t("authorize.scope.profile", "Your name and profile picture"),
+    email: t("authorize.scope.email", "Your email address")
+  };
+  return known[scope] ?? scope;
 };
 const pending = ref(null);
-const failure = ref(null);
 async function decide(approved) {
   pending.value = approved ? "approve" : "deny";
-  failure.value = null;
   try {
     const { redirectUrl } = await $fetch("/oauth/authorize", {
       method: "POST",
@@ -26,83 +29,69 @@ async function decide(approved) {
     });
     await navigateTo(redirectUrl, { external: true });
   } catch (err) {
-    failure.value = err.statusMessage || "Something went wrong. Please try again.";
+    showError(err, t("authorize.failed", "Could not complete the sign-in. Please try again."));
     pending.value = null;
   }
 }
 </script>
 
 <template>
-  <UContainer class="py-10">
-    <UCard
-      v-if="consent"
-      class="mx-auto max-w-md"
-    >
-      <template #header>
-        <div class="flex items-center gap-3">
-          <UIcon
-            :name="consent.application.icon || 'i-lucide-globe'"
-            class="size-8"
-          />
-          <div>
-            <h1 class="text-lg font-semibold">
-              {{ consent.application.name }}
-            </h1>
-            <p class="text-sm text-muted">
-              {{ consent.application.websiteUrl }}
-            </p>
-          </div>
-        </div>
-      </template>
+  <AuthCard
+    v-if="consent"
+    :title="t('authorize.title', 'Sign in to {name}', { name: consent.application.name })"
+  >
+    <template #description>
+      {{ t("authorize.signedInAs", "Signed in as {name} ({email}).", { name: consent.user.name, email: consent.user.email }) }}
+    </template>
 
-      <p class="mb-3 text-sm">
-        Signed in as <strong>{{ consent.user.name }}</strong> ({{ consent.user.email }}).
-        <strong>{{ consent.application.name }}</strong> wants to:
-      </p>
-      <ul class="mb-4 list-inside list-disc space-y-1 text-sm">
+    <div class="flex items-center gap-3">
+      <UIcon
+        :name="consent.application.icon || 'i-lucide-globe'"
+        class="size-8 shrink-0"
+      />
+      <div class="min-w-0">
+        <p class="text-highlighted font-medium">
+          {{ consent.application.name }}
+        </p>
+        <p class="truncate text-sm text-muted">
+          {{ consent.application.websiteUrl }}
+        </p>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-2 text-sm">
+      <p>{{ t("authorize.wants", "{name} wants to:", { name: consent.application.name }) }}</p>
+      <ul class="list-inside list-disc space-y-1">
         <li
           v-for="scope in consent.scope"
           :key="scope"
         >
-          {{ scopeLabels[scope] ?? scope }}
+          {{ scopeLabel(scope) }}
         </li>
       </ul>
-      <UAlert
-        v-if="failure"
-        color="error"
-        variant="subtle"
-        :title="failure"
-      />
+    </div>
 
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton
-            color="neutral"
-            variant="outline"
-            :loading="pending === 'deny'"
-            :disabled="!!pending"
-            @click="decide(false)"
-          >
-            Deny
-          </UButton>
-          <UButton
-            :loading="pending === 'approve'"
-            :disabled="!!pending"
-            @click="decide(true)"
-          >
-            Allow
-          </UButton>
-        </div>
-      </template>
-    </UCard>
+    <div class="flex justify-end gap-2">
+      <UButton
+        color="neutral"
+        variant="outline"
+        :label="t('authorize.deny', 'Deny')"
+        :loading="pending === 'deny'"
+        :disabled="!!pending"
+        @click="decide(false)"
+      />
+      <UButton
+        :label="t('authorize.allow', 'Allow')"
+        :loading="pending === 'approve'"
+        :disabled="!!pending"
+        @click="decide(true)"
+      />
+    </div>
+  </AuthCard>
 
-    <UAlert
-      v-else
-      class="mx-auto max-w-md"
-      color="error"
-      variant="subtle"
-      title="This sign-in request cannot be completed"
-      :description="error?.statusMessage || 'The request is invalid.'"
-    />
-  </UContainer>
+  <AuthCard
+    v-else
+    :title="t('authorize.invalidTitle', 'This sign-in request cannot be completed')"
+    :description="error?.statusMessage || t('authorize.invalidDescription', 'The request is invalid.')"
+  />
 </template>