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

ssr runner and more admin panel stuff

Browse Source
This commit is contained in:
Zoe
2024-09-30 00:40:54 -05:00
parent 66f8437351
commit c208e35e4c
27 changed files with 617 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/Input.vue
View File

@@ -12,6 +12,6 @@ function updateValue(value) {
<template>
<input
class="py-2 px-4 resize-none bg-overlay rounded-md my-2 border hover:border-muted/40 focus:border-muted/60 placeholder:italic placeholder:text-subtle transition-[border-color] max-w-64"
class="py-2 px-4 resize-none bg-overlay rounded-md border hover:border-muted/40 focus:border-muted/60 placeholder:italic placeholder:text-subtle transition-[border-color] max-w-64"
:placeholder="placeholder" :type="type" v-on:input="updateValue($event.target.value)" />
</template>

4
ui/components/Nav/index.vue
View File

@@ -87,7 +87,7 @@ const changeTheme = () => {
</nav>
<nav class="hidden md:flex" aria-label="Main">
<ul class="flex items-center gap-3" role="list">
<li>
<!-- <li>
<a href="#"
class="px-2.5 py-1.5 text-[15px] font-semibold transition-bg duration-300 hover:bg-muted/10 rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-inset">Link</a>
</li>
@@ -99,7 +99,7 @@ const changeTheme = () => {
<a href="#"
class="px-2.5 py-1.5 text-[15px] font-semibold transition-bg duration-300 hover:bg-muted/10 rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-inset">Link</a>
</li>
<li class="h-6 border-r"></li>
<li class="h-6 border-r"></li> -->
<li v-if="user">
<span class="group relative flex items-center">
<button

2
ui/composables/useUser.ts
View File

@@ -7,7 +7,7 @@ export const useUser = () => {
// Fetch the user only if it's uninitialized (i.e., null)
const getUser = async () => {
if (!user.value.fetched && import.meta.client) {
if (!user.value.fetched) {
await fetchUser()
}

6
ui/embed.go
View File

@@ -7,8 +7,8 @@ import (
"github.com/labstack/echo/v4"
)
//go:embed all:.output/public
var distDir embed.FS
//go:embed all:.output
var DistDir embed.FS
// DistDirFS contains the embedded dist directory files (without the "dist" prefix)
var DistDirFS = echo.MustSubFS(distDir, ".output/public")
var DistDirFS = echo.MustSubFS(DistDir, ".output/")

10
ui/layouts/admin.vue
View File

@@ -9,16 +9,14 @@ definePageMeta({
const user = await getUser();
const route = useRoute();
console.log("setup", route.path)
const accordionMapping = {
'/admin': 'item-1',
'/admin/config/settings': 'item-2',
'/admin/users': '',
'/admin/config/settings': 'item-2',
'/admin': 'item-1',
};
const getActiveAccordion = () => {
const path = Object.keys(accordionMapping).find(key => route.path === key);
const path = Object.keys(accordionMapping).find(key => route.path.startsWith(key));
return path ? accordionMapping[path] : null;
};
@@ -63,7 +61,7 @@ const isActiveLink = (path: string) => route.path === path;
</VlAccordionItem>
<NuxtLink
class="vl-accordion-header focus-visible:outline-none focus-visible:ring focus-visible:ring-inset flex flex-1 justify-between items-center w-full transition-bg px-4 py-3.5 text-sm"
:class="isActiveLink('/admin/users') ? 'bg-muted/15' : 'hover:bg-muted/10'"
:class="route.path.startsWith('/admin/users') ? 'bg-muted/15' : 'hover:bg-muted/10'"
to="/admin/users">
Users
</NuxtLink>

4
ui/middleware/admin.ts
View File

@@ -2,10 +2,6 @@ import { useUser } from '~/composables/useUser'
// We have server side things that does effectively this, but that wont stop SPA navigation
export default defineNuxtRouteMiddleware(async (to, from) => {
if (import.meta.server) {
return
}
const { getUser } = useUser()
const user = await getUser()

4
ui/middleware/auth.ts
View File

@@ -2,10 +2,6 @@ import { useUser } from '~/composables/useUser'
// We have server side things that does effectively this, but that wont stop SPA navigation
export default defineNuxtRouteMiddleware(async (to, from) => {
if (import.meta.server) {
return
}
const { getUser } = useUser()
const user = await getUser()

4
ui/middleware/unauth.ts
View File

@@ -2,10 +2,6 @@ import { useUser } from '~/composables/useUser'
// We have server side things that does effectively this, but that wont stop SPA navigation
export default defineNuxtRouteMiddleware(async (to, from) => {
if (import.meta.server) {
return
}
const { getUser } = useUser()
const user = await getUser()

9
ui/nuxt.config.ts
View File

@@ -1,6 +1,6 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
ssr: process.env.NODE_ENV === 'production' ? true : false,
ssr: true,
compatibilityDate: '2024-04-03',
css: ['~/assets/css/main.css'],
@@ -9,6 +9,13 @@ export default defineNuxtConfig({
classSuffix: ''
},
nitro: {
routeRules: {
'/api/**': { proxy: 'http://localhost:1323/api/**' },
'/test/**': { proxy: 'http://localhost:1323/api/**' },
}
},
devtools: { enabled: true },
modules: ['@nuxtjs/color-mode', '@nuxtjs/tailwindcss']

16
ui/pages/admin/index.vue
View File

@@ -1,13 +1,10 @@
<script setup lang="ts">
import { useUser } from '~/composables/useUser'
const { getUser } = useUser()
definePageMeta({
middleware: ["auth", "admin"],
layout: "admin"
});
let systemStatusData = await $fetch("/api/admin/system-status")
let {data: systemStatusData, refresh} = await useFetch("/api/admin/status")
const calculateTimeSince = (time) => {
const now = new Date();
@@ -29,23 +26,22 @@ const calculateTimeSince = (time) => {
return timeParts.join(', ');
}
let uptime = ref('');
let lastGcTime = ref('');
let uptime = ref(calculateTimeSince(systemStatusData.value.uptime));
let lastGcTime = ref(calculateTimeSince(systemStatusData.value.last_gc_time));
let systemStatusInterval;
let timeInterval;
const updateTime = () => {
uptime.value = calculateTimeSince(systemStatusData.uptime);
lastGcTime.value = calculateTimeSince(systemStatusData.last_gc_time)
uptime.value = calculateTimeSince(systemStatusData.value.uptime);
lastGcTime.value = calculateTimeSince(systemStatusData.value.last_gc_time)
};
onMounted(() => {
updateTime();
systemStatusInterval = setInterval(async () => {
console.log("refresh")
systemStatusData = await $fetch("/api/admin/system-status")
refresh()
}, 5000);
timeInterval = setInterval(updateTime, 1000);

82
ui/pages/admin/users/[id]/edit.vue Normal file
View File

@@ -0,0 +1,82 @@
<script setup lang="ts">
import type { Plan, User } from '~/types/user';
definePageMeta({
middleware: ["auth", "admin"],
layout: "admin"
});
const route = useRoute();
let { data: user } = await useFetch<User>('/api/admin/users/' + route.params.id);
let username = ref(user.value?.username);
let email = ref(user.value?.email);
let password = ref('');
let plan_id = ref(user.value?.plan.id);
let is_admin = ref(user.value?.is_admin ? 'checked' : 'unchecked');
const updateUser = async () => {
let body = {
username: username.value,
email: email.value,
password: password.value,
plan_id: plan_id.value,
is_admin: is_admin.value === 'checked' ? true : false,
}
if (password.value === '') {
delete body.password
}
await $fetch('/api/admin/users/edit/' + route.params.id, {
method: "POST",
body,
})
}
let { data: plans } = await useFetch<Plan[]>('/api/admin/plans');
</script>
<template>
<div class="w-full h-fit mb-4">
<div class="overflow-hidden rounded-md border text-[15px]">
<h4 class="bg-surface px-3.5 py-3 border-b">Edit User Account
</h4>
<div class="p-4">
<label for="username" class="block max-w-64 text-sm">Username</label>
<Input v-model="username" :value="username" id="username" placeholder="Username" class="w-full mb-2" />
<label for="email" class="block max-w-64 text-sm">Email</label>
<Input v-model="email" :value="email" id="email" placeholder="Email" class="w-full mb-2" />
<div class="mb-2">
<label for="password" class="block max-w-64 text-sm">Password</label>
<Input v-model="password" id="password" placeholder="Password" class="w-full" />
<p class="text-muted text-sm">Leave the password empty to keep it unchanged</p>
</div>
<label for="plan_id" class="block max-w-64 text-sm">Plan</label>
<!-- select the one with the value of user.value.plan_id -->
<select v-model="plan_id" id="plan_id" :selected="plan_id"
class="w-full max-w-64 px-4 py-2 rounded-md bg-overlay border hover:border-muted/40 focus:border-muted/60 cursor-pointer">
<option v-for="plan in plans" :key="plan.id" :value="plan.id">
{{ formatBytes(plan.max_storage) }}
</option>
</select>
<hr class="my-4" />
<div class="flex items-center">
<Checkbox v-model="is_admin" id="is_admin" type="checkbox" class="mr-2" />
<label for="is_admin" class="text-sm">
Is Admin
</label>
</div>
<hr class="my-4" />
<div>
<button
class="transition-bg bg-pine/10 text-pine px-3 py-2 rounded-md hover:bg-pine/15 active:bg-pine/25"
v-on:click="updateUser">
Update User
</button>
</div>
</div>
</div>
</div>
</template>

63
ui/pages/admin/users/index.vue
View File

@@ -1,7 +1,5 @@
<script setup lang="ts">
import { useUser } from "~/composables/useUser"
import type { User } from "~/types/user";
const { getUser } = useUser()
definePageMeta({
middleware: ["auth", "admin"],
@@ -10,12 +8,18 @@ definePageMeta({
let page = ref(0)
const { data: users } = await useFetch<User[]>('/api/admin/get-users/' + page.value);
const { data: usersCount } = await useFetch<{ total_users: number }>('/api/admin/get-total-users');
const { data } = await useFetch<{ users: User[], total_users: number }>('/api/admin/users?page=' + page.value);
if (data.value === null) {
throw new Error("Failed to fetch users");
}
// let { users, total_users } = data.value;
let users = ref(data.value.users);
let total_users = ref(data.value.total_users);
const fetchNextPage = async () => {
page.value += 1;
let moreUsers = await $fetch('/api/admin/get-users/' + page.value);
let { users: moreUsers } = await $fetch<{ users: User[], total_users: number }>('/api/admin/users?page=' + page.value);
console.log(moreUsers)
users.value = users.value?.concat(moreUsers)
}
@@ -24,8 +28,17 @@ const fetchNextPage = async () => {
<template>
<div class="w-full h-fit mb-4">
<div class="overflow-hidden rounded-md border text-[15px]">
<h4 class="bg-surface px-3.5 py-3 border-b">User Account Management (Total: {{ usersCount.total_users }})
</h4>
<div class="flex bg-surface border-b items-center justify-between px-3.5 ">
<h4 class="py-3 w-fit">User Account Management (Total: {{ total_users }})
</h4>
<NuxtLink to="/admin/users/new">
<button
class="transition-bg bg-pine/10 text-pine px-2 py-1.5 rounded-md hover:bg-pine/15 active:bg-pine/25 h-fit text-xs"
v-on:click="updateUser">
Create User Account
</button>
</NuxtLink>
</div>
<div class="overflow-x-scroll max-w-full">
<table class="min-w-full">
<thead>
@@ -40,7 +53,10 @@ const fetchNextPage = async () => {
</thead>
<tbody>
<tr v-for="user in users" class="border-t">
<td class="py-2 px-4 max-w-44" :title="user.id">{{ user.id }}</td>
<td class="py-2 px-4 max-w-44 whitespace-nowrap overflow-hidden text-ellipsis"
:title="user.id">
{{ user.id }}
</td>
<td class="py-2 px-4">
{{ user.username }}
<span v-if="user.is_admin"
@@ -65,18 +81,20 @@ const fetchNextPage = async () => {
}) }}</td>
<td class="py-2 px-4 h-full">
<div class="flex items-center justify-end">
<NuxtLink :to="`/admin/users/${user.id}/edit`"></NuxtLink>
<button
class="my-auto hover:bg-muted/10 p-1 transition-bg active:bg-muted/20 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24">
<g class="stroke-blue-400/90" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
<path d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
</g>
</svg>
</button>
<NuxtLink :to="`/admin/users/${user.id}/edit`">
<button
class="my-auto hover:bg-muted/10 p-1 transition-bg active:bg-muted/20 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24">
<g class="stroke-blue-400/90" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
<path
d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
</g>
</svg>
</button>
</NuxtLink>
</div>
</td>
</tr>
@@ -84,8 +102,9 @@ const fetchNextPage = async () => {
</table>
</div>
</div>
<div class="w-full h-full flex justify-center mt-4" v-if="users?.length != usersCount.total_users">
<button class="bg-accent/10 text-accent px-2 py-1 rounded-md hover:" v-on:click="fetchNextPage()">Load
<div class="w-full h-full flex justify-center mt-4" v-if="users?.length != total_users">
<button class="transition-bg bg-pine/10 text-pine px-2 py-1 rounded-md hover:bg-pine/15 active:bg-pine/25"
v-on:click="fetchNextPage()">Load
More</button>
</div>
</div>

64
ui/pages/admin/users/new.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup lang="ts">
import type { User } from '~/types/user';
definePageMeta({
middleware: ["auth", "admin"],
layout: "admin"
});
let username = ref('')
let email = ref('')
let password = ref('')
let error = ref('')
let timeout;
const submitForm = async () => {
let { data, error: fetchError } = await useAsyncData<User, NuxtError<{ message: string }>>(
() => $fetch('/api/admin/users/new', {
method: 'POST',
body: {
"username": username.value,
"email": email.value,
"password": password.value,
}
})
)
if (fetchError.value != null && fetchError.value.data !== undefined) {
error.value = fetchError.value.data.message
timeout = setTimeout(() => error.value = "", 15000)
} else if (data.value !== null) {
await navigateTo('/admin/users')
}
}
onUnmounted(() => {
clearTimeout(timeout)
})
</script>
<template>
<div class="w-full h-fit mb-4">
<div class="overflow-hidden rounded-md border text-[15px]">
<h4 class="bg-surface px-3.5 py-3 border-b">Create User Account
</h4>
<div class="p-4">
<label for="username" class="block max-w-64 text-sm">Username</label>
<Input v-model="username" :value="username" id="username" placeholder="Username" class="w-full mb-2" />
<label for="email" class="block max-w-64 text-sm">Email</label>
<Input v-model="email" :value="email" id="email" placeholder="Email" class="w-full mb-2" />
<label for="password" class="block max-w-64 text-sm">Password</label>
<Input v-model="password" id="password" type="password" placeholder="Password" class="w-full mb-2" />
<p class="text-love mb-2">{{ error }}</p>
<div>
<button
class="transition-bg bg-pine/10 text-pine px-3 py-2 rounded-md hover:bg-pine/15 active:bg-pine/25"
v-on:click="submitForm">
Create User Account
</button>
</div>
</div>
</div>
</div>
</template>

4
ui/pages/login.vue
View File

@@ -42,8 +42,8 @@ onUnmounted(() => {
<div class="min-h-screen min-w-screen grid place-content-center bg-base">
<div class="flex flex-col text-center bg-surface border shadow-md px-10 py-8 rounded-2xl min-w-0 max-w-[313px]">
<h2 class="font-semibold text-2xl mb-2">Login</h2>
<Input v-model="username_or_email" placeholder="Username or Email..." />
<Input v-model="password" type="password" placeholder="Password..." />
<Input class="my-2" v-model="username_or_email" placeholder="Username or Email..." />
<Input class="my-2" v-model="password" type="password" placeholder="Password..." />
<p class="text-love">{{ error }}</p>
<button @click="submitForm"
class="py-2 px-4 my-2 bg-pine/10 text-pine rounded-md transition-colors hover:bg-pine/15 active:bg-pine/25 focus:outline-none focus:ring focus:ring-inset">Login</button>

6
ui/pages/signup.vue
View File

@@ -45,9 +45,9 @@ onUnmounted(() => {
<div
class="flex flex-col text-center bg-surface border border-muted/20 shadow-md px-10 py-8 rounded-2xl min-w-0 max-w-[313px]">
<h2 class="font-semibold text-2xl mb-2">Signup</h2>
<Input v-model="username" placeholder="Username..." />
<Input v-model="email" placeholder="Email..." />
<Input v-model="password" type="password" placeholder="Password..." />
<Input class="my-2" v-model="username" placeholder="Username..." />
<Input class="my-2" v-model="email" placeholder="Email..." />
<Input class="my-2" v-model="password" type="password" placeholder="Password..." />
<p class="text-love">{{ error }}</p>
<button @click="submitForm"
class="py-2 px-4 my-2 bg-pine/10 text-pine rounded-md transition-colors hover:bg-pine/15 active:bg-pine/25 focus:outline-none focus:ring focus:ring-inset">Login</button>

10
ui/types/user.ts
View File

@@ -2,11 +2,13 @@ export interface User {
id: string,
username: string,
email: string,
plan: {
id: number,
max_storage: number
},
plan: Plan,
usage: number,
created_at: string,
is_admin: boolean,
}
export interface Plan {
id: number,
max_storage: number
}