API tokens (#201)

* fix: small fixes to request util and version update endpoint

* feat: api token creation and management

* fix: lint

* fix: remove unneeded sidebar component

components/AccountSidebar.vue

@@ -45,6 +45,7 @@ import {
   LockClosedIcon,
   DevicePhoneMobileIcon,
   WrenchScrewdriverIcon,
+  CodeBracketIcon,
 } from "@heroicons/vue/24/outline";
 import { UserIcon } from "@heroicons/vue/24/solid";
 import type { Component } from "vue";
@@ -73,6 +74,12 @@ const navigation: (NavigationItem & { icon: Component; count?: number })[] = [
     icon: BellIcon,
     count: notifications.value.length,
   },
+  {
+    label: t("account.token.title"),
+    route: "/account/tokens",
+    prefix: "/account/tokens",
+    icon: CodeBracketIcon,
+  },
   {
     label: t("account.settings"),
     route: "/account/settings",

components/Modal/CreateToken.vue

@@ -0,0 +1,267 @@
+<template>
+  <ModalTemplate v-model="model" size-class="max-w-3xl">
+    <template #default>
+      <div class="space-y-5">
+        <div>
+          <label
+            for="name"
+            class="block text-sm font-medium leading-6 text-zinc-100"
+            >{{ $t("account.token.name") }}</label
+          >
+          <p class="text-zinc-400 block text-xs font-medium leading-6">
+            {{ $t("account.token.nameDesc") }}
+          </p>
+          <div class="mt-2">
+            <input
+              id="name"
+              v-model="name"
+              name="name"
+              type="text"
+              autocomplete="name"
+              :placeholder="
+                props.suggestedName ?? $t('account.token.namePlaceholder')
+              "
+              class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+            />
+          </div>
+        </div>
+
+        <div>
+          <Listbox v-model="expiryKey" as="div">
+            <ListboxLabel class="block text-sm/6 font-medium text-zinc-100">{{
+              $t("users.admin.simple.inviteExpiryLabel")
+            }}</ListboxLabel>
+            <div class="relative mt-2">
+              <ListboxButton
+                class="relative w-full cursor-default rounded-md bg-zinc-800 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm/6"
+              >
+                <span class="block truncate">{{ expiryKey }}</span>
+                <span
+                  class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                >
+                  <ChevronUpDownIcon
+                    class="h-5 w-5 text-gray-400"
+                    aria-hidden="true"
+                  />
+                </span>
+              </ListboxButton>
+
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <ListboxOptions
+                  class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                >
+                  <ListboxOption
+                    v-for="[label] in Object.entries(expiry)"
+                    :key="label"
+                    v-slot="{ active, selected }"
+                    as="template"
+                    :value="label"
+                  >
+                    <li
+                      :class="[
+                        active ? 'bg-blue-600 text-white' : 'text-zinc-300',
+                        'relative cursor-default select-none py-2 pl-3 pr-9',
+                      ]"
+                    >
+                      <span
+                        :class="[
+                          selected
+                            ? 'font-semibold text-zinc-100'
+                            : 'font-normal',
+                          'block truncate',
+                        ]"
+                        >{{ label }}</span
+                      >
+
+                      <span
+                        v-if="selected"
+                        :class="[
+                          active ? 'text-white' : 'text-blue-600',
+                          'absolute inset-y-0 right-0 flex items-center pr-4',
+                        ]"
+                      >
+                        <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
+        </div>
+
+        <div>
+          <label
+            for="name"
+            class="block text-sm font-medium leading-6 text-zinc-100"
+            >{{ $t("account.token.acls") }}</label
+          >
+          <p class="text-zinc-400 block text-xs font-medium leading-6">
+            {{ $t("account.token.aclsDesc") }}
+          </p>
+          <fieldset class="divide-y divide-zinc-700">
+            <div
+              v-for="[sectionName, sectionAcls] in Object.entries(
+                aclsBySection,
+              )"
+              :key="sectionName"
+              class="grid lg:grid-cols-3 gap-1 py-3"
+            >
+              <div
+                v-for="[acl, description] in Object.entries(sectionAcls)"
+                :key="acl"
+                class="flex gap-3"
+              >
+                <div class="flex h-6 shrink-0 items-center">
+                  <div class="group grid size-4 grid-cols-1">
+                    <input
+                      id="acl"
+                      v-model="currentACLs[acl]"
+                      aria-describedby="acl-description"
+                      name="acl"
+                      type="checkbox"
+                      class="col-start-1 row-start-1 appearance-none rounded-sm border checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 border-white/10 bg-white/5 dark:checked:border-blue-500 dark:checked:bg-blue-500 dark:indeterminate:border-blue-500 dark:indeterminate:bg-blue-500 dark:focus-visible:outline-blue-500 dark:disabled:border-white/5 dark:disabled:bg-white/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                    />
+                    <svg
+                      class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-white/25"
+                      viewBox="0 0 14 14"
+                      fill="none"
+                    >
+                      <path
+                        class="opacity-0 group-has-checked:opacity-100"
+                        d="M3 8L6 11L11 3.5"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        class="opacity-0 group-has-indeterminate:opacity-100"
+                        d="M3 7H11"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div class="text-sm/6">
+                  <label
+                    for="acl"
+                    class="font-display font-medium text-white"
+                    >{{ acl }}</label
+                  >
+                  {{ " " }}
+                  <span id="acl-description" class="text-xs text-zinc-400"
+                    ><span class="sr-only">{{ acl }} </span
+                    >{{ description }}</span
+                  >
+                </div>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      </div>
+    </template>
+    <template #buttons>
+      <LoadingButton :loading="props.loading" @click="() => createToken()">
+        {{ $t("common.create") }}
+      </LoadingButton>
+      <button
+        class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
+        @click="() => cancel()"
+      >
+        {{ $t("cancel") }}
+      </button>
+    </template>
+  </ModalTemplate>
+</template>
+
+<script setup lang="ts">
+import {
+  Listbox,
+  ListboxButton,
+  ListboxLabel,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/24/outline";
+import type { DurationLike } from "luxon";
+
+// Reuse for both admin and user tokens
+
+const model = defineModel<boolean>({ required: true });
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  acls: { [key: string]: string };
+  loading?: boolean;
+  suggestedAcls?: string[];
+  suggestedName?: string;
+}>();
+
+// Label to parameters to moment.js .add()
+const expiry: Record<string, DurationLike | undefined> = {
+  [t("account.token.expiryMonth")]: {
+    month: 1,
+  },
+  [t("account.token.expiry3Month")]: {
+    month: 3,
+  },
+  [t("account.token.expiry6Month")]: {
+    month: 6,
+  },
+  [t("account.token.expiryYear")]: {
+    year: 1,
+  },
+  [t("account.token.expiry5Year")]: {
+    year: 5,
+  },
+  [t("account.token.noExpiry")]: undefined,
+};
+const expiryKey = ref<keyof typeof expiry>(Object.keys(expiry)[0]); // Cast to any because we just know it's okay
+const name = ref(props.suggestedName ?? "");
+const currentACLs = ref<{ [key: string]: boolean }>(
+  Object.fromEntries((props.suggestedAcls ?? []).map((v) => [v, true])),
+);
+
+const aclsBySection = computed(() => {
+  const sections: { [key: string]: { [key: string]: string } } = {};
+  for (const [acl, description] of Object.entries(props.acls)) {
+    const section = acl.split(":")[0];
+    sections[section] ??= {};
+    sections[section][acl] = description;
+  }
+  return sections;
+});
+
+const emit = defineEmits<{
+  create: [name: string, acls: string[], expiry: DurationLike | undefined];
+}>();
+
+function createToken() {
+  emit(
+    "create",
+    name.value,
+    Object.entries(currentACLs.value)
+      .filter(([_acl, enabled]) => enabled)
+      .map(([acl, _enabled]) => acl),
+    expiry[expiryKey.value],
+  );
+}
+
+function cancel() {
+  model.value = false;
+}
+
+watch(model, (c) => {
+  if (!c) {
+    name.value = "";
+    currentACLs.value = {};
+  }
+});
+</script>

