Refactored screens & login forms, fixed pw reset modal, WIP new pw form

src/components/utilities/Modal.vue

@@ -146,8 +146,8 @@ function stopDrag() {
 
 function adjustPosition() {
   if (isFullScreen.value) return
-  x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
-  y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.value))
+  x.value = Math.min(x.value, window.innerWidth - width.value)
+  y.value = Math.min(y.value, window.innerHeight - height.value)
 }
 
 function handleResize() {

src/components/utilities/ResetPassword.vue

@@ -1,51 +1,53 @@
-<template>
-    <Modal :isModalOpen="isPasswordResetOpen" @modal:close="() => isPasswordResetOpen = !isPasswordResetOpen" :modal-width="400" :modal-height="300" :is-resizable="false">
-    <template #modalHeader>
-      <h3 class="m-0 font-medium shrink-0 text-white">Reset Password</h3>
-    </template>
-
-    <template #modalBody>
-      <div class="h-[calc(100%_-_32px)] p-4">
-        <form class="h-full flex flex-col justify-between" @submit.prevent="resetPasswordFunc">
-          <div class="flex flex-col relative">
-            <p>Fill in your email to receive a password reset request.</p>
-            <input type="email" name="email" class="input-field" v-model="email" placeholder="E-mail" />
-            <span v-if="resetPasswordError" class="text-red-200 text-xs absolute top-full mt-1">{{ resetPasswordError }}</span>
-          </div>
-          <div class="grid grid-flow-col justify-stretch gap-4">
-            <button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click.stop="isPasswordResetOpen = !isPasswordResetOpen">Cancel</button>
-            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit">Send mail</button>
-          </div>
-        </form>
-      </div>
-    </template>
-  </Modal>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { resetPassword } from '@/services/authentication'
-import { useGameStore } from '@/stores/gameStore'
-import Modal from '@/components/utilities/Modal.vue'
-
-const gameStore = useGameStore()
-const email = ref('')
-const resetPasswordError = ref('')
-const isPasswordResetOpen = ref(false)
-
-async function resetPasswordFunc() {
-  // check if email is valid
-  if (email.value === '') {
-    resetPasswordError.value = 'Please enter an email'
-    return
-  }
-
-  // send reset password event to server
-  const response = await resetPassword(email.value)
-
-  if (response.success === undefined) {
-    resetPasswordError.value = response.error
-    return
-  }
-}
+<template>
+    <Modal @modal:close="() => emit('close')" :modal-width="400" :modal-height="300" :is-resizable="false">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0 text-white">Reset Password</h3>
+    </template>
+
+    <template #modalBody>
+      <div class="h-[calc(100%_-_32px)] p-4">
+        <form class="h-full flex flex-col justify-between" @submit.prevent="resetPasswordFunc">
+          <div class="flex flex-col relative">
+            <p>Fill in your email to receive a password reset request.</p>
+            <input type="email" name="email" class="input-field" v-model="email" placeholder="E-mail" />
+            <span v-if="resetPasswordError" class="text-red-200 text-xs absolute top-full mt-1">{{ resetPasswordError }}</span>
+          </div>
+          <div class="grid grid-flow-col justify-stretch gap-4">
+            <button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click.stop="() => emit('close')">Cancel</button>
+            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit">Send mail</button>
+          </div>
+        </form>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { resetPassword } from '@/services/authentication'
+import { useGameStore } from '@/stores/gameStore'
+import Modal from '@/components/utilities/Modal.vue'
+
+const emit = defineEmits(['close'])
+
+const gameStore = useGameStore()
+const email = ref('')
+const resetPasswordError = ref('')
+const isPasswordResetOpen = ref(false)
+
+async function resetPasswordFunc() {
+  // check if email is valid
+  if (email.value === '') {
+    resetPasswordError.value = 'Please enter an email'
+    return
+  }
+
+  // send reset password event to server
+  const response = await resetPassword(email.value)
+
+  if (response.success === undefined) {
+    resetPasswordError.value = response.error
+    return
+  }
+}
 </script>