From d7ff2d77ae75549aebf578ca68a1a98075b4960d Mon Sep 17 00:00:00 2001
From: juls0730 <62722391+juls0730@users.noreply.github.com>
Date: Mon, 30 Sep 2024 01:06:57 -0500
Subject: [PATCH] better types

---
 ui/composables/useUser.ts          | 23 ++++++++++++++++++-----
 ui/layouts/admin.vue               |  4 ++--
 ui/middleware/admin.ts             |  2 +-
 ui/pages/admin/index.vue           | 30 +++++++++++++++++++++++-------
 ui/pages/admin/users/[id]/edit.vue |  2 +-
 ui/pages/admin/users/index.vue     |  3 +--
 ui/pages/admin/users/new.vue       |  9 +++++----
 ui/pages/login.vue                 |  2 +-
 ui/pages/signup.vue                |  2 +-
 9 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/ui/composables/useUser.ts b/ui/composables/useUser.ts
index 54fdb61..1b11854 100644
--- a/ui/composables/useUser.ts
+++ b/ui/composables/useUser.ts
@@ -1,9 +1,22 @@
-import type { User } from '~/types/user'
+import type { Plan, User } from '~/types/user'
 import { useFetch } from '#app'
 
+const uninitializedUser = {
+    id: "",
+    username: "",
+    email: "",
+    plan: <Plan>{
+        id: 0,
+        max_storage: 0
+    },
+    usage: 0,
+    created_at: "",
+    is_admin: false
+}
+
 export const useUser = () => {
     // Global state for storing the user
-    const user = useState('user', () => { return { fetched: false, user: <User>{} } })
+    const user = useState('user', () => { return { fetched: false, user: uninitializedUser } })
 
     // Fetch the user only if it's uninitialized (i.e., null)
     const getUser = async () => {
@@ -24,9 +37,9 @@ export const useUser = () => {
             }
 
             user.value.user = data.value
-        } catch (e) {
+        } catch (e: any) {
             console.error(e.message)
-            user.value.user = {}
+            user.value.user = uninitializedUser
         }
     }
 
