zoeissleeping/filething
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug fixes, half-finished admin ui, and a more

Browse Source
This commit is contained in:
Zoe
2024-09-23 01:21:28 -05:00
parent 6e6bc1c45b
commit 66f8437351
35 changed files with 1039 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
ui/components/Nav/userDropdown.vue
View File

@@ -1,21 +1,4 @@
<script setup lang="ts">
let colorMode = useColorMode();
const changeTheme = () => {
if (colorMode.preference === "dark") {
// from dark => light
colorMode.preference = "light"
} else if (colorMode.preference === "light") {
// from light => system
colorMode.preference = "system";
} else {
// from system => dark
colorMode.preference = "dark";
}
return;
}
const logout = async () => {
await $fetch('/api/logout', {
method: "POST"
@@ -31,6 +14,10 @@ defineProps({
type: Object,
required: true
},
changeTheme: {
type: Function,
required: true,
}
})
</script>
@@ -38,18 +25,19 @@ defineProps({
<div
class="invisible z-10 w-fit h-fit absolute -right-[4px] top-full opacity-0 group-hover:visible group-focus-within:visible group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100 transition">
<div class="mt-1 w-64 origin-top-right scale-[.97] rounded-xl bg-surface shadow-lg">
<div class="border-b max-w-64 overflow-hidden text-ellipsis p-2">
<div class="max-w-64 overflow-hidden text-ellipsis p-2">
<p class="text-lg font-semibold">{{ user.username }}</p>
<p class="text-subtle text-xs">{{ user.email }}</p>
<p class="text-subtle text-xs">
you have {{ formatBytes(user.plan.max_storage) }} of storage
</p>
</div>
<ul class="p-2 flex flex-col gap-x-1">
<li class="select-none">
<hr />
<ul class="py-2 flex flex-col gap-x-1">
<li class="select-none mx-2">
<button v-on:click="changeTheme"
class="flex items-center hover:bg-muted/10 active:bg-muted/20 transition-bg w-full px-2 py-1 rounded-md focus:outline-none focus:ring focus:ring-inset">
<span class="mr-1.5">
class="flex items-center hover:bg-muted/10 active:bg-muted/20 transition-bg w-full px-2 py-1 rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-inset">
<span class="mr-2">
<svg v-if="$colorMode.preference === 'dark'" xmlns="http://www.w3.org/2000/svg" width="18"
height="18" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
@@ -69,10 +57,36 @@ defineProps({
Change Theme
</button>
</li>
<li class="select-none">
<hr class="my-2" />
<li v-if="user.is_admin" class="select-none mx-2">
<NuxtLink
class="flex items-center hover:bg-muted/10 active:bg-muted/20 transition-bg w-full px-2 py-1 rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-inset"
to="/admin">
<span class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm4-7v.01M7 16v.01M11 8h6m-6 8h6" />
</svg>
</span>
Site Administration
</NuxtLink>
</li>
<hr v-if="user.is_admin" class="my-2" />
<li class="select-none mx-2">
<button
class="flex hover:bg-muted/10 active:bg-muted/20 transition-bg w-full px-2 py-1 rounded-md focus:outline-none focus:ring focus:ring-inset"
class="flex items-center hover:bg-muted/10 active:bg-muted/20 transition-bg w-full px-2 py-1 rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-inset"
v-on:click="logout">
<span class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path
d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2" />
<path d="M9 12h12l-3-3m0 6l3-3" />
</g>
</svg>
</span>
Logout
</button>
</li>