Make it NOT laggy and done some basic login stuff.

components/DraggableWindow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { useThrottleFn } from '@vueuse/core'
 
 const props = defineProps<{
   title: string;
@@ -18,36 +18,33 @@ const position = ref({
 });
 const offset = ref({ x: 0, y: 0 });
 
+const doDrag = useThrottleFn((e: MouseEvent) => {
+  if (!isDragging.value) return
+  
+  requestAnimationFrame(() => {
+    position.value = {
+      x: Math.max(0, Math.min(window.innerWidth - 400, e.clientX - offset.value.x)),
+      y: Math.max(0, Math.min(window.innerHeight - 300, e.clientY - offset.value.y))
+    }
+  })
+}, 16);
+
+
 const startDrag = (e: MouseEvent) => {
-  isDragging.value = true;
+  isDragging.value = true
   offset.value = {
     x: e.clientX - position.value.x,
-    y: e.clientY - position.value.y,
-  };
-};
-
-const doDrag = (e: MouseEvent) => {
-  if (isDragging.value) {
-    position.value = {
-      x: e.clientX - offset.value.x,
-      y: e.clientY - offset.value.y,
-    };
+    y: e.clientY - position.value.y
   }
-};
+  document.addEventListener('mousemove', doDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
 
 const stopDrag = () => {
-  isDragging.value = false;
-};
-
-onMounted(() => {
-  document.addEventListener("mousemove", doDrag);
-  document.addEventListener("mouseup", stopDrag);
-});
-
-onUnmounted(() => {
-  document.removeEventListener("mousemove", doDrag);
-  document.removeEventListener("mouseup", stopDrag);
-});
+  isDragging.value = false
+  document.removeEventListener('mousemove', doDrag)
+  document.removeEventListener('mouseup', stopDrag)
+}
 </script>
 
 <template>

components/app/windows/login.vue

@@ -1,50 +1,64 @@
 <script setup lamng="ts">
+import sha512 from "crypto-js/sha512";
 const userAccount = ref("");
 const userPassword = ref("");
-const crypto = Crypto;
 const submitUserPassword = async () => {
     // Encrypt password during transit
-    const sha512Passwordify = crypto.createHash("sha512");
-    sha512Passwordify.update(userPassword.value);
-    const sha512Password = sha512Passwordify.digest("hex");
-
-    // Log user & password
-    console.log(userAccount.value);
-    console.log(sha512Password);
+    const password = sha512(userPassword.value).toString();
 
     // Send data.
-    const sendData = fetch("/api/user/login", {
+    const sendData = await fetch("/api/user/login", {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
         },
         body: JSON.stringify({
             username: userAccount.value,
-            password: sha512Password,
+            pcssword: password,
         }),
     })
+    const res = await sendData.json();
+
+    if (res.status === "ok") {
+        // Store the token in local storage
+        localStorage.setItem("token", res.token);
+        // Redirect to the home page
+        window.location.href = "/";
+        success.value = true;
+    } else {
+        alert("Login failed");
+        error.value = true;
+    }
+    // Clear the input fields
+    userAccount.value = "";
+    userPassword.value = "";
 }
 </script>
 <template>
   <div class="flex flex-col items-center justify-center h-full">
-    <div
+    <form
       class="flex flex-col items-center justify-center h-full"
+      @submit.prevent="submitUserPassword"
+      v-if="!success"
     >
       <div class="text-xl mb-4 text-bold">Login / Register</div>
 
       <input
         type="text"
-        placeholder="Username"
+        placeholder="Your Email"
         class="mb-2 p-2 border rounded"
+        v-model="userAccount"
       />
       <input
         type="password"
         placeholder="Password"
         class="p-2 border rounded mb-2"
+        v-model="userPassword"
       />
-      <button class="bg-black text-white p-2 rounded transition duration-200" @click="submitUserPassword">
+      <button class="bg-black text-white p-2 rounded transition duration-200">
         Log In
       </button>
-    </div>
+    </form>
+    <div v-else></div>
   </div>
 </template>