mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-22 12:41:10 +10:00
update to nuxt 4
This commit is contained in:
DecDuck
115
app/pages/account.vue
Normal file
115
app/pages/account.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="flex flex-col lg:flex-row grow w-screen">
|
||||
<TransitionRoot as="template" :show="sidebarOpen">
|
||||
<Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-zinc-900/80" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 flex">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="-translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 left-full flex w-16 justify-center pt-5"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="sr-only">{{
|
||||
$t("userHeader.closeSidebar")
|
||||
}}</span>
|
||||
<XMarkIcon class="size-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="bg-zinc-900 w-full">
|
||||
<AccountSidebar />
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div
|
||||
class="hidden lg:flex lg:inset-y-0 lg:z-50 lg:shrink-0 lg:basis-[18rem] lg:flex-col lg:border-r-2 lg:border-zinc-800"
|
||||
>
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<AccountSidebar />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="block flex items-center gap-x-2 bg-zinc-950 px-2 py-1 shadow-xs sm:px-4 lg:hidden border-b border-zinc-700"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="sr-only">{{ $t("header.openSidebar") }}</span>
|
||||
<Bars3Icon class="size-6" aria-hidden="true" />
|
||||
</button>
|
||||
<div
|
||||
class="flex-1 text-sm/6 font-semibold uppercase font-display text-zinc-400"
|
||||
>
|
||||
{{ $t("account.title") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6 w-full">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from "@headlessui/vue";
|
||||
import { Bars3Icon, XMarkIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const sidebarOpen = ref(false);
|
||||
|
||||
router.afterEach(() => {
|
||||
sidebarOpen.value = false;
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: t("account.title"),
|
||||
});
|
||||
</script>
|
||||
149
app/pages/account/devices.vue
Normal file
149
app/pages/account/devices.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||
<h2
|
||||
class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
|
||||
>
|
||||
{{ $t("account.devices.title") }}
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
|
||||
>
|
||||
{{ $t("account.devices.subheader") }}
|
||||
</p>
|
||||
</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.devices.platform") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("account.devices.capabilities") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("account.devices.lastConnected") }}
|
||||
</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="client in clients"
|
||||
:key="client.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"
|
||||
>
|
||||
{{ client.name }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-1 text-xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-400/20"
|
||||
>
|
||||
{{ client.platform }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="capability in client.capabilities"
|
||||
:key="capability"
|
||||
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"
|
||||
>
|
||||
<CheckIcon class="size-3" />
|
||||
{{ capability }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
<RelativeTime :date="client.lastConnected" />
|
||||
</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="() => revokeClientWrapper(client.id)"
|
||||
>
|
||||
{{ $t("account.devices.revoke") }}
|
||||
<span class="sr-only">
|
||||
{{ $t("chars.srComma", [client.name]) }}
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="clients.length === 0">
|
||||
<td colspan="5" class="py-8 text-center text-sm text-zinc-400">
|
||||
{{ $t("account.devices.noDevices") }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CheckIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore pending https://github.com/nitrojs/nitro/issues/2758
|
||||
const clients = ref(await $dropFetch("/api/v1/user/client"));
|
||||
const { t } = useI18n();
|
||||
|
||||
async function revokeClient(id: string) {
|
||||
await $dropFetch(`/api/v1/user/client/${id}`, { method: "DELETE" });
|
||||
}
|
||||
|
||||
// clients.value.push({
|
||||
// id: "example-client",
|
||||
// userId: "example-user",
|
||||
// name: "Example Client",
|
||||
// platform: "Windows",
|
||||
// capabilities: ["TrackPlaytime"],
|
||||
// lastConnected: new Date().toISOString(),
|
||||
// });
|
||||
|
||||
function revokeClientWrapper(id: string) {
|
||||
revokeClient(id)
|
||||
.then(() => {
|
||||
const index = clients.value.findIndex((e) => e.id == id);
|
||||
clients.value.splice(index, 1);
|
||||
})
|
||||
.catch((e) => {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.revokeClient"),
|
||||
description: t("errors.revokeClientFull", String(e)),
|
||||
},
|
||||
(_, c) => c(),
|
||||
);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
94
app/pages/account/index.vue
Normal file
94
app/pages/account/index.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<!-- go away eslint -->
|
||||
<div />
|
||||
<!-- I don't want to localize this -->
|
||||
<!--
|
||||
<div>
|
||||
<div v-if="user" class="mx-auto max-w-2xl lg:mx-0">
|
||||
<h2
|
||||
class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
|
||||
>
|
||||
Hello, {{ user.displayName }}!
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
|
||||
>
|
||||
Welcome to your Drop account. Here you can view and manage your account
|
||||
information.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="user" class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div
|
||||
class="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50"
|
||||
>
|
||||
<div class="p-6">
|
||||
<h3 class="text-base font-semibold text-zinc-100">
|
||||
Account Information
|
||||
</h3>
|
||||
<dl class="mt-4 space-y-4">
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-zinc-400">Username</dt>
|
||||
<dd class="text-sm text-zinc-100">{{ user.username }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-zinc-400">Email</dt>
|
||||
<dd class="text-sm text-zinc-100">{{ user.email }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-zinc-400">Account Type</dt>
|
||||
<dd>
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset',
|
||||
user.admin
|
||||
? 'bg-blue-400/10 text-blue-400 ring-blue-400/20'
|
||||
: 'bg-zinc-400/10 text-zinc-400 ring-zinc-400/20',
|
||||
]"
|
||||
>
|
||||
{{ user.admin ? "Administrator" : "Standard User" }}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50"
|
||||
>
|
||||
<div class="p-6">
|
||||
<h3 class="text-base font-semibold text-zinc-100">Account Actions</h3>
|
||||
<div class="mt-4 space-y-3">
|
||||
<button
|
||||
type="button"
|
||||
class="w-full inline-flex items-center justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full inline-flex items-center justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
|
||||
>
|
||||
Update Email
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex items-center justify-center min-h-[200px]">
|
||||
<div class="text-zinc-400">Loading account information...</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: "default",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Account",
|
||||
});
|
||||
</script>
|
||||
150
app/pages/account/notifications.vue
Normal file
150
app/pages/account/notifications.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="border-b border-zinc-800 pb-4 w-full">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<h2
|
||||
class="text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
|
||||
>
|
||||
{{ $t("account.notifications.notifications") }}
|
||||
</h2>
|
||||
<button
|
||||
:disabled="notifications.length === 0"
|
||||
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-zinc-800 disabled:hover:scale-100 disabled:hover:shadow-none"
|
||||
@click="markAllAsRead"
|
||||
>
|
||||
<CheckIcon class="size-4" />
|
||||
{{ $t("account.notifications.markAllAsRead") }}
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
|
||||
>
|
||||
{{ $t("account.notifications.desc") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-4">
|
||||
<div
|
||||
v-for="notification in notifications"
|
||||
:key="notification.id"
|
||||
class="group relative overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50"
|
||||
:class="{ 'opacity-75': notification.read }"
|
||||
>
|
||||
<div class="p-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-base font-semibold text-zinc-100">
|
||||
{{ notification.title }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
{{ notification.description }}
|
||||
</p>
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
<NuxtLink
|
||||
v-for="[name, href] in notification.actions.map((v) =>
|
||||
v.split('|'),
|
||||
)"
|
||||
:key="href"
|
||||
:href="href"
|
||||
class="inline-flex items-center 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 transition-all duration-200 hover:bg-blue-400/20 hover:scale-105 active:scale-95"
|
||||
>
|
||||
{{ name }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center gap-x-2">
|
||||
<span class="text-xs text-zinc-500">
|
||||
<RelativeTime :date="notification.created" />
|
||||
</span>
|
||||
<button
|
||||
v-if="!notification.read"
|
||||
type="button"
|
||||
class="inline-flex gap-x-1 items-center rounded-md bg-zinc-400/10 px-2 py-1 text-xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-400/20 transition-all duration-200 hover:bg-zinc-400/20 hover:scale-105 active:scale-95"
|
||||
@click="markAsRead(notification.id)"
|
||||
>
|
||||
<CheckIcon class="size-3" />
|
||||
{{ $t("account.notifications.markAsRead") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex gap-x-1 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="deleteNotification(notification.id)"
|
||||
>
|
||||
<TrashIcon class="size-3" />
|
||||
{{ $t("delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="notifications.length === 0"
|
||||
class="rounded-xl border border-zinc-800 bg-zinc-900 p-8 text-center"
|
||||
>
|
||||
<p class="text-sm text-zinc-400">
|
||||
{{ $t("account.notifications.none") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CheckIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import type { NotificationModel } from "~~/prisma/client/models";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
|
||||
definePageMeta({
|
||||
layout: "default",
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
useHead({
|
||||
title: t("account.notifications.title"),
|
||||
});
|
||||
|
||||
// Fetch notifications
|
||||
const notifications = ref<SerializeObject<NotificationModel>[]>([]);
|
||||
|
||||
async function fetchNotifications() {
|
||||
const { data } = await useFetch("/api/v1/notifications");
|
||||
notifications.value = data.value || [];
|
||||
}
|
||||
|
||||
// Initial fetch
|
||||
await fetchNotifications();
|
||||
|
||||
// Mark a notification as read
|
||||
async function markAsRead(id: string) {
|
||||
await $dropFetch(`/api/v1/notifications/${id}/read`, { method: "POST" });
|
||||
const notification = notifications.value.find(
|
||||
(n: SerializeObject<NotificationModel>) => n.id === id,
|
||||
);
|
||||
if (notification) {
|
||||
notification.read = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Mark all notifications as read
|
||||
async function markAllAsRead() {
|
||||
await $dropFetch("/api/v1/notifications/readall", { method: "POST" });
|
||||
notifications.value.forEach(
|
||||
(notification: SerializeObject<NotificationModel>) => {
|
||||
notification.read = true;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// Delete a notification
|
||||
async function deleteNotification(id: string) {
|
||||
await $dropFetch(`/api/v1/notifications/${id}`, { method: "DELETE" });
|
||||
const index = notifications.value.findIndex(
|
||||
(n: SerializeObject<NotificationModel>) => n.id === id,
|
||||
);
|
||||
if (index !== -1) {
|
||||
notifications.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
3
app/pages/account/security.vue
Normal file
3
app/pages/account/security.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
1
app/pages/account/settings.vue
Normal file
1
app/pages/account/settings.vue
Normal file
@ -0,0 +1 @@
|
||||
<template><div></div></template>
|
||||
229
app/pages/account/tokens.vue
Normal file
229
app/pages/account/tokens.vue
Normal file
@ -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,
|
||||
message: "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>
|
||||
11
app/pages/admin/index.vue
Normal file
11
app/pages/admin/index.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template><div /></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Home",
|
||||
});
|
||||
</script>
|
||||
574
app/pages/admin/library/g/[id]/import.vue
Normal file
574
app/pages/admin/library/g/[id]/import.vue
Normal file
@ -0,0 +1,574 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<Listbox
|
||||
as="div"
|
||||
:model-value="currentlySelectedVersion"
|
||||
class="max-w-lg"
|
||||
@update:model-value="(value) => updateCurrentlySelectedVersion(value)"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100">{{
|
||||
$t("library.admin.import.version.version")
|
||||
}}</ListboxLabel>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="relative w-full cursor-default rounded-md bg-zinc-950 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
>
|
||||
<span v-if="currentlySelectedVersion != -1" class="block truncate">{{
|
||||
versions[currentlySelectedVersion]
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-zinc-600">{{
|
||||
$t("library.admin.import.selectDir")
|
||||
}}</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-zinc-800 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="(version, versionIdx) in versions"
|
||||
:key="version"
|
||||
v-slot="{ active, selected }"
|
||||
as="template"
|
||||
:value="versionIdx"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active ? 'bg-blue-600 text-white' : 'text-zinc-100',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
selected ? 'font-semibold' : 'font-normal',
|
||||
'block truncate',
|
||||
]"
|
||||
>{{ version }}</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 v-if="versionGuesses" class="flex flex-col gap-4">
|
||||
<!-- version name -->
|
||||
<div class="max-w-lg">
|
||||
<label
|
||||
for="startup"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Version name</label
|
||||
>
|
||||
<p class="text-zinc-400 text-xs">
|
||||
Shown to users when selecting what version to install.
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="name"
|
||||
v-model="versionSettings.name"
|
||||
name="name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="my version name"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-950 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800 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>
|
||||
|
||||
<!-- install command -->
|
||||
<div class="max-w-lg">
|
||||
<label
|
||||
for="startup"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("library.admin.import.version.setupCmd") }}</label
|
||||
>
|
||||
<p class="text-zinc-400 text-xs">
|
||||
{{ $t("library.admin.import.version.setupDesc") }}
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<div
|
||||
class="flex w-fit rounded-md shadow-sm bg-zinc-950 ring-1 ring-inset ring-zinc-800 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
|
||||
>
|
||||
<span
|
||||
class="flex select-none items-center pl-3 text-zinc-500 sm:text-sm"
|
||||
>
|
||||
{{ $t("library.admin.import.version.installDir") }}
|
||||
</span>
|
||||
<PreloadSelector
|
||||
:value="versionSettings.install"
|
||||
:guesses="versionGuesses"
|
||||
@update="(v) => updateInstallCommand(v)"
|
||||
/>
|
||||
<input
|
||||
id="startup"
|
||||
v-model="versionSettings.installArgs"
|
||||
type="text"
|
||||
name="startup"
|
||||
class="border-l border-zinc-700 block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
placeholder="--setup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- setup mode -->
|
||||
<SwitchGroup as="div" class="max-w-lg flex items-center justify-between">
|
||||
<span class="flex flex-grow flex-col">
|
||||
<SwitchLabel
|
||||
as="span"
|
||||
class="text-sm font-medium leading-6 text-zinc-100"
|
||||
passive
|
||||
>{{ $t("library.admin.import.version.setupMode") }}</SwitchLabel
|
||||
>
|
||||
<SwitchDescription as="span" class="text-sm text-zinc-400">{{
|
||||
$t("library.admin.import.version.setupModeDesc")
|
||||
}}</SwitchDescription>
|
||||
</span>
|
||||
<Switch
|
||||
v-model="versionSettings.onlySetup"
|
||||
:class="[
|
||||
versionSettings.onlySetup ? 'bg-blue-600' : 'bg-zinc-800',
|
||||
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
:class="[
|
||||
versionSettings.onlySetup ? 'translate-x-5' : 'translate-x-0',
|
||||
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
|
||||
]"
|
||||
/>
|
||||
</Switch>
|
||||
</SwitchGroup>
|
||||
<!-- launch commands -->
|
||||
<div class="relative max-w-3xl">
|
||||
<label
|
||||
for="startup"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("library.admin.import.version.launchCmd") }}</label
|
||||
>
|
||||
<p class="text-zinc-400 text-xs">
|
||||
{{ $t("library.admin.import.version.launchDesc") }}
|
||||
</p>
|
||||
<div class="mt-2 ml-4 flex flex-col gap-y-2 items-start">
|
||||
<div
|
||||
v-for="(launch, launchIdx) in versionSettings.launches"
|
||||
:key="launchIdx"
|
||||
class="inline-flex items-center gap-x-2"
|
||||
>
|
||||
<input
|
||||
id="launch-name"
|
||||
v-model="launch.name"
|
||||
type="text"
|
||||
name="launch-name"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-950 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
placeholder="My Launch Command"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="flex w-full rounded-md shadow-sm bg-zinc-950 ring-1 ring-inset ring-zinc-800 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
|
||||
>
|
||||
<span
|
||||
class="flex select-none items-center pl-3 text-zinc-500 sm:text-sm"
|
||||
>{{ $t("library.admin.import.version.installDir") }}</span
|
||||
>
|
||||
<PreloadSelector
|
||||
:value="launch.launchCommand"
|
||||
:guesses="versionGuesses"
|
||||
@update="(v) => updateLaunchCommand(launchIdx, v)"
|
||||
/>
|
||||
<input
|
||||
id="startup"
|
||||
v-model="launch.launchArgs"
|
||||
type="text"
|
||||
name="startup"
|
||||
class="border-l border-zinc-700 block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
placeholder="--launch"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="transition bg-zinc-800 rounded-sm aspect-square p-1 text-zinc-600 hover:text-red-600 hover:bg-red-600/20"
|
||||
@click="() => versionSettings.launches!.splice(launchIdx, 1)"
|
||||
>
|
||||
<TrashIcon class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="versionSettings.launches!.length == 0"
|
||||
class="uppercase font-display font-bold text-zinc-500 text-xs"
|
||||
>
|
||||
No launch commands
|
||||
</p>
|
||||
|
||||
<LoadingButton
|
||||
:loading="false"
|
||||
class="inline-flex items-center gap-x-4"
|
||||
@click="
|
||||
() =>
|
||||
versionSettings.launches!.push({
|
||||
name: '',
|
||||
description: '',
|
||||
launchCommand: '',
|
||||
launchArgs: '',
|
||||
})
|
||||
"
|
||||
>
|
||||
Add new <PlusIcon class="size-5" />
|
||||
</LoadingButton>
|
||||
</div>
|
||||
<div
|
||||
v-if="versionSettings.onlySetup"
|
||||
class="absolute inset-0 bg-zinc-900/50"
|
||||
/>
|
||||
</div>
|
||||
<!-- uninstall command -->
|
||||
<div class="max-w-lg">
|
||||
<label
|
||||
for="startup"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Uninstall command</label
|
||||
>
|
||||
<p class="text-zinc-400 text-xs">
|
||||
Executable to be run on uninstalling a game. Useful for installer-only games.
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<div
|
||||
class="flex w-fit rounded-md shadow-sm bg-zinc-950 ring-1 ring-inset ring-zinc-800 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"
|
||||
>
|
||||
<span
|
||||
class="flex select-none items-center pl-3 text-zinc-500 sm:text-sm"
|
||||
>
|
||||
{{ $t("library.admin.import.version.installDir") }}
|
||||
</span>
|
||||
<PreloadSelector
|
||||
:value="versionSettings.uninstall"
|
||||
:guesses="versionGuesses"
|
||||
@update="(v) => updateUninstallCommand(v)"
|
||||
/>
|
||||
<input
|
||||
id="startup"
|
||||
v-model="versionSettings.uninstallArgs"
|
||||
type="text"
|
||||
name="startup"
|
||||
class="border-l border-zinc-700 block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
|
||||
placeholder="--uninstall"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PlatformSelector
|
||||
v-model="versionSettings.platform"
|
||||
class="max-w-lg"
|
||||
:platforms="allPlatforms"
|
||||
>
|
||||
{{ $t("library.admin.import.version.platform") }}
|
||||
</PlatformSelector>
|
||||
<SwitchGroup as="div" class="flex items-center justify-between max-w-lg">
|
||||
<span class="flex flex-grow flex-col">
|
||||
<SwitchLabel
|
||||
as="span"
|
||||
class="text-sm font-medium leading-6 text-zinc-100"
|
||||
passive
|
||||
>
|
||||
{{ $t("library.admin.import.version.updateMode") }}
|
||||
</SwitchLabel>
|
||||
<SwitchDescription as="span" class="text-sm text-zinc-400">
|
||||
{{ $t("library.admin.import.version.updateModeDesc") }}
|
||||
</SwitchDescription>
|
||||
</span>
|
||||
<Switch
|
||||
v-model="versionSettings.delta"
|
||||
:class="[
|
||||
versionSettings.delta ? 'bg-blue-600' : 'bg-zinc-800',
|
||||
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
:class="[
|
||||
versionSettings.delta ? 'translate-x-5' : 'translate-x-0',
|
||||
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
|
||||
]"
|
||||
/>
|
||||
</Switch>
|
||||
</SwitchGroup>
|
||||
<Disclosure v-slot="{ open }" as="div" class="py-2 max-w-lg">
|
||||
<dt>
|
||||
<DisclosureButton
|
||||
class="border-b border-zinc-600 pb-2 flex w-full items-start justify-between text-left text-zinc-100"
|
||||
>
|
||||
<span class="text-base/7 font-semibold">
|
||||
{{ $t("library.admin.import.version.advancedOptions") }}
|
||||
</span>
|
||||
<span class="ml-6 flex h-7 items-center">
|
||||
<ChevronUpIcon v-if="!open" class="size-6" aria-hidden="true" />
|
||||
<ChevronDownIcon v-else class="size-6" aria-hidden="true" />
|
||||
</span>
|
||||
</DisclosureButton>
|
||||
</dt>
|
||||
<DisclosurePanel
|
||||
as="dd"
|
||||
class="bg-zinc-950/30 p-3 rounded-b-lg mt-2 flex flex-col gap-y-4"
|
||||
>
|
||||
<!-- UMU launcher configuration -->
|
||||
<div
|
||||
v-if="versionSettings.platform == 'Linux'"
|
||||
class="flex flex-col gap-y-4"
|
||||
>
|
||||
<SwitchGroup as="div" class="flex items-center justify-between">
|
||||
<span class="flex flex-grow flex-col">
|
||||
<SwitchLabel
|
||||
as="span"
|
||||
class="text-sm font-medium leading-6 text-zinc-100"
|
||||
passive
|
||||
>
|
||||
{{ $t("library.admin.import.version.umuOverride") }}
|
||||
</SwitchLabel>
|
||||
<SwitchDescription as="span" class="text-sm text-zinc-400">
|
||||
{{ $t("library.admin.import.version.umuOverrideDesc") }}
|
||||
</SwitchDescription>
|
||||
</span>
|
||||
<Switch
|
||||
v-model="umuIdEnabled"
|
||||
:class="[
|
||||
umuIdEnabled ? 'bg-blue-600' : 'bg-zinc-800',
|
||||
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
:class="[
|
||||
umuIdEnabled ? 'translate-x-5' : 'translate-x-0',
|
||||
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
|
||||
]"
|
||||
/>
|
||||
</Switch>
|
||||
</SwitchGroup>
|
||||
<div>
|
||||
<label
|
||||
for="umu-id"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>
|
||||
{{ $t("library.admin.import.version.umuLauncherId") }}
|
||||
</label>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="umu-id"
|
||||
v-model="umuId"
|
||||
name="umu-id"
|
||||
type="text"
|
||||
autocomplete="umu-id"
|
||||
required
|
||||
:disabled="!umuIdEnabled"
|
||||
placeholder="umu-starcitizen"
|
||||
class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-950 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800 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>
|
||||
|
||||
<div v-else class="text-zinc-400">
|
||||
{{ $t("library.admin.import.version.noAdv") }}
|
||||
</div>
|
||||
</DisclosurePanel>
|
||||
</Disclosure>
|
||||
|
||||
<LoadingButton
|
||||
class="w-fit"
|
||||
:loading="importLoading"
|
||||
@click="startImport_wrapper"
|
||||
>
|
||||
{{ $t("library.admin.import.import") }}
|
||||
</LoadingButton>
|
||||
<div v-if="importError" class="mt-4 w-fit rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ importError }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="currentlySelectedVersion != -1"
|
||||
role="status"
|
||||
class="inline-flex text-zinc-100 font-display font-semibold items-center gap-x-4"
|
||||
>
|
||||
{{ $t("library.admin.import.version.loadingVersion") }}
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-6 h-6 text-transparent animate-spin fill-white"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
Switch,
|
||||
SwitchDescription,
|
||||
SwitchGroup,
|
||||
SwitchLabel,
|
||||
Disclosure,
|
||||
DisclosureButton,
|
||||
DisclosurePanel,
|
||||
} from "@headlessui/vue";
|
||||
import { XCircleIcon } from "@heroicons/vue/16/solid";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
import { PlusIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/solid";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { ImportVersion } from "~~/server/api/v1/admin/import/version/index.post";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const gameId = route.params.id.toString();
|
||||
const versions = await $dropFetch(
|
||||
`/api/v1/admin/import/version?id=${encodeURIComponent(gameId)}`,
|
||||
);
|
||||
const userPlatforms = await useAdminPlatforms();
|
||||
const allPlatforms = renderPlatforms(userPlatforms);
|
||||
const currentlySelectedVersion = ref(-1);
|
||||
const versionSettings = ref<Partial<typeof ImportVersion.infer>>({
|
||||
id: gameId,
|
||||
launches: [],
|
||||
});
|
||||
|
||||
const versionGuesses =
|
||||
ref<
|
||||
Array<SerializeObject<{ platform: PlatformRenderable; filename: string }>>
|
||||
>();
|
||||
|
||||
|
||||
function updateLaunchCommand(idx: number, value: string) {
|
||||
versionSettings.value.launches![idx].launchCommand = value;
|
||||
autosetPlatform(value);
|
||||
}
|
||||
|
||||
function updateInstallCommand(value: string) {
|
||||
versionSettings.value.install = value;
|
||||
autosetPlatform(value);
|
||||
}
|
||||
|
||||
function updateUninstallCommand(value: string) {
|
||||
versionSettings.value.uninstall = value;
|
||||
autosetPlatform(value);
|
||||
}
|
||||
|
||||
function autosetPlatform(value: string) {
|
||||
if (!versionGuesses.value) return;
|
||||
if (versionSettings.value.platform) return;
|
||||
const guessIndex = versionGuesses.value.findIndex(
|
||||
(e) => e.filename === value,
|
||||
);
|
||||
if (guessIndex == -1) return;
|
||||
versionSettings.value.platform =
|
||||
versionGuesses.value[guessIndex].platform.param;
|
||||
}
|
||||
|
||||
const umuIdEnabled = ref(false);
|
||||
const umuId = computed({
|
||||
get() {
|
||||
if (umuIdEnabled.value) return versionSettings.value.umuId;
|
||||
return undefined;
|
||||
},
|
||||
set(v) {
|
||||
if (umuIdEnabled.value && v) {
|
||||
versionSettings.value.umuId = v;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const importLoading = ref(false);
|
||||
const importError = ref<string | undefined>();
|
||||
|
||||
async function updateCurrentlySelectedVersion(value: number) {
|
||||
if (currentlySelectedVersion.value == value) return;
|
||||
currentlySelectedVersion.value = value;
|
||||
const version = versions[currentlySelectedVersion.value];
|
||||
const options = await $dropFetch(
|
||||
`/api/v1/admin/import/version/preload?id=${encodeURIComponent(
|
||||
gameId,
|
||||
)}&version=${encodeURIComponent(version)}`,
|
||||
);
|
||||
versionGuesses.value = options.map((e) => ({
|
||||
...e,
|
||||
platform: allPlatforms.find((v) => v.param === e.platform)!,
|
||||
}));
|
||||
versionSettings.value.name = version;
|
||||
}
|
||||
|
||||
async function startImport() {
|
||||
if (!versionSettings.value) return;
|
||||
const taskId = await $dropFetch("/api/v1/admin/import/version", {
|
||||
method: "POST",
|
||||
body: {
|
||||
id: gameId,
|
||||
version: versions[currentlySelectedVersion.value],
|
||||
...versionSettings.value,
|
||||
},
|
||||
});
|
||||
router.push(`/admin/task/${taskId.taskId}`);
|
||||
}
|
||||
|
||||
function startImport_wrapper() {
|
||||
importLoading.value = true;
|
||||
startImport()
|
||||
.catch((error) => {
|
||||
importError.value = error.message ?? t("errors.unknown");
|
||||
})
|
||||
.finally(() => {
|
||||
importLoading.value = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
101
app/pages/admin/library/g/[id]/index.vue
Normal file
101
app/pages/admin/library/g/[id]/index.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div
|
||||
class="pt-8 lg:pt-0 lg:pl-20 fixed inset-0 flex flex-col overflow-auto bg-zinc-900"
|
||||
>
|
||||
<div
|
||||
class="bg-zinc-950 w-full flex flex-col sm:flex-row items-center gap-2 justify-between pr-2"
|
||||
>
|
||||
<!--start-->
|
||||
<div>
|
||||
|
||||
<div class="pt-4 inline-flex gap-x-2">
|
||||
<div
|
||||
v-for="[value, { icon }] in Object.entries(components)"
|
||||
:key="value"
|
||||
>
|
||||
<button
|
||||
:class="[
|
||||
'inline-flex items-center gap-x-1 py-2 px-3 rounded-t-md font-semibold text-sm',
|
||||
value == currentMode
|
||||
? 'bg-zinc-900 text-zinc-100'
|
||||
: 'bg-transparent text-zinc-500',
|
||||
]"
|
||||
@click="() => (currentMode = value as GameEditorMode)"
|
||||
>
|
||||
<component :is="icon" class="size-4" />
|
||||
{{ value }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- open in store button -->
|
||||
<NuxtLink
|
||||
:href="`/store/${game.id}`"
|
||||
type="button"
|
||||
class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
{{ $t("library.admin.openStore") }}
|
||||
<ArrowTopRightOnSquareIcon
|
||||
class="-mr-0.5 h-7 w-7 p-1"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<component
|
||||
:is="components[currentMode].editor"
|
||||
v-model="game"
|
||||
:unimported-versions="unimportedVersions"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GameEditorMetadata, GameEditorVersion } from "#components";
|
||||
import {
|
||||
ArrowTopRightOnSquareIcon,
|
||||
DocumentIcon,
|
||||
ServerStackIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
import type { Component } from "vue";
|
||||
|
||||
const route = useRoute();
|
||||
const gameId = route.params.id.toString();
|
||||
const { game: rawGame, unimportedVersions } = await $dropFetch(
|
||||
`/api/v1/admin/game/:id`,
|
||||
{ params: { id: gameId } },
|
||||
);
|
||||
const game = ref(rawGame);
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
enum GameEditorMode {
|
||||
Metadata = "Metadata",
|
||||
Versions = "Versions",
|
||||
}
|
||||
|
||||
const components: {
|
||||
[key in GameEditorMode]: { editor: Component; icon: Component };
|
||||
} = {
|
||||
[GameEditorMode.Metadata]: { editor: GameEditorMetadata, icon: DocumentIcon },
|
||||
[GameEditorMode.Versions]: {
|
||||
editor: GameEditorVersion,
|
||||
icon: ServerStackIcon,
|
||||
},
|
||||
};
|
||||
|
||||
const currentMode = ref<GameEditorMode>(GameEditorMode.Metadata);
|
||||
|
||||
useHead({
|
||||
title: `${currentMode.value} - ${game.value.mName}`,
|
||||
});
|
||||
|
||||
watch(currentMode, (v) => {
|
||||
useHead({
|
||||
title: `${v} - ${game.value.mName}`,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
357
app/pages/admin/library/import.vue
Normal file
357
app/pages/admin/library/import.vue
Normal file
@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-y-6 w-full max-w-md">
|
||||
<Listbox
|
||||
as="div"
|
||||
:model="currentlySelectedGame"
|
||||
@update:model-value="(value) => updateSelectedGame(value)"
|
||||
>
|
||||
<ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100">
|
||||
{{ $t("library.admin.import.selectGame") }}
|
||||
</ListboxLabel>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="relative w-full cursor-default rounded-md bg-zinc-950 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
>
|
||||
<span v-if="currentlySelectedGame != -1" class="block truncate"
|
||||
>{{ games.unimportedGames[currentlySelectedGame].game }}
|
||||
<span
|
||||
class="px-1 py-0.5 text-xs bg-blue-600/10 rounded-sm ring-1 ring-blue-600 text-blue-400"
|
||||
>{{
|
||||
games.unimportedGames[currentlySelectedGame].library.name
|
||||
}}</span
|
||||
></span
|
||||
>
|
||||
<span v-else class="block truncate text-zinc-400">{{
|
||||
$t("library.admin.import.selectDir")
|
||||
}}</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-zinc-800 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="({ game, library }, gameIdx) in games.unimportedGames"
|
||||
:key="game"
|
||||
v-slot="{ active }"
|
||||
as="template"
|
||||
:value="gameIdx"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active ? 'bg-blue-600 text-white' : 'text-zinc-100',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
gameIdx === currentlySelectedGame
|
||||
? 'font-semibold'
|
||||
: 'font-normal',
|
||||
'inline-flex items-center gap-x-2 block truncate py-1 w-full',
|
||||
]"
|
||||
>{{ game }}
|
||||
<span
|
||||
class="px-1 py-0.5 text-xs bg-blue-600/10 rounded-sm ring-1 ring-blue-600 text-blue-400"
|
||||
>{{ library.name }}</span
|
||||
></span
|
||||
>
|
||||
|
||||
<span
|
||||
v-if="gameIdx === currentlySelectedGame"
|
||||
: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>
|
||||
<div
|
||||
v-if="games.unimportedGames.length == 0"
|
||||
class="w-full uppercase font-display font-bold text-zinc-600 p-2 text-center"
|
||||
>
|
||||
Nothing to import
|
||||
</div>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
<Listbox v-model="currentImportMode" as="div">
|
||||
<ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100">
|
||||
Import as
|
||||
</ListboxLabel>
|
||||
<div class="relative mt-2">
|
||||
<ListboxButton
|
||||
class="relative inline-flex items-center w-full cursor-default rounded-md bg-zinc-950 py-1.5 pl-3 pr-10 text-left text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||
>
|
||||
<span class="inline-flex items-top gap-x-2">
|
||||
<component
|
||||
:is="importModes[currentImportMode].icon"
|
||||
class="text-blue-600 size-8 p-1 bg-zinc-800 rounded-sm mt-1"
|
||||
/>
|
||||
<div>
|
||||
<h1 class="text-sm font-bold text-zinc-200">
|
||||
{{ importModes[currentImportMode].name }}
|
||||
</h1>
|
||||
<p class="text-xs text-zinc-400 max-w-xs">
|
||||
{{ importModes[currentImportMode].description }}
|
||||
</p>
|
||||
</div>
|
||||
</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-zinc-800 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<ListboxOption
|
||||
v-for="[mode, metadata] in Object.entries(importModes)"
|
||||
:key="mode"
|
||||
v-slot="{ active }"
|
||||
as="template"
|
||||
:value="mode"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active ? 'bg-blue-600 text-white' : 'text-zinc-100',
|
||||
'relative cursor-default select-none py-2 pl-3 pr-9',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
mode == currentImportMode ? 'font-semibold' : 'font-normal',
|
||||
'inline-flex items-center gap-x-2 block truncate py-1 w-full',
|
||||
]"
|
||||
>{{ metadata.name }}
|
||||
|
||||
<span
|
||||
v-if="mode == currentImportMode"
|
||||
: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>
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
<div class="flex items-center justify-between gap-x-8">
|
||||
<span class="flex grow flex-col">
|
||||
<label
|
||||
id="bulkImport-label"
|
||||
class="text-sm/6 font-medium text-zinc-100"
|
||||
>{{ $t("library.admin.import.bulkImportTitle") }}</label
|
||||
>
|
||||
<span id="bulkImport-description" class="text-sm text-zinc-400">{{
|
||||
$t("library.admin.import.bulkImportDescription")
|
||||
}}</span>
|
||||
</span>
|
||||
<div
|
||||
class="group relative inline-flex w-11 shrink-0 rounded-full bg-zinc-800 p-0.5 inset-ring inset-ring-zinc-100/5 outline-offset-2 outline-blue-600 transition-colors duration-200 ease-in-out has-checked:bg-blue-600 has-focus-visible:outline-2"
|
||||
>
|
||||
<span
|
||||
class="size-5 rounded-full bg-white shadow-xs ring-1 ring-zinc-100/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-5"
|
||||
/>
|
||||
<input
|
||||
id="bulkImport"
|
||||
v-model="bulkImportMode"
|
||||
type="checkbox"
|
||||
class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
|
||||
name="bulkImport"
|
||||
aria-labelledby="bulkImport-label"
|
||||
aria-describedby="bulkImport-description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<component
|
||||
:is="importModes[currentImportMode].component"
|
||||
v-if="currentlySelectedGame !== -1"
|
||||
:game-name="games.unimportedGames[currentlySelectedGame].game"
|
||||
:loading="importLoading"
|
||||
:error="importError"
|
||||
@import="(...v: unknown[]) => importModes[currentImportMode].import(...v)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ImportGame, ImportRedist } from "#components";
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
import { PuzzlePieceIcon, ArchiveBoxIcon } from "@heroicons/vue/24/solid";
|
||||
import type { FetchError } from "ofetch";
|
||||
import type { GameMetadataSearchResult } from "~~/server/internal/metadata/types";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
type ImportMode = "Game" | "Redist";
|
||||
|
||||
const importModes = shallowRef<{
|
||||
[key in ImportMode]: {
|
||||
name: string;
|
||||
description: string;
|
||||
icon: Component;
|
||||
component: Component;
|
||||
import: (...v: unknown[]) => void;
|
||||
};
|
||||
}>({
|
||||
Game: {
|
||||
name: "Game",
|
||||
description: "Games can be added to user libraries, installed, and played.",
|
||||
icon: PuzzlePieceIcon,
|
||||
component: ImportGame,
|
||||
import: importGame_wrapper as (v: unknown) => void,
|
||||
},
|
||||
Redist: {
|
||||
name: "Redistributable",
|
||||
description:
|
||||
"Redistributables are packaged dependencies for games, that are installed alongside and required to play certain games.",
|
||||
icon: ArchiveBoxIcon,
|
||||
component: ImportRedist,
|
||||
import: importRedist as (v: unknown, k: unknown) => void,
|
||||
},
|
||||
});
|
||||
|
||||
const currentImportMode = ref<ImportMode>("Game");
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const rawGames = await $dropFetch("/api/v1/admin/import/game");
|
||||
const games = ref(rawGames);
|
||||
const currentlySelectedGame = ref(-1);
|
||||
const bulkImportMode = ref(false);
|
||||
|
||||
async function updateSelectedGame(value: number) {
|
||||
if (currentlySelectedGame.value == value || value == -1) return;
|
||||
const option = games.value.unimportedGames[value];
|
||||
if (!option) return;
|
||||
|
||||
currentlySelectedGame.value = value;
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const importLoading = ref(false);
|
||||
const importError = ref<string | undefined>();
|
||||
async function importGame(metadata: GameMetadataSearchResult | undefined) {
|
||||
const option = games.value.unimportedGames[currentlySelectedGame.value];
|
||||
|
||||
const { taskId } = await $dropFetch("/api/v1/admin/import/game", {
|
||||
method: "POST",
|
||||
body: {
|
||||
path: option.game,
|
||||
library: option.library.id,
|
||||
metadata,
|
||||
},
|
||||
});
|
||||
|
||||
if (!bulkImportMode.value) {
|
||||
router.push(`/admin/task/${taskId}`);
|
||||
} else {
|
||||
games.value.unimportedGames.splice(currentlySelectedGame.value, 1);
|
||||
currentlySelectedGame.value = -1;
|
||||
}
|
||||
}
|
||||
async function importGame_wrapper(
|
||||
metadata: GameMetadataSearchResult | undefined,
|
||||
) {
|
||||
importLoading.value = true;
|
||||
importError.value = undefined;
|
||||
try {
|
||||
await importGame(metadata);
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
importError.value =
|
||||
(error as FetchError)?.message || t("errors.unknown");
|
||||
}
|
||||
importLoading.value = false;
|
||||
}
|
||||
|
||||
async function importRedist(data: object, platform: object | undefined) {
|
||||
importLoading.value = true;
|
||||
importError.value = undefined;
|
||||
try {
|
||||
const option = games.value.unimportedGames[currentlySelectedGame.value];
|
||||
|
||||
const formData = new FormData();
|
||||
for (const [key, value] of Object.entries(data)) {
|
||||
formData.append(
|
||||
key,
|
||||
value,
|
||||
);
|
||||
}
|
||||
|
||||
if (platform) {
|
||||
for (const [key, value] of Object.entries(platform)) {
|
||||
// Because we know there will be no file, and we need to handle more complex objects for
|
||||
// the platform, we do this.
|
||||
// Maybe we shouldn't.
|
||||
formData.append(
|
||||
`platform.${key}`,
|
||||
typeof value === "object" ? JSON.stringify(value) : value,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
formData.append("library", option.library.id);
|
||||
formData.append("path", option.game);
|
||||
const redist = await $dropFetch("/api/v1/admin/import/redist", {
|
||||
body: formData,
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
if (!bulkImportMode.value) {
|
||||
router.push(`/admin/library/r/${redist.id}`);
|
||||
} else {
|
||||
games.value.unimportedGames.splice(currentlySelectedGame.value, 1);
|
||||
currentlySelectedGame.value = -1;
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(error);
|
||||
importError.value =
|
||||
(error as FetchError)?.message || t("errors.unknown");
|
||||
}
|
||||
importLoading.value = false;
|
||||
}
|
||||
</script>
|
||||
496
app/pages/admin/library/index.vue
Normal file
496
app/pages/admin/library/index.vue
Normal file
@ -0,0 +1,496 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("library.admin.gameLibrary") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
{{ $t("library.admin.subheader") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||
<NuxtLink
|
||||
to="/admin/library/sources"
|
||||
class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.sources.link"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="toImport" class="rounded-md bg-blue-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<InformationCircleIcon
|
||||
class="h-5 w-5 text-blue-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 flex-1 md:flex md:justify-between">
|
||||
<p class="text-sm text-blue-400">
|
||||
{{ $t("library.admin.detectedGame") }}
|
||||
</p>
|
||||
<p class="mt-3 text-sm md:ml-6 md:mt-0">
|
||||
<NuxtLink
|
||||
href="/admin/library/import"
|
||||
class="whitespace-nowrap font-medium text-blue-400 hover:text-blue-500"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.import.link"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-1">
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
name="search"
|
||||
class="col-start-1 row-start-1 block w-full rounded-md bg-zinc-900 py-1.5 pl-10 pr-3 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:pl-9 sm:text-sm/6"
|
||||
:placeholder="$t('library.search')"
|
||||
/>
|
||||
<MagnifyingGlassIcon
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-zinc-400 sm:size-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-x-4 text-zinc-300 font-bold uppercase font-display text-sm">
|
||||
<span class="inline-flex items-center gap-x-1"
|
||||
><div class="size-2 rounded-full bg-blue-600" />
|
||||
Game</span
|
||||
>
|
||||
<span class="inline-flex items-center gap-x-1"
|
||||
><div class="size-2 rounded-full bg-emerald-600" />
|
||||
Redistributable</span
|
||||
>
|
||||
</div>
|
||||
<ul
|
||||
role="list"
|
||||
class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
|
||||
>
|
||||
<li
|
||||
v-for="entry in filteredLibrary"
|
||||
:key="entry.id"
|
||||
class="relative overflow-hidden col-span-1 flex flex-col justify-center divide-y divide-zinc-800 rounded-xl bg-zinc-950/30 text-left shadow-md border hover:scale-102 hover:shadow-xl hover:bg-zinc-950/70 border-zinc-800 transition-all duration-200 group"
|
||||
>
|
||||
<div
|
||||
v-if="entry.type === 'game'"
|
||||
class="relative flex flex-1 flex-row p-4 gap-x-4"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 right-0 w-10 bg-blue-600 h-4 rotate-[45deg] translate-x-1/2"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="h-20 w-20 p-3 flex-shrink-0 rounded-xl shadow group-hover:shadow-lg transition-all duration-200 bg-zinc-900 object-cover border border-zinc-800"
|
||||
:src="useObject(entry.mIconObjectId)"
|
||||
alt=""
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<h3
|
||||
class="gap-x-2 text-sm inline-flex items-center font-medium text-zinc-100 font-display"
|
||||
>
|
||||
{{ entry.mName }}
|
||||
<button
|
||||
type="button"
|
||||
:class="[
|
||||
'rounded-full p-1 shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
entry.featured
|
||||
? 'bg-yellow-400 hover:bg-yellow-300 focus-visible:outline-yellow-400 text-zinc-900'
|
||||
: 'bg-zinc-800 hover:bg-zinc-700 focus-visible:outline-zinc-400 text-white',
|
||||
]"
|
||||
@click="() => featureGame(entry.id)"
|
||||
>
|
||||
<svg
|
||||
v-if="gameFeatureLoading[entry.id]"
|
||||
aria-hidden="true"
|
||||
:class="[
|
||||
entry.featured ? ' fill-zinc-900' : 'fill-zinc-100',
|
||||
'size-3 text-transparent animate-spin',
|
||||
]"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<StarIcon v-else class="size-3" aria-hidden="true" />
|
||||
</button>
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-inset ring-blue-600/20"
|
||||
>{{ entry.library.name }}</span
|
||||
>
|
||||
</h3>
|
||||
<dl class="mt-1 flex flex-col justify-between">
|
||||
<dt class="sr-only">{{ $t("library.admin.shortDesc") }}</dt>
|
||||
<dd class="text-sm text-zinc-400">
|
||||
{{ entry.mShortDescription }}
|
||||
</dd>
|
||||
<dt class="sr-only">
|
||||
{{ $t("library.admin.metadataProvider") }}
|
||||
</dt>
|
||||
</dl>
|
||||
<div class="mt-4 flex flex-col gap-y-1">
|
||||
<NuxtLink
|
||||
:href="`/admin/library/g/${entry.id}`"
|
||||
class="w-fit rounded-md bg-zinc-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.openEditor"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
<button
|
||||
class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-red-500 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||
@click="() => deleteGame(entry.id)"
|
||||
>
|
||||
{{ $t("delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="entry.type === 'redist'"
|
||||
class="relative flex flex-1 flex-row p-4 gap-x-4"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 right-0 w-10 bg-emerald-600 h-4 rotate-[45deg] translate-x-1/2"
|
||||
/>
|
||||
<img
|
||||
class="h-20 w-20 p-3 flex-shrink-0 rounded-xl shadow group-hover:shadow-lg transition-all duration-200 bg-zinc-900 object-cover border border-zinc-800"
|
||||
:src="useObject(entry.mIconObjectId)"
|
||||
alt=""
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<h3
|
||||
class="gap-x-2 text-sm inline-flex items-center font-medium text-zinc-100 font-display"
|
||||
>
|
||||
{{ entry.mName }}
|
||||
<span
|
||||
class="inline-flex items-center rounded-full bg-blue-600/10 px-2 py-1 text-xs font-medium text-blue-600 ring-1 ring-inset ring-blue-600/20"
|
||||
>{{ entry.library.name }}</span
|
||||
>
|
||||
</h3>
|
||||
<dl class="mt-1 flex flex-col justify-between">
|
||||
<dt class="sr-only">{{ $t("library.admin.shortDesc") }}</dt>
|
||||
<dd class="text-sm text-zinc-400">
|
||||
{{ entry.mShortDescription }}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl
|
||||
v-if="entry.platform"
|
||||
class="mt-2 flex items-center text-zinc-200 font-semibold text-sm gap-x-1 p-2 bg-zinc-800 rounded-xl"
|
||||
>
|
||||
<IconsPlatform
|
||||
:platform="entry.platform.id"
|
||||
:fallback="entry.platform.iconSvg"
|
||||
class="size-6 text-blue-600"
|
||||
/>
|
||||
<span>{{ entry.platform.platformName }}</span>
|
||||
</dl>
|
||||
<div class="mt-4 flex flex-col gap-y-1">
|
||||
<NuxtLink
|
||||
:href="`/admin/library/r/${entry.id}`"
|
||||
class="w-fit rounded-md bg-zinc-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.openEditor"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
<button
|
||||
class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-red-500 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||
@click="() => deleteRedist(entry.id)"
|
||||
>
|
||||
{{ $t("delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="entry.hasNotifications" class="flex flex-col gap-y-2 p-2">
|
||||
<div
|
||||
v-if="entry.notifications.toImport"
|
||||
class="rounded-md bg-blue-600/10 p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<InformationCircleIcon
|
||||
class="h-5 w-5 text-blue-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 flex-1 md:flex md:justify-between">
|
||||
<p class="text-sm text-blue-400">
|
||||
{{ $t("library.admin.detectedVersion") }}
|
||||
</p>
|
||||
<p class="mt-3 text-sm md:ml-6 md:mt-0">
|
||||
<NuxtLink
|
||||
:href="`/admin/library/g/${entry.id}/import`"
|
||||
class="whitespace-nowrap font-medium text-blue-400 hover:text-blue-500"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.import.link"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="entry.notifications.noVersions"
|
||||
class="rounded-md bg-yellow-600/10 p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<ExclamationTriangleIcon
|
||||
class="h-5 w-5 text-yellow-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-yellow-600">
|
||||
{{ $t("library.admin.version.noVersions") }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="entry.notifications.offline"
|
||||
class="rounded-md bg-red-600/10 p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<ExclamationCircleIcon
|
||||
class="h-5 w-5 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ $t("library.admin.offline") }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<p
|
||||
v-if="filteredLibrary.length == 0 && libraryGames.length != 0"
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
|
||||
>
|
||||
{{ $t("common.noResults") }}
|
||||
</p>
|
||||
<p
|
||||
v-if="
|
||||
filteredLibrary.length == 0 &&
|
||||
libraryGames.length == 0 &&
|
||||
libraryState.hasLibraries
|
||||
"
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
|
||||
>
|
||||
{{ $t("library.admin.noGames") }}
|
||||
</p>
|
||||
<p
|
||||
v-else-if="!libraryState.hasLibraries"
|
||||
class="flex flex-col gap-2 text-zinc-600 text-center col-span-4"
|
||||
>
|
||||
<span class="text-sm font-display font-bold uppercase">{{
|
||||
$t("library.admin.libraryHint")
|
||||
}}</span>
|
||||
|
||||
<NuxtLink
|
||||
class="transition text-xs text-zinc-600 hover:underline hover:text-zinc-400"
|
||||
href="https://docs.droposs.org/docs/library"
|
||||
target="_blank"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.libraryHintDocsLink"
|
||||
tag="span"
|
||||
scope="global"
|
||||
class="inline-flex items-center gap-x-1"
|
||||
>
|
||||
<template #arrow>
|
||||
<ArrowTopRightOnSquareIcon class="size-4" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ExclamationTriangleIcon,
|
||||
ExclamationCircleIcon,
|
||||
} from "@heroicons/vue/16/solid";
|
||||
import {
|
||||
ArrowTopRightOnSquareIcon,
|
||||
InformationCircleIcon,
|
||||
StarIcon,
|
||||
} from "@heroicons/vue/20/solid";
|
||||
import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: t("library.admin.title"),
|
||||
});
|
||||
|
||||
const searchQuery = ref("");
|
||||
|
||||
const libraryState = await $dropFetch("/api/v1/admin/library");
|
||||
|
||||
const toImport = ref(
|
||||
Object.values(libraryState.unimportedGames).flat().length > 0,
|
||||
);
|
||||
|
||||
// Potentially make a server-side transformation to make the client lighter
|
||||
function clientSideTransformation<T, V extends keyof T, K extends string>(
|
||||
values: Array<T & { status: (typeof libraryState.games)[number]["status"] }>,
|
||||
expand: V,
|
||||
type: K,
|
||||
): Array<
|
||||
T[V] & {
|
||||
status: "online" | "offline";
|
||||
type: K;
|
||||
hasNotifications?: boolean;
|
||||
notifications: {
|
||||
noVersions?: boolean;
|
||||
toImport?: boolean;
|
||||
offline?: boolean;
|
||||
};
|
||||
}
|
||||
> {
|
||||
return values.map((e) => {
|
||||
if (e.status == "offline") {
|
||||
return {
|
||||
...e[expand],
|
||||
type: type,
|
||||
status: "offline" as const,
|
||||
hasNotifications: true,
|
||||
notifications: {
|
||||
offline: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const noVersions = e.status.noVersions;
|
||||
const toImport = e.status.unimportedVersions.length > 0;
|
||||
|
||||
return {
|
||||
...e[expand],
|
||||
type: type,
|
||||
notifications: {
|
||||
noVersions,
|
||||
toImport,
|
||||
},
|
||||
hasNotifications: noVersions || toImport,
|
||||
status: "online" as const,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const libraryGames = ref(
|
||||
clientSideTransformation(libraryState.games, "value", "game"),
|
||||
);
|
||||
const libraryRedists = ref(
|
||||
clientSideTransformation(libraryState.redists, "value", "redist"),
|
||||
);
|
||||
|
||||
const filteredLibrary = computed(() =>
|
||||
[...libraryGames.value, ...libraryRedists.value].filter((e) => {
|
||||
if (!searchQuery.value) return true;
|
||||
const searchQueryLower = searchQuery.value.toLowerCase();
|
||||
if (e.mName.toLowerCase().includes(searchQueryLower)) return true;
|
||||
if (e.mShortDescription.toLowerCase().includes(searchQueryLower))
|
||||
return true;
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
|
||||
async function deleteGame(id: string) {
|
||||
await $dropFetch(`/api/v1/admin/game/${id}`, {
|
||||
method: "DELETE",
|
||||
failTitle: "Failed to delete game",
|
||||
});
|
||||
const index = libraryGames.value.findIndex((e) => e.id === id);
|
||||
libraryGames.value.splice(index, 1);
|
||||
toImport.value = true;
|
||||
}
|
||||
|
||||
async function deleteRedist(id: string) {
|
||||
await $dropFetch(`/api/v1/admin/redist/${id}`, {
|
||||
method: "DELETE",
|
||||
failTitle: "Failed to delete game",
|
||||
});
|
||||
const index = libraryRedists.value.findIndex((e) => e.id === id);
|
||||
libraryRedists.value.splice(index, 1);
|
||||
toImport.value = true;
|
||||
}
|
||||
|
||||
const gameFeatureLoading = ref<{ [key: string]: boolean }>({});
|
||||
async function featureGame(id: string) {
|
||||
const gameIndex = libraryGames.value.findIndex((e) => e.id === id);
|
||||
const game = libraryGames.value[gameIndex];
|
||||
gameFeatureLoading.value[game.id] = true;
|
||||
|
||||
await $dropFetch(`/api/v1/admin/game/:id`, {
|
||||
method: "PATCH",
|
||||
params: {
|
||||
id: game.id,
|
||||
},
|
||||
body: { featured: !game.featured },
|
||||
failTitle: "Failed to feature/unfeature game",
|
||||
});
|
||||
|
||||
libraryGames.value[gameIndex].featured = !game.featured;
|
||||
gameFeatureLoading.value[game.id] = false;
|
||||
}
|
||||
</script>
|
||||
85
app/pages/admin/library/r/[id]/index.vue
Normal file
85
app/pages/admin/library/r/[id]/index.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div
|
||||
class="pt-8 lg:pt-0 lg:pl-20 fixed inset-0 flex flex-col overflow-auto bg-zinc-900"
|
||||
>
|
||||
<div
|
||||
class="bg-zinc-950 w-full flex flex-col sm:flex-row items-center gap-2 justify-between pr-2"
|
||||
>
|
||||
<!--start-->
|
||||
<div>
|
||||
<div class="pt-4 inline-flex gap-x-2">
|
||||
<div
|
||||
v-for="[value, { icon }] in Object.entries(components)"
|
||||
:key="value"
|
||||
>
|
||||
<button
|
||||
:class="[
|
||||
'inline-flex items-center gap-x-1 py-2 px-3 rounded-t-md font-semibold text-sm',
|
||||
value == currentMode
|
||||
? 'bg-zinc-900 text-zinc-100'
|
||||
: 'bg-transparent text-zinc-500',
|
||||
]"
|
||||
@click="() => (currentMode = value as RedistEditorMode)"
|
||||
>
|
||||
<component :is="icon" class="size-4" />
|
||||
{{ value }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- open in store button -->
|
||||
</div>
|
||||
</div>
|
||||
<component
|
||||
:is="components[currentMode].editor"
|
||||
v-model="redist"
|
||||
:unimported-versions="unimportedVersions"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { GameEditorVersion, RedistEditorMetadata } from "#components";
|
||||
import { DocumentIcon, ServerStackIcon } from "@heroicons/vue/24/outline";
|
||||
import type { Component } from "vue";
|
||||
|
||||
const route = useRoute();
|
||||
const redistId = route.params.id.toString();
|
||||
const { redist: rawRedist, unimportedVersions } = await $dropFetch(
|
||||
`/api/v1/admin/redist/:id`,
|
||||
{ params: { id: redistId } },
|
||||
);
|
||||
const redist = ref(rawRedist);
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
enum RedistEditorMode {
|
||||
Metadata = "Metadata",
|
||||
Versions = "Versions",
|
||||
}
|
||||
|
||||
const components: {
|
||||
[key in RedistEditorMode]: { editor: Component; icon: Component };
|
||||
} = {
|
||||
[RedistEditorMode.Metadata]: { editor: RedistEditorMetadata, icon: DocumentIcon },
|
||||
[RedistEditorMode.Versions]: {
|
||||
editor: GameEditorVersion,
|
||||
icon: ServerStackIcon,
|
||||
},
|
||||
};
|
||||
|
||||
const currentMode = ref<RedistEditorMode>(RedistEditorMode.Metadata);
|
||||
|
||||
useHead({
|
||||
title: `${currentMode.value} - ${redist.value.mName}`,
|
||||
});
|
||||
|
||||
watch(currentMode, (v) => {
|
||||
useHead({
|
||||
title: `${v} - ${redist.value.mName}`,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
465
app/pages/admin/library/sources/index.vue
Normal file
465
app/pages/admin/library/sources/index.vue
Normal file
@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("library.admin.sources.sources") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
{{ $t("library.admin.sources.desc") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||
<button
|
||||
class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => (actionSourceOpen = true)"
|
||||
>
|
||||
{{ $t("common.create") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 flow-root">
|
||||
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
||||
<table class="min-w-full divide-y divide-zinc-700">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-3"
|
||||
>
|
||||
{{ $t("common.name") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("type") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("library.admin.sources.working") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("options") }}
|
||||
</th>
|
||||
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3">
|
||||
<span class="sr-only">{{ $t("common.edit") }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(source, sourceIdx) in sources"
|
||||
:key="source.id"
|
||||
class="even:bg-zinc-800"
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
||||
>
|
||||
{{ source.name }}
|
||||
</td>
|
||||
<td
|
||||
class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400 inline-flex gap-x-1 items-center"
|
||||
>
|
||||
<component
|
||||
:is="optionsMetadata[source.backend].icon"
|
||||
class="size-5 text-zinc-400"
|
||||
/>
|
||||
{{ optionsMetadata[source.backend].title }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
<CheckIcon
|
||||
v-if="source.working"
|
||||
class="size-5 text-green-500"
|
||||
/>
|
||||
<XMarkIcon v-else class="size-5 text-red-500" />
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
{{ source.options }}
|
||||
</td>
|
||||
<td
|
||||
class="relative whitespace-nowrap py-4 pl-3 pr-3 text-right text-sm font-medium space-x-2"
|
||||
>
|
||||
<button
|
||||
class="text-blue-500 hover:text-blue-400"
|
||||
@click="() => edit(sourceIdx)"
|
||||
>
|
||||
{{ $t("common.edit") }}
|
||||
<span class="sr-only">
|
||||
{{ $t("chars.srComma", [source.name]) }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="text-red-500 hover:text-red-400"
|
||||
@click="() => deleteSource(sourceIdx)"
|
||||
>
|
||||
{{ $t("delete") }}
|
||||
<span class="sr-only">
|
||||
{{ $t("chars.srComma", [source.name]) }}
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ModalTemplate v-model="actionSourceOpen">
|
||||
<template #default>
|
||||
<div>
|
||||
<DialogTitle
|
||||
v-if="createMode"
|
||||
as="h3"
|
||||
class="text-lg font-medium leading-6 text-white"
|
||||
>
|
||||
{{ $t("library.admin.sources.create") }}
|
||||
</DialogTitle>
|
||||
<DialogTitle
|
||||
v-else
|
||||
as="h3"
|
||||
class="text-lg font-medium leading-6 text-white"
|
||||
>
|
||||
{{ $t("library.admin.sources.edit") }}
|
||||
</DialogTitle>
|
||||
<p class="mt-1 text-zinc-400 text-sm">
|
||||
{{ $t("library.admin.sources.createDesc") }}
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
class="mt-2 space-y-4"
|
||||
@submit.prevent="() => performActionSource_wrapper()"
|
||||
>
|
||||
<div>
|
||||
<label
|
||||
for="name"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("common.name") }}</label
|
||||
>
|
||||
<p class="text-zinc-400 block text-xs font-medium leading-6">
|
||||
{{ $t("library.admin.sources.nameDesc") }}
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="name"
|
||||
v-model="sourceName"
|
||||
name="name"
|
||||
type="text"
|
||||
autocomplete="name"
|
||||
:placeholder="$t('library.admin.sources.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 v-if="createMode">
|
||||
<label class="block text-sm font-medium leading-6 text-zinc-100">{{
|
||||
$t("type")
|
||||
}}</label>
|
||||
<p class="text-zinc-400 block text-xs font-medium leading-6">
|
||||
{{ $t("library.admin.sources.typeDesc") }}
|
||||
</p>
|
||||
|
||||
<RadioGroup v-model="currentSourceOption" class="mt-2">
|
||||
<RadioGroupLabel class="sr-only">{{
|
||||
$t("type")
|
||||
}}</RadioGroupLabel>
|
||||
<div class="space-y-4">
|
||||
<RadioGroupOption
|
||||
v-for="[source, metadata] in optionsMetadataIter"
|
||||
:key="source"
|
||||
v-slot="{ checked }"
|
||||
as="template"
|
||||
:value="source"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'relative block cursor-pointer bg-zinc-800 rounded-lg border border-zinc-900 px-2 py-2 shadow-sm focus:outline-none sm:flex sm:justify-between',
|
||||
]"
|
||||
>
|
||||
<span class="flex items-center gap-x-4">
|
||||
<div>
|
||||
<component
|
||||
:is="metadata.icon"
|
||||
class="size-12 bg-zinc-900 rounded-xl p-3 text-zinc-400"
|
||||
/>
|
||||
</div>
|
||||
<span class="flex flex-col text-sm">
|
||||
<RadioGroupLabel
|
||||
as="span"
|
||||
class="font-semibold text-zinc-100"
|
||||
>{{ metadata.title }}
|
||||
<span class="ml-2 font-mono text-zinc-500 text-xs">{{
|
||||
source
|
||||
}}</span>
|
||||
</RadioGroupLabel>
|
||||
<RadioGroupDescription
|
||||
as="span"
|
||||
class="text-zinc-400 text-xs"
|
||||
>
|
||||
{{ metadata.description }}
|
||||
</RadioGroupDescription>
|
||||
<NuxtLink
|
||||
:href="metadata.docsLink"
|
||||
:external="true"
|
||||
target="_blank"
|
||||
class="mt-2 block w-fit rounded-md bg-blue-600 px-2 py-1 text-center text-xs font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.sources.documentationLink"
|
||||
tag="span"
|
||||
scope="global"
|
||||
class="inline-flex items-center gap-x-1"
|
||||
>
|
||||
<template #arrow>
|
||||
<ArrowTopRightOnSquareIcon class="size-4" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
:class="[
|
||||
checked ? 'ring-2 ring-blue-600' : '',
|
||||
'pointer-events-none absolute -inset-px rounded-lg',
|
||||
]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</RadioGroupOption>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div class="h-[1px] w-full bg-zinc-700 rounded-full" />
|
||||
<component
|
||||
:is="optionUIs[currentSourceOption]"
|
||||
v-model="sourceConfig"
|
||||
/>
|
||||
|
||||
<input type="submit" class="hidden" />
|
||||
</form>
|
||||
|
||||
<div v-if="modalError" class="mt-3 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ modalError }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #buttons="{ close }">
|
||||
<LoadingButton
|
||||
:loading="modalLoading"
|
||||
:disabled="modalLoading"
|
||||
class="w-full sm:w-fit"
|
||||
@click="() => performActionSource_wrapper()"
|
||||
>
|
||||
{{ createMode ? $t("common.create") : $t("common.save") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
|
||||
@click="
|
||||
() => {
|
||||
editIndex = undefined;
|
||||
close();
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* I did something a little cursed for this
|
||||
* To avoid making a separate modal for saving, we
|
||||
* instead set the index of the source we want to edit
|
||||
* and there's a bunch of checks everywhere to switch
|
||||
* between 'create' and 'edit'
|
||||
*/
|
||||
|
||||
import {
|
||||
DropLogo,
|
||||
SourceOptionsFilesystem,
|
||||
SourceOptionsFlatFilesystem,
|
||||
} from "#components";
|
||||
import {
|
||||
DialogTitle,
|
||||
RadioGroup,
|
||||
RadioGroupDescription,
|
||||
RadioGroupLabel,
|
||||
RadioGroupOption,
|
||||
} from "@headlessui/vue";
|
||||
import {
|
||||
XCircleIcon,
|
||||
ArrowTopRightOnSquareIcon,
|
||||
} from "@heroicons/vue/20/solid";
|
||||
import { BackwardIcon, CheckIcon, XMarkIcon } from "@heroicons/vue/24/outline";
|
||||
import { FetchError } from "ofetch";
|
||||
import type { Component } from "vue";
|
||||
import type { LibraryBackend } from "~~/prisma/client/enums";
|
||||
import type { WorkingLibrarySource } from "~~/server/api/v1/admin/library/sources/index.get";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Library Sources",
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// Optional token for setup wizard
|
||||
const { token = undefined } = defineProps<{ token?: string }>();
|
||||
|
||||
const headers = token ? { Authorization: token } : undefined;
|
||||
|
||||
const sources = ref(
|
||||
await $dropFetch<WorkingLibrarySource[]>("/api/v1/admin/library/sources", {
|
||||
headers,
|
||||
}),
|
||||
);
|
||||
|
||||
const editIndex = ref<undefined | number>(undefined);
|
||||
const createMode = computed(() => editIndex.value === undefined);
|
||||
|
||||
const actionSourceOpen = ref(false);
|
||||
const currentSourceOption = ref<LibraryBackend>("Filesystem");
|
||||
const sourceName = ref("");
|
||||
const sourceConfig = ref<object>({});
|
||||
|
||||
const modalError = ref<undefined | string>();
|
||||
const modalLoading = ref(false);
|
||||
|
||||
const optionUIs: { [key in LibraryBackend]: Component } = {
|
||||
Filesystem: SourceOptionsFilesystem,
|
||||
FlatFilesystem: SourceOptionsFlatFilesystem,
|
||||
};
|
||||
const optionsMetadata: {
|
||||
[key in LibraryBackend]: {
|
||||
title: string;
|
||||
description: string;
|
||||
docsLink: string;
|
||||
icon: Component;
|
||||
};
|
||||
} = {
|
||||
Filesystem: {
|
||||
title: t("library.admin.sources.fsTitle"),
|
||||
description: t("library.admin.sources.fsDesc"),
|
||||
docsLink: "https://docs.droposs.org/docs/library#drop-style",
|
||||
icon: DropLogo,
|
||||
},
|
||||
FlatFilesystem: {
|
||||
title: t("library.admin.sources.fsFlatTitle"),
|
||||
description: t("library.admin.sources.fsFlatDesc"),
|
||||
docsLink: "https://docs.droposs.org/docs/library#flat-style-or-compat",
|
||||
icon: BackwardIcon,
|
||||
},
|
||||
};
|
||||
const optionsMetadataIter = Object.entries(optionsMetadata);
|
||||
|
||||
async function performActionSource() {
|
||||
const createMode = editIndex.value === undefined;
|
||||
|
||||
const source = await $dropFetch<WorkingLibrarySource>(
|
||||
"/api/v1/admin/library/sources",
|
||||
{
|
||||
body: {
|
||||
id: createMode ? undefined : sources.value[editIndex.value!].id,
|
||||
name: sourceName.value,
|
||||
backend: createMode ? currentSourceOption.value : undefined,
|
||||
options: sourceConfig.value,
|
||||
},
|
||||
method: createMode ? "POST" : "PATCH",
|
||||
headers,
|
||||
},
|
||||
);
|
||||
if (createMode) {
|
||||
sources.value.push(source);
|
||||
} else {
|
||||
sources.value[editIndex.value!] = source;
|
||||
}
|
||||
}
|
||||
|
||||
function performActionSource_wrapper() {
|
||||
modalError.value = undefined;
|
||||
modalLoading.value = true;
|
||||
performActionSource()
|
||||
.then(
|
||||
() => {
|
||||
actionSourceOpen.value = false;
|
||||
sourceConfig.value = {};
|
||||
sourceName.value = "";
|
||||
},
|
||||
(e) => {
|
||||
if (e instanceof FetchError) {
|
||||
console.log(e.data.message);
|
||||
modalError.value = e.message;
|
||||
} else {
|
||||
modalError.value = e as string;
|
||||
}
|
||||
},
|
||||
)
|
||||
.finally(() => {
|
||||
modalLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function edit(index: number) {
|
||||
const source = sources.value[index];
|
||||
if (!source) return;
|
||||
|
||||
sourceName.value = source.name;
|
||||
sourceConfig.value = source.options! as object;
|
||||
|
||||
editIndex.value = index;
|
||||
actionSourceOpen.value = true;
|
||||
}
|
||||
|
||||
async function deleteSource(index: number) {
|
||||
const source = sources.value[index];
|
||||
if (!source) return;
|
||||
|
||||
try {
|
||||
await $dropFetch("/api/v1/admin/library/sources", {
|
||||
method: "DELETE",
|
||||
body: { id: source.id },
|
||||
headers,
|
||||
});
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: t("errors.library.source.delete.title"),
|
||||
description: t("errors.library.source.delete.desc", [
|
||||
// @ts-expect-error attempt to display message on error
|
||||
e?.message ?? t("errors.unknown"),
|
||||
]),
|
||||
},
|
||||
(_, c) => c(),
|
||||
);
|
||||
}
|
||||
|
||||
sources.value.splice(index, 1);
|
||||
}
|
||||
</script>
|
||||
422
app/pages/admin/metadata/companies/[id]/index.vue
Normal file
422
app/pages/admin/metadata/companies/[id]/index.vue
Normal file
@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
class="relative overflow-hidden rounded-lg flex flex-col lg:flex-row lg:justify-between items-start lg:items-center gap-2 p-8"
|
||||
>
|
||||
<img
|
||||
:src="useObject(company.mBannerObjectId)"
|
||||
class="absolute inset-0 w-full h-full object-cover object-center"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-zinc-900/80" />
|
||||
|
||||
<div class="relative inline-flex items-center gap-4">
|
||||
<!-- icon image -->
|
||||
<div class="relative group/iconupload rounded-xl overflow-hidden">
|
||||
<img :src="useObject(company.mLogoObjectId)" class="size-20" />
|
||||
<button
|
||||
class="rounded-xl transition duration-200 absolute inset-0 opacity-0 group-hover/iconupload:opacity-100 focus-visible/iconupload:opacity-100 cursor-pointer bg-zinc-900/80 text-zinc-100 flex flex-col items-center justify-center text-center text-xs font-semibold ring-1 ring-inset ring-zinc-800 px-2"
|
||||
@click="() => (uploadLogoOpen = true)"
|
||||
>
|
||||
<ArrowUpTrayIcon class="size-5" />
|
||||
<span>{{
|
||||
$t("library.admin.metadata.companies.editor.uploadIcon")
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<h1
|
||||
class="group/name inline-flex items-center gap-x-3 text-5xl font-bold font-display text-zinc-100"
|
||||
>
|
||||
{{ company.mName }}
|
||||
<button @click="() => editName()">
|
||||
<PencilIcon
|
||||
class="transition duration-200 xl:opacity-0 group-hover/name:opacity-100 size-8"
|
||||
/>
|
||||
</button>
|
||||
</h1>
|
||||
<p
|
||||
class="group/description mt-1 inline-flex items-center gap-x-3 text-lg text-zinc-400 max-w-xl"
|
||||
>
|
||||
{{
|
||||
company.mShortDescription ||
|
||||
$t("library.admin.metadata.companies.editor.noDescription")
|
||||
}}
|
||||
<button @click="() => editShortDescription()">
|
||||
<PencilIcon
|
||||
class="transition duration-200 xl:opacity-0 group-hover/description:opacity-100 size-5"
|
||||
/>
|
||||
</button>
|
||||
</p>
|
||||
<p
|
||||
class="group/website mt-1 text-zinc-500 inline-flex items-center gap-x-3"
|
||||
>
|
||||
{{
|
||||
company.mWebsite ||
|
||||
$t("library.admin.metadata.companies.editor.websitePlaceholder")
|
||||
}}
|
||||
<button @click="() => editWebsite()">
|
||||
<PencilIcon
|
||||
class="transition duration-200 xl:opacity-0 group-hover/website:opacity-100 size-4"
|
||||
/>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative inline-flex gap-x-3 items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => (uploadBannerOpen = true)"
|
||||
>
|
||||
{{ $t("library.admin.metadata.companies.editor.uploadBanner") }}
|
||||
<ArrowUpTrayIcon class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("library.admin.metadata.companies.editor.libraryTitle") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
{{ $t("library.admin.metadata.companies.editor.libraryDescription") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||
<button
|
||||
class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => (addGameModelOpen = true)"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.metadata.companies.editor.action"
|
||||
tag="span"
|
||||
scope="global"
|
||||
class="inline-flex items-center gap-x-1"
|
||||
>
|
||||
<template #plus>
|
||||
<PlusIcon class="size-4" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-1">
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
name="search"
|
||||
class="col-start-1 row-start-1 block w-full rounded-md bg-zinc-900 py-1.5 pl-10 pr-3 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:pl-9 sm:text-sm/6"
|
||||
:placeholder="$t('library.admin.metadata.companies.searchGames')"
|
||||
/>
|
||||
<MagnifyingGlassIcon
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-zinc-400 sm:size-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<ul
|
||||
role="list"
|
||||
class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
|
||||
>
|
||||
<li
|
||||
v-for="game in filteredGames"
|
||||
:key="game.id"
|
||||
class="relative overflow-hidden col-span-1 flex flex-col justify-center divide-y divide-zinc-800 rounded-xl bg-zinc-950/30 text-left shadow-md border border-zinc-800 group"
|
||||
>
|
||||
<div class="flex flex-1 flex-row p-4 gap-x-4">
|
||||
<img
|
||||
class="h-20 w-20 p-3 flex-shrink-0 rounded-xl shadow group-hover:shadow-lg transition-all duration-200 bg-zinc-900 object-cover border border-zinc-800"
|
||||
:src="useObject(game.mIconObjectId)"
|
||||
alt=""
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<h3
|
||||
class="gap-x-2 text-sm inline-flex items-center font-medium text-zinc-100 font-display"
|
||||
>
|
||||
{{ game.mName }}
|
||||
</h3>
|
||||
<dl class="mt-1 flex flex-col justify-between">
|
||||
<dt class="sr-only">{{ $t("library.admin.shortDesc") }}</dt>
|
||||
<dd class="text-sm text-zinc-400">
|
||||
{{ game.mShortDescription }}
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="mt-4 flex flex-col gap-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="group/published relative inline-flex w-7 shrink-0 rounded-full p-0.5 inset-ring outline-offset-2 transition-colors duration-200 ease-in-out has-focus-visible:outline-2 bg-white/5 inset-ring-white/10 outline-blue-500 has-checked:bg-blue-500"
|
||||
>
|
||||
<span
|
||||
class="size-3 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked/published:translate-x-3"
|
||||
/>
|
||||
<input
|
||||
id="published"
|
||||
v-model="published[game.id]"
|
||||
type="checkbox"
|
||||
class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
|
||||
aria-labelledby="published-label"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label
|
||||
id="published-label"
|
||||
for="published"
|
||||
class="font-medium text-xs text-zinc-100"
|
||||
>{{
|
||||
$t("library.admin.metadata.companies.editor.published")
|
||||
}}</label
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="group/developed relative inline-flex w-7 shrink-0 rounded-full p-0.5 inset-ring outline-offset-2 transition-colors duration-200 ease-in-out has-focus-visible:outline-2 bg-white/5 inset-ring-white/10 outline-blue-500 has-checked:bg-blue-500"
|
||||
>
|
||||
<span
|
||||
class="size-3 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked/developed:translate-x-3"
|
||||
/>
|
||||
<input
|
||||
id="developed"
|
||||
v-model="developed[game.id]"
|
||||
type="checkbox"
|
||||
class="w-auto h-auto opacity-0 absolute inset-0 focus:outline-hidden"
|
||||
aria-labelledby="developed-label"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label
|
||||
id="developed-label"
|
||||
for="published"
|
||||
class="font-medium text-xs text-zinc-100"
|
||||
>{{
|
||||
$t("library.admin.metadata.companies.editor.developed")
|
||||
}}</label
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-red-500 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||
@click="() => removeGame(game.id)"
|
||||
>
|
||||
{{ $t("common.remove") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<p
|
||||
v-if="filteredGames.length == 0 && games.length != 0"
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
|
||||
>
|
||||
{{ $t("common.noResults") }}
|
||||
</p>
|
||||
<p
|
||||
v-if="filteredGames.length == 0 && games.length == 0"
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
|
||||
>
|
||||
{{ $t("library.admin.metadata.companies.noGames") }}
|
||||
</p>
|
||||
</ul>
|
||||
<ModalAddCompanyGame
|
||||
v-model="addGameModelOpen"
|
||||
:exclude="games.map((e) => e.id)"
|
||||
:company-id="company.id"
|
||||
@created="appendGame"
|
||||
/>
|
||||
<ModalUploadFile
|
||||
v-model="uploadLogoOpen"
|
||||
:endpoint="`/api/v1/admin/company/${company.id}/icon`"
|
||||
accept="image/*"
|
||||
@upload="updateLogo"
|
||||
/>
|
||||
<ModalUploadFile
|
||||
v-model="uploadBannerOpen"
|
||||
:endpoint="`/api/v1/admin/company/${company.id}/banner`"
|
||||
accept="image/*"
|
||||
@upload="updateBanner"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
|
||||
import { ArrowUpTrayIcon, PencilIcon, PlusIcon } from "@heroicons/vue/24/solid";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { GameModel } from "~~/prisma/client/models";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const companyId = route.params.id!.toString();
|
||||
const result = await $dropFetch("/api/v1/admin/company/:id", {
|
||||
params: { id: companyId },
|
||||
});
|
||||
const company = ref(result.company);
|
||||
const games = ref(result.games);
|
||||
|
||||
const addGameModelOpen = ref(false);
|
||||
const uploadLogoOpen = ref(false);
|
||||
const uploadBannerOpen = ref(false);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
useHead({
|
||||
title: `${company.value.mName} - Company`,
|
||||
});
|
||||
|
||||
const searchQuery = ref("");
|
||||
|
||||
const filteredGames = computed(() =>
|
||||
games.value.filter(
|
||||
(e: SerializeObject<GameModel>) =>
|
||||
e.mName.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||
e.mShortDescription.includes(searchQuery.value.toLowerCase()),
|
||||
),
|
||||
);
|
||||
|
||||
function buildToggleProxy(param: "developed" | "published") {
|
||||
async function tick(id: string, enabled: boolean) {
|
||||
if (
|
||||
company.value.developed.length == 0 &&
|
||||
company.value.published.length == 0
|
||||
)
|
||||
return await removeGame(id);
|
||||
|
||||
await $dropFetch("/api/v1/admin/company/:id/game", {
|
||||
method: "PATCH",
|
||||
params: {
|
||||
id: company.value.id,
|
||||
},
|
||||
body: {
|
||||
action: param,
|
||||
enabled,
|
||||
id,
|
||||
},
|
||||
failTitle: `Failed to update ${param} for game`,
|
||||
});
|
||||
}
|
||||
return new Proxy({} as { [key: string]: boolean }, {
|
||||
get(_target, prop, _reciever) {
|
||||
return company.value[param].includes(prop.toString());
|
||||
},
|
||||
set(_target, prop, value) {
|
||||
if (typeof value !== "boolean") return false;
|
||||
const id = prop.toString();
|
||||
const exists = company.value[param].findIndex((e) => e === id);
|
||||
if (value && exists == -1) {
|
||||
company.value[param].push(id);
|
||||
}
|
||||
if (!value && exists != -1) {
|
||||
company.value[param].splice(exists, 1);
|
||||
}
|
||||
tick(id, value);
|
||||
return true;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const published = buildToggleProxy("published");
|
||||
const developed = buildToggleProxy("developed");
|
||||
|
||||
async function removeGame(gameId: string) {
|
||||
await $dropFetch("/api/v1/admin/company/:id/game", {
|
||||
params: {
|
||||
id: company.value.id,
|
||||
},
|
||||
body: {
|
||||
id: gameId,
|
||||
},
|
||||
method: "DELETE",
|
||||
failTitle: "Failed to remove game",
|
||||
});
|
||||
const gameIndex = games.value.findIndex((e) => e.id == gameId);
|
||||
if (gameIndex == -1) return;
|
||||
games.value.splice(gameIndex, 1);
|
||||
|
||||
const publishedIndex = company.value.published.findIndex((e) => e === gameId);
|
||||
if (publishedIndex != -1) {
|
||||
company.value.published.splice(publishedIndex, 1);
|
||||
}
|
||||
|
||||
const developedIndex = company.value.developed.findIndex((e) => e === gameId);
|
||||
if (developedIndex != -1) {
|
||||
company.value.developed.splice(developedIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function appendGame(
|
||||
game: (typeof games.value)[number],
|
||||
published: boolean,
|
||||
developed: boolean,
|
||||
) {
|
||||
games.value.push(game);
|
||||
if (published) {
|
||||
company.value.published.push(game.id);
|
||||
}
|
||||
if (developed) {
|
||||
company.value.developed.push(game.id);
|
||||
}
|
||||
}
|
||||
|
||||
function buildFieldEditModal(
|
||||
field: "mName" | "mShortDescription" | "mWebsite",
|
||||
title: string,
|
||||
description: string,
|
||||
) {
|
||||
function modal() {
|
||||
createModal(
|
||||
ModalType.TextInput,
|
||||
{
|
||||
title,
|
||||
description,
|
||||
dft: company.value[field],
|
||||
},
|
||||
async (e, c, s) => {
|
||||
switch (e) {
|
||||
case "cancel": {
|
||||
c();
|
||||
break;
|
||||
}
|
||||
case "submit": {
|
||||
const result = await $dropFetch("/api/v1/admin/company/:id", {
|
||||
method: "PATCH",
|
||||
params: { id: company.value.id },
|
||||
body: { [field]: s! },
|
||||
failTitle: "Failed to update company details",
|
||||
});
|
||||
company.value[field] = result[field];
|
||||
c();
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return modal;
|
||||
}
|
||||
|
||||
const editName = buildFieldEditModal(
|
||||
"mName",
|
||||
t("library.admin.metadata.companies.modals.nameTitle"),
|
||||
t("library.admin.metadata.companies.modals.nameDescription"),
|
||||
);
|
||||
|
||||
const editShortDescription = buildFieldEditModal(
|
||||
"mShortDescription",
|
||||
t("library.admin.metadata.companies.modals.shortDeckTitle"),
|
||||
t("library.admin.metadata.companies.modals.shortDeckDescription"),
|
||||
);
|
||||
|
||||
const editWebsite = buildFieldEditModal(
|
||||
"mWebsite",
|
||||
t("library.admin.metadata.companies.modals.websiteTitle"),
|
||||
t("library.admin.metadata.companies.modals.websiteDescription"),
|
||||
);
|
||||
|
||||
function updateLogo(response: { id: string }) {
|
||||
company.value.mLogoObjectId = response.id;
|
||||
}
|
||||
|
||||
function updateBanner(response: { id: string }) {
|
||||
company.value.mBannerObjectId = response.id;
|
||||
}
|
||||
</script>
|
||||
153
app/pages/admin/metadata/companies/index.vue
Normal file
153
app/pages/admin/metadata/companies/index.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("library.admin.metadata.companies.title") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
{{ $t("library.admin.metadata.companies.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||
<button
|
||||
class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => (createCompanyOpen = true)"
|
||||
>
|
||||
{{ $t("common.create") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-1">
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
name="search"
|
||||
class="col-start-1 row-start-1 block w-full rounded-md bg-zinc-900 py-1.5 pl-10 pr-3 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:pl-9 sm:text-sm/6"
|
||||
:placeholder="$t('library.admin.metadata.companies.search')"
|
||||
/>
|
||||
<MagnifyingGlassIcon
|
||||
class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-zinc-400 sm:size-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<ul
|
||||
role="list"
|
||||
class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
|
||||
>
|
||||
<li
|
||||
v-for="company in filteredCompanies"
|
||||
:key="company.id"
|
||||
class="relative overflow-hidden col-span-1 flex flex-col justify-center divide-y divide-zinc-800 rounded-xl bg-zinc-950/30 text-left shadow-md border hover:scale-102 hover:shadow-xl hover:bg-zinc-950/70 border-zinc-800 transition-all duration-200 group"
|
||||
>
|
||||
<div class="flex flex-1 flex-row p-4 gap-x-4">
|
||||
<img
|
||||
class="h-20 w-20 p-3 flex-shrink-0 rounded-xl shadow group-hover:shadow-lg transition-all duration-200 bg-zinc-900 object-cover border border-zinc-800"
|
||||
:src="useObject(company.mLogoObjectId)"
|
||||
alt=""
|
||||
/>
|
||||
<div class="flex flex-col">
|
||||
<h3
|
||||
class="gap-x-2 text-sm inline-flex items-center font-medium text-zinc-100 font-display"
|
||||
>
|
||||
{{ company.mName }}
|
||||
</h3>
|
||||
<dl class="mt-1 flex flex-col justify-between">
|
||||
<dt class="sr-only">{{ $t("library.admin.shortDesc") }}</dt>
|
||||
<dd class="text-sm text-zinc-400">
|
||||
{{ company.mShortDescription }}
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="mt-4 flex flex-col gap-y-1">
|
||||
<NuxtLink
|
||||
:href="`/admin/metadata/companies/${company.id}`"
|
||||
class="w-fit rounded-md bg-zinc-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.openEditor"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
<button
|
||||
class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-red-500 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||
@click="() => deleteCompany(company.id)"
|
||||
>
|
||||
{{ $t("delete") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<p
|
||||
v-if="filteredCompanies.length == 0 && companies.length != 0"
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
|
||||
>
|
||||
{{ $t("common.noResults") }}
|
||||
</p>
|
||||
<p
|
||||
v-if="filteredCompanies.length == 0 && companies.length == 0"
|
||||
class="text-zinc-600 text-sm font-display font-bold uppercase text-center col-span-4"
|
||||
>
|
||||
{{ $t("library.admin.metadata.companies.noCompanies") }}
|
||||
</p>
|
||||
</ul>
|
||||
<ModalCreateCompany
|
||||
v-model="createCompanyOpen"
|
||||
@created="(company) => createCompany(company)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
|
||||
import type { CompanyModel } from "~~/prisma/client/models";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: t("library.admin.metadata.companies.title"),
|
||||
});
|
||||
|
||||
const createCompanyOpen = ref(false);
|
||||
|
||||
const searchQuery = ref("");
|
||||
|
||||
const rawCompanies = await $dropFetch("/api/v1/admin/company");
|
||||
const companies = ref(rawCompanies);
|
||||
|
||||
const filteredCompanies = computed(() =>
|
||||
companies.value.filter((e: CompanyModel) => {
|
||||
if (!searchQuery.value) return true;
|
||||
const searchQueryLower = searchQuery.value.toLowerCase();
|
||||
if (e.mName.toLowerCase().includes(searchQueryLower)) return true;
|
||||
if (e.mShortDescription.toLowerCase().includes(searchQueryLower))
|
||||
return true;
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
|
||||
async function deleteCompany(id: string) {
|
||||
await $dropFetch(`/api/v1/admin/company/:id`, {
|
||||
method: "DELETE",
|
||||
params: { id },
|
||||
failTitle: "Failed to delete company",
|
||||
});
|
||||
|
||||
const index = companies.value.findIndex((e) => e.id === id);
|
||||
companies.value.splice(index, 1);
|
||||
}
|
||||
|
||||
function createCompany(company: (typeof companies.value)[number]) {
|
||||
companies.value.push(company);
|
||||
}
|
||||
</script>
|
||||
62
app/pages/admin/metadata/index.vue
Normal file
62
app/pages/admin/metadata/index.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16">
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("library.admin.metadata.tags.title") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
{{ $t("library.admin.metadata.tags.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 lg:ml-16 sm:mt-0 sm:flex-none">
|
||||
<NuxtLink
|
||||
to="/admin/metadata/tags"
|
||||
class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.metadata.tags.action"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("library.admin.metadata.companies.title") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
{{ $t("library.admin.metadata.companies.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 lg:ml-16 sm:mt-0 sm:flex-none">
|
||||
<NuxtLink
|
||||
to="/admin/metadata/companies"
|
||||
class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="library.admin.metadata.companies.action"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
</script>
|
||||
75
app/pages/admin/metadata/tags.vue
Normal file
75
app/pages/admin/metadata/tags.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("library.admin.metadata.tags.title") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
{{ $t("library.admin.metadata.tags.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 lg:ml-16 sm:mt-0 sm:flex-none">
|
||||
<button
|
||||
class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => (createModalOpen = true)"
|
||||
>
|
||||
{{ $t("library.admin.metadata.tags.create") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<div
|
||||
v-for="(tag, tagIdx) in tags"
|
||||
:key="tag.id"
|
||||
class="py-2 px-3 inline-flex gap-x-3 bg-zinc-950 ring-1 ring-zinc-800 text-zinc-300"
|
||||
>
|
||||
{{ tag.name }}
|
||||
<button @click="() => deleteTag(tagIdx)">
|
||||
<TrashIcon
|
||||
class="transition size-4 text-zinc-700 hover:text-red-500"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ModalCreateTag v-model="createModalOpen" @created="onTagCreate" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { GameTagModel } from "~~/prisma/client/models";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const createModalOpen = ref(false);
|
||||
|
||||
const tags = ref(
|
||||
await $dropFetch<Array<SerializeObject<GameTagModel>>>("/api/v1/admin/tags"),
|
||||
);
|
||||
|
||||
function sort() {
|
||||
tags.value.sort((a, b) =>
|
||||
a.name.toLowerCase().localeCompare(b.name.toLowerCase()),
|
||||
);
|
||||
}
|
||||
|
||||
sort();
|
||||
|
||||
async function onTagCreate(tag: GameTagModel) {
|
||||
tags.value.push(tag);
|
||||
sort();
|
||||
}
|
||||
|
||||
async function deleteTag(tagIdx: number) {
|
||||
const tag = tags.value[tagIdx];
|
||||
await $dropFetch(`/api/v1/admin/tags/${tag.id}`, {
|
||||
method: "DELETE",
|
||||
failTitle: "Failed to delete tag",
|
||||
});
|
||||
tags.value.splice(tagIdx, 1);
|
||||
}
|
||||
</script>
|
||||
68
app/pages/admin/settings.vue
Normal file
68
app/pages/admin/settings.vue
Normal file
@ -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>
|
||||
108
app/pages/admin/settings/index.vue
Normal file
108
app/pages/admin/settings/index.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<form class="space-y-4" @submit.prevent="() => saveSettings()">
|
||||
<div class="pb-4 border-b border-zinc-700">
|
||||
<h2 class="text-xl font-semibold text-zinc-100">
|
||||
{{ $t("settings.admin.store.title") }}
|
||||
</h2>
|
||||
|
||||
<h3 class="text-base font-medium text-zinc-400 mb-3 m-x-0">
|
||||
{{ $t("settings.admin.store.showGamePanelTextDecoration") }}
|
||||
</h3>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FetchError } from "ofetch";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: t("settings.admin.title"),
|
||||
});
|
||||
|
||||
const settings = await $dropFetch("/api/v1/settings");
|
||||
const { game } = await $dropFetch("/api/v1/admin/settings/dummy-data");
|
||||
|
||||
const allowSave = ref(false);
|
||||
|
||||
const showGamePanelTextDecoration = ref<boolean>(
|
||||
settings.showGamePanelTextDecoration,
|
||||
);
|
||||
|
||||
function setShowTitleDescription(value: boolean) {
|
||||
showGamePanelTextDecoration.value = value;
|
||||
allowSave.value = true;
|
||||
}
|
||||
|
||||
const saving = ref<boolean>(false);
|
||||
async function saveSettings() {
|
||||
saving.value = true;
|
||||
try {
|
||||
await $dropFetch("/api/v1/admin/settings", {
|
||||
method: "PATCH",
|
||||
body: {
|
||||
showGamePanelTextDecoration: showGamePanelTextDecoration.value,
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
createModal(
|
||||
ModalType.Notification,
|
||||
{
|
||||
title: `Failed to save settings.`,
|
||||
description:
|
||||
e instanceof FetchError
|
||||
? (e.message)
|
||||
: (e as string).toString(),
|
||||
},
|
||||
(_, c) => c(),
|
||||
);
|
||||
}
|
||||
saving.value = false;
|
||||
allowSave.value = false;
|
||||
}
|
||||
</script>
|
||||
233
app/pages/admin/settings/tokens.vue
Normal file
233
app/pages/admin/settings/tokens.vue
Normal file
@ -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,
|
||||
message: "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>
|
||||
107
app/pages/admin/task/[id]/index.vue
Normal file
107
app/pages/admin/task/[id]/index.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtLink
|
||||
to="/admin/task"
|
||||
class="mb-2 transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
>
|
||||
<i18n-t keypath="tasks.admin.back" tag="span" scope="global">
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrowBack") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
|
||||
<div
|
||||
v-if="task && task.error"
|
||||
class="grow w-full flex items-center justify-center"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<ExclamationCircleIcon
|
||||
class="h-12 w-12 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div class="mt-3 text-center sm:mt-5">
|
||||
<h1
|
||||
class="text-3xl font-semibold font-display leading-6 text-zinc-100"
|
||||
>
|
||||
{{ task.error.title }}
|
||||
</h1>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-zinc-400 max-w-md">
|
||||
{{ task.error.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="task" class="flex flex-col w-full gap-y-4">
|
||||
<h1
|
||||
class="inline-flex items-center gap-x-3 text-3xl text-zinc-100 font-bold font-display"
|
||||
>
|
||||
<div>
|
||||
<CheckCircleIcon v-if="task.success" class="size-5 text-green-600" />
|
||||
<div v-else class="size-4 bg-blue-600 rounded-full animate-pulse" />
|
||||
</div>
|
||||
{{ task.name }}
|
||||
</h1>
|
||||
<div
|
||||
class="bg-zinc-950 p-2 rounded-md h-[80vh] flex flex-col flex-col-reverse overflow-y-scroll gap-y-1"
|
||||
>
|
||||
<LogLine
|
||||
v-for="(_, idx) in task.log"
|
||||
:key="idx"
|
||||
:log="parseTaskLog(task.log.at(-(idx + 1)))"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative h-5 rounded-xl bg-zinc-950 overflow-hidden">
|
||||
<div
|
||||
:style="{ width: `${task.progress}%` }"
|
||||
class="transition-all bg-blue-600 h-full"
|
||||
/>
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-blue-200 text-sm font-bold font-display"
|
||||
>{{
|
||||
$t("tasks.admin.progress", [Math.round(task.progress * 10) / 10])
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else role="status" class="w-full flex items-center justify-center">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="size-8 text-transparent animate-spin fill-white"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">{{ $t("common.srLoading") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CheckCircleIcon } from "@heroicons/vue/16/solid";
|
||||
import { ExclamationCircleIcon } from "@heroicons/vue/24/solid";
|
||||
|
||||
const route = useRoute();
|
||||
const taskId = route.params.id.toString();
|
||||
|
||||
const task = useTask(taskId);
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Task",
|
||||
});
|
||||
</script>
|
||||
181
app/pages/admin/task/index.vue
Normal file
181
app/pages/admin/task/index.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<h2 class="text-sm font-medium text-zinc-400">
|
||||
{{ $t("tasks.admin.runningTasksTitle") }}
|
||||
</h2>
|
||||
<ul
|
||||
role="list"
|
||||
class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4"
|
||||
>
|
||||
<li
|
||||
v-for="task in liveRunningTasks"
|
||||
:key="task.value?.id"
|
||||
class="col-span-1 divide-y divide-gray-200 rounded-lg bg-zinc-800 border border-zinc-700 shadow-sm"
|
||||
>
|
||||
<TaskWidget :task="task.value" :active="true" />
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
v-if="liveRunningTasks.length == 0"
|
||||
class="text-zinc-500 text-sm font-semibold"
|
||||
>
|
||||
{{ $t("tasks.admin.noTasksRunning") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 w-full grid lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h2 class="text-sm font-medium text-zinc-400">
|
||||
{{ $t("tasks.admin.completedTasksTitle") }}
|
||||
</h2>
|
||||
<ul role="list" class="mt-4 grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<li
|
||||
v-for="task in historicalTasks"
|
||||
:key="task.id"
|
||||
class="col-span-1 divide-y divide-gray-200 rounded-lg bg-zinc-800 border border-zinc-700 shadow-sm"
|
||||
>
|
||||
<TaskWidget :task="task" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-sm font-medium text-zinc-400">
|
||||
{{ $t("tasks.admin.dailyScheduledTitle") }}
|
||||
</h2>
|
||||
<ul role="list" class="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<li
|
||||
v-for="task in dailyTasks"
|
||||
:key="task"
|
||||
class="col-span-1 divide-y divide-gray-200 rounded-lg bg-zinc-800 border border-zinc-700 shadow-sm"
|
||||
>
|
||||
<div class="flex w-full items-center justify-between space-x-6 p-6">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-2">
|
||||
<h3 class="text-sm font-medium text-zinc-100">
|
||||
{{ scheduledTasks[task].name }}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
{{ scheduledTasks[task].description }}
|
||||
</p>
|
||||
<button
|
||||
class="mt-3 rounded-md text-xs font-medium text-zinc-100 hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-100 focus:ring-offset-2"
|
||||
@click="() => startTask(task)"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="tasks.admin.execute"
|
||||
tag="span"
|
||||
scope="global"
|
||||
class="inline-flex items-center gap-x-1"
|
||||
>
|
||||
<template #arrow>
|
||||
<PlayIcon class="size-4" aria-hidden="true" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="text-sm font-medium text-zinc-400 mt-8">
|
||||
{{ $t("tasks.admin.weeklyScheduledTitle") }}
|
||||
</h2>
|
||||
<ul role="list" class="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<li
|
||||
v-for="task in weeklyTasks"
|
||||
:key="task"
|
||||
class="col-span-1 divide-y divide-gray-200 rounded-lg bg-zinc-800 border border-zinc-700 shadow-sm"
|
||||
>
|
||||
<div class="flex w-full items-center justify-between space-x-6 p-6">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-2">
|
||||
<h3 class="text-sm font-medium text-zinc-100">
|
||||
{{ scheduledTasks[task].name }}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
{{ scheduledTasks[task].description }}
|
||||
</p>
|
||||
<button
|
||||
class="mt-3 rounded-md text-xs font-medium text-zinc-100 hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-100 focus:ring-offset-2"
|
||||
@click="() => startTask(task)"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="tasks.admin.execute"
|
||||
tag="span"
|
||||
scope="global"
|
||||
class="inline-flex items-center gap-x-1"
|
||||
>
|
||||
<template #arrow>
|
||||
<PlayIcon class="size-4" aria-hidden="true" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { PlayIcon } from "@heroicons/vue/24/outline";
|
||||
import type { TaskGroup } from "~~/server/internal/tasks/group";
|
||||
|
||||
useHead({
|
||||
title: "Tasks",
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { runningTasks, historicalTasks, dailyTasks, weeklyTasks } =
|
||||
await $dropFetch("/api/v1/admin/task");
|
||||
|
||||
const liveRunningTasks = ref(
|
||||
await Promise.all(runningTasks.map((e) => useTask(e))),
|
||||
);
|
||||
|
||||
const scheduledTasks: {
|
||||
[key in TaskGroup]: { name: string; description: string };
|
||||
} = {
|
||||
"cleanup:invitations": {
|
||||
name: t("tasks.admin.scheduled.cleanupInvitationsName"),
|
||||
description: t("tasks.admin.scheduled.cleanupInvitationsDescription"),
|
||||
},
|
||||
"cleanup:objects": {
|
||||
name: t("tasks.admin.scheduled.cleanupObjectsName"),
|
||||
description: t("tasks.admin.scheduled.cleanupObjectsDescription"),
|
||||
},
|
||||
"cleanup:sessions": {
|
||||
name: t("tasks.admin.scheduled.cleanupSessionsName"),
|
||||
description: t("tasks.admin.scheduled.cleanupSessionsDescription"),
|
||||
},
|
||||
"check:update": {
|
||||
name: t("tasks.admin.scheduled.checkUpdateName"),
|
||||
description: t("tasks.admin.scheduled.checkUpdateDescription"),
|
||||
},
|
||||
"import:game": {
|
||||
name: "",
|
||||
description: "",
|
||||
},
|
||||
debug: {
|
||||
name: "Debug Task",
|
||||
description: "Does debugging things.",
|
||||
},
|
||||
};
|
||||
|
||||
async function startTask(taskGroup: string) {
|
||||
const task = await $dropFetch("/api/v1/admin/task", {
|
||||
method: "POST",
|
||||
body: { taskGroup },
|
||||
failTitle: "Failed to start task",
|
||||
});
|
||||
const taskRef = await useTask(task.id);
|
||||
liveRunningTasks.value.push(taskRef);
|
||||
}
|
||||
</script>
|
||||
159
app/pages/admin/users/auth/index.vue
Normal file
159
app/pages/admin/users/auth/index.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||
<h2
|
||||
class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
|
||||
>
|
||||
{{ $t("users.admin.authentication.title") }}
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
|
||||
>
|
||||
{{ $t("users.admin.authentication.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
role="list"
|
||||
class="mt-8 grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-4 xl:gap-x-8"
|
||||
>
|
||||
<li
|
||||
v-for="authMech in authenticationMechanisms"
|
||||
:key="authMech.name"
|
||||
class="group overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50 hover:scale-[1.02] hover:border-zinc-700"
|
||||
>
|
||||
<div class="flex items-center gap-x-4 border-b border-zinc-800 p-6">
|
||||
<div
|
||||
class="flex h-10 w-10 flex-none items-center justify-center rounded-lg bg-zinc-800/50 ring-1 ring-zinc-700/50 transition-all duration-200 group-hover:bg-zinc-800 group-hover:ring-zinc-600/50"
|
||||
>
|
||||
<component
|
||||
:is="authMech.icon"
|
||||
:alt="`${authMech.name} icon`"
|
||||
class="h-6 w-6 text-zinc-100 transition-all duration-200 group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm/6 font-medium text-zinc-100">
|
||||
{{ authMech.name }}
|
||||
</div>
|
||||
<Menu v-if="authMech.route" as="div" class="relative ml-auto">
|
||||
<MenuButton
|
||||
class="-m-2.5 block p-2.5 text-zinc-400 hover:text-zinc-300 transition-colors duration-200"
|
||||
>
|
||||
<span class="sr-only">{{
|
||||
$t("users.admin.authentication.srOpenOptions")
|
||||
}}</span>
|
||||
<EllipsisHorizontalIcon class="h-5 w-5" aria-hidden="true" />
|
||||
</MenuButton>
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
>
|
||||
<MenuItems
|
||||
class="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-zinc-900 py-2 shadow-lg ring-1 ring-zinc-100/5 focus:outline-none"
|
||||
>
|
||||
<MenuItem v-slot="{ active }">
|
||||
<NuxtLink
|
||||
:href="authMech.route"
|
||||
:class="[
|
||||
active ? 'bg-zinc-800 outline-none' : '',
|
||||
'block px-3 py-1 text-sm/6 text-zinc-100 transition-colors duration-200',
|
||||
]"
|
||||
>{{ $t("users.admin.authentication.configure")
|
||||
}}<span class="sr-only">{{ authMech.name }}</span></NuxtLink
|
||||
>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
<dl class="-my-3 divide-y divide-zinc-700 px-6 py-4 text-sm/6">
|
||||
<div class="flex justify-between gap-x-4 py-3">
|
||||
<dt class="text-zinc-400">
|
||||
{{ $t("users.admin.authentication.enabledKey") }}
|
||||
</dt>
|
||||
<dd class="flex items-center">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset',
|
||||
authMech.enabled
|
||||
? 'bg-green-400/10 text-green-400 ring-green-400/20'
|
||||
: 'bg-red-400/10 text-red-400 ring-red-400/20',
|
||||
]"
|
||||
>
|
||||
<CheckIcon v-if="authMech.enabled" class="w-4 h-4 mr-1" />
|
||||
<XMarkIcon v-else class="w-4 h-4 mr-1" />
|
||||
{{
|
||||
authMech.enabled
|
||||
? $t("users.admin.authentication.enabled")
|
||||
: $t("users.admin.authentication.disabled")
|
||||
}}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div v-if="authMech.settings">
|
||||
<div
|
||||
v-for="[key, value] in Object.entries(authMech.settings)"
|
||||
:key="key"
|
||||
class="flex flex-nowrap justify-between gap-x-4 py-2"
|
||||
>
|
||||
<dt class="text-zinc-400">{{ key }}</dt>
|
||||
<dd class="text-zinc-300 truncate">
|
||||
{{ value }}
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconsSimpleAuthenticationLogo, IconsSSOLogo } from "#components";
|
||||
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
|
||||
import { EllipsisHorizontalIcon } from "@heroicons/vue/20/solid";
|
||||
import { CheckIcon, XMarkIcon } from "@heroicons/vue/24/solid";
|
||||
import type { AuthMec } from "~~/prisma/client/enums";
|
||||
import type { Component } from "vue";
|
||||
|
||||
useHead({
|
||||
title: "Authentication",
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const enabledMechanisms = await $dropFetch("/api/v1/admin/auth");
|
||||
|
||||
const authenticationMechanisms: Array<{
|
||||
name: string;
|
||||
mec: AuthMec;
|
||||
icon: Component;
|
||||
route?: string;
|
||||
enabled: boolean;
|
||||
settings?: { [key: string]: string | undefined } | undefined | boolean;
|
||||
}> = [
|
||||
{
|
||||
name: t("users.admin.authentication.simple"),
|
||||
mec: "Simple" as AuthMec,
|
||||
icon: IconsSimpleAuthenticationLogo,
|
||||
route: "/admin/users/auth/simple",
|
||||
},
|
||||
{
|
||||
name: t("users.admin.authentication.oidc"),
|
||||
mec: "OpenID" as AuthMec,
|
||||
icon: IconsSSOLogo,
|
||||
},
|
||||
].map((e) => ({
|
||||
...e,
|
||||
enabled: !!enabledMechanisms[e.mec],
|
||||
settings:
|
||||
typeof enabledMechanisms[e.mec] === "object" && enabledMechanisms[e.mec],
|
||||
}));
|
||||
</script>
|
||||
526
app/pages/admin/users/auth/simple/index.vue
Normal file
526
app/pages/admin/users/auth/simple/index.vue
Normal file
@ -0,0 +1,526 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mx-auto max-w-2xl lg:mx-0">
|
||||
<h2
|
||||
class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
|
||||
>
|
||||
{{ $t("users.admin.simple.title") }}
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
|
||||
>
|
||||
{{ $t("users.admin.simple.description") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="border-b border-zinc-700 py-5">
|
||||
<div
|
||||
class="-mt-2 flex flex-wrap items-center justify-between sm:flex-nowrap"
|
||||
>
|
||||
<div class="mt-2">
|
||||
<h3 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("users.admin.simple.invitationTitle") }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="ml-4 mt-2 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => (createModalOpen = true)"
|
||||
>
|
||||
{{ $t("users.admin.simple.createInvitation") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul role="list" class="divide-y divide-zinc-800">
|
||||
<li
|
||||
v-for="invitation in invitations"
|
||||
:key="invitation.id"
|
||||
class="relative flex justify-between gap-x-6 py-5"
|
||||
>
|
||||
<div class="flex min-w-0 gap-x-4">
|
||||
<div class="min-w-0 flex-auto">
|
||||
<div class="text-sm/6 font-semibold text-zinc-100">
|
||||
<p>{{ invitation.inviteUrl }}</p>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 flex text-xs/5 text-gray-500">
|
||||
{{
|
||||
invitation.username ??
|
||||
$t("users.admin.simple.noUsernameEnforced")
|
||||
}}
|
||||
{{ $t("common.divider") }}
|
||||
{{
|
||||
invitation.email ?? $t("users.admin.simple.noEmailEnforced")
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-x-4">
|
||||
<div class="hidden sm:flex sm:flex-col sm:items-end">
|
||||
<p class="text-sm/6 text-zinc-100">
|
||||
{{
|
||||
invitation.isAdmin
|
||||
? $t("users.admin.simple.adminInvitation")
|
||||
: $t("users.admin.simple.userInvitation")
|
||||
}}
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
<!-- forever is relative, right? -->
|
||||
<i18n-t
|
||||
v-if="
|
||||
new Date(invitation.expires).getTime() - Date.now() <
|
||||
3.156e12 // 100 years
|
||||
"
|
||||
keypath="users.admin.simple.expires"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #expiry>
|
||||
<RelativeTime :date="invitation.expires" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
<span v-else>
|
||||
{{ $t("users.admin.simple.neverExpires") }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<button @click="() => deleteInvitation(invitation.id)">
|
||||
<TrashIcon
|
||||
class="h-5 w-5 flex-none text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div v-if="invitations.length == 0" class="py-4 text-zinc-400 text-sm">
|
||||
{{ $t("users.admin.simple.noInvitations") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TransitionRoot as="template" :show="createModalOpen">
|
||||
<Dialog class="relative z-50" @close="createModalOpen = false">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="fixed inset-0 bg-zinc-950 bg-opacity-75 transition-opacity"
|
||||
/>
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
|
||||
<div
|
||||
class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
|
||||
>
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-out duration-300"
|
||||
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enter-to="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<form
|
||||
class="relative transform rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
|
||||
@submit.prevent="() => invite_wrapper()"
|
||||
>
|
||||
<div class="px-4 pb-4 pt-5 space-y-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div class="mt-3 text-center sm:mt-0 sm:text-left">
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
class="text-base font-semibold text-zinc-100"
|
||||
>{{ $t("users.admin.simple.inviteTitle") }}
|
||||
</DialogTitle>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-zinc-400">
|
||||
{{ $t("users.admin.simple.inviteDescription") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{
|
||||
$t("users.admin.simple.inviteUsernameLabel")
|
||||
}}</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validUsername ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
{{ $t("users.admin.simple.inviteUsernameFormat") }}
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
name="invite-username"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
:placeholder="
|
||||
$t('users.admin.simple.inviteUsernamePlaceholder')
|
||||
"
|
||||
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>
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("users.admin.simple.inviteEmailLabel") }}</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validEmail ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
{{ $t("users.admin.simple.inviteEmailDescription") }}
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
name="invite-email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
:placeholder="
|
||||
$t('users.admin.simple.inviteEmailPlaceholder')
|
||||
"
|
||||
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>
|
||||
<SwitchGroup
|
||||
as="div"
|
||||
class="flex items-center justify-between"
|
||||
>
|
||||
<span class="flex grow flex-col">
|
||||
<SwitchLabel
|
||||
as="span"
|
||||
class="text-sm/6 font-medium text-zinc-100"
|
||||
passive
|
||||
>{{
|
||||
$t("users.admin.simple.inviteAdminSwitchLabel")
|
||||
}}
|
||||
</SwitchLabel>
|
||||
<SwitchDescription
|
||||
as="span"
|
||||
class="text-sm text-zinc-400"
|
||||
>{{
|
||||
$t(
|
||||
"users.admin.simple.inviteAdminSwitchDescription",
|
||||
)
|
||||
}}</SwitchDescription
|
||||
>
|
||||
</span>
|
||||
<Switch
|
||||
v-model="isAdmin"
|
||||
:class="[
|
||||
isAdmin ? 'bg-blue-600' : 'bg-zinc-800',
|
||||
'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
:class="[
|
||||
isAdmin ? 'translate-x-5' : 'translate-x-0',
|
||||
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
|
||||
]"
|
||||
/>
|
||||
</Switch>
|
||||
</SwitchGroup>
|
||||
</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>
|
||||
|
||||
<div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon
|
||||
class="h-5 w-5 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-b-lg bg-zinc-800 px-4 py-3 sm:flex sm:gap-x-2 sm:flex-row-reverse sm:px-6"
|
||||
>
|
||||
<LoadingButton
|
||||
:loading="loading"
|
||||
type="submit"
|
||||
class="w-full sm:w-fit"
|
||||
:disabled="!(validUsername && validEmail)"
|
||||
>
|
||||
{{ $t("users.admin.simple.inviteButton") }}
|
||||
</LoadingButton>
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
|
||||
@click="createModalOpen = false"
|
||||
>
|
||||
{{ $t("cancel") }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
Switch,
|
||||
SwitchDescription,
|
||||
SwitchGroup,
|
||||
SwitchLabel,
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
import { TrashIcon, XCircleIcon } from "@heroicons/vue/24/solid";
|
||||
import type { InvitationModel } from "~~/prisma/client/models";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
import type { DurationLike } from "luxon";
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Simple authentication",
|
||||
});
|
||||
|
||||
const data = await $dropFetch<
|
||||
Array<SerializeObject<InvitationModel & { inviteUrl: string }>>
|
||||
>("/api/v1/admin/auth/invitation");
|
||||
const invitations = ref(data ?? []);
|
||||
|
||||
// Makes username undefined if it's empty
|
||||
const _username = ref<undefined | string>(undefined);
|
||||
const username = computed({
|
||||
get() {
|
||||
return _username.value;
|
||||
},
|
||||
set(v) {
|
||||
if (!v) return (_username.value = undefined);
|
||||
_username.value = v;
|
||||
},
|
||||
});
|
||||
const validUsername = computed(() =>
|
||||
_username.value === undefined ? true : _username.value.length >= 5,
|
||||
);
|
||||
|
||||
// Same as above
|
||||
const _email = ref<undefined | string>(undefined);
|
||||
const email = computed({
|
||||
get() {
|
||||
return _email.value;
|
||||
},
|
||||
set(v) {
|
||||
if (!v) return (_email.value = undefined);
|
||||
_email.value = v;
|
||||
},
|
||||
});
|
||||
const mailRegex = /^\S+@\S+\.\S+$/;
|
||||
const validEmail = computed(() =>
|
||||
_email.value === undefined ? true : mailRegex.test(email.value as string),
|
||||
);
|
||||
|
||||
const isAdmin = ref(false);
|
||||
|
||||
// Label to parameters to moment.js .add()
|
||||
const expiry: Record<string, DurationLike> = {
|
||||
[t("users.admin.simple.invite3Days")]: {
|
||||
days: 3,
|
||||
},
|
||||
[t("users.admin.simple.inviteWeek")]: {
|
||||
days: 7,
|
||||
},
|
||||
[t("users.admin.simple.inviteMonth")]: {
|
||||
month: 1,
|
||||
},
|
||||
[t("users.admin.simple.invite6Months")]: {
|
||||
months: 6,
|
||||
},
|
||||
[t("users.admin.simple.inviteYear")]: {
|
||||
year: 1,
|
||||
},
|
||||
[t("users.admin.simple.inviteNever")]: {
|
||||
year: 5000,
|
||||
}, // Never is relative, right?
|
||||
};
|
||||
const expiryKey = ref<keyof typeof expiry>(Object.keys(expiry)[0]); // Cast to any because we just know it's okay
|
||||
|
||||
const loading = ref(false);
|
||||
const error = ref<undefined | string>();
|
||||
|
||||
async function invite() {
|
||||
const expiryDate = DateTime.now().plus(expiry[expiryKey.value]).toJSON();
|
||||
|
||||
const newInvitation = await $dropFetch("/api/v1/admin/auth/invitation", {
|
||||
method: "POST",
|
||||
body: {
|
||||
username: username.value,
|
||||
email: email.value,
|
||||
isAdmin: isAdmin.value,
|
||||
expires: expiryDate,
|
||||
},
|
||||
});
|
||||
|
||||
createModalOpen.value = false;
|
||||
email.value = "";
|
||||
username.value = "";
|
||||
isAdmin.value = false;
|
||||
expiryKey.value = Object.keys(expiry)[0]; // Same reason as above
|
||||
return newInvitation;
|
||||
}
|
||||
|
||||
function invite_wrapper() {
|
||||
loading.value = true;
|
||||
error.value = undefined;
|
||||
invite()
|
||||
.then((invitation) => {
|
||||
invitations.value.push(invitation);
|
||||
})
|
||||
.catch((response) => {
|
||||
const message = response.message || t("errors.unknown");
|
||||
error.value = message;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteInvitation(id: string) {
|
||||
await $dropFetch("/api/v1/admin/auth/invitation", {
|
||||
method: "DELETE",
|
||||
body: {
|
||||
id: id,
|
||||
},
|
||||
});
|
||||
|
||||
const index = invitations.value.findIndex((e) => e.id === id);
|
||||
invitations.value.splice(index, 1);
|
||||
}
|
||||
|
||||
const createModalOpen = ref(false);
|
||||
</script>
|
||||
166
app/pages/admin/users/index.vue
Normal file
166
app/pages/admin/users/index.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-base font-semibold text-zinc-100">
|
||||
{{ $t("header.admin.users") }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
{{ $t("users.admin.description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||
<NuxtLink
|
||||
to="/admin/users/auth"
|
||||
class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
<i18n-t keypath="users.admin.authLink" tag="span" scope="global">
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 flow-root">
|
||||
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
||||
<div
|
||||
class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow"
|
||||
>
|
||||
<table class="min-w-full divide-y divide-zinc-700">
|
||||
<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("users.admin.displayNameHeader") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("users.admin.usernameHeader") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("users.admin.emailHeader") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("users.admin.adminHeader") }}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ $t("users.admin.authoptionsHeader") }}
|
||||
</th>
|
||||
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
||||
<span class="sr-only">
|
||||
{{ $t("users.admin.srEditLabel") }}
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-zinc-700">
|
||||
<tr
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="hover:bg-zinc-800/50 transition-colors duration-150"
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-6"
|
||||
>
|
||||
{{ user.displayName }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
{{ user.username }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
{{ user.email }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm">
|
||||
<span
|
||||
:class="[
|
||||
'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset',
|
||||
user.admin
|
||||
? 'bg-blue-400/10 text-blue-400 ring-blue-400/20'
|
||||
: 'bg-zinc-400/10 text-zinc-400 ring-zinc-400/20',
|
||||
]"
|
||||
>
|
||||
{{
|
||||
user.admin
|
||||
? $t("users.admin.adminUserLabel")
|
||||
: $t("users.admin.normalUserLabel")
|
||||
}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span
|
||||
v-for="mec in user.authMecs"
|
||||
:key="mec.mec"
|
||||
class="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-1 text-xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-400/20"
|
||||
>
|
||||
{{ mec.mec }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
|
||||
>
|
||||
<button
|
||||
v-if="user.id !== currentUser?.id"
|
||||
class="px-2 py-1 rounded bg-red-900/50 backdrop-blur-sm transition text-sm/6 font-semibold text-red-400 hover:text-red-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
@click="() => setUserToDelete(user)"
|
||||
>
|
||||
{{ $t("users.admin.delete") }}
|
||||
</button>
|
||||
|
||||
<!--
|
||||
<NuxtLink to="#" class="text-blue-600 hover:text-blue-500"
|
||||
>Edit<span class="sr-only"
|
||||
>, {{ user.displayName }}</span
|
||||
></NuxtLink
|
||||
>
|
||||
-->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ModalDeleteUser v-model="userToDelete" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { UserModel } from "~~/prisma/client/models";
|
||||
|
||||
useHead({
|
||||
title: "Users",
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const users = useUsers();
|
||||
const currentUser = useUser();
|
||||
|
||||
if (!users.value) {
|
||||
await fetchUsers();
|
||||
}
|
||||
|
||||
const userToDelete = ref();
|
||||
|
||||
const setUserToDelete = (user: UserModel) => (userToDelete.value = user);
|
||||
</script>
|
||||
289
app/pages/auth/register.vue
Normal file
289
app/pages/auth/register.vue
Normal file
@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="flex min-h-screen flex-1 bg-zinc-900">
|
||||
<div
|
||||
class="flex flex-1 flex-col justify-center px-4 py-8 sm:px-6 lg:flex-none lg:px-20 xl:px-24"
|
||||
>
|
||||
<div class="mx-auto w-full max-w-sm lg:w-96">
|
||||
<div>
|
||||
<DropLogo class="h-8 w-auto" />
|
||||
<h2
|
||||
class="mt-4 text-2xl font-bold font-display leading-9 tracking-tight text-zinc-100"
|
||||
>
|
||||
{{ $t("auth.register.title") }}
|
||||
</h2>
|
||||
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
||||
{{ $t("auth.register.subheader") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="bg-zinc-900">
|
||||
<form class="space-y-4" @submit.prevent="() => register_wrapper()">
|
||||
<div>
|
||||
<label
|
||||
for="display-name"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("auth.displayName") }}</label
|
||||
>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
id="display-name"
|
||||
v-model="displayName"
|
||||
name="display-name"
|
||||
type="text"
|
||||
autocomplete="display-name"
|
||||
required
|
||||
placeholder="AwesomeDropGamer771"
|
||||
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>
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("auth.email") }}</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validEmail ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
{{ $t("auth.register.emailFormat") }}
|
||||
</p>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
:disabled="!!invitation?.email"
|
||||
placeholder="me@example.com"
|
||||
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 class="w-full h-px bg-zinc-700" />
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("auth.username") }}</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validUsername ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
{{ $t("auth.register.usernameFormat") }}
|
||||
</p>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
name="username"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
required
|
||||
:disabled="!!invitation?.username"
|
||||
placeholder="myUsername"
|
||||
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 class="w-full h-px bg-zinc-700" />
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("auth.password") }}</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validPassword ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
{{ $t("auth.register.passwordFormat") }}
|
||||
</p>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="password"
|
||||
required
|
||||
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>
|
||||
<label
|
||||
for="confirm-password"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>{{ $t("auth.confirmPassword") }}</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validConfirmPassword ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
{{ $t("auth.register.confirmPasswordFormat") }}
|
||||
</p>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmPassword"
|
||||
name="confirm-password"
|
||||
type="password"
|
||||
autocomplete="confirm-password"
|
||||
required
|
||||
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>
|
||||
<LoadingButton type="submit" :loading="loading" class="w-full">
|
||||
{{ $t("common.create") }}
|
||||
</LoadingButton>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-3">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon
|
||||
class="h-5 w-5 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative hidden w-0 flex-1 lg:block">
|
||||
<img
|
||||
src="/wallpapers/signin.jpg"
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { XCircleIcon } from "@heroicons/vue/24/solid";
|
||||
import { type } from "arktype";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const invitationId = route.query.id?.toString();
|
||||
if (!invitationId)
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: t("errors.inviteRequired"),
|
||||
});
|
||||
|
||||
const invitation = await $dropFetch(
|
||||
`/api/v1/auth/signup/simple?id=${encodeURIComponent(invitationId)}`,
|
||||
);
|
||||
|
||||
const email = ref(invitation?.email);
|
||||
const displayName = ref("");
|
||||
const username = ref(invitation?.username);
|
||||
const password = ref("");
|
||||
const confirmPassword = ref(undefined);
|
||||
|
||||
const emailValidator = type("string.email");
|
||||
const validEmail = computed(
|
||||
() => !((emailValidator(email.value) as unknown) instanceof type.errors),
|
||||
);
|
||||
|
||||
const usernameValidator = type("string.alphanumeric >= 5").to("string.lower");
|
||||
const validUsername = computed(
|
||||
() =>
|
||||
!((usernameValidator(username.value) as unknown) instanceof type.errors),
|
||||
);
|
||||
|
||||
const passwordValidator = type("string >= 14");
|
||||
const validPassword = computed(
|
||||
() =>
|
||||
!((passwordValidator(password.value) as unknown) instanceof type.errors),
|
||||
);
|
||||
const validConfirmPassword = computed(
|
||||
() => password.value == confirmPassword.value,
|
||||
);
|
||||
|
||||
const loading = ref(false);
|
||||
const error = ref<string | undefined>(undefined);
|
||||
|
||||
async function register() {
|
||||
await $dropFetch("/api/v1/auth/signup/simple", {
|
||||
method: "POST",
|
||||
body: {
|
||||
invitation: invitationId,
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
email: email.value,
|
||||
displayName: displayName.value,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function register_wrapper() {
|
||||
if (
|
||||
!validEmail.value ||
|
||||
!validUsername.value ||
|
||||
!validPassword.value ||
|
||||
!validConfirmPassword.value
|
||||
)
|
||||
return;
|
||||
|
||||
loading.value = true;
|
||||
register()
|
||||
.then(() => {
|
||||
if (route.query.after == "close") {
|
||||
window.close();
|
||||
return;
|
||||
}
|
||||
router.push("/auth/signin");
|
||||
})
|
||||
.catch((response) => {
|
||||
const message = response.message || t("errors.unknown");
|
||||
error.value = message;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: t("auth.register.title"),
|
||||
});
|
||||
</script>
|
||||
59
app/pages/auth/signin.vue
Normal file
59
app/pages/auth/signin.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="flex min-h-screen flex-1 bg-zinc-900">
|
||||
<div
|
||||
class="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24"
|
||||
>
|
||||
<div class="mx-auto w-full max-w-sm lg:w-96">
|
||||
<div>
|
||||
<DropLogo class="h-10 w-auto" />
|
||||
<h2
|
||||
class="mt-8 text-2xl font-bold font-display leading-9 tracking-tight text-zinc-100"
|
||||
>
|
||||
{{ $t("auth.signin.title") }}
|
||||
</h2>
|
||||
<p class="mt-2 text-sm leading-6 text-zinc-400">
|
||||
{{ $t("auth.signin.noAccount") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
<div>
|
||||
<AuthSimple v-if="enabledAuths.includes('Simple' as AuthMec)" />
|
||||
<div
|
||||
v-if="enabledAuths.length > 1"
|
||||
class="py-4 flex flex-row items-center justify-center gap-x-4 font-bold text-sm text-zinc-600"
|
||||
>
|
||||
<span class="h-[1px] grow bg-zinc-600" />
|
||||
{{ $t("auth.signin.or") }}
|
||||
<span class="h-[1px] grow bg-zinc-600" />
|
||||
</div>
|
||||
<AuthOpenID v-if="enabledAuths.includes('OpenID' as AuthMec)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative hidden w-0 flex-1 lg:block">
|
||||
<img
|
||||
src="/wallpapers/signin.jpg"
|
||||
class="absolute inset-0 h-full w-full object-cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { AuthMec } from "~~/prisma/client/enums";
|
||||
import DropLogo from "~~/components/DropLogo.vue";
|
||||
|
||||
const { t } = useI18n();
|
||||
const enabledAuths = await $dropFetch("/api/v1/auth");
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: t("auth.signin.pageTitle"),
|
||||
});
|
||||
</script>
|
||||
246
app/pages/client/authorize/[id].vue
Normal file
246
app/pages/client/authorize/[id].vue
Normal file
@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="completed"
|
||||
class="min-h-full w-full flex items-center justify-center py-10"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<CheckCircleIcon class="h-12 w-12 text-green-600" aria-hidden="true" />
|
||||
<div class="mt-3 text-center sm:mt-5">
|
||||
<h1 class="text-3xl font-semibold font-display leading-6 text-zinc-100">
|
||||
{{ $t("auth.callback.success") }}
|
||||
</h1>
|
||||
<div class="mt-4">
|
||||
<p class="mx-auto text-sm text-zinc-400 max-w-sm">
|
||||
{{ $t("auth.callback.authorizedClient") }}
|
||||
</p>
|
||||
|
||||
<Disclosure v-if="authToken" v-slot="{ open }" as="div" class="mt-8">
|
||||
<dt>
|
||||
<DisclosureButton
|
||||
class="pb-2 flex w-full items-start justify-between text-left text-zinc-400"
|
||||
>
|
||||
<span class="text-sm font-semibold">
|
||||
{{ $t("auth.callback.issues") }}
|
||||
</span>
|
||||
<span class="ml-6 flex h-7 items-center">
|
||||
<ChevronUpIcon
|
||||
v-if="!open"
|
||||
class="size-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<ChevronDownIcon v-else class="size-4" aria-hidden="true" />
|
||||
</span>
|
||||
</DisclosureButton>
|
||||
</dt>
|
||||
<DisclosurePanel as="dd" class="mt-2">
|
||||
<p class="text-zinc-100 font-semibold text-sm mb-3">
|
||||
{{ $t("auth.callback.paste") }}
|
||||
</p>
|
||||
<p
|
||||
class="max-w-sm text-nowrap overflow-x-auto text-sm bg-zinc-950/50 p-3 text-zinc-300 w-fit mx-auto rounded-xl"
|
||||
>
|
||||
{{ authToken }}
|
||||
</p>
|
||||
</DisclosurePanel>
|
||||
</Disclosure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main
|
||||
v-else-if="clientData"
|
||||
class="mx-auto grid lg:grid-cols-2 max-w-md lg:max-w-none min-h-full place-items-center w-full gap-4 px-6 py-12 sm:py-32 lg:px-8"
|
||||
>
|
||||
<div>
|
||||
<div class="text-left">
|
||||
<h1
|
||||
class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
|
||||
>
|
||||
{{ $t("auth.callback.authClient") }}
|
||||
</h1>
|
||||
<p class="mt-6 text-base leading-7 text-zinc-400">
|
||||
{{ $t("auth.callback.requestedAccess", { name: clientData.name }) }}
|
||||
</p>
|
||||
<div
|
||||
action="/api/v1/client/callback"
|
||||
method="post"
|
||||
class="mt-10 gap-x-6"
|
||||
>
|
||||
<input type="text" class="hidden" name="id" :value="clientId" />
|
||||
<button
|
||||
class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="() => authorize_wrapper()"
|
||||
>
|
||||
{{ $t("auth.callback.authorize") }}
|
||||
</button>
|
||||
|
||||
<div v-if="error" class="mt-5 rounded-md bg-red-600/10 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="max-w-2xl">
|
||||
<p
|
||||
class="mt-6 font-semibold font-display text-lg leading-8 text-zinc-100"
|
||||
>
|
||||
{{
|
||||
$t("auth.callback.permWarning", {
|
||||
name: clientData.name,
|
||||
platform: clientData.platform,
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-8 max-w-2xl sm:mt-12 lg:mt-14">
|
||||
<dl class="flex flex-col gap-x-8 gap-y-8">
|
||||
<div
|
||||
v-for="feature in scopes"
|
||||
:key="feature.name"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<dt
|
||||
class="flex items-center gap-x-3 text-base font-semibold font-display leading-7 text-zinc-100"
|
||||
>
|
||||
<component
|
||||
:is="feature.icon"
|
||||
class="h-5 w-5 flex-none text-blue-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ feature.name }}
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-4 flex flex-auto flex-col text-base leading-7 text-zinc-400"
|
||||
>
|
||||
<p class="flex-auto">{{ feature.description }}</p>
|
||||
<p class="mt-1">
|
||||
<NuxtLink
|
||||
:href="feature.href"
|
||||
class="text-sm font-semibold leading-6 text-blue-600"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="auth.callback.learn"
|
||||
tag="span"
|
||||
scope="global"
|
||||
>
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
|
||||
import {
|
||||
ArrowDownTrayIcon,
|
||||
UserGroupIcon,
|
||||
XCircleIcon,
|
||||
} from "@heroicons/vue/16/solid";
|
||||
import { LockClosedIcon } from "@heroicons/vue/20/solid";
|
||||
import { CheckCircleIcon, CloudIcon } from "@heroicons/vue/24/outline";
|
||||
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/solid";
|
||||
import type { FetchError } from "ofetch";
|
||||
|
||||
const route = useRoute();
|
||||
const clientId = route.params.id;
|
||||
|
||||
const clientData = await $dropFetch(`/api/v1/client/auth?id=${clientId}`);
|
||||
|
||||
const completed = ref(false);
|
||||
const error = ref();
|
||||
const authToken = ref<string | undefined>();
|
||||
|
||||
async function authorize() {
|
||||
switch (clientData.mode) {
|
||||
case "callback": {
|
||||
const { redirect, token } = await $dropFetch(
|
||||
`/api/v1/client/auth/callback`,
|
||||
{
|
||||
method: "POST",
|
||||
body: { id: clientId },
|
||||
},
|
||||
);
|
||||
authToken.value = token;
|
||||
window.location.replace(redirect);
|
||||
return;
|
||||
}
|
||||
case "code": {
|
||||
await $dropFetch("/api/v1/client/auth/code", {
|
||||
method: "POST",
|
||||
body: { id: clientId },
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
message: "Unknown client auth mode: " + clientData.mode,
|
||||
fatal: true,
|
||||
});
|
||||
}
|
||||
|
||||
async function authorize_wrapper() {
|
||||
try {
|
||||
await authorize();
|
||||
} catch (e) {
|
||||
const errorMessage =
|
||||
(e as FetchError)?.message || "An unknown error occurred.";
|
||||
error.value = errorMessage;
|
||||
} finally {
|
||||
completed.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
const scopes = [
|
||||
{
|
||||
name: "Access game content and saves",
|
||||
description:
|
||||
"The client will be able to download games, sync saves and access game content, like screenshots and mods.",
|
||||
href: "/docs/access/content",
|
||||
icon: ArrowDownTrayIcon,
|
||||
},
|
||||
{
|
||||
name: "Update your status",
|
||||
description:
|
||||
"The client will be able to update your status, and affect your playtime.",
|
||||
href: "/docs/access/status",
|
||||
icon: UserGroupIcon,
|
||||
},
|
||||
clientData.capabilities["peerAPI"] && {
|
||||
name: "Access the Drop network",
|
||||
description:
|
||||
"The client will be able to establish P2P connections with other users to enable features like download aggregation, Remote LAN play and P2P multiplayer.",
|
||||
href: "/docs/access/network",
|
||||
icon: LockClosedIcon,
|
||||
},
|
||||
clientData.capabilities["cloudSaves"] && {
|
||||
name: "Upload and sync cloud saves",
|
||||
description:
|
||||
"The client will be able to upload new cloud saves, and edit your existing ones.",
|
||||
href: "/docs/access/cloud",
|
||||
icon: CloudIcon,
|
||||
},
|
||||
].filter((e) => e !== undefined);
|
||||
|
||||
useHead({
|
||||
title: "Authorize",
|
||||
});
|
||||
</script>
|
||||
135
app/pages/client/code/index.vue
Normal file
135
app/pages/client/code/index.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="w-full h-max min-h-[30vw] flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<h1 class="text-2xl font-bold text-zinc-100">
|
||||
{{ $t("auth.code.title") }}
|
||||
</h1>
|
||||
<p class="mt-1 max-w-sm text-zinc-400 mx-auto">
|
||||
{{ $t("auth.code.description") }}
|
||||
</p>
|
||||
<div v-if="!loading" class="mt-8 flex flex-row gap-4">
|
||||
<input
|
||||
v-for="i in codeLength"
|
||||
ref="codeElements"
|
||||
:key="i"
|
||||
v-model="code[i - 1]"
|
||||
class="uppercase w-16 h-16 appearance-none text-center bg-zinc-900 rounded-xl border-zinc-700 focus:border-blue-600 text-2xl text-bold font-display text-zinc-100"
|
||||
type="text"
|
||||
pattern="\d*"
|
||||
:placeholder="placeholder[i - 1]"
|
||||
@keydown="(v) => keydown(i - 1, v)"
|
||||
@input="() => input(i - 1)"
|
||||
@focusin="() => select(i - 1)"
|
||||
@paste="(v) => paste(i - 1, v)"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="mt-8 flex items-center justify-center">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="size-12 text-transparent animate-spin fill-white"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="error"
|
||||
class="mt-8 rounded-md bg-red-600/10 p-4 max-w-sm mx-auto"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { XCircleIcon } from "@heroicons/vue/24/solid";
|
||||
import { FetchError } from "ofetch";
|
||||
|
||||
const codeLength = 7;
|
||||
const placeholder = "1A2B3C4";
|
||||
const codeElements = useTemplateRef("codeElements");
|
||||
const code = ref<string[]>([]);
|
||||
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const error = ref<string | undefined>(undefined);
|
||||
|
||||
function keydown(index: number, event: KeyboardEvent) {
|
||||
if (event.key === "Backspace" && !code.value[index] && index > 0) {
|
||||
codeElements.value![index - 1].focus();
|
||||
}
|
||||
}
|
||||
|
||||
function input(index: number) {
|
||||
if (codeElements.value === null) return;
|
||||
const v = code.value[index] ?? "";
|
||||
if (v.length > 1) code.value[index] = v[0];
|
||||
|
||||
if (!(index + 1 >= codeElements.value.length) && v) {
|
||||
codeElements.value[index + 1].focus();
|
||||
}
|
||||
|
||||
if (!(index - 1 < 0) && !v) {
|
||||
codeElements.value[index - 1].focus();
|
||||
}
|
||||
|
||||
console.log(index, codeLength - 1);
|
||||
if (index == codeLength - 1) {
|
||||
const assembledCode = code.value.join("");
|
||||
if (assembledCode.length == codeLength) {
|
||||
complete(assembledCode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function select(index: number) {
|
||||
if (!codeElements.value) return;
|
||||
if (index >= codeElements.value.length) return;
|
||||
codeElements.value[index].select();
|
||||
}
|
||||
|
||||
function paste(index: number, event: ClipboardEvent) {
|
||||
const newCode = event.clipboardData!.getData("text/plain");
|
||||
for (let i = 0; i < newCode.length && i < codeLength; i++) {
|
||||
code.value[i] = newCode[i];
|
||||
codeElements.value![i].focus();
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
async function complete(code: string) {
|
||||
loading.value = true;
|
||||
try {
|
||||
const clientId = await $dropFetch(`/api/v1/client/auth/code?code=${code}`);
|
||||
router.push(`/client/authorize/${clientId}`);
|
||||
} catch (e) {
|
||||
if (e instanceof FetchError) {
|
||||
error.value =
|
||||
e.message ?? "An unknown error occurred.";
|
||||
} else {
|
||||
error.value = (e as string)?.toString();
|
||||
}
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
</script>
|
||||
8
app/pages/community.vue
Normal file
8
app/pages/community.vue
Normal file
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div class="text-gray-100">{{ $t("todo") }}</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
useHead({
|
||||
title: "Settings",
|
||||
});
|
||||
</script>
|
||||
12
app/pages/index.vue
Normal file
12
app/pages/index.vue
Normal file
@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
useHead({
|
||||
title: "Home",
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
router.replace("/store");
|
||||
</script>
|
||||
168
app/pages/library.vue
Normal file
168
app/pages/library.vue
Normal file
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<TransitionRoot as="template" :show="sidebarOpen">
|
||||
<Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-zinc-900/80" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 flex">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="-translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 left-full flex w-16 justify-center pt-5"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="sr-only">{{
|
||||
$t("userHeader.closeSidebar")
|
||||
}}</span>
|
||||
<XMarkIcon class="size-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="bg-zinc-900">
|
||||
<DirectoryLibrary />
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div
|
||||
class="hidden lg:flex lg:inset-y-0 lg:z-50 lg:shrink-0 lg:basis-[18rem] lg:flex-col lg:border-r-2 lg:border-zinc-800"
|
||||
>
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<DirectoryLibrary />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="block flex items-center gap-x-2 bg-zinc-950 px-2 py-1 shadow-xs sm:px-4 lg:hidden border-b border-zinc-700"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="sr-only">{{ $t("header.openSidebar") }}</span>
|
||||
<Bars3Icon class="size-6" aria-hidden="true" />
|
||||
</button>
|
||||
<div
|
||||
class="flex-1 text-sm/6 font-semibold uppercase font-display text-zinc-400"
|
||||
>
|
||||
{{ $t("userHeader.links.library") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from "@headlessui/vue";
|
||||
import { Bars3Icon, XMarkIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const sidebarOpen = ref(false);
|
||||
|
||||
router.afterEach(() => {
|
||||
sidebarOpen.value = false;
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: t("userHeader.links.library"),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Fade transition for main content */
|
||||
|
||||
/* List transition animations */
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.list-move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Springy list animations */
|
||||
.list-enter-active {
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-move {
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
</style>
|
||||
68
app/pages/library/collection/[id]/index.vue
Normal file
68
app/pages/library/collection/[id]/index.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<div class="max-w-2xl">
|
||||
<div class="flex items-center gap-x-3 mb-4">
|
||||
<NuxtLink
|
||||
to="/library"
|
||||
class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
>
|
||||
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
|
||||
{{ $t("library.back") }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold font-display text-zinc-100">
|
||||
{{ collection?.name }}
|
||||
</h2>
|
||||
<p class="mt-2 text-zinc-400">
|
||||
{{ $t("library.gameCount", collection?.entries?.length || 0) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Games grid -->
|
||||
<div
|
||||
class="mt-4 flex flex-row gap-4 flex-wrap justify-center sm:justify-start"
|
||||
>
|
||||
<GamePanel
|
||||
v-for="entry in collection?.entries"
|
||||
:key="entry.gameId"
|
||||
:game="entry.game"
|
||||
:href="`/library/game/${entry.game.id}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeftIcon } from "@heroicons/vue/20/solid";
|
||||
|
||||
const route = useRoute();
|
||||
const collections = await useCollections();
|
||||
const { t } = useI18n();
|
||||
const collection = computed(() =>
|
||||
collections.value.find((e) => e.id == route.params.id),
|
||||
);
|
||||
if (collection.value === undefined) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
message: t("library.collection.notFound"),
|
||||
fatal: true,
|
||||
});
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: collection.value?.name || t("library.collection.title"),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
</style>
|
||||
200
app/pages/library/game/[id]/index.vue
Normal file
200
app/pages/library/game/[id]/index.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div
|
||||
class="mx-auto w-full relative flex flex-col justify-center pt-72 overflow-hidden"
|
||||
>
|
||||
<!-- Banner background with gradient overlays -->
|
||||
<div class="absolute inset-0 z-0 rounded-xl overflow-hidden">
|
||||
<img
|
||||
:src="useObject(game.mBannerObjectId)"
|
||||
class="w-full h-[24rem] object-cover blur-sm scale-105"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent opacity-90"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="px-4 sm:px-8pb-4">
|
||||
<div class="flex items-center gap-x-3 mb-4">
|
||||
<NuxtLink
|
||||
to="/library"
|
||||
class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
>
|
||||
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
|
||||
{{ $t("library.back") }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Game title and description -->
|
||||
<h1
|
||||
class="text-3xl sm:text-5xl text-zinc-100 font-bold font-display drop-shadow-lg"
|
||||
>
|
||||
{{ game.mName }}
|
||||
</h1>
|
||||
<p class="mt-4 mb-8 text-sm sm:text-lg text-zinc-400 max-w-3xl">
|
||||
{{ game.mShortDescription }}
|
||||
</p>
|
||||
|
||||
<div class="flex items-stretch flex-col lg:flex-row gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
{{ $t("library.launcherOpen") }}
|
||||
<ArrowTopRightOnSquareIcon
|
||||
class="-mr-0.5 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<div class="relative z-50">
|
||||
<AddLibraryButton class="font-bold" :game-id="game.id" />
|
||||
</div>
|
||||
<NuxtLink
|
||||
:to="`/store/${game.id}`"
|
||||
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
|
||||
>
|
||||
{{ $t("store.viewInStore") }}
|
||||
<ArrowUpRightIcon class="-mr-0.5 h-5 w-5" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="w-full bg-zinc-900 px-4 sm:px-8 py-3 sm:py-6">
|
||||
<div class="mt-8 flex flex-col gap-5 sm:gap-10">
|
||||
<div class="col-start-1 lg:col-start-2 space-y-6">
|
||||
<div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
|
||||
<h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">
|
||||
{{ $t("store.images") }}
|
||||
</h2>
|
||||
<div class="relative">
|
||||
<VueCarousel :items-to-show="1">
|
||||
<VueSlide
|
||||
v-for="image in game.mImageCarouselObjectIds"
|
||||
:key="image"
|
||||
>
|
||||
<img
|
||||
class="w-fit h-48 lg:h-96 rounded"
|
||||
:src="useObject(image)"
|
||||
/>
|
||||
</VueSlide>
|
||||
<VueSlide v-if="game.mImageCarouselObjectIds.length == 0">
|
||||
<div
|
||||
class="h-48 lg:h-96 aspect-[1/2] flex items-center justify-center text-zinc-700 font-bold font-display"
|
||||
>
|
||||
{{ $t("store.noImages") }}
|
||||
</div>
|
||||
</VueSlide>
|
||||
|
||||
<template #addons>
|
||||
<VueNavigation />
|
||||
<CarouselPagination class="py-2 px-12" />
|
||||
</template>
|
||||
</VueCarousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
|
||||
<div
|
||||
class="prose prose-invert prose-blue overflow-y-auto custom-scrollbar max-w-none"
|
||||
v-html="descriptionHTML"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ArrowTopRightOnSquareIcon,
|
||||
ArrowUpRightIcon,
|
||||
} from "@heroicons/vue/20/solid";
|
||||
import { micromark } from "micromark";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.params.id.toString();
|
||||
|
||||
const { game: rawGame } = await $dropFetch(`/api/v1/games/${id}`);
|
||||
const game = computed(() => {
|
||||
if (!rawGame) {
|
||||
throw createError({ statusCode: 404, message: t("library.notFound") });
|
||||
}
|
||||
return rawGame;
|
||||
});
|
||||
|
||||
// Convert markdown to HTML
|
||||
const descriptionHTML = computed(() =>
|
||||
micromark(game.value.mDescription ?? ""),
|
||||
);
|
||||
|
||||
// const currentImageIndex = ref(0);
|
||||
|
||||
// function nextImage() {
|
||||
// if (!game.value?.mImageCarousel) return;
|
||||
// currentImageIndex.value =
|
||||
// (currentImageIndex.value + 1) % game.value.mImageCarousel.length;
|
||||
// }
|
||||
|
||||
// function previousImage() {
|
||||
// if (!game.value?.mImageCarousel) return;
|
||||
// currentImageIndex.value =
|
||||
// (currentImageIndex.value - 1 + game.value.mImageCarousel.length) %
|
||||
// game.value.mImageCarousel.length;
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(82 82 91) transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(82 82 91);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.relative) {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
:deep(.dropdown-content) {
|
||||
z-index: 20;
|
||||
}
|
||||
</style>
|
||||
165
app/pages/library/index.vue
Normal file
165
app/pages/library/index.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-col gap-y-8">
|
||||
<div class="max-w-2xl">
|
||||
<h2 class="text-2xl font-bold font-display text-zinc-100">
|
||||
{{ $t("userHeader.links.library") }}
|
||||
</h2>
|
||||
<p class="mt-2 text-zinc-400">
|
||||
{{ $t("library.subheader") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Collections grid -->
|
||||
<TransitionGroup
|
||||
name="collection-list"
|
||||
tag="div"
|
||||
class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
|
||||
>
|
||||
<!-- Collection buttons (wrap each in a div for grid layout) -->
|
||||
<div
|
||||
v-for="collection in collections"
|
||||
:key="collection.id"
|
||||
class="flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105 focus:scale-105"
|
||||
>
|
||||
<NuxtLink
|
||||
class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 focus:bg-zinc-800 focus:outline-none"
|
||||
:href="`/library/collection/${collection.id}`"
|
||||
>
|
||||
<h3 class="text-lg font-semibold text-zinc-100">
|
||||
{{ collection.name }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
{{ $t("library.gameCount", [collection.entries.length]) }}
|
||||
</p>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Delete button (only show for non-default collections) -->
|
||||
<button
|
||||
class="group px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800 group focus:bg-zinc-800 focus:outline-none"
|
||||
@click="() => (currentlyDeleting = collection)"
|
||||
>
|
||||
<TrashIcon
|
||||
class="transition-all size-5 text-zinc-400 group-hover:text-red-400 group-hover:rotate-[8deg]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Create new collection button (also wrap in div) -->
|
||||
<div>
|
||||
<button
|
||||
class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105"
|
||||
@click="collectionCreateOpen = true"
|
||||
>
|
||||
<div
|
||||
class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 border-2 border-dashed border-zinc-700"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<PlusIcon
|
||||
class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300 transition-all duration-300 group-hover:rotate-90"
|
||||
/>
|
||||
<h3
|
||||
class="text-lg font-semibold text-zinc-400 group-hover:text-zinc-300"
|
||||
>
|
||||
{{ $t("library.collection.create") }}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-zinc-500 group-hover:text-zinc-400">
|
||||
{{ $t("library.collection.subheader") }}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
|
||||
<!-- game library grid -->
|
||||
<div>
|
||||
<h1 class="text-zinc-100 text-xl font-bold font-display">
|
||||
{{ $t("library.addGames") }}
|
||||
</h1>
|
||||
<div class="mt-4 flex flex-row flex-wrap justify-left gap-4">
|
||||
<GamePanel
|
||||
v-for="game in games"
|
||||
:key="game.id"
|
||||
:game="game"
|
||||
:href="`/library/game/${game?.id}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ModalCreateCollection v-model="collectionCreateOpen" />
|
||||
<ModalDeleteCollection v-model="currentlyDeleting" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TrashIcon, PlusIcon } from "@heroicons/vue/20/solid";
|
||||
import type { CollectionModel } from "~~/prisma/client/models";
|
||||
|
||||
const collections = await useCollections();
|
||||
const collectionCreateOpen = ref(false);
|
||||
|
||||
const currentlyDeleting = ref<CollectionModel | undefined>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const library = await useLibrary();
|
||||
const games = library.value.entries.map((e) => e.game);
|
||||
|
||||
useHead({
|
||||
title: t("userHeader.links.library"),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Fade transition for main content */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* List transition animations */
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.list-move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Collection list transitions */
|
||||
.collection-list-enter-active,
|
||||
.collection-list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.collection-list-enter-from,
|
||||
.collection-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
</style>
|
||||
156
app/pages/news.vue
Normal file
156
app/pages/news.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="flex flex-col lg:flex-row grow">
|
||||
<TransitionRoot as="template" :show="sidebarOpen">
|
||||
<Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-zinc-900/80" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 flex">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="-translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 left-full flex w-16 justify-center pt-5"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="sr-only">
|
||||
{{ $t("userHeader.closeSidebar") }}
|
||||
</span>
|
||||
<XMarkIcon class="size-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<div class="bg-zinc-900">
|
||||
<NewsArticleCreateButton />
|
||||
<DirectoryNews />
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div
|
||||
class="hidden lg:block lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col lg:border-r-2 lg:border-zinc-800"
|
||||
>
|
||||
<NewsArticleCreateButton />
|
||||
<DirectoryNews />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="block flex items-center gap-x-2 bg-zinc-950 px-2 py-1 shadow-xs sm:px-4 lg:hidden border-b border-zinc-700"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="sr-only">{{ $t("header.openSidebar") }}</span>
|
||||
<Bars3Icon class="size-6" aria-hidden="true" />
|
||||
</button>
|
||||
<div
|
||||
class="flex-1 text-sm/6 font-semibold uppercase font-display text-zinc-400"
|
||||
>
|
||||
{{ $t("userHeader.links.news") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6 grow">
|
||||
<NuxtPage :articles="news" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from "@headlessui/vue";
|
||||
import { Bars3Icon, XMarkIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
const news = useNews();
|
||||
|
||||
if (!news.value) {
|
||||
await fetchNews();
|
||||
}
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const sidebarOpen = ref(false);
|
||||
|
||||
router.afterEach(() => {
|
||||
sidebarOpen.value = false;
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: t("userHeader.links.news"),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Springy list animations */
|
||||
.list-enter-active {
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-move {
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
</style>
|
||||
167
app/pages/news/[id]/index.vue
Normal file
167
app/pages/news/[id]/index.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="article" class="px-4 sm:px-6 lg:px-8">
|
||||
<!-- Banner header with blurred background -->
|
||||
<div class="relative w-full h-[300px] mb-8 rounded-lg overflow-hidden">
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
:src="
|
||||
article.imageObjectId
|
||||
? useObject(article.imageObjectId)
|
||||
: '/wallpapers/news-placeholder.jpg'
|
||||
"
|
||||
alt=""
|
||||
class="w-full h-full object-cover blur-sm scale-110"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-950"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative h-full flex flex-col justify-end p-8">
|
||||
<div class="flex items-center gap-x-3 mb-6">
|
||||
<NuxtLink
|
||||
to="/news"
|
||||
class="px-2 py-1 rounded bg-zinc-900/80 backdrop-blur-sm transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
>
|
||||
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
|
||||
{{ $t("news.back") }}
|
||||
</NuxtLink>
|
||||
|
||||
<button
|
||||
v-if="user?.admin"
|
||||
class="px-2 py-1 rounded bg-red-900/50 backdrop-blur-sm transition text-sm/6 font-semibold text-red-400 hover:text-red-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
@click="() => (currentlyDeleting = article)"
|
||||
>
|
||||
<TrashIcon class="h-4 w-4" aria-hidden="true" />
|
||||
{{ $t("news.delete") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[calc(100%-2rem)]">
|
||||
<h1 class="text-4xl font-bold text-white mb-3">
|
||||
{{ article.title }}
|
||||
</h1>
|
||||
<div
|
||||
class="flex flex-col gap-y-3 sm:flex-row sm:items-center sm:gap-x-4 text-zinc-300"
|
||||
>
|
||||
<div class="flex items-center gap-x-4">
|
||||
<time :datetime="article.publishedAt">{{
|
||||
formatDate(article.publishedAt)
|
||||
}}</time>
|
||||
<span class="text-blue-400">{{
|
||||
article.author?.displayName ?? "System"
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="tag in article.tags"
|
||||
:key="tag.id"
|
||||
class="inline-flex items-center rounded-full bg-zinc-800/80 backdrop-blur-sm px-3 py-1 text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-lg text-zinc-300">{{ article.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Article content - markdown -->
|
||||
<div
|
||||
class="mx-auto prose prose-blue prose-invert prose-lg"
|
||||
v-html="renderedContent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ModalDeleteNews v-model="currentlyDeleting" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeftIcon } from "@heroicons/vue/20/solid";
|
||||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { micromark } from "micromark";
|
||||
|
||||
const route = useRoute();
|
||||
const currentlyDeleting = ref();
|
||||
const user = useUser();
|
||||
const news = useNews();
|
||||
const { t } = useI18n();
|
||||
if (!news.value) {
|
||||
news.value = await fetchNews();
|
||||
}
|
||||
const article = computed(() =>
|
||||
news.value?.find((e) => e.id == route.params.id),
|
||||
);
|
||||
if (!article.value)
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
message: t("news.notFound"),
|
||||
fatal: true,
|
||||
});
|
||||
|
||||
// Render markdown content
|
||||
const renderedContent = computed(() => {
|
||||
return micromark(article.value?.content ?? "");
|
||||
});
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
useHead({
|
||||
title: article.value.title,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.prose {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: #60a5fa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose img {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.prose code {
|
||||
background: #27272a;
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
background: #18181b;
|
||||
padding: 1em;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
</style>
|
||||
128
app/pages/news/index.vue
Normal file
128
app/pages/news/index.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="flex flex-col px-8">
|
||||
<div class="mb-8">
|
||||
<div class="flex flex-col gap-y-4">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold font-display text-zinc-100">
|
||||
{{ $t("news.title") }}
|
||||
</h2>
|
||||
<p class="mt-2 text-zinc-400">
|
||||
{{ $t("news.subheader") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Articles list -->
|
||||
<TransitionGroup
|
||||
name="article-list"
|
||||
tag="div"
|
||||
class="gap-6 grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="article in articles"
|
||||
:key="article.id"
|
||||
:to="`/news/${article.id}`"
|
||||
class="block"
|
||||
>
|
||||
<article
|
||||
class="group relative flex flex-col overflow-hidden rounded-lg bg-zinc-800/50 hover:bg-zinc-800 transition-all duration-200"
|
||||
>
|
||||
<div class="relative h-48 w-full overflow-hidden">
|
||||
<img
|
||||
:src="
|
||||
article.imageObjectId
|
||||
? useObject(article.imageObjectId)
|
||||
: '/wallpapers/news-placeholder.jpg'
|
||||
"
|
||||
alt=""
|
||||
class="h-full w-full object-cover object-center transition-all duration-500 group-hover:scale-110 scale-105"
|
||||
/>
|
||||
<div class="absolute top-4 left-4 flex gap-2">
|
||||
<span
|
||||
v-for="tag in article.tags"
|
||||
:key="tag.id"
|
||||
class="inline-flex items-center rounded-full bg-zinc-900/75 px-3 py-1 text-sm font-semibold text-zinc-100 backdrop-blur"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 flex-col justify-between p-6">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<time
|
||||
:datetime="article.publishedAt"
|
||||
class="text-sm text-zinc-400"
|
||||
>
|
||||
{{ $d(new Date(article.publishedAt), "short") }}
|
||||
</time>
|
||||
<span class="text-sm text-blue-400">{{
|
||||
article.author?.displayName ?? "System"
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h3
|
||||
class="text-xl font-semibold text-zinc-100 group-hover:text-primary-400"
|
||||
>
|
||||
{{ article.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-base text-zinc-400">
|
||||
{{ article.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</NuxtLink>
|
||||
</TransitionGroup>
|
||||
|
||||
<div v-if="articles?.length === 0" class="text-center py-12">
|
||||
<DocumentIcon class="mx-auto h-12 w-12 text-zinc-400" />
|
||||
<h3 class="mt-2 text-sm font-semibold text-zinc-100">
|
||||
{{ $t("news.none") }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-zinc-500">{{ $t("news.checkLater") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DocumentIcon } from "@heroicons/vue/24/outline";
|
||||
import type { ArticleModel } from "~~/prisma/client/models";
|
||||
import type { SerializeObject } from "nitropack/types";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { articles } = defineProps<{
|
||||
articles: SerializeObject<
|
||||
ArticleModel & {
|
||||
tags: Array<{ name: string; id: string }>;
|
||||
author: { displayName: string };
|
||||
}
|
||||
>[];
|
||||
}>();
|
||||
|
||||
useHead({
|
||||
title: t("userHeader.links.news"),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Article list transitions */
|
||||
.article-list-enter-active,
|
||||
.article-list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.article-list-enter-from,
|
||||
.article-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.article-list-move {
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
</style>
|
||||
233
app/pages/setup.vue
Normal file
233
app/pages/setup.vue
Normal file
@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<div class="grow grid grid-cols-1 lg:grid-cols-2">
|
||||
<div class="border-b lg:border-b-0 lg:border-r border-zinc-700">
|
||||
<header
|
||||
class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
|
||||
>
|
||||
<DropWordmark />
|
||||
</header>
|
||||
<main
|
||||
class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
|
||||
>
|
||||
<div>
|
||||
<h1 class="text-4xl font-display font-bold text-zinc-100">
|
||||
{{ $t("setup.welcome") }}
|
||||
</h1>
|
||||
<LanguageSelectorListbox :show-text="false" class="mt-4 max-w-sm" />
|
||||
<p class="mt-6 text-zinc-400 max-w-xl">
|
||||
{{ $t("setup.welcomeDescription") }}
|
||||
</p>
|
||||
</div>
|
||||
<ul role="list" class="mt-10 divide-y divide-zinc-700/5">
|
||||
<li
|
||||
v-for="(action, actionIdx) in actions"
|
||||
:key="action.name"
|
||||
class="relative flex gap-x-6 py-6"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 flex-none items-center justify-center rounded-lg shadow-xs outline-1 outline-zinc-100/10"
|
||||
>
|
||||
<component
|
||||
:is="action.icon"
|
||||
v-if="!actionsComplete[actionIdx]"
|
||||
class="size-6 text-blue-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<CheckIcon v-else class="size-6 text-blue-500" />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<h3 class="text-sm/6 font-semibold text-zinc-100">
|
||||
<button
|
||||
:class="
|
||||
actionsComplete[actionIdx]
|
||||
? 'line-through text-zinc-300'
|
||||
: ''
|
||||
"
|
||||
@click="() => (currentAction = actionIdx)"
|
||||
>
|
||||
<span class="absolute inset-0" aria-hidden="true" />
|
||||
{{ action.name }}
|
||||
</button>
|
||||
</h3>
|
||||
<p class="mt-2 text-sm/6 text-zinc-400">
|
||||
{{ action.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-none self-center">
|
||||
<ChevronRightIcon
|
||||
class="size-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<LoadingButton
|
||||
:disabled="!finished"
|
||||
:loading="finishLoading"
|
||||
@click="() => finish()"
|
||||
>
|
||||
<i18n-t keypath="setup.finish" tag="span" scope="global">
|
||||
<template #arrow>
|
||||
<span aria-hidden="true">{{ $t("chars.arrow") }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</LoadingButton>
|
||||
</main>
|
||||
</div>
|
||||
<component
|
||||
:is="actions[currentAction].page"
|
||||
v-if="actions[currentAction] && !useModal"
|
||||
v-model="actionsComplete[currentAction]"
|
||||
:token="bearerToken"
|
||||
/>
|
||||
<div
|
||||
v-else-if="!useModal"
|
||||
class="bg-zinc-950/30 flex items-center justify-center"
|
||||
>
|
||||
<!-- <p class="uppercase text-sm font-display text-zinc-700 font-bold">
|
||||
{{ $t("setup.noPage") }}
|
||||
</p> -->
|
||||
<img
|
||||
src="/wallpapers/signin.jpg"
|
||||
class="inset-0 h-full w-full object-cover"
|
||||
alt=""
|
||||
preload
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Transition>
|
||||
<div v-if="useModal && open" class="relative z-10">
|
||||
<div class="fixed inset-0 bg-zinc-900/75 transition-opacity" />
|
||||
|
||||
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
|
||||
<div
|
||||
class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
|
||||
>
|
||||
<div
|
||||
class="relative transform overflow-hidden rounded-lg bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm"
|
||||
>
|
||||
<div>
|
||||
<component
|
||||
:is="actions[currentAction].page"
|
||||
v-model="actionsComplete[currentAction]"
|
||||
:token="bearerToken"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-5 sm:mt-6 p-4">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
@click="currentAction = -1"
|
||||
>
|
||||
{{ $t("common.close") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { SetupAccount, SetupLibrary } from "#components";
|
||||
import {
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
ServerStackIcon,
|
||||
UserCircleIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
import type { Component } from "vue";
|
||||
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
|
||||
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind);
|
||||
const useModal = computed(() => !breakpoints.lg.value);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
useHead({
|
||||
title: t("setup.welcome"),
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const token = route.query.token;
|
||||
if (!token)
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: "No token.",
|
||||
fatal: true,
|
||||
});
|
||||
const bearerToken = `Bearer ${token}`;
|
||||
|
||||
const allowed = await $dropFetch("/api/v1/admin", {
|
||||
headers: { Authorization: bearerToken },
|
||||
});
|
||||
if (!allowed)
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
message: "Invalid setup token. Please check the URL you opened.",
|
||||
fatal: true,
|
||||
});
|
||||
|
||||
const currentAction = ref(-1);
|
||||
const actions = ref<
|
||||
Array<{
|
||||
name: string;
|
||||
description: string;
|
||||
icon: Component;
|
||||
page: Component;
|
||||
}>
|
||||
>([
|
||||
{
|
||||
name: t("setup.stages.account.name"),
|
||||
description: t("setup.stages.account.description"),
|
||||
icon: UserCircleIcon,
|
||||
page: SetupAccount,
|
||||
},
|
||||
{
|
||||
name: t("setup.stages.library.name"),
|
||||
description: t("setup.stages.library.description"),
|
||||
icon: ServerStackIcon,
|
||||
page: SetupLibrary,
|
||||
},
|
||||
]);
|
||||
|
||||
const actionsComplete = ref(Array(actions.value.length).fill(false));
|
||||
|
||||
const finished = computed(
|
||||
() => actionsComplete.value.filter((e) => !e).length == 0,
|
||||
);
|
||||
|
||||
const open = computed(() => currentAction.value != -1);
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
});
|
||||
|
||||
const finishLoading = ref(false);
|
||||
async function finish() {
|
||||
currentAction.value = -1;
|
||||
finishLoading.value = true;
|
||||
await $dropFetch("/api/v1/setup", {
|
||||
headers: { Authorization: bearerToken },
|
||||
method: "POST",
|
||||
});
|
||||
router.push("/auth/signin");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
314
app/pages/store/[id]/index.vue
Normal file
314
app/pages/store/[id]/index.vue
Normal file
@ -0,0 +1,314 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div
|
||||
class="mx-auto bg-zinc-950 w-full relative flex flex-col justify-center pt-32 xl:pt-24 z-10 overflow-hidden"
|
||||
>
|
||||
<!-- banner image -->
|
||||
<div class="absolute flex top-0 h-fit inset-x-0 h-12 -z-[20] pb-4">
|
||||
<img
|
||||
:src="useObject(game.mBannerObjectId)"
|
||||
class="blur-sm w-full h-auto"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-transparent to-80% to-zinc-950"
|
||||
/>
|
||||
</div>
|
||||
<!-- main page -->
|
||||
<div
|
||||
:class="[
|
||||
'max-w-7xl w-full min-h-screen mx-auto px-5 py-4 sm:px-16 sm:py-12 rounded-xl', // layout stuff
|
||||
'bg-zinc-950/90 backdrop-blur-[500px] backdrop-saturate-200 backdrop-brightness-200', // make a soft, colourful glow background
|
||||
]"
|
||||
>
|
||||
<h1
|
||||
class="text-3xl md:text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
|
||||
>
|
||||
{{ game.mName }}
|
||||
</h1>
|
||||
|
||||
<div class="mt-8 grid grid-cols-1 lg:grid-cols-4 gap-10">
|
||||
<div
|
||||
class="col-start-1 lg:col-start-4 flex flex-col gap-y-6 items-center"
|
||||
>
|
||||
<img
|
||||
class="transition-all duration-300 hover:scale-105 hover:rotate-[-1deg] w-64 h-auto rounded gameCover"
|
||||
:src="useObject(game.mCoverObjectId)"
|
||||
:alt="game.mName"
|
||||
/>
|
||||
<div class="flex items-center gap-x-2">
|
||||
<AddLibraryButton :game-id="game.id" />
|
||||
</div>
|
||||
<NuxtLink
|
||||
v-if="user?.admin"
|
||||
:href="`/admin/library/g/${game.id}`"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 duration-200 hover:scale-105 active:scale-95"
|
||||
>
|
||||
{{ $t("store.openAdminDashboard") }}
|
||||
<ArrowTopRightOnSquareIcon
|
||||
class="-mr-0.5 h-7 w-7 p-1"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<table class="min-w-full">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
||||
>
|
||||
{{ $t("store.released") }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
<time datetime="game.mReleased">
|
||||
{{ $d(new Date(game.mReleased), "short") }}
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
||||
>
|
||||
{{ $t("store.platform", platforms.length) }}
|
||||
</td>
|
||||
<td
|
||||
class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
|
||||
>
|
||||
<IconsPlatform
|
||||
v-for="platform in platforms"
|
||||
:key="typeof platform === 'string' ? platform : platform.id"
|
||||
:platform="
|
||||
typeof platform === 'string' ? platform : platform.id
|
||||
"
|
||||
:fallback="
|
||||
typeof platform === 'string'
|
||||
? undefined
|
||||
: platform.iconSvg
|
||||
"
|
||||
class="size-8 text-blue-600"
|
||||
/>
|
||||
<span
|
||||
v-if="platforms.length == 0"
|
||||
class="font-display uppercase font-bold text-zinc-700"
|
||||
>{{ $t("store.commingSoon") }}</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
||||
>
|
||||
{{ $t("store.rating") }}
|
||||
</td>
|
||||
<td
|
||||
class="whitespace-nowrap flex flex-row items-center gap-x-1 px-3 py-4 text-sm text-zinc-400"
|
||||
>
|
||||
<StarIcon
|
||||
v-for="(value, idx) in ratingArray"
|
||||
:key="idx"
|
||||
:class="[
|
||||
value ? 'text-yellow-600' : 'text-zinc-600',
|
||||
'w-4 h-4',
|
||||
]"
|
||||
/>
|
||||
<span class="text-zinc-600">{{
|
||||
$t("store.reviews", [rating._sum.mReviewCount ?? 0])
|
||||
}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
||||
>
|
||||
{{ $t("store.tags") }}
|
||||
</td>
|
||||
<td class="flex flex-col gap-1 px-3 py-4 text-sm text-zinc-400">
|
||||
<NuxtLink
|
||||
v-for="tag in game.tags"
|
||||
:key="tag.id"
|
||||
:href="`/store/t/${tag.id}`"
|
||||
class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</NuxtLink>
|
||||
<span
|
||||
v-if="game.tags.length == 0"
|
||||
class="text-zinc-700 font-bold uppercase font-display"
|
||||
>{{ $t("store.noTags") }}</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
||||
>
|
||||
{{ $t("store.developers", game.developers.length) }}
|
||||
</td>
|
||||
<td class="flex flex-col px-3 py-4 text-sm text-zinc-400">
|
||||
<NuxtLink
|
||||
v-for="developer in game.developers"
|
||||
:key="developer.id"
|
||||
:href="`/store/c/${developer.id}`"
|
||||
class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
|
||||
>
|
||||
{{ developer.mName }}
|
||||
</NuxtLink>
|
||||
<span
|
||||
v-if="game.developers.length == 0"
|
||||
class="text-zinc-700 font-bold uppercase font-display"
|
||||
>{{ $t("store.noDevelopers") }}</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
||||
>
|
||||
{{ $t("store.publishers", game.publishers.length) }}
|
||||
</td>
|
||||
<td class="flex flex-col px-3 py-4 text-sm text-zinc-400">
|
||||
<NuxtLink
|
||||
v-for="publisher in game.publishers"
|
||||
:key="publisher.id"
|
||||
:href="`/store/c/${publisher.id}`"
|
||||
class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
|
||||
>
|
||||
{{ publisher.mName }}
|
||||
</NuxtLink>
|
||||
<span
|
||||
v-if="game.publishers.length == 0"
|
||||
class="text-zinc-700 font-bold uppercase font-display"
|
||||
>{{ $t("store.noPublishers") }}</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="row-start-2 lg:row-start-1 lg:col-span-3">
|
||||
<p class="text-lg text-zinc-400">
|
||||
{{ game.mShortDescription }}
|
||||
</p>
|
||||
<div class="mt-6 py-4 rounded">
|
||||
<VueCarousel :items-to-show="1">
|
||||
<VueSlide
|
||||
v-for="image in game.mImageCarouselObjectIds"
|
||||
:key="image"
|
||||
>
|
||||
<img
|
||||
class="w-fit h-48 lg:h-96 rounded"
|
||||
:src="useObject(image)"
|
||||
/>
|
||||
</VueSlide>
|
||||
<VueSlide v-if="game.mImageCarouselObjectIds.length == 0">
|
||||
<div
|
||||
class="h-48 lg:h-96 aspect-[1/2] flex items-center justify-center text-zinc-700 font-bold font-display"
|
||||
>
|
||||
{{ $t("store.noImages") }}
|
||||
</div>
|
||||
</VueSlide>
|
||||
|
||||
<template #addons>
|
||||
<VueNavigation />
|
||||
<CarouselPagination class="py-2 px-12" />
|
||||
</template>
|
||||
</VueCarousel>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
v-if="showPreview"
|
||||
class="mt-12 prose prose-invert prose-blue max-w-none"
|
||||
v-html="previewHTML"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="mt-12 prose prose-invert prose-blue max-w-none"
|
||||
v-html="descriptionHTML"
|
||||
/>
|
||||
|
||||
<button
|
||||
v-if="showReadMore"
|
||||
class="mt-8 w-full inline-flex items-center gap-x-6"
|
||||
@click="() => (showPreview = !showPreview)"
|
||||
>
|
||||
<div class="grow h-[1px] bg-zinc-700 rounded-full" />
|
||||
<span
|
||||
class="uppercase text-sm font-semibold font-display text-zinc-600"
|
||||
>{{
|
||||
showPreview ? $t("store.readMore") : $t("store.readLess")
|
||||
}}</span
|
||||
>
|
||||
<div class="grow h-[1px] bg-zinc-700 rounded-full" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
|
||||
import { StarIcon } from "@heroicons/vue/24/solid";
|
||||
import { micromark } from "micromark";
|
||||
|
||||
const route = useRoute();
|
||||
const gameId = route.params.id.toString();
|
||||
|
||||
const user = useUser();
|
||||
|
||||
const { game, rating, platforms } = await $dropFetch(`/api/v1/games/${gameId}`);
|
||||
|
||||
// Preview description (first 30 lines)
|
||||
const showPreview = ref(true);
|
||||
const gameDescriptionCharacters = game.mDescription.split("");
|
||||
|
||||
// First new line after x characters
|
||||
const descriptionSplitIndex = gameDescriptionCharacters.findIndex(
|
||||
(v, i, arr) => {
|
||||
// If we're at the last element, we return true.
|
||||
// So we don't have to handle a -1 from this findIndex
|
||||
if (i + 1 == arr.length) return true;
|
||||
if (i < 500) return false;
|
||||
if (v != "\n") return false;
|
||||
return true;
|
||||
},
|
||||
);
|
||||
|
||||
const previewDescription = gameDescriptionCharacters
|
||||
.slice(0, descriptionSplitIndex + 1) // Slice a character after
|
||||
.join("");
|
||||
const previewHTML = micromark(previewDescription);
|
||||
|
||||
const descriptionHTML = micromark(game.mDescription);
|
||||
|
||||
const showReadMore = previewHTML != descriptionHTML;
|
||||
|
||||
// const rating = Math.round(game.mReviewRating * 5);
|
||||
const averageRating = Math.round((rating._avg.mReviewRating ?? 0) * 5);
|
||||
const ratingArray = Array(5)
|
||||
.fill(null)
|
||||
.map((_, i) => i + 1 <= averageRating);
|
||||
|
||||
useHead({
|
||||
title: game.mName,
|
||||
link: [{ rel: "icon", href: useObject(game.mIconObjectId) }],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
view-transition-name: header;
|
||||
}
|
||||
img.gameCover {
|
||||
view-transition-name: selected-game;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
::view-transition-old(header),
|
||||
::view-transition-new(header) {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
65
app/pages/store/c/[id]/index.vue
Normal file
65
app/pages/store/c/[id]/index.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div class="w-full overflow-x-hidden">
|
||||
<div class="relative overflow-hidden bg-zinc-900">
|
||||
<!-- Decorative background image and gradient -->
|
||||
<div aria-hidden="true" class="absolute inset-0">
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<img
|
||||
:src="useObject(company.mBannerObjectId)"
|
||||
alt=""
|
||||
class="size-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-zinc-900/75" />
|
||||
<div class="absolute inset-0 bg-linear-to-t from-zinc-900" />
|
||||
</div>
|
||||
|
||||
<!-- Callout -->
|
||||
<section
|
||||
aria-labelledby="sale-heading"
|
||||
class="relative mx-auto flex max-w-7xl flex-col items-center px-4 pt-32 pb-8 text-center sm:px-6 lg:px-8"
|
||||
>
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<h2
|
||||
id="sale-heading"
|
||||
class="text-4xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl lg:text-6xl"
|
||||
>
|
||||
{{ company.mName }}
|
||||
</h2>
|
||||
<p class="mx-auto line-clamp-3 mt-4 max-w-xl text-xl text-zinc-400">
|
||||
{{ company.mShortDescription }}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<StoreView
|
||||
:extra-options="[
|
||||
{
|
||||
name: 'Company',
|
||||
param: 'companyActions',
|
||||
multiple: true,
|
||||
options: [
|
||||
{ name: 'Published', param: 'published' },
|
||||
{ name: 'Developed', param: 'developed' },
|
||||
],
|
||||
},
|
||||
]"
|
||||
:params="{
|
||||
company: company.id,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const route = useRoute();
|
||||
const companyId = route.params.id;
|
||||
|
||||
const { company } = await $dropFetch(`/api/v1/companies/${companyId}`);
|
||||
|
||||
useHead({
|
||||
title: company.mName,
|
||||
link: [{ rel: "icon", href: useObject(company.mLogoObjectId) }],
|
||||
});
|
||||
</script>
|
||||
104
app/pages/store/index.vue
Normal file
104
app/pages/store/index.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="w-full flex flex-col overflow-x-hidden">
|
||||
<!-- Hero section -->
|
||||
<VueCarousel
|
||||
v-if="recent.length > 0"
|
||||
:wrap-around="true"
|
||||
:items-to-show="1"
|
||||
:autoplay="15 * 1000"
|
||||
:transition="500"
|
||||
:pause-autoplay-on-hover="true"
|
||||
class="store-carousel"
|
||||
>
|
||||
<VueSlide v-for="game in recent" :key="game.id">
|
||||
<div class="w-full h-full relative">
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
:src="useObject(game.mBannerObjectId)"
|
||||
alt=""
|
||||
class="size-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="relative flex items-center justify-center w-full h-full bg-zinc-900/75 px-6 py-32 sm:px-12 sm:py-40 lg:px-16"
|
||||
>
|
||||
<div class="relative text-center">
|
||||
<h3 class="text-base/7 font-semibold text-blue-300">
|
||||
{{ $t("store.featured") }}
|
||||
</h3>
|
||||
<h2
|
||||
class="text-3xl font-bold tracking-tight text-white sm:text-5xl"
|
||||
>
|
||||
{{ game.mName }}
|
||||
</h2>
|
||||
<p
|
||||
class="mt-3 text-lg text-zinc-300 line-clamp-2 max-w-xl mx-auto"
|
||||
>
|
||||
{{ game.mShortDescription }}
|
||||
</p>
|
||||
<div>
|
||||
<div
|
||||
class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-4 w-fit mx-auto"
|
||||
>
|
||||
<NuxtLink
|
||||
:href="`/store/${game.id}`"
|
||||
class="block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto duration-200 hover:scale-105"
|
||||
>{{ $t("store.lookAt") }}</NuxtLink
|
||||
>
|
||||
<AddLibraryButton :game-id="game.id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VueSlide>
|
||||
|
||||
<template #addons>
|
||||
<CarouselPagination class="py-2" :items="recent" />
|
||||
</template>
|
||||
</VueCarousel>
|
||||
<div
|
||||
v-else
|
||||
class="w-full h-full flex flex-col items-center justify-center bg-zinc-950/50 px-6 py-32 sm:px-12 sm:py-40 lg:px-16 gap-4"
|
||||
>
|
||||
<h2
|
||||
class="uppercase text-xl font-bold tracking-tight text-zinc-700 sm:text-3xl"
|
||||
>
|
||||
{{ $t("store.noFeatured") }}
|
||||
</h2>
|
||||
<NuxtLink
|
||||
v-if="user?.admin"
|
||||
to="/admin/library"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 duration-200 hover:scale-105 active:scale-95"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="store.openFeatured"
|
||||
tag="span"
|
||||
scope="global"
|
||||
class="inline-flex items-center gap-x-1"
|
||||
>
|
||||
<template #arrow>
|
||||
<ArrowTopRightOnSquareIcon class="size-4" />
|
||||
</template>
|
||||
</i18n-t>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<StoreView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
|
||||
|
||||
const recent = await $dropFetch("/api/v1/store/featured");
|
||||
|
||||
const user = useUser();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
useHead({
|
||||
title: t("store.title"),
|
||||
});
|
||||
</script>
|
||||
48
app/pages/store/t/[id]/index.vue
Normal file
48
app/pages/store/t/[id]/index.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div class="w-full overflow-x-hidden">
|
||||
<div class="relative overflow-hidden bg-zinc-900">
|
||||
<!-- Decorative background image and gradient -->
|
||||
<div aria-hidden="true" class="absolute inset-0">
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<img alt="" class="size-full object-cover" />
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-zinc-900/75" />
|
||||
<div class="absolute inset-0 bg-linear-to-t from-zinc-900" />
|
||||
</div>
|
||||
|
||||
<!-- Callout -->
|
||||
<section
|
||||
aria-labelledby="sale-heading"
|
||||
class="relative mx-auto flex max-w-7xl flex-col items-center px-4 pt-32 pb-8 text-center sm:px-6 lg:px-8"
|
||||
>
|
||||
<div class="mx-auto max-w-2xl lg:max-w-none">
|
||||
<h2
|
||||
id="sale-heading"
|
||||
class="text-4xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl lg:text-6xl"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</h2>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<StoreView
|
||||
:prefilled="{
|
||||
tags: {
|
||||
[tag.id]: true,
|
||||
} as any,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const route = useRoute();
|
||||
const tagId = route.params.id;
|
||||
|
||||
const { tag } = await $dropFetch(`/api/v1/tags/${tagId}`);
|
||||
|
||||
useHead({
|
||||
title: tag.name,
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user