composables/request.ts

@@ -46,10 +46,28 @@ export const $dropFetch: DropFetch = async (rawRequest, opts) => {
   });
   const request = requestParts.join("/");
 
+  // If not in setup
   if (!getCurrentInstance()?.proxy) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    try {
-    // @ts-ignore Excessive stack depth comparing types
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    return await $fetch(request, opts);
+      // @ts-ignore Excessive stack depth comparing types
+      return await $fetch(request, opts);
+    } catch (e) {
+      if (import.meta.client && opts?.failTitle) {
+        console.warn(e);
+        createModal(
+          ModalType.Notification,
+          {
+            title: opts.failTitle,
+            description:
+              (e as FetchError)?.statusMessage ?? (e as string).toString(),
+            //buttonText: $t("common.close"),
+          },
+          (_, c) => c(),
+        );
+      }
+      throw e;
+    }
   }
 
   const id = request.toString();
@@ -64,26 +82,10 @@ export const $dropFetch: DropFetch = async (rawRequest, opts) => {
   }
 
   const headers = useRequestHeaders(["cookie", "authorization"]);
-  try {
+  const data = await $fetch(request, {
-    const data = await $fetch(request, {
+    ...opts,
-      ...opts,
+    headers: { ...headers, ...opts?.headers },
-      headers: { ...headers, ...opts?.headers },
+  });
-    });
+  if (import.meta.server) state.value = data;
-    if (import.meta.server) state.value = data;
+  return data;
-    return data;
-  } catch (e) {
-    if (import.meta.client && opts?.failTitle) {
-      createModal(
-        ModalType.Notification,
-        {
-          title: opts.failTitle,
-          description:
-            (e as FetchError)?.statusMessage ?? (e as string).toString(),
-          buttonText: $t("common.close"),
-        },
-        (_, c) => c(),
-      );
-    }
-    throw e;
-  }
 };

