From 1afc50ea6a5dfdeda209e8949220b8f8db8601d2 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Tue, 29 Oct 2024 22:50:11 +0100
Subject: [PATCH] Moved reset password, adjusted modal open logic (also WIP)
---
src/components/{gui => utilities}/ResetPassword.vue | 7 ++++---
src/screens/Login.vue | 9 ++++++---
src/stores/gameStore.ts | 7 +------
3 files changed, 11 insertions(+), 12 deletions(-)
rename src/components/{gui => utilities}/ResetPassword.vue (84%)
diff --git a/src/components/gui/ResetPassword.vue b/src/components/utilities/ResetPassword.vue
similarity index 84%
rename from src/components/gui/ResetPassword.vue
rename to src/components/utilities/ResetPassword.vue
index ebe7bb0..3a7f037 100644
--- a/src/components/gui/ResetPassword.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index 529be5d..eaeb95a 100644
--- a/src/screens/Login.vue
+++ b/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('')
diff --git a/src/stores/gameStore.ts b/src/stores/gameStore.ts
index 5c8c39e..ce28efd 100644
--- a/src/stores/gameStore.ts
+++ b/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