@@ -37,7 +50,7 @@ export const useUser = () => {
 
     // Clear the user data (e.g., on logout)
     const resetUser = () => {
-        user.value.user = {}
+        user.value.user = uninitializedUser
     }
 
     return {
diff --git a/ui/layouts/admin.vue b/ui/layouts/admin.vue
index 8386cd7..69df947 100644
--- a/ui/layouts/admin.vue
+++ b/ui/layouts/admin.vue
@@ -9,7 +9,7 @@ definePageMeta({
 const user = await getUser();
 const route = useRoute();
 
-const accordionMapping = {
+const accordionMapping: Record<string, string> = {
     '/admin/users': '',
     '/admin/config/settings': 'item-2',
     '/admin': 'item-1',
@@ -30,7 +30,7 @@ const isActiveLink = (path: string) => route.path === path;
             <div class="w-auto md:w-60 flex-shrink-0">
                 <aside class="rounded-md border overflow-hidden w-full h-fit">
                     <div class="px-4 py-3.5 bg-surface border-b">Admin Settings</div>
-                    <VlAccordion type="single" :defaultValue="getActiveAccordion()">
+                    <VlAccordion type="single" :defaultValue="getActiveAccordion() || undefined">
                         <VlAccordionItem value="item-1" class="text-sm">
                             <VlAccordionTrigger class="transition-bg hover:bg-muted/10 px-4 py-3.5">
                                 Maintenance
diff --git a/ui/middleware/admin.ts b/ui/middleware/admin.ts
index 420fb33..246afbc 100644
--- a/ui/middleware/admin.ts
+++ b/ui/middleware/admin.ts
@@ -5,7 +5,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
     const { getUser } = useUser()
     const user = await getUser()
 
-    if (!user.is_admin) {
+    if (!user || !user.is_admin) {
         return navigateTo('/home')
     }
 })
diff --git a/ui/pages/admin/index.vue b/ui/pages/admin/index.vue
index 6b71aaa..9a86cf8 100644
--- a/ui/pages/admin/index.vue
+++ b/ui/pages/admin/index.vue
@@ -1,14 +1,26 @@
 <script setup lang="ts">
+import type { NuxtError } from '#app';
+
 definePageMeta({
     middleware: ["auth", "admin"],
     layout: "admin"
 });
 
-let {data: systemStatusData, refresh} = await useFetch("/api/admin/status")
+let {data: systemStatusData, refresh} = await useFetch<
+{ uptime: string, num_goroutine: number, cur_mem_usage: string, total_mem_usage: string,
+    mem_obtained: string, ptr_lookup_times: number, mem_allocations: number, mem_frees: number, cur_heap_usage: string, heap_mem_obtained: string, 
+    heap_mem_idle: string, heap_mem_inuse: string, heap_mem_release: string, heap_objects: number, bootstrap_stack_usage: string, stack_mem_obtained: string, 
+    mspan_structures_usage: string, mspan_structures_obtained: string, mcache_structures_usage: string, mcache_structures_obtained: string, 
+    buck_hash_sys: string, gc_sys: string, other_sys: string, next_gc: string, last_gc_time: string, pause_total_ns: string, pause_ns: string, num_gc: number 
+}, NuxtError<{ message: string }>>("/api/admin/status")
 
-const calculateTimeSince = (time) => {
-    const now = new Date();
-    const date = new Date(time);
+if (systemStatusData.value === null) {
+    throw new Error("Failed to fetch system status")
+}
+
+const calculateTimeSince = (time: string) => {
+    const now: number = new Date().getTime();
+    const date: number = new Date(time).getTime();
     const diffInSeconds = Math.floor((now - date) / 1000);
 
     const days = Math.floor(diffInSeconds / (3600 * 24));
@@ -29,10 +41,14 @@ const calculateTimeSince = (time) => {
 let uptime = ref(calculateTimeSince(systemStatusData.value.uptime));
 let lastGcTime = ref(calculateTimeSince(systemStatusData.value.last_gc_time));
 
-let systemStatusInterval;
-let timeInterval;
+let systemStatusInterval: NodeJS.Timeout;
+let timeInterval: NodeJS.Timeout;
 
 const updateTime = () => {
+    if (systemStatusData.value === null) {
+        throw new Error("Failed to fetch system status")
+    }
+
     uptime.value = calculateTimeSince(systemStatusData.value.uptime);
     lastGcTime.value = calculateTimeSince(systemStatusData.value.last_gc_time)
 };
@@ -57,7 +73,7 @@ onUnmounted(() => {
     <div class="w-full overflow-hidden rounded-md border h-fit text-[15px]">
         <h4 class="bg-surface px-3.5 py-3 border-b">System Status</h4>
         <div class="p-3.5 text-sm">
-            <dl class="flex-wrap">
+            <dl class="flex-wrap" v-if="systemStatusData !== null">
                 <dt>Server Uptime</dt>
                 <dd>{{ uptime }}</dd>
                 <dt>Current Goroutine</dt>
diff --git a/ui/pages/admin/users/[id]/edit.vue b/ui/pages/admin/users/[id]/edit.vue
index 265869a..eb43cd5 100644
--- a/ui/pages/admin/users/[id]/edit.vue
+++ b/ui/pages/admin/users/[id]/edit.vue
@@ -20,7 +20,7 @@ const updateUser = async () => {
     let body = {
         username: username.value,
         email: email.value,
-        password: password.value,
+        password: password.value as string || undefined,
         plan_id: plan_id.value,
         is_admin: is_admin.value === 'checked' ? true : false,
     }
diff --git a/ui/pages/admin/users/index.vue b/ui/pages/admin/users/index.vue
index 4c92691..0e681ea 100644
--- a/ui/pages/admin/users/index.vue
+++ b/ui/pages/admin/users/index.vue
@@ -33,8 +33,7 @@ const fetchNextPage = async () => {
                 </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">
+                        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">
                         Create User Account
                     </button>
                 </NuxtLink>
diff --git a/ui/pages/admin/users/new.vue b/ui/pages/admin/users/new.vue
index 0321b6d..29ba997 100644
--- a/ui/pages/admin/users/new.vue
+++ b/ui/pages/admin/users/new.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { NuxtError } from '#app';
 import type { User } from '~/types/user';
 
 definePageMeta({
@@ -12,7 +13,7 @@ let password = ref('')
 
 let error = ref('')
 
-let timeout;
+let timeout: NodeJS.Timeout;
 const submitForm = async () => {
     let { data, error: fetchError } = await useAsyncData<User, NuxtError<{ message: string }>>(
         () => $fetch('/api/admin/users/new', {
@@ -45,11 +46,11 @@ onUnmounted(() => {
             </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" />
+                <Input v-model="username" :value="username" id="username" placeholder="Username" autocomplete="off" 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" />
+                <Input v-model="email" :value="email" id="email" placeholder="Email" autocomplete="off" 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" />
+                <Input v-model="password" :value="password" id="password" type="password" placeholder="Password" autocomplete="off" class="w-full mb-2" />
                 <p class="text-love mb-2">{{ error }}</p>
                 <div>
                     <button
diff --git a/ui/pages/login.vue b/ui/pages/login.vue
index 3068863..424992a 100644
--- a/ui/pages/login.vue
+++ b/ui/pages/login.vue
@@ -12,7 +12,7 @@ let password = ref('')
 
 let error = ref('')
 
-let timeout;
+let timeout: NodeJS.Timeout;
 const submitForm = async () => {
     let { data, error: fetchError } = await useAsyncData<User, NuxtError<{ message: string }>>(
         () => $fetch('/api/login', {
diff --git a/ui/pages/signup.vue b/ui/pages/signup.vue
index bbf2288..e8bfa14 100644
--- a/ui/pages/signup.vue
+++ b/ui/pages/signup.vue
@@ -13,7 +13,7 @@ let password = ref('')
 
 let error = ref('')
 
-let timeout;
+let timeout: NodeJS.Timeout;
 const submitForm = async () => {
     let { data, error: fetchError } = await useAsyncData<User, NuxtError<{ message: string }>>(
         () => $fetch('/api/signup', {