i18n/locales/en_us.json

@@ -19,6 +19,28 @@
       "title": "Notifications",
       "unread": "Unread Notifications"
     },
+    "token": {
+      "title": "API Tokens",
+      "subheader": "Manage your API tokens, and what they can access.",
+      "name": "API token name",
+      "nameDesc": "The name of the token, for reference.",
+      "namePlaceholder": "My New Token",
+      "acls": "ACLs/scopes",
+      "aclsDesc": "Defines what this token has the authority to do. You should avoid selecting all ACLs, if they are not necessary.",
+      "expiry": "Expiry",
+      "noExpiry": "No expiry",
+      "revoke": "Revoke",
+      "noTokens": "No tokens connected to your account.",
+
+      "expiryMonth": "A month",
+      "expiry3Month": "3 months",
+      "expiry6Month": "6 months",
+      "expiryYear": "A year",
+      "expiry5Year": "5 years",
+
+      "success": "Successfully created token.",
+      "successNote": "Make sure to copy it now, as it won't be shown again."
+    },
     "settings": "Settings",
     "title": "Account Settings"
   },
@@ -241,7 +263,11 @@
     "admin": {
       "admin": "Admin",
       "metadata": "Meta",
-      "settings": "Settings",
+      "settings": {
+        "title": "Settings",
+        "store": "Store",
+        "tokens": "API tokens"
+      },
       "tasks": "Tasks",
       "users": "Users"
     },

layouts/admin.vue

