mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-09 20:12:10 +10:00
Many new improvments and features to the UI (#76)
* feat(general): many new improvments and features to the UI * fix: fix lints and run preetier * fix: furthermore fixes * chore: fix preetier eslint issue * stlye: reposition mark all as read button for better placement * fix: fix inccorect positioning on the mark all as read buton, again * fix: fix account related issue with predefined types and styling * fix: fix notification button dissapearance & type definition * fix: fix auth page styling * stlye: fixed styling on users list * fix: fix lint dead code collector * fix: please the prettier gods * fix(notifications): seriously serialising * chore: please the prettier gods once again, o holy one * fix: remove eslint thing, im blaming eslint for that one --------- Co-authored-by: Aden <aden@adenmgb.com>
This commit is contained in:
Aden Lindsay
GitHub
@ -1,90 +1,105 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
<h1 class="text-base font-semibold text-zinc-100">Devices</h1>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
All the devices authorized to access your Drop account.
|
||||
</p>
|
||||
</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"
|
||||
>
|
||||
Devices
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
|
||||
>
|
||||
Manage the devices authorized to access your Drop account.
|
||||
</p>
|
||||
</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-800">
|
||||
<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"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Platform
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Can Access
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Last Connected
|
||||
</th>
|
||||
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3">
|
||||
<span class="sr-only">Edit</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="client in clients"
|
||||
:key="client.id"
|
||||
class="even:bg-zinc-800"
|
||||
|
||||
<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"
|
||||
>
|
||||
<td
|
||||
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Platform
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Capabilities
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Last Connected
|
||||
</th>
|
||||
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
||||
<span class="sr-only">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.name }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
{{ client.platform }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
<ul class="flex flex-col gap-y-2">
|
||||
<li
|
||||
v-for="capability in client.capabilities"
|
||||
:key="capability"
|
||||
class="inline-flex items-center gap-x-0.5"
|
||||
>
|
||||
<CheckIcon class="size-4" /> {{ capability }}
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
{{ DateTime.fromISO(client.lastConnected).toRelative() }}
|
||||
</td>
|
||||
<td
|
||||
class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3"
|
||||
>
|
||||
<button
|
||||
class="text-red-600 hover:text-red-900"
|
||||
@click="() => revokeClientWrapper(client.id)"
|
||||
</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"
|
||||
>
|
||||
Revoke<span class="sr-only">, {{ client.name }}</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<CheckIcon class="size-3" />
|
||||
{{ capability }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
{{ DateTime.fromISO(client.lastConnected).toRelative() }}
|
||||
</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)"
|
||||
>
|
||||
Revoke<span class="sr-only">, {{ 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">
|
||||
No devices connected to your account.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1 +1,94 @@
|
||||
<template><div></div></template>
|
||||
<template>
|
||||
<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">
|
||||
<!-- Account Information Card -->
|
||||
<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>
|
||||
|
||||
<!-- Account Actions Card -->
|
||||
<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",
|
||||
});
|
||||
|
||||
// Fetch user data
|
||||
const user = await $dropFetch("/api/v1/user");
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,143 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<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"
|
||||
>
|
||||
Notifications
|
||||
</h2>
|
||||
<button
|
||||
:disabled="notifications.length === 0"
|
||||
class="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 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" />
|
||||
Mark all as read
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
|
||||
>
|
||||
View and manage your notifications.
|
||||
</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">
|
||||
<a
|
||||
v-for="action in notification.actions"
|
||||
:key="action"
|
||||
:href="action.split('|')[1]"
|
||||
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"
|
||||
>
|
||||
{{ action.split("|")[0] }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-shrink-0 items-center gap-x-2">
|
||||
<span class="text-xs text-zinc-500">
|
||||
{{ DateTime.fromISO(notification.created).toRelative() }}
|
||||
</span>
|
||||
<button
|
||||
v-if="!notification.read"
|
||||
type="button"
|
||||
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 transition-all duration-200 hover:bg-zinc-400/20 hover:scale-105 active:scale-95"
|
||||
@click="markAsRead(notification.id)"
|
||||
>
|
||||
<CheckIcon class="size-3" />
|
||||
Mark as read
|
||||
</button>
|
||||
<button
|
||||
type="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="deleteNotification(notification.id)"
|
||||
>
|
||||
<TrashIcon class="size-3" />
|
||||
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">No notifications</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CheckIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { DateTime } from "luxon";
|
||||
import type { Notification } from "~/prisma/client";
|
||||
import type { SerializeObject } from "nitropack";
|
||||
|
||||
definePageMeta({
|
||||
layout: "default",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Notifications",
|
||||
});
|
||||
|
||||
// Fetch notifications
|
||||
const notifications = ref<SerializeObject<Notification>[]>([]);
|
||||
|
||||
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<Notification>) => 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<Notification>) => {
|
||||
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<Notification>) => n.id === id,
|
||||
);
|
||||
if (index !== -1) {
|
||||
notifications.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -5,9 +5,18 @@
|
||||
v-if="game && unimportedVersions !== undefined"
|
||||
class="grow flex flex-col gap-y-8"
|
||||
>
|
||||
<div
|
||||
class="grow w-full h-full lg:pr-[30vw] px-6 py-4 flex flex-col"
|
||||
></div>
|
||||
<div class="grow w-full h-full lg:pr-[30vw] px-6 py-4 flex flex-col">
|
||||
<div
|
||||
v-if="game.versions.length === 0"
|
||||
class="flex flex-col items-center justify-center h-full text-zinc-400"
|
||||
>
|
||||
<InformationCircleIcon class="w-12 h-12 mb-2 text-zinc-400" />
|
||||
<div class="font-semibold text-lg">No versions yet</div>
|
||||
<div class="text-sm mt-1">
|
||||
Import your first version to get started!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="lg:overflow-y-auto lg:border-l lg:border-zinc-800 lg:fixed lg:inset-y-0 lg:z-50 lg:w-[30vw] flex flex-col lg:right-0 gap-y-8 px-6 py-4"
|
||||
>
|
||||
@ -17,7 +26,7 @@
|
||||
<NuxtLink
|
||||
:href="`/admin/metadata/games/${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"
|
||||
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 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-blue-600"
|
||||
>
|
||||
Open in Metadata
|
||||
<ArrowTopRightOnSquareIcon
|
||||
@ -29,7 +38,7 @@
|
||||
<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"
|
||||
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 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-blue-600"
|
||||
>
|
||||
Open in Store
|
||||
<ArrowTopRightOnSquareIcon
|
||||
@ -135,6 +144,7 @@ import {
|
||||
ArrowTopRightOnSquareIcon,
|
||||
Bars3Icon,
|
||||
TrashIcon,
|
||||
InformationCircleIcon,
|
||||
} from "@heroicons/vue/24/solid";
|
||||
|
||||
definePageMeta({
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<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 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
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"
|
||||
>
|
||||
Sources →
|
||||
</NuxtLink>
|
||||
@ -63,11 +63,11 @@
|
||||
<li
|
||||
v-for="game in filteredLibraryGames"
|
||||
:key="game.id"
|
||||
class="col-span-1 flex flex-col justify-center divide-y divide-zinc-700 rounded-lg bg-zinc-950/20 text-left shadow"
|
||||
class="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 transition-all duration-200 hover:scale-102 hover:shadow-xl hover:bg-zinc-950/70 group"
|
||||
>
|
||||
<div class="flex flex-1 flex-row p-4 gap-x-4">
|
||||
<img
|
||||
class="h-16 w-16 flex-shrink-0 rounded-md"
|
||||
class="h-20 w-20 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=""
|
||||
/>
|
||||
@ -89,18 +89,18 @@
|
||||
<div class="mt-4 flex flex-col gap-y-1">
|
||||
<NuxtLink
|
||||
:href="`/admin/library/${game.id}`"
|
||||
class="w-fit rounded-md bg-blue-600 px-2.5 py-1.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"
|
||||
class="w-fit rounded-md bg-blue-600 px-2.5 py-1.5 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"
|
||||
>
|
||||
Open with Library →
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
:href="`/admin/metadata/games/${game.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-700u focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
class="w-fit rounded-md bg-zinc-800 px-2.5 py-1.5 text-sm font-semibold 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"
|
||||
>
|
||||
Open with Metadata →
|
||||
</NuxtLink>
|
||||
<button
|
||||
class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||
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(game.id)"
|
||||
>
|
||||
Delete
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 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="() => removeImageFromCarousel(element)"
|
||||
>
|
||||
Remove image
|
||||
@ -182,7 +182,7 @@
|
||||
<NuxtLink
|
||||
:href="`/admin/library/${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"
|
||||
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 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"
|
||||
>
|
||||
Open in Library
|
||||
<ArrowTopRightOnSquareIcon
|
||||
@ -194,7 +194,7 @@
|
||||
<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"
|
||||
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 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"
|
||||
>
|
||||
Open in Store
|
||||
<ArrowTopRightOnSquareIcon
|
||||
@ -245,7 +245,7 @@
|
||||
<button
|
||||
v-if="image !== game.mBannerObjectId"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 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="() => updateBannerImage(image)"
|
||||
>
|
||||
Set as banner
|
||||
@ -253,14 +253,14 @@
|
||||
<button
|
||||
v-if="image !== game.mCoverObjectId"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 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="() => updateCoverImage(image)"
|
||||
>
|
||||
Set as cover
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 transition-all duration-200 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="() => deleteImage(image)"
|
||||
>
|
||||
Delete image
|
||||
@ -298,7 +298,9 @@
|
||||
/>
|
||||
<ModalTemplate v-model="showAddCarouselModal">
|
||||
<template #default>
|
||||
<div class="grid grid-cols-2 grid-flow-dense gap-4">
|
||||
<div
|
||||
class="grid grid-cols-2 grid-flow-dense gap-4 max-h-[70vh] overflow-y-auto p-4"
|
||||
>
|
||||
<div
|
||||
v-for="(image, imageIdx) in validAddCarouselImages"
|
||||
:key="imageIdx"
|
||||
@ -310,7 +312,7 @@
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 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="() => addImageToCarousel(image)"
|
||||
>
|
||||
Add
|
||||
@ -329,10 +331,10 @@
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
|
||||
@click="showAddCarouselModal = false"
|
||||
>
|
||||
Cancel
|
||||
Close
|
||||
</button>
|
||||
</template>
|
||||
</ModalTemplate>
|
||||
@ -350,7 +352,7 @@
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.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"
|
||||
class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 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="() => insertImageAtCursor(image)"
|
||||
>
|
||||
Insert
|
||||
@ -369,7 +371,7 @@
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
|
||||
@click="showAddCarouselModal = false"
|
||||
>
|
||||
Cancel
|
||||
@ -447,7 +449,7 @@
|
||||
<button
|
||||
ref="cancelButtonRef"
|
||||
type="button"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
|
||||
@click="showEditCoreMetadata = false"
|
||||
>
|
||||
Cancel
|
||||
@ -713,7 +715,6 @@ async function uploadAfterImageUpload(result: Game) {
|
||||
}
|
||||
|
||||
function addImageToCarousel(id: string) {
|
||||
showAddCarouselModal.value = false;
|
||||
game.value.mImageCarouselObjectIds.push(id);
|
||||
updateImageCarousel();
|
||||
}
|
||||
|
||||
@ -20,6 +20,9 @@
|
||||
to="/admin/metadata/games"
|
||||
class="transition group aspect-[3/2] flex flex-col justify-center items-center rounded-lg bg-zinc-950 hover:bg-zinc-950/50 shadow"
|
||||
>
|
||||
<RectangleStackIcon
|
||||
class="mb-2 h-12 w-12 text-zinc-500 group-hover:text-blue-500 transition-all duration-200"
|
||||
/>
|
||||
<span
|
||||
class="transition-all text-4xl font-bold text-zinc-400 group-hover:text-zinc-100 uppercase tracking-widest"
|
||||
>Games</span
|
||||
@ -29,6 +32,9 @@
|
||||
to="/admin/metadata/companies"
|
||||
class="transition group aspect-[3/2] flex flex-col justify-center items-center rounded-lg bg-zinc-950 hover:bg-zinc-950/50 shadow"
|
||||
>
|
||||
<BuildingOffice2Icon
|
||||
class="mb-2 h-12 w-12 text-zinc-500 group-hover:text-blue-500 transition-all duration-200"
|
||||
/>
|
||||
<span
|
||||
class="transition-all text-4xl font-bold text-zinc-400 group-hover:text-zinc-100 uppercase tracking-widest"
|
||||
>Companies</span
|
||||
@ -39,6 +45,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
RectangleStackIcon,
|
||||
BuildingOffice2Icon,
|
||||
} from "@heroicons/vue/24/solid";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
@ -21,20 +21,24 @@
|
||||
<li
|
||||
v-for="authMech in authenticationMechanisms"
|
||||
:key="authMech.name"
|
||||
class="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
|
||||
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">
|
||||
<component
|
||||
:is="authMech.icon"
|
||||
:alt="`${authMech.name} icon`"
|
||||
class="h-8 w-8 flex-none rounded-lg text-zinc-100 object-cover"
|
||||
/>
|
||||
<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-gray-400 hover:text-gray-500"
|
||||
class="-m-2.5 block p-2.5 text-zinc-400 hover:text-zinc-300 transition-colors duration-200"
|
||||
>
|
||||
<span class="sr-only">Open options</span>
|
||||
<EllipsisHorizontalIcon class="h-5 w-5" aria-hidden="true" />
|
||||
@ -55,7 +59,7 @@
|
||||
:href="authMech.route"
|
||||
:class="[
|
||||
active ? 'bg-zinc-800 outline-none' : '',
|
||||
'block px-3 py-1 text-sm/6 text-zinc-100',
|
||||
'block px-3 py-1 text-sm/6 text-zinc-100 transition-colors duration-200',
|
||||
]"
|
||||
>Configure<span class="sr-only"
|
||||
>, {{ authMech.name }}</span
|
||||
@ -70,11 +74,18 @@
|
||||
<div class="flex justify-between gap-x-4 py-3">
|
||||
<dt class="text-zinc-400">Enabled</dt>
|
||||
<dd class="flex items-center">
|
||||
<CheckIcon
|
||||
v-if="authMech.enabled"
|
||||
class="w-4 h-4 text-green-600"
|
||||
/>
|
||||
<XMarkIcon v-else class="w-4 h-4 text-red-600" />
|
||||
<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 ? "Enabled" : "Disabled" }}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div v-if="authMech.settings">
|
||||
@ -84,7 +95,7 @@
|
||||
class="flex flex-nowrap justify-between gap-x-4 py-2"
|
||||
>
|
||||
<dt class="text-zinc-400">{{ key }}</dt>
|
||||
<dd class="text-gray-500 truncate">
|
||||
<dd class="text-zinc-300 truncate">
|
||||
{{ value }}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<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 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
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)"
|
||||
>
|
||||
Create invitation
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<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 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
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"
|
||||
>
|
||||
Authentication →
|
||||
</NuxtLink>
|
||||
@ -20,77 +20,102 @@
|
||||
<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"
|
||||
>
|
||||
Display Name
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Username
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Email
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Admin?
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Auth Options
|
||||
</th>
|
||||
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3">
|
||||
<span class="sr-only">Edit</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="user in users" :key="user.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"
|
||||
>
|
||||
{{ 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 text-zinc-400">
|
||||
{{ user.admin ? "Admin User" : "Normal user" }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
|
||||
{{ user.authMecs.map((e) => e.mec).join(", ") }}
|
||||
</td>
|
||||
<td
|
||||
class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3"
|
||||
>
|
||||
<!--
|
||||
<NuxtLink to="#" class="text-blue-600 hover:text-blue-500"
|
||||
>Edit<span class="sr-only"
|
||||
>, {{ user.displayName }}</span
|
||||
></NuxtLink
|
||||
<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"
|
||||
>
|
||||
-->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
Display Name
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Username
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Email
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Admin?
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
|
||||
>
|
||||
Auth Options
|
||||
</th>
|
||||
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
||||
<span class="sr-only">Edit</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 ? "Admin User" : "Normal user" }}
|
||||
</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"
|
||||
>
|
||||
<!--
|
||||
<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>
|
||||
|
||||
@ -1,187 +1,192 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex min-h-screen bg-zinc-950 flex-1 flex-col justify-center py-12 sm:px-6 lg:px-8"
|
||||
>
|
||||
<div class="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<DropLogo class="mx-auto h-10 w-auto" />
|
||||
<h2
|
||||
class="mt-6 text-center text-2xl font-bold font-display leading-9 tracking-tight text-zinc-100"
|
||||
>
|
||||
Create your Drop account
|
||||
</h2>
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
Create your Drop account
|
||||
</h2>
|
||||
<p class="mt-1 text-sm leading-6 text-zinc-400">
|
||||
Fill in your details below to create your account.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
|
||||
<div class="bg-zinc-900 px-6 py-12 shadow sm:rounded-lg sm:px-12">
|
||||
<form class="space-y-6" @submit.prevent="() => register_wrapper()">
|
||||
<div>
|
||||
<label
|
||||
for="display-name"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Display Name</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<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"
|
||||
>Email address</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validEmail ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be in the format user@example.com
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<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"
|
||||
>Username</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validUsername ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be 5 or more characters, and lowercase
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<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"
|
||||
>Password</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validPassword ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be 14 or more characters
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<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"
|
||||
>Confirm Password</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validConfirmPassword ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be the same as above
|
||||
</p>
|
||||
<div class="mt-2">
|
||||
<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">
|
||||
Create
|
||||
</LoadingButton>
|
||||
</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 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"
|
||||
>Display Name</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 class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-600">
|
||||
{{ error }}
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Email address</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validEmail ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be in the format user@example.com
|
||||
</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>
|
||||
|
||||
<div class="w-full h-px bg-zinc-700" />
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
class="block text-sm font-medium leading-6 text-zinc-100"
|
||||
>Username</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validUsername ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be 5 or more characters, and lowercase
|
||||
</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"
|
||||
>Password</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validPassword ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be 14 or more characters
|
||||
</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"
|
||||
>Confirm Password</label
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
validConfirmPassword ? 'text-blue-400' : 'text-red-500',
|
||||
'block text-xs font-medium leading-6',
|
||||
]"
|
||||
>
|
||||
Must be the same as above
|
||||
</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">
|
||||
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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- todo: feature to add custom text here -->
|
||||
<p v-if="false" class="mt-10 text-center text-sm text-zinc-400">
|
||||
What's Drop?
|
||||
{{ " " }}
|
||||
<NuxtLink
|
||||
to="https://github.com/Drop-OSS/drop"
|
||||
target="_blank"
|
||||
class="font-semibold leading-6 text-blue-600 hover:text-blue-500"
|
||||
>Check us out here →</NuxtLink
|
||||
>
|
||||
</p>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user