mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-10 04:22:09 +10:00
c7fab132ab
* 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>
95 lines
3.6 KiB
Vue
95 lines
3.6 KiB
Vue
<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>
|