@@ -200,7 +200,7 @@ const navigation: Array<NavigationItem & { icon: Component }> = [
     icon: RectangleStackIcon,
   },
   {
-    label: $t("header.admin.settings"),
+    label: $t("header.admin.settings.title"),
     route: "/admin/settings",
     prefix: "/admin/settings",
     icon: Cog6ToothIcon,

pages/account/tokens.vue

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <div class="w-full flex justify-between items-center">
+      <div>
+        <h2
+          class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
+        >
+          {{ $t("account.token.title") }}
+        </h2>
+        <p
+          class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
+        >
+          {{ $t("account.token.subheader") }}
+        </p>
+      </div>
+      <div>
+        <LoadingButton :loading="false" @click="() => (createOpen = true)">
+          {{ $t("common.create") }}
+        </LoadingButton>
+      </div>
+    </div>
+
+    <div
+      v-if="newToken"
+      class="mt-4 rounded-md p-4 bg-green-500/10 outline outline-green-500/20"
+    >
+      <div class="flex">
+        <div class="shrink-0">
+          <CheckCircleIcon class="size-5 text-green-400" aria-hidden="true" />
+        </div>
+        <div class="ml-3">
+          <p class="text-sm font-medium text-green-300">
+            {{ $t("account.token.success") }}
+          </p>
+          <p class="text-xs text-green-300/70">
+            {{ $t("account.token.successNote") }}
+          </p>
+          <p
+            class="mt-2 bg-zinc-950 px-3 py-2 font-mono text-zinc-400 rounded-xl"
+          >
+            {{ newToken }}
+          </p>
+        </div>
+        <div class="ml-auto pl-3">
+          <div class="-mx-1.5 -my-1.5">
+            <button
+              type="button"
+              class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus-visible:ring-2 focus-visible:ring-green-600 focus-visible:ring-offset-2 focus-visible:ring-offset-green-50 focus-visible:outline-hidden dark:bg-transparent dark:text-green-400 dark:hover:bg-green-500/10 dark:focus-visible:ring-green-500 dark:focus-visible:ring-offset-1 dark:focus-visible:ring-offset-green-900"
+              @click="() => (newToken = undefined)"
+            >
+              <span class="sr-only">{{ $t("common.close") }}</span>
+              <XMarkIcon class="size-5" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="mt-8 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm"
+    >
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-zinc-800">
+          <thead>
+            <tr class="bg-zinc-800/50">
+              <th
+                scope="col"
+                class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-6"
+              >
+                {{ $t("common.name") }}
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                {{ $t("account.token.acls") }}
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                {{ $t("account.token.expiry") }}
+              </th>
+              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                <span class="sr-only">{{ $t("actions") }}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-zinc-800">
+            <tr
+              v-for="(token, tokenIdx) in tokens"
+              :key="token.id"
+              class="transition-colors duration-150 hover:bg-zinc-800/50"
+            >
+              <td
+                class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-6"
+              >
+                {{ token.name }}
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                <div class="flex flex-wrap gap-2">
+                  <span
+                    v-for="acl in token.acls"
+                    :key="acl"
+                    class="inline-flex items-center gap-x-1 rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/20"
+                  >
+                    {{ acl }}
+                  </span>
+                </div>
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                <RelativeTime v-if="token.expiresAt" :date="token.expiresAt" />
+                <span v-else>{{ $t("account.token.noExpiry") }}</span>
+              </td>
+              <td
+                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
+              >
+                <button
+                  class="inline-flex items-center rounded-md bg-red-400/10 px-2 py-1 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20 transition-all duration-200 hover:bg-red-400/20 hover:scale-105 active:scale-95"
+                  @click="() => revokeToken(tokenIdx)"
+                >
+                  {{ $t("account.token.revoke") }}
+                  <span class="sr-only">
+                    {{ $t("chars.srComma", [token.name]) }}
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr v-if="tokens.length === 0">
+              <td colspan="5" class="py-8 text-center text-sm text-zinc-400">
+                {{ $t("account.token.noTokens") }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <ModalCreateToken
+      v-model="createOpen"
+      :acls="acls"
+      :loading="createLoading"
+      :suggested-name="suggestedName"
+      :suggested-acls="suggestedAcls"
+      @create="(name, acls, expiry) => createToken(name, acls, expiry)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ArkErrors, type } from "arktype";
+import { DateTime, type DurationLike } from "luxon";
+import { CheckCircleIcon, XMarkIcon } from "@heroicons/vue/20/solid";
+
+const tokens = ref(await $dropFetch("/api/v1/user/token"));
+const acls = await $dropFetch("/api/v1/user/token/acls");
+
+const createOpen = ref(false);
+const createLoading = ref(false);
+
+const newToken = ref<string | undefined>();
+
+const suggestedName = ref();
+const suggestedAcls = ref<string[]>([]);
+
+const payloadParser = type({
+  name: "string?",
+  acls: "string[]?",
+});
+
+const route = useRoute();
+if (route.query.payload) {
+  try {
+    const rawPayload = JSON.parse(atob(route.query.payload.toString()));
+    const payload = payloadParser(rawPayload);
+    if (payload instanceof ArkErrors) throw payload;
+    suggestedName.value = payload.name;
+    suggestedAcls.value = payload.acls ?? [];
+    createOpen.value = true;
+  } catch {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Failed to parse the token create payload.",
+      fatal: true,
+    });
+  }
+}
+
+async function createToken(
+  name: string,
+  acls: string[],
+  expiry: DurationLike | undefined,
+) {
+  createLoading.value = true;
+  try {
+    const result = await $dropFetch("/api/v1/user/token", {
+      method: "POST",
+      body: {
+        name,
+        acls,
+        expiry: expiry ? DateTime.now().plus(expiry) : undefined,
+      },
+      failTitle: "Failed to create API token.",
+    });
+    console.log(result);
+    newToken.value = result.token;
+    tokens.value.push(result);
+  } finally {
+    /* empty */
+  }
+  createOpen.value = false;
+  createLoading.value = false;
+}
+
+async function revokeToken(index: number) {
+  const token = tokens.value[index];
+  if (!token) return;
+
+  await $dropFetch("/api/v1/user/token/:id", {
+    method: "DELETE",
+    params: {
+      id: token.id,
+    },
+    failTitle: "Failed to revoke token.",
+  });
+
+  tokens.value.splice(index, 1);
+}
+</script>

