@frigear-nu/oauth-server 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,384 @@
+<script setup>
+defineOptions({ name: "OAuthAdminPage" });
+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 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 (!confirm(`Replace the client secret of ${application.name}? The old secret stops working and users are signed out.`)) 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 (confirm(`Sign everyone out of ${application.name}?`)) await revokeGrants(application.id);
+});
+const destroy = (application) => run(async () => {
+  if (confirm(`Delete ${application.name}? This cannot be undone.`)) await remove(application.id);
+});
+const copy = (value) => navigator.clipboard?.writeText(value);
+</script>
+
+<template>
+  <UContainer class="py-10">
+    <div class="mb-6 flex items-center justify-between gap-4">
+      <h1 class="text-2xl font-semibold">
+        OAuth applications
+      </h1>
+      <UButton
+        v-if="!forbidden"
+        icon="i-lucide-plus"
+        @click="openCreate"
+      >
+        New application
+      </UButton>
+    </div>
+
+    <UAlert
+      v-if="forbidden"
+      color="error"
+      variant="subtle"
+      title="You are not allowed to manage OAuth applications."
+    />
+    <UAlert
+      v-else-if="failure && !formOpen"
+      class="mb-4"
+      color="error"
+      variant="subtle"
+      :title="failure"
+    />
+
+    <p
+      v-if="!forbidden && status !== 'pending' && !applications.length"
+      class="text-muted"
+    >
+      No applications yet.
+    </p>
+
+    <div class="grid gap-4">
+      <UCard
+        v-for="application in applications"
+        :key="application.id"
+      >
+        <div class="flex flex-wrap items-start justify-between gap-4">
+          <div class="flex min-w-0 items-start gap-3">
+            <UIcon
+              :name="application.icon || 'i-lucide-globe'"
+              class="mt-1 size-6 shrink-0"
+            />
+            <div class="min-w-0">
+              <h2 class="flex items-center gap-2 font-medium">
+                {{ application.name }}
+                <UBadge
+                  v-if="!application.isActive"
+                  color="neutral"
+                  variant="subtle"
+                >
+                  Disabled
+                </UBadge>
+              </h2>
+              <p class="truncate text-sm text-muted">
+                {{ application.websiteUrl }} · {{ application.activeGrants ?? 0 }} signed in
+              </p>
+              <p class="truncate text-xs text-muted">
+                Callback: {{ application.callbackUrl }}
+              </p>
+              <div class="mt-2 flex flex-wrap gap-1">
+                <UBadge
+                  v-for="role in application.allowedRoles"
+                  :key="role"
+                  variant="subtle"
+                >
+                  {{ role }}
+                </UBadge>
+                <UBadge
+                  v-if="!application.allowedRoles.length"
+                  color="neutral"
+                  variant="subtle"
+                >
+                  Every signed-in user
+                </UBadge>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <UButton
+              size="sm"
+              color="neutral"
+              variant="outline"
+              :disabled="busy"
+              @click="openEdit(application)"
+            >
+              Edit
+            </UButton>
+            <UButton
+              size="sm"
+              color="neutral"
+              variant="outline"
+              :disabled="busy"
+              @click="toggle(application)"
+            >
+              {{ application.isActive ? "Disable" : "Enable" }}
+            </UButton>
+            <UButton
+              size="sm"
+              color="neutral"
+              variant="outline"
+              :disabled="busy"
+              @click="rotate(application)"
+            >
+              New secret
+            </UButton>
+            <UButton
+              size="sm"
+              color="neutral"
+              variant="outline"
+              :disabled="busy"
+              @click="signOutEveryone(application)"
+            >
+              Sign everyone out
+            </UButton>
+            <UButton
+              size="sm"
+              color="error"
+              variant="outline"
+              :disabled="busy"
+              @click="destroy(application)"
+            >
+              Delete
+            </UButton>
+          </div>
+        </div>
+      </UCard>
+    </div>
+
+    <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"
+            help="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"
+            help="Where the Open button goes. Defaults to the website URL."
+          >
+            <UInput
+              v-model="form.loginUrl"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField
+            label="Preview URL pattern"
+            help="Optional, e.g. https://*.vercel.app, for preview deployments."
+          >
+            <UInput
+              v-model="form.previewUrlPattern"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField
+            label="Allowed roles"
+            help="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>
+  </UContainer>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,50 @@
+<script setup>
+defineOptions({ name: "OAuthApplicationsPage" });
+const { applications, status } = useMyApplications();
+</script>
+
+<template>
+  <UContainer class="py-10">
+    <h1 class="mb-6 text-2xl font-semibold">
+      Applications
+    </h1>
+    <p
+      v-if="status !== 'pending' && !applications.length"
+      class="text-muted"
+    >
+      There are no applications you can sign in to yet.
+    </p>
+    <div class="grid gap-4 md:grid-cols-2">
+      <UCard
+        v-for="application in applications"
+        :key="application.id"
+      >
+        <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>
+    </div>
+  </UContainer>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,108 @@
+<script setup>
+defineOptions({ name: "OAuthAuthorizePage" });
+const route = useRoute();
+const signInPath = useRuntimeConfig().public.users?.pages?.login || "/login";
+const { data: consent, error } = await useFetch("/api/oauth-server/consent", {
+  query: route.query,
+  key: `oauth-server:consent:${route.fullPath}`
+});
+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 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",
+      body: { ...route.query, approved }
+    });
+    await navigateTo(redirectUrl, { external: true });
+  } catch (err) {
+    failure.value = err.statusMessage || "Something went wrong. 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>
+
+      <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">
+        <li
+          v-for="scope in consent.scope"
+          :key="scope"
+        >
+          {{ scopeLabels[scope] ?? scope }}
+        </li>
+      </ul>
+      <UAlert
+        v-if="failure"
+        color="error"
+        variant="subtle"
+        :title="failure"
+      />
+
+      <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>
+
+    <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>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/menus.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@frigear-nu/menu/types").MenuSource;
+export default _default;

package/dist/runtime/menus.js

@@ -0,0 +1,27 @@
+import { defineMenuItem, defineMenuSource, extendMenuItem } from "@frigear-nu/menu/utils";
+export default defineMenuSource(() => {
+  const config = useRuntimeConfig().public.oauthServer;
+  if (config?.pages?.applications) {
+    const item = defineMenuItem({
+      id: "oauth-applications",
+      label: "Applications",
+      description: "Applications you can sign in to.",
+      icon: "i-lucide-layout-grid",
+      to: config.pages.applications,
+      order: 50
+    });
+    extendMenuItem("account", item);
+    extendMenuItem("dashboard.account", item);
+  }
+  if (config?.pages?.admin) {
+    extendMenuItem("dashboard.account", defineMenuItem({
+      id: "oauth-admin",
+      label: "OAuth applications",
+      description: "Manage the applications users can sign in to.",
+      icon: "i-lucide-key-round",
+      to: config.pages.admin,
+      order: 90,
+      tags: ["admin"]
+    }));
+  }
+});