web: formatting by prettier

Co-authored-by: Schmackofatz <Schmackofatz@gmail.com>

web/src/components/Clipboard.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
+import { useClipboard } from "@vueuse/core";
 
-const source = ref('Hello')
-const { text, copy, copied, isSupported } = useClipboard({ source })
+const source = ref("Hello");
+const { text, copy, copied, isSupported } = useClipboard({ source });
 </script>
 
 <template>
@@ -12,9 +12,9 @@ const { text, copy, copied, isSupported } = useClipboard({ source })
       <span v-if="!copied">Copy</span>
       <span v-else>Copied!</span>
     </button>
-    <p>Current copied: <code>{{ text || 'none' }}</code></p>
+    <p>
+      Current copied: <code>{{ text || "none" }}</code>
+    </p>
   </div>
-  <p v-else>
-    Your browser does not support Clipboard API
-  </p>
+  <p v-else>Your browser does not support Clipboard API</p>
 </template>

web/src/components/HeaderBar.vue

@@ -10,7 +10,7 @@
         </v-btn>
         <v-dialog v-model="add" width="600" persistent>
           <v-card max-width="600">
-            <v-form>
+            <v-form @submit.prevent="submit">
               <v-card-title>
                 <span class="headline">Add License</span>
               </v-card-title>
@@ -101,11 +101,7 @@
                     ></v-btn>
                   </v-col>
                   <v-col>
-                    <v-btn
-                      class="ms-auto"
-                      text="Add"
-                      @click="add = false"
-                    ></v-btn>
+                    <v-btn class="ms-auto" text="Add" type="submit"></v-btn>
                   </v-col>
                 </v-row>
               </v-card-actions>
@@ -141,6 +137,8 @@
 
 <script setup lang="ts">
 import { store } from "@/store";
+import { SubmitEventPromise } from "vuetify";
+import { computed, ref } from "vue";
 import {
   Plus,
   LogOut,
@@ -148,13 +146,17 @@ import {
   CalendarCheck,
   CalendarX,
 } from "lucide-vue-next";
-import { computed, ref } from "vue";
 
 function handlelogout() {
   console.log("logout");
   store.setToken(null);
 }
 
+async function submit(event: SubmitEventPromise) {
+  const result = await event;
+  console.log(result);
+}
+
 const add = ref(false);
 // References for Add License Dialog
 const addLicenseName = ref<string>("");
@@ -162,7 +164,7 @@ const licenseNameRules = [
   (value: string) => {
     if (value) return true;
 
-    return "YOU MUST ENTER A LICENSE NAME";
+    return "YOU MUST ENTER (A LICENSE NAME)";
   },
 ];
 const addAmount = ref<number | undefined>();

web/src/components/MainPage.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <HeaderBar />
+    <div class="ma-8">
+      <li>
+        <CategoryContainer licenseGroupName="Jetbrains Ultimate" />
+        <CategoryContainer licenseGroupName="Microsoft" />
+        <CategoryContainer licenseGroupName="Willy Wonker Online Movie" />
+      </li>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import HeaderBar from "./HeaderBar.vue";
+import CategoryContainer from "./CategoryContainer.vue";
+</script>
+
+<style scoped>
+li {
+  list-style-type: none;
+}
+</style>

web/src/components/loginPage.vue

@@ -6,8 +6,19 @@
           <v-card-title class="text-h5">Login</v-card-title>
           <v-card-text>
             <v-form>
-              <v-text-field v-model="email" label="Email" required variant="outlined"></v-text-field>
-              <v-text-field v-model="password" label="Password" type="password" required variant="outlined"></v-text-field>
+              <v-text-field
+                v-model="email"
+                label="Email"
+                required
+                variant="outlined"
+              ></v-text-field>
+              <v-text-field
+                v-model="password"
+                label="Password"
+                type="password"
+                required
+                variant="outlined"
+              ></v-text-field>
             </v-form>
           </v-card-text>
           <v-card-actions>
@@ -19,32 +30,30 @@
   </v-container>
 </template>
 
-
-
 <script setup lang="ts">
-import { ref } from 'vue'
-import axios from 'axios'
-import { store } from '@/store';
+import { ref } from "vue";
+import axios from "axios";
+import { store } from "@/store";
 
-const email = ref('')
-const password = ref('')
+const email = ref("");
+const password = ref("");
 
 async function login() {
   try {
-    const response = await axios.post<string>("http://localhost:8080/api/v1/auth/login", { email: email.value, password: password.value})
+    const response = await axios.post<string>(
+      "http://localhost:8080/api/v1/auth/login",
+      { email: email.value, password: password.value }
+    );
     if (response.status === 200) {
-      store.setToken(response.data)
+      store.setToken(response.data);
     } else {
-      alert("Invalid Credentials")
+      alert("Invalid Credentials");
     }
-
-  } catch(err) {
-    alert("Invalid Credentials")
+  } catch (err) {
+    alert("Invalid Credentials");
   }
-
 }
 
-
 /*
 setTimeout(() => {
   console.log(email.value)
@@ -53,6 +62,4 @@ setTimeout(() => {
 */
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>