pages/admin/settings.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex flex-col">
+    <!-- tabs-->
+    <div>
+      <div class="border-b border-gray-200 dark:border-white/10">
+        <nav class="-mb-px flex gap-x-2" aria-label="Tabs">
+          <NuxtLink
+            v-for="(tab, tabIdx) in navigation"
+            :key="tab.route"
+            :href="tab.route"
+            :class="[
+              currentNavigationIndex == tabIdx
+                ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-white/20 dark:hover:text-gray-300',
+              'group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium',
+            ]"
+            :aria-current="tab ? 'page' : undefined"
+          >
+            <component
+              :is="tab.icon"
+              :class="[
+                currentNavigationIndex == tabIdx
+                  ? 'text-blue-500 dark:text-blue-400'
+                  : 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400',
+                'mr-2 -ml-0.5 size-5',
+              ]"
+              aria-hidden="true"
+            />
+            <span>{{ tab.label }}</span>
+          </NuxtLink>
+        </nav>
+      </div>
+    </div>
+    <!-- content -->
+    <div class="mt-4 grow flex">
+      <NuxtPage />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  BuildingStorefrontIcon,
+  CodeBracketIcon,
+} from "@heroicons/vue/24/outline";
+
+const navigation: Array<NavigationItem & { icon: Component }> = [
+  {
+    label: $t("header.admin.settings.store"),
+    route: "/admin/settings",
+    prefix: "/admin/settings",
+    icon: BuildingStorefrontIcon,
+  },
+  {
+    label: $t("header.admin.settings.tokens"),
+    route: "/admin/settings/tokens",
+    prefix: "/admin/settings/tokens",
+    icon: CodeBracketIcon,
+  },
+];
+
+// const notifications = useNotifications();
+// const unreadNotifications = computed(() =>
+//   notifications.value.filter((e) => !e.read)
+// );
+
+const currentNavigationIndex = useCurrentNavigationIndex(navigation);
+</script>

pages/admin/settings/index.vue

@@ -1,68 +1,55 @@
 <template>
-  <div class="space-y-4">
+  <form class="space-y-4" @submit.prevent="() => saveSettings()">
-    <div class="sm:flex sm:items-center">
+    <div class="pb-4 border-b border-zinc-700">
-      <div class="sm:flex-auto">
+      <h2 class="text-xl font-semibold text-zinc-100">
-        <h1 class="text-2xl font-semibold text-zinc-100">
+        {{ $t("settings.admin.store.title") }}
-          {{ $t("settings.admin.title") }}
+      </h2>
-        </h1>
+
-        <p class="mt-2 text-base text-zinc-400">
+      <h3 class="text-base font-medium text-zinc-400 mb-3 m-x-0">
-          {{ $t("settings.admin.description") }}
+        {{ $t("settings.admin.store.showGamePanelTextDecoration") }}
-        </p>
+      </h3>
-      </div>
+      <ul class="flex gap-3">
+        <li class="inline-block">
+          <OptionWrapper
+            :active="showGamePanelTextDecoration"
+            @click="setShowTitleDescription(true)"
+          >
+            <div class="flex">
+              <GamePanel
+                :animate="false"
+                :game="game"
+                :default-placeholder="true"
+              />
+            </div>
+          </OptionWrapper>
+        </li>
+        <li class="inline-block">
+          <OptionWrapper
+            :active="!showGamePanelTextDecoration"
+            @click="setShowTitleDescription(false)"
+          >
+            <div class="flex">
+              <GamePanel
+                :game="game"
+                :show-title-description="false"
+                :animate="false"
+                :default-placeholder="true"
+              />
+            </div>
+          </OptionWrapper>
+        </li>
+      </ul>
     </div>
 
-    <form class="space-y-4" @submit.prevent="() => saveSettings()">
+    <LoadingButton
-      <div class="py-6 border-y border-zinc-700">
+      type="submit"
-        <h2 class="text-xl font-semibold text-zinc-100">
+      class="inline-flex w-full shadow-sm sm:w-auto"
-          {{ $t("settings.admin.store.title") }}
+      :loading="saving"
-        </h2>
+      :disabled="!allowSave"
-
+    >
-        <h3 class="text-base font-medium text-zinc-400 mb-3 m-x-0">
+      {{ allowSave ? $t("common.save") : $t("common.saved") }}
-          {{ $t("settings.admin.store.showGamePanelTextDecoration") }}
+    </LoadingButton>
-        </h3>
+  </form>
-        <ul class="flex gap-3">
-          <li class="inline-block">
-            <OptionWrapper
-              :active="showGamePanelTextDecoration"
-              @click="setShowTitleDescription(true)"
-            >
-              <div class="flex">
-                <GamePanel
-                  :animate="false"
-                  :game="game"
-                  :default-placeholder="true"
-                />
-              </div>
-            </OptionWrapper>
-          </li>
-          <li class="inline-block">
-            <OptionWrapper
-              :active="!showGamePanelTextDecoration"
-              @click="setShowTitleDescription(false)"
-            >
-              <div class="flex">
-                <GamePanel
-                  :game="game"
-                  :show-title-description="false"
-                  :animate="false"
-                  :default-placeholder="true"
-                />
-              </div>
-            </OptionWrapper>
-          </li>
-        </ul>
-      </div>
-
-      <LoadingButton
-        type="submit"
-        class="inline-flex w-full shadow-sm sm:w-auto"
-        :loading="saving"
-        :disabled="!allowSave"
-      >
-        {{ allowSave ? $t("common.save") : $t("common.saved") }}
-      </LoadingButton>
-    </form>
-  </div>
 </template>
 
 <script setup lang="ts">

