Moved reset password, adjusted modal open logic (also WIP)

src/components/utilities/ResetPassword.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="gameStore.uiSettings.isPasswordResetOpen" @modal:close="() => gameStore.togglePasswordReset()" :modal-width="400" :modal-height="300" :is-resizable="false">
+    <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>
@@ -13,7 +13,7 @@
             <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="gameStore.togglePasswordReset">Cancel</button>
+            <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>
@@ -31,6 +31,7 @@ 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
@@ -47,4 +48,4 @@ async function resetPasswordFunc() {
     return
   }
 }
-</script>
+</script>

src/screens/Login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative max-lg:h-dvh flex flex-row-reverse">
-    <ResetPassword />
+    <ResetPassword :isModalOpen="resetPasswordForm" />
     <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
     <div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
     <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
@@ -21,7 +21,7 @@
                 </div>
                 <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
               </div>
-              <button @click.stop="gameStore.togglePasswordReset" type="button" class="inline-flex self-end p-0 text-cyan-300 text-base">Forgot password?</button>
+              <button @click.stop="resetPasswordForm = !resetPasswordForm" type="button" class="inline-flex self-end p-0 text-cyan-300 text-base">Forgot password?</button>
               <button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button>
 
               <!-- Divider shape -->
@@ -72,7 +72,10 @@ import { onMounted, ref } from 'vue'
 import { login, register } from '@/services/authentication'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
-import ResetPassword from '@/components/gui/ResetPassword.vue'
+import ResetPassword from '@/components/utilities/ResetPassword.vue'
+
+const props = defineProps(['isModalOpen'])
+const resetPasswordForm = ref(props.isModalOpen)
 
 const gameStore = useGameStore()
 const username = ref('')

src/stores/gameStore.ts

@@ -27,8 +27,7 @@ export const useGameStore = defineStore('game', {
       uiSettings: {
         isChatOpen: false,
         isCharacterProfileOpen: false,
-        isGmPanelOpen: false,
-        isPasswordResetOpen: false
+        isGmPanelOpen: false
       }
     }
   },
@@ -72,9 +71,6 @@ export const useGameStore = defineStore('game', {
     toggleCharacterProfile() {
       this.uiSettings.isCharacterProfileOpen = !this.uiSettings.isCharacterProfileOpen
     },
-    togglePasswordReset() {
-      this.uiSettings.isPasswordResetOpen = !this.uiSettings.isPasswordResetOpen
-    },
     initConnection() {
       this.connection = io(config.server_endpoint, {
         secure: !config.development,
@@ -120,7 +116,6 @@ export const useGameStore = defineStore('game', {
       this.gameSettings.isCameraFollowingCharacter = false
       this.uiSettings.isChatOpen = false
       this.uiSettings.isCharacterProfileOpen = false
-      this.uiSettings.isPasswordResetOpen = false
 
       this.world.date = new Date()
       this.world.isRainEnabled = false