chore: cleanup (#27)

* implement password score UI and functions

* update strings tests to use `test`instead of `it`

* update typing

* refactor login/register UI+Logic

* fix width on switches to properly display

* fetch and store self in store

* (WIP) unify card styles

* update labels page

* bump nuxt

* use form area

* use text area for description

* unify confirm API

* unify UI around pages

* change header background height

frontend/pages/home.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { useAuthStore } from "~~/stores/auth";
   import { useItemStore } from "~~/stores/items";
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
@@ -12,6 +13,19 @@
 
   const api = useUserApi();
 
+  const auth = useAuthStore();
+
+  if (auth.self === null) {
+    const { data, error } = await api.self();
+    if (error) {
+      navigateTo("/login");
+    }
+
+    auth.$patch({ self: data.item });
+
+    console.log(auth.self);
+  }
+
   const itemsStore = useItemStore();
   const items = computed(() => itemsStore.items);
 
@@ -87,7 +101,7 @@
 </script>
 
 <template>
-  <BaseContainer class="space-y-16 pb-16">
+  <div>
     <BaseModal v-model="importDialog">
       <template #title> Import CSV File </template>
       <p>
@@ -98,6 +112,7 @@
       <form @submit.prevent="submitCsvFile">
         <div class="flex flex-col gap-2 py-6">
           <input ref="importRef" type="file" class="hidden" accept=".csv" @change="setFile" />
+
           <BaseButton type="button" @click="uploadCsv">
             <Icon class="h-5 w-5 mr-2" name="mdi-upload" />
             Upload
@@ -112,69 +127,58 @@
         </div>
       </form>
     </BaseModal>
-
-    <section aria-labelledby="profile-overview-title" class="mt-8">
-      <div class="overflow-hidden rounded-lg bg-white shadow">
-        <h2 id="profile-overview-title" class="sr-only">Profile Overview</h2>
-        <div class="bg-white p-6">
-          <div class="sm:flex sm:items-center sm:justify-between">
-            <div class="sm:flex sm:space-x-5">
-              <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
-                <p class="text-sm font-medium text-gray-600">Welcome back,</p>
-                <p class="text-xl font-bold text-gray-900 sm:text-2xl">Username</p>
-                <p class="text-sm font-medium text-gray-600">User</p>
+    <BaseContainer class="flex flex-col gap-16 pb-16">
+      <section>
+        <BaseCard>
+          <template #title> Welcome Back, {{ auth.self ? auth.self.name : "Username" }} </template>
+          <template #subtitle> {{ auth.self.isSuperuser ? "Admin" : "User" }} </template>
+          <template #title-actions>
+            <div class="flex justify-end gap-2">
+              <div class="tooltip" data-tip="Import CSV File">
+                <button class="btn btn-primary btn-sm" @click="openDialog">
+                  <Icon name="mdi-database" class="mr-2"></Icon>
+                  Import
+                </button>
               </div>
+              <BaseButton type="button" size="sm">
+                <Icon class="h-5 w-5 mr-2" name="mdi-person" />
+                Profile
+              </BaseButton>
             </div>
-            <div class="mt-5 flex justify-center sm:mt-0">
-              <a
-                href="#"
-                class="flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
-                >View profile</a
-              >
+          </template>
+
+          <div
+            class="grid grid-cols-1 divide-y divide-gray-300 border-t border-gray-300 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
+          >
+            <div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium">
+              <span class="text-gray-900">{{ stat.value.value }}</span>
+              {{ " " }}
+              <span class="text-gray-600">{{ stat.label }}</span>
             </div>
           </div>
+        </BaseCard>
+      </section>
+
+      <section>
+        <BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
+        <div class="flex gap-2 flex-wrap">
+          <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
         </div>
-        <div
-          class="grid grid-cols-1 divide-y divide-gray-200 border-t border-gray-200 bg-gray-50 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
-        >
-          <div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium">
-            <span class="text-gray-900">{{ stat.value.value }}</span>
-            {{ " " }}
-            <span class="text-gray-600">{{ stat.label }}</span>
-          </div>
+      </section>
+
+      <section>
+        <BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
+        <div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
+          <LocationCard v-for="location in locations" :key="location.id" :location="location" />
         </div>
-      </div>
-    </section>
+      </section>
 
-    <section>
-      <BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
-      <div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
-        <LocationCard v-for="location in locations" :key="location.id" :location="location" />
-      </div>
-    </section>
-
-    <section>
-      <BaseSectionHeader class="mb-5">
-        Items
-        <template #description>
-          <div class="tooltip" data-tip="Import CSV File">
-            <button class="btn btn-primary btn-sm" @click="openDialog">
-              <Icon name="mdi-database" class="mr-2"></Icon>
-              Import
-            </button>
-          </div>
-        </template>
-      </BaseSectionHeader>
-      <div class="grid sm:grid-cols-2 gap-4">
-        <ItemCard v-for="item in items" :key="item.id" :item="item" />
-      </div>
-    </section>
-
-    <section>
-      <BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
-      <div class="flex gap-2 flex-wrap">
-        <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
-      </div>
-    </section>
-  </BaseContainer>
+      <section>
+        <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <ItemCard v-for="item in items" :key="item.id" :item="item" />
+        </div>
+      </section>
+    </BaseContainer>
+  </div>
 </template>

frontend/pages/index.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-  import TextField from "@/components/Form/TextField.vue";
-  import { useNotifier } from "@/composables/use-notifier";
-  import { usePublicApi } from "@/composables/use-api";
   import { useAuthStore } from "~~/stores/auth";
   useHead({
     title: "Homebox | Organize and Tag Your Stuff",
@@ -11,49 +8,29 @@
     layout: "empty",
   });
 
+  const api = usePublicApi();
+  const toast = useNotifier();
+
   const authStore = useAuthStore();
   if (!authStore.isTokenExpired) {
     navigateTo("/home");
   }
 
-  const registerFields = [
-    {
-      label: "What's your name?",
-      value: "",
-    },
-    {
-      label: "What's your email?",
-      value: "",
-    },
-    {
-      label: "Name your group",
-      value: "",
-    },
-    {
-      label: "Set your password",
-      value: "",
-      type: "password",
-    },
-    {
-      label: "Confirm your password",
-      value: "",
-      type: "password",
-    },
-  ];
-
-  const api = usePublicApi();
+  const username = ref("");
+  const email = ref("");
+  const groupName = ref("");
+  const password = ref("");
+  const canRegister = ref(false);
 
   async function registerUser() {
     loading.value = true;
-    // Print Values of registerFields
-
     const { error } = await api.register({
       user: {
-        name: registerFields[0].value,
-        email: registerFields[1].value,
-        password: registerFields[3].value,
+        name: username.value,
+        email: email.value,
+        password: password.value,
       },
-      groupName: registerFields[2].value,
+      groupName: groupName.value,
     });
 
     if (error) {
@@ -64,48 +41,34 @@
     toast.success("User registered");
 
     loading.value = false;
-    loginFields[0].value = registerFields[1].value;
     registerForm.value = false;
   }
 
-  const loginFields = [
-    {
-      label: "Email",
-      value: "",
-    },
-    {
-      label: "Password",
-      value: "",
-      type: "password",
-    },
-  ];
-
-  const toast = useNotifier();
   const loading = ref(false);
+  const loginPassword = ref("");
 
   async function login() {
     loading.value = true;
-    const { data, error } = await api.login(loginFields[0].value, loginFields[1].value);
+    const { data, error } = await api.login(email.value, loginPassword.value);
 
     if (error) {
       toast.error("Invalid email or password");
-    } else {
-      toast.success("Logged in successfully");
-
-      authStore.$patch({
-        token: data.token,
-        expires: data.expiresAt,
-      });
-
-      navigateTo("/home");
+      loading.value = false;
+      return;
     }
+
+    toast.success("Logged in successfully");
+
+    authStore.$patch({
+      token: data.token,
+      expires: data.expiresAt,
+    });
+
+    navigateTo("/home");
     loading.value = false;
   }
 
-  const registerForm = ref(false);
-  function toggleLogin() {
-    registerForm.value = !registerForm.value;
-  }
+  const [registerForm, toggleLogin] = useToggle();
 </script>
 
 <template>
@@ -159,19 +122,17 @@
                     <Icon name="heroicons-user" class="mr-1 w-7 h-7" />
                     Register
                   </h2>
-                  <TextField
-                    v-for="field in registerFields"
-                    :key="field.label"
-                    v-model="field.value"
-                    :label="field.label"
-                    :type="field.type"
-                  />
+                  <FormTextField v-model="email" label="Set your email?" />
+                  <FormTextField v-model="username" label="What's your name?" />
+                  <FormTextField v-model="groupName" label="Name your group" />
+                  <FormTextField v-model="password" label="Set your password" type="password" />
+                  <PasswordScore v-model:valid="canRegister" :password="password" />
                   <div class="card-actions justify-end">
                     <button
                       type="submit"
                       class="btn btn-primary mt-2"
                       :class="loading ? 'loading' : ''"
-                      :disabled="loading"
+                      :disabled="loading || !canRegister"
                     >
                       Register
                     </button>
@@ -186,13 +147,8 @@
                     <Icon name="heroicons-user" class="mr-1 w-7 h-7" />
                     Login
                   </h2>
-                  <TextField
-                    v-for="field in loginFields"
-                    :key="field.label"
-                    v-model="field.value"
-                    :label="field.label"
-                    :type="field.type"
-                  />
+                  <FormTextField v-model="email" label="Email" />
+                  <FormTextField v-model="loginPassword" label="Password" type="password" />
                   <div class="card-actions justify-end mt-2">
                     <button type="submit" class="btn btn-primary" :class="loading ? 'loading' : ''" :disabled="loading">
                       Login
@@ -205,7 +161,7 @@
           <div class="text-center mt-6">
             <button
               class="text-base-content text-lg hover:bg-primary hover:text-primary-content px-3 py-1 rounded-xl transition-colors duration-200"
-              @click="toggleLogin"
+              @click="() => toggleLogin()"
             >
               {{ registerForm ? "Already a User? Login" : "Not a User? Register" }}
             </button>
@@ -227,4 +183,8 @@
     transform: translateX(20px);
     opacity: 0;
   }
+
+  progress[value]::-webkit-progress-value {
+    transition: width 0.5s;
+  }
 </style>

frontend/pages/item/[id]/edit.vue

@@ -204,7 +204,7 @@
   const confirm = useConfirm();
 
   async function deleteAttachment(attachmentId: string) {
-    const confirmed = await confirm.reveal("Are you sure you want to delete this attachment?");
+    const confirmed = await confirm.open("Are you sure you want to delete this attachment?");
 
     if (confirmed.isCanceled) {
       return;

frontend/pages/item/[id]/index.vue

@@ -174,7 +174,7 @@
   const confirm = useConfirm();
 
   async function deleteItem() {
-    const confirmed = await confirm.reveal("Are you sure you want to delete this item?");
+    const confirmed = await confirm.open("Are you sure you want to delete this item?");
 
     if (!confirmed.data) {
       return;
@@ -200,7 +200,7 @@
         <BaseDetails :details="itemSummary">
           <template #title>
             <BaseSectionHeader v-if="item" class="pb-0">
-              <Icon name="mdi-package-variant" class="-mt-1 mr-2 text-gray-600" />
+              <Icon name="mdi-package-variant" class="mr-2 text-gray-600" />
               <span class="text-gray-600">
                 {{ item.name }}
               </span>

frontend/pages/label/[id].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import ActionsDivider from "../../components/Base/ActionsDivider.vue";
+  import type { DateDetail, Detail } from "~~/components/global/DetailsSection/types";
 
   definePageMeta({
     layout: "home",
@@ -23,36 +23,47 @@
     return data;
   });
 
-  function maybeTimeAgo(date?: string): string {
-    if (!date) {
-      return "??";
-    }
-
-    const time = new Date(date);
-
-    return `${useTimeAgo(time).value} (${useDateFormat(time, "MM-DD-YYYY").value})`;
-  }
-
-  const details = computed(() => {
-    const dt = {
-      Name: label.value?.name || "",
-      Description: label.value?.description || "",
-    };
+  const details = computed<(Detail | DateDetail)[]>(() => {
+    const details = [
+      {
+        name: "Name",
+        text: label.value?.name,
+      },
+      {
+        name: "Description",
+        text: label.value?.description,
+      },
+    ];
 
     if (preferences.value.showDetails) {
-      dt["Created At"] = maybeTimeAgo(label.value?.createdAt);
-      dt["Updated At"] = maybeTimeAgo(label.value?.updatedAt);
-      dt["Database ID"] = label.value?.id || "";
-      dt["Group Id"] = label.value?.groupId || "";
+      return [
+        ...details,
+        {
+          name: "Created",
+          text: label.value?.createdAt,
+          type: "date",
+        },
+        {
+          name: "Updated",
+          text: label.value?.updatedAt,
+          type: "date",
+        },
+        {
+          name: "Database ID",
+          text: label.value?.id,
+        },
+      ];
     }
 
-    return dt;
+    return details;
   });
 
-  const { reveal } = useConfirm();
+  const confirm = useConfirm();
 
   async function confirmDelete() {
-    const { isCanceled } = await reveal("Are you sure you want to delete this label? This action cannot be undone.");
+    const { isCanceled } = await confirm.open(
+      "Are you sure you want to delete this label? This action cannot be undone."
+    );
 
     if (isCanceled) {
       return;
@@ -104,31 +115,48 @@
       <template #title> Update Label </template>
       <form v-if="label" @submit.prevent="update">
         <FormTextField v-model="updateData.name" :autofocus="true" label="Label Name" />
-        <FormTextField v-model="updateData.description" label="Label Description" />
+        <FormTextArea v-model="updateData.description" label="Label Description" />
         <div class="modal-action">
           <BaseButton type="submit" :loading="updating"> Update </BaseButton>
         </div>
       </form>
     </BaseModal>
-    <section>
-      <BaseSectionHeader class="mb-5" dark>
-        {{ label ? label.name : "" }}
-      </BaseSectionHeader>
-      <BaseDetails class="mb-2" :details="details">
-        <template #title> Label Details </template>
-      </BaseDetails>
-      <div class="form-control ml-auto mr-2 max-w-[130px]">
-        <label class="label cursor-pointer">
-          <input v-model="preferences.showDetails" type="checkbox" class="toggle" />
-          <span class="label-text"> Detailed View </span>
-        </label>
-      </div>
-      <ActionsDivider @delete="confirmDelete" @edit="openUpdate" />
-    </section>
+
+    <BaseCard class="mb-16">
+      <template #title>
+        <BaseSectionHeader>
+          <Icon name="mdi-tag" class="mr-2 text-gray-600" />
+          <span class="text-gray-600">
+            {{ label ? label.name : "" }}
+          </span>
+        </BaseSectionHeader>
+      </template>
+
+      <template #title-actions>
+        <div class="flex mt-2 gap-2">
+          <div class="form-control max-w-[160px]">
+            <label class="label cursor-pointer">
+              <input v-model="preferences.showDetails" type="checkbox" class="toggle toggle-primary" />
+              <span class="label-text ml-2"> Detailed View </span>
+            </label>
+          </div>
+          <BaseButton class="ml-auto" size="sm" @click="openUpdate">
+            <Icon class="mr-1" name="mdi-pencil" />
+            Edit
+          </BaseButton>
+          <BaseButton size="sm" @click="confirmDelete">
+            <Icon class="mr-1" name="mdi-delete" />
+            Delete
+          </BaseButton>
+        </div>
+      </template>
+
+      <DetailsSection :details="details" />
+    </BaseCard>
 
     <section v-if="label">
       <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
-      <div class="grid gap-2 grid-cols-2">
+      <div class="grid gap-2 grid-cols-1 sm:grid-cols-2">
         <ItemCard v-for="item in label.items" :key="item.id" :item="item" />
       </div>
     </section>

frontend/pages/location/[id].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import ActionsDivider from "../../components/Base/ActionsDivider.vue";
+  import { Detail, DateDetail } from "~~/components/global/DetailsSection/types";
 
   definePageMeta({
     layout: "home",
@@ -23,47 +23,57 @@
     return data;
   });
 
-  function maybeTimeAgo(date?: string): string {
-    if (!date) {
-      return "??";
-    }
-
-    const time = new Date(date);
-
-    return `${useTimeAgo(time).value} (${useDateFormat(time, "MM-DD-YYYY").value})`;
-  }
-
-  const details = computed(() => {
-    const dt = {
-      Name: location.value?.name || "",
-      Description: location.value?.description || "",
-    };
+  const details = computed<(Detail | DateDetail)[]>(() => {
+    const details = [
+      {
+        name: "Name",
+        text: location.value?.name,
+      },
+      {
+        name: "Description",
+        text: location.value?.description,
+      },
+    ];
 
     if (preferences.value.showDetails) {
-      dt["Created At"] = maybeTimeAgo(location.value?.createdAt);
-      dt["Updated At"] = maybeTimeAgo(location.value?.updatedAt);
-      dt["Database ID"] = location.value?.id || "";
-      dt["Group Id"] = location.value?.groupId || "";
+      return [
+        ...details,
+        {
+          name: "Created",
+          text: location.value?.createdAt,
+          type: "date",
+        },
+        {
+          name: "Updated",
+          text: location.value?.updatedAt,
+          type: "date",
+        },
+        {
+          name: "Database ID",
+          text: location.value?.id,
+        },
+      ];
     }
 
-    return dt;
+    return details;
   });
 
-  const { reveal } = useConfirm();
+  const confirm = useConfirm();
 
   async function confirmDelete() {
-    const { isCanceled } = await reveal("Are you sure you want to delete this location? This action cannot be undone.");
-
+    const { isCanceled } = await confirm.open(
+      "Are you sure you want to delete this location? This action cannot be undone."
+    );
     if (isCanceled) {
       return;
     }
 
     const { error } = await api.locations.delete(locationId.value);
-
     if (error) {
       toast.error("Failed to delete location");
       return;
     }
+
     toast.success("Location deleted");
     navigateTo("/home");
   }
@@ -103,31 +113,48 @@
       <template #title> Update Location </template>
       <form v-if="location" @submit.prevent="update">
         <FormTextField v-model="updateData.name" :autofocus="true" label="Location Name" />
-        <FormTextField v-model="updateData.description" label="Location Description" />
+        <FormTextArea v-model="updateData.description" label="Location Description" />
         <div class="modal-action">
           <BaseButton type="submit" :loading="updating"> Update </BaseButton>
         </div>
       </form>
     </BaseModal>
-    <section>
-      <BaseSectionHeader class="mb-5" dark>
-        {{ location ? location.name : "" }}
-      </BaseSectionHeader>
-      <BaseDetails class="mb-2" :details="details">
-        <template #title> Location Details </template>
-      </BaseDetails>
-      <div class="form-control ml-auto mr-2 max-w-[130px]">
-        <label class="label cursor-pointer">
-          <input v-model="preferences.showDetails" type="checkbox" class="toggle" />
-          <span class="label-text"> Detailed View </span>
-        </label>
-      </div>
-      <ActionsDivider @delete="confirmDelete" @edit="openUpdate" />
-    </section>
+
+    <BaseCard class="mb-16">
+      <template #title>
+        <BaseSectionHeader>
+          <Icon name="mdi-map-marker" class="mr-2 text-gray-600" />
+          <span class="text-gray-600">
+            {{ location ? location.name : "" }}
+          </span>
+        </BaseSectionHeader>
+      </template>
+
+      <template #title-actions>
+        <div class="flex mt-2 gap-2">
+          <div class="form-control max-w-[160px]">
+            <label class="label cursor-pointer">
+              <input v-model="preferences.showDetails" type="checkbox" class="toggle toggle-primary" />
+              <span class="label-text ml-2"> Detailed View </span>
+            </label>
+          </div>
+          <BaseButton class="ml-auto" size="sm" @click="openUpdate">
+            <Icon class="mr-1" name="mdi-pencil" />
+            Edit
+          </BaseButton>
+          <BaseButton size="sm" @click="confirmDelete">
+            <Icon class="mr-1" name="mdi-delete" />
+            Delete
+          </BaseButton>
+        </div>
+      </template>
+
+      <DetailsSection :details="details" />
+    </BaseCard>
 
     <section v-if="location">
       <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
-      <div class="grid gap-2 grid-cols-2">
+      <div class="grid gap-2 grid-cols-1 sm:grid-cols-2">
         <ItemCard v-for="item in location.items" :key="item.id" :item="item" />
       </div>
     </section>