pages/admin/settings/tokens.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="w-full">
+    <div class="w-full flex justify-between items-center">
+      <div>
+        <h2
+          class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
+        >
+          {{ $t("account.token.title") }}
+        </h2>
+        <p
+          class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
+        >
+          {{ $t("account.token.subheader") }}
+        </p>
+      </div>
+      <div>
+        <LoadingButton :loading="false" @click="() => (createOpen = true)">
+          {{ $t("common.create") }}
+        </LoadingButton>
+      </div>
+    </div>
+
+    <div
+      v-if="newToken"
+      class="mt-4 rounded-md p-4 bg-green-500/10 outline outline-green-500/20"
+    >
+      <div class="flex">
+        <div class="shrink-0">
+          <CheckCircleIcon class="size-5 text-green-400" aria-hidden="true" />
+        </div>
+        <div class="ml-3">
+          <p class="text-sm font-medium text-green-300">
+            {{ $t("account.token.success") }}
+          </p>
+          <p class="text-xs text-green-300/70">
+            {{ $t("account.token.successNote") }}
+          </p>
+          <p
+            class="mt-2 bg-zinc-950 px-3 py-2 font-mono text-zinc-400 rounded-xl"
+          >
+            {{ newToken }}
+          </p>
+        </div>
+        <div class="ml-auto pl-3">
+          <div class="-mx-1.5 -my-1.5">
+            <button
+              type="button"
+              class="inline-flex rounded-md bg-green-50 p-1.5 text-green-500 hover:bg-green-100 focus-visible:ring-2 focus-visible:ring-green-600 focus-visible:ring-offset-2 focus-visible:ring-offset-green-50 focus-visible:outline-hidden dark:bg-transparent dark:text-green-400 dark:hover:bg-green-500/10 dark:focus-visible:ring-green-500 dark:focus-visible:ring-offset-1 dark:focus-visible:ring-offset-green-900"
+              @click="() => (newToken = undefined)"
+            >
+              <span class="sr-only">{{ $t("common.close") }}</span>
+              <XMarkIcon class="size-5" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="mt-8 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm"
+    >
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-zinc-800">
+          <thead>
+            <tr class="bg-zinc-800/50">
+              <th
+                scope="col"
+                class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-6"
+              >
+                {{ $t("common.name") }}
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                {{ $t("account.token.acls") }}
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                {{ $t("account.token.expiry") }}
+              </th>
+              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                <span class="sr-only">{{ $t("actions") }}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-zinc-800">
+            <tr
+              v-for="(token, tokenIdx) in tokens"
+              :key="token.id"
+              class="transition-colors duration-150 hover:bg-zinc-800/50"
+            >
+              <td
+                class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-6"
+              >
+                {{ token.name }}
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                <div class="flex flex-wrap gap-2">
+                  <span
+                    v-for="acl in token.acls"
+                    :key="acl"
+                    class="inline-flex items-center gap-x-1 rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/20"
+                  >
+                    {{ acl }}
+                  </span>
+                </div>
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                <RelativeTime v-if="token.expiresAt" :date="token.expiresAt" />
+                <span v-else>{{ $t("account.token.noExpiry") }}</span>
+              </td>
+              <td
+                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
+              >
+                <button
+                  class="inline-flex items-center rounded-md bg-red-400/10 px-2 py-1 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20 transition-all duration-200 hover:bg-red-400/20 hover:scale-105 active:scale-95"
+                  @click="() => revokeToken(tokenIdx)"
+                >
+                  {{ $t("account.token.revoke") }}
+                  <span class="sr-only">
+                    {{ $t("chars.srComma", [token.name]) }}
+                  </span>
+                </button>
+              </td>
+            </tr>
+            <tr v-if="tokens.length === 0">
+              <td colspan="5" class="py-8 text-center text-sm text-zinc-400">
+                {{ $t("account.token.noTokens") }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <ModalCreateToken
+      v-model="createOpen"
+      :acls="acls"
+      :loading="createLoading"
+      :suggested-name="suggestedName"
+      :suggested-acls="suggestedAcls"
+      @create="(name, acls, expiry) => createToken(name, acls, expiry)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ArkErrors, type } from "arktype";
+import { DateTime, type DurationLike } from "luxon";
+import { CheckCircleIcon, XMarkIcon } from "@heroicons/vue/20/solid";
+
+definePageMeta({
+  layout: "admin",
+});
+
+const tokens = ref(await $dropFetch("/api/v1/admin/token"));
+const acls = await $dropFetch("/api/v1/admin/token/acls");
+
+const createOpen = ref(false);
+const createLoading = ref(false);
+
+const newToken = ref<string | undefined>();
+
+const suggestedName = ref();
+const suggestedAcls = ref<string[]>([]);
+
+const payloadParser = type({
+  name: "string?",
+  acls: "string[]?",
+});
+
+const route = useRoute();
+if (route.query.payload) {
+  try {
+    const rawPayload = JSON.parse(atob(route.query.payload.toString()));
+    const payload = payloadParser(rawPayload);
+    if (payload instanceof ArkErrors) throw payload;
+    suggestedName.value = payload.name;
+    suggestedAcls.value = payload.acls ?? [];
+    createOpen.value = true;
+  } catch {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Failed to parse the token create payload.",
+      fatal: true,
+    });
+  }
+}
+
+async function createToken(
+  name: string,
+  acls: string[],
+  expiry: DurationLike | undefined,
+) {
+  createLoading.value = true;
+  try {
+    const result = await $dropFetch("/api/v1/admin/token", {
+      method: "POST",
+      body: {
+        name,
+        acls,
+        expiry: expiry ? DateTime.now().plus(expiry) : undefined,
+      },
+      failTitle: "Failed to create API token.",
+    });
+    console.log(result);
+    newToken.value = result.token;
+    tokens.value.push(result);
+  } catch {
+    /* empty */
+  }
+  createOpen.value = false;
+  createLoading.value = false;
+}
+
+async function revokeToken(index: number) {
+  const token = tokens.value[index];
+  if (!token) return;
+
+  await $dropFetch("/api/v1/admin/token/:id", {
+    method: "DELETE",
+    params: {
+      id: token.id,
+    },
+    failTitle: "Failed to revoke token.",
+  });
+
+  tokens.value.splice(index, 1);
+}
+</script>

prisma/migrations/20250823005001_add_api_token_expiry/migration.sql

@@ -0,0 +1,8 @@
+-- DropIndex
+DROP INDEX "GameTag_name_idx";
+
+-- AlterTable
+ALTER TABLE "APIToken" ADD COLUMN     "expiresAt" TIMESTAMP(3);
+
+-- CreateIndex
+CREATE INDEX "GameTag_name_idx" ON "GameTag" USING GIST ("name" gist_trgm_ops(siglen=32));

prisma/models/auth.prisma

@@ -45,6 +45,8 @@ model APIToken {
 
     acls String[]
 
+    expiresAt DateTime?
+
     @@index([token])
 }
 

server/api/v1/admin/game/[id]/index.get.ts

@@ -17,11 +17,8 @@ export default defineEventHandler(async (h3) => {
         orderBy: {
           versionIndex: "asc",
         },
-        select: {
+        omit: {
-          versionIndex: true,
+          dropletManifest: true,
-          versionName: true,
-          platform: true,
-          delta: true,
         },
       },
       tags: true,

server/api/v1/admin/game/version/index.patch.ts

@@ -18,30 +18,55 @@ export default defineEventHandler<{ body: typeof UpdateVersionOrder }>(
     const body = await readDropValidatedBody(h3, UpdateVersionOrder);
     const gameId = body.id;
     // We expect an array of the version names for this game
-    const versions = body.versions;
+    const unsortedVersions = await prisma.gameVersion.findMany({
+      where: {
+        versionName: { in: body.versions },
+      },
+      select: {
+        versionName: true,
+        versionIndex: true,
+        delta: true,
+        platform: true,
+      },
+    });
 
-    const newVersions = await prisma.$transaction(
+    const versions = body.versions
-      versions.map((versionName, versionIndex) =>
+      .map((e) => unsortedVersions.find((v) => v.versionName === e))
+      .filter((e) => e !== undefined);
+
+    if (versions.length !== unsortedVersions.length)
+      throw createError({
+        statusCode: 500,
+        statusMessage: "Sorting versions yielded less results, somehow.",
+      });
+
+    // Validate the new order
+    const has: { [key: string]: boolean } = {};
+    for (const version of versions) {
+      if (version.delta && !has[version.platform])
+        throw createError({
+          statusCode: 400,
+          statusMessage: `"${version.versionName}" requires a base version to apply the delta to.`,
+        });
+      has[version.platform] = true;
+    }
+
+    await prisma.$transaction(
+      versions.map((version, versionIndex) =>
         prisma.gameVersion.update({
           where: {
             gameId_versionName: {
               gameId: gameId,
-              versionName: versionName,
+              versionName: version.versionName,
             },
           },
           data: {
             versionIndex: versionIndex,
           },
-          select: {
-            versionIndex: true,
-            versionName: true,
-            platform: true,
-            delta: true,
-          },
         }),
       ),
     );
 
-    return newVersions;
+    return versions;
   },
 );

server/api/v1/admin/token/[id]/index.delete.ts

@@ -0,0 +1,23 @@
+import { APITokenMode } from "~/prisma/client/enums";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, []); // No ACLs only allows session authentication
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const id = h3.context.params?.id;
+  if (!id)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "No id in router params",
+    });
+
+  const deleted = await prisma.aPIToken.delete({
+    where: { id: id, mode: APITokenMode.System },
+  })!;
+  if (!deleted)
+    throw createError({ statusCode: 404, statusMessage: "Token not found" });
+
+  return;
+});

server/api/v1/admin/token/acls.get.ts

@@ -0,0 +1,9 @@
+import aclManager from "~/server/internal/acls";
+import { systemACLDescriptions } from "~/server/internal/acls/descriptions";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, []); // No ACLs only allows session authentication
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  return systemACLDescriptions;
+});

server/api/v1/admin/token/index.get.ts

@@ -0,0 +1,15 @@
+import { APITokenMode } from "~/prisma/client/enums";
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, []); // No ACLs only allows session authentication
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const tokens = await prisma.aPIToken.findMany({
+    where: { mode: APITokenMode.System },
+    omit: { token: true },
+  });
+
+  return tokens;
+});

server/api/v1/admin/token/index.post.ts

@@ -0,0 +1,38 @@
+import { type } from "arktype";
+import { APITokenMode } from "~/prisma/client/enums";
+import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
+import aclManager, { systemACLs } from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+const CreateToken = type({
+  name: "string",
+  acls: "string[] > 0",
+  expiry: "string.date.iso.parse?",
+}).configure(throwingArktype);
+
+export default defineEventHandler(async (h3) => {
+  const allowed = await aclManager.allowSystemACL(h3, []); // No ACLs only allows session authentication
+  if (!allowed) throw createError({ statusCode: 403 });
+
+  const body = await readDropValidatedBody(h3, CreateToken);
+
+  const invalidACLs = body.acls.filter(
+    (e) => systemACLs.findIndex((v) => e == v) == -1,
+  );
+  if (invalidACLs.length > 0)
+    throw createError({
+      statusCode: 400,
+      statusMessage: `Invalid ACLs: ${invalidACLs.join(", ")}`,
+    });
+
+  const token = await prisma.aPIToken.create({
+    data: {
+      mode: APITokenMode.System,
+      name: body.name,
+      acls: body.acls,
+      expiresAt: body.expiry ?? null,
+    },
+  });
+
+  return token;
+});

server/api/v1/token.get.ts

@@ -0,0 +1,6 @@
+import aclManager from "~/server/internal/acls";
+
+export default defineEventHandler(async (h3) => {
+  const acls = await aclManager.fetchAllACLs(h3);
+  return acls;
+});

server/api/v1/user/token/index.post.ts

@@ -1,30 +1,22 @@
+import { type } from "arktype";
 import { APITokenMode } from "~/prisma/client/enums";
+import { readDropValidatedBody, throwingArktype } from "~/server/arktype";
 import aclManager, { userACLs } from "~/server/internal/acls";
 import prisma from "~/server/internal/db/database";
 
+const CreateToken = type({
+  name: "string",
+  acls: "string[] > 0",
+  expiry: "string.date.iso.parse?",
+}).configure(throwingArktype);
+
 export default defineEventHandler(async (h3) => {
   const userId = await aclManager.getUserIdACL(h3, []); // No ACLs only allows session authentication
   if (!userId) throw createError({ statusCode: 403 });
 
-  const body = await readBody(h3);
+  const body = await readDropValidatedBody(h3, CreateToken);
-  const name: string = body.name;
-  const acls: string[] = body.acls;
 
-  if (!name || typeof name !== "string")
+  const invalidACLs = body.acls.filter(
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Token name required",
-    });
-  if (!acls || !Array.isArray(acls))
-    throw createError({ statusCode: 400, statusMessage: "ACLs required" });
-
-  if (acls.length == 0)
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Token requires more than zero ACLs",
-    });
-
-  const invalidACLs = acls.filter(
     (e) => userACLs.findIndex((v) => e == v) == -1,
   );
   if (invalidACLs.length > 0)
@@ -36,9 +28,10 @@ export default defineEventHandler(async (h3) => {
   const token = await prisma.aPIToken.create({
     data: {
       mode: APITokenMode.User,
-      name: name,
+      name: body.name,
       userId: userId,
-      acls: acls,
+      acls: body.acls,
+      expiresAt: body.expiry ?? null,
     },
   });
 

server/internal/acls/descriptions.ts

@@ -36,7 +36,7 @@ export const userACLDescriptions: ObjectFromList<typeof userACLs> = {
   "library:remove": "Remove a game from your library.",
 
   "clients:read": "Read the clients connected to this account",
-  "clients:revoke": "",
+  "clients:revoke": "Remove clients connected to this account",
 
   "news:read": "Read the server's news articles.",