From 86f2510f3a4dd1cb250bddf884e631fcc5fe924c Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Tue, 8 Oct 2024 22:34:16 +0200
Subject: [PATCH] Changed login validation logic

---
 src/screens/Login.vue   | 34 +++++++++++++++++++++-------------
 src/stores/gameStore.ts |  3 ---
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index 7aab93f..5a1798a 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -14,8 +14,11 @@
             <div class="flex flex-col gap-5 p-2 mb-8 relative">
               <div class="w-full grid gap-3 relative">
                 <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
-                <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
-                <span v-if="gameStore.loginMessage" class="text-red-200 text-sm absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
+                <div class="relative">
+                  <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
+                  <button class="p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
+                </div>
+                <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
               </div>
               <button class="text-right text-cyan-300 text-base">Forgot password?</button>
               <button class="btn-cyan py-3 px-0 w-full text-base rounded" type="submit">Play now</button> 
@@ -37,8 +40,11 @@
             <div class="flex flex-col gap-6 p-2 mb-8 relative">
               <div class="w-full grid gap-2 mb-9 relative">
                 <input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px]" id="username" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
-                <input class="px-2 py-4 text-base focus-visible:outline-none bg-gray border border-solid border-gray-300 text-gray-300 min-w-[350px] bg-[url('/assets/icons/eye.svg')] bg-no-repeat" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
-                <span v-if="gameStore.loginMessage" class="text-red-200 text-xs absolute top-full mt-1">{{ gameStore.loginMessage }}</span>
+                <div class="relative">
+                  <input class="px-4 py-3 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300 min-w-[350px]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
+                  <button class="absolute right-3 top-1/2 -translate-y-1/2 bg-[url('/assets/icons/eye.svg')] bg-no-repeat"></button>
+                </div>
+                <span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
               </div>
               <button class="text-right text-cyan-50 text-base">Forgot password?</button>
               <button class="btn-cyan py-2 px-0 w-full text-xl" type="submit">Register</button> 
@@ -70,6 +76,7 @@ const gameStore = useGameStore()
 const username = ref('')
 const password = ref('')
 const switchForm = ref('login')
+const loginError = ref('')
 // automatic login because of development
 onMounted(async () => {
   const token = useCookies().get('token')
@@ -82,16 +89,16 @@ onMounted(async () => {
 async function loginFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
-    gameStore.setLoginMessage('Please enter a valid username and password')
-    return
+    loginError.value = 'Please enter a valid username and password'
+    return loginError
   }
 
   // send login event to server
   const response = await login(username.value, password.value)
 
   if (response.success === undefined) {
-    gameStore.setLoginMessage(response.error)
-    return
+    loginError.value = response.error
+    return loginError
   }
   gameStore.setToken(response.token)
   gameStore.initConnection()
@@ -101,21 +108,22 @@ async function loginFunc() {
 async function registerFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
-    gameStore.setLoginMessage('Please enter a valid username and password')
-    return
+    loginError.value = 'Please enter a valid username and password'
+    return loginError
   }
 
   // send register event to server
   const response = await register(username.value, password.value)
 
   if (response.success === undefined) {
-    gameStore.setLoginMessage(response.error)
-    return
+    loginError.value = response.error
+    return loginError
   }
 
   const loginSuccess = await loginFunc()
   if (!loginSuccess) {
-    gameStore.setLoginMessage('Login after registration failed. Please try logging in manually.')
+    loginError.value = 'Login after registration failed. Please try logging in manually.'
+    return loginError
   }
 }
 </script>
diff --git a/src/stores/gameStore.ts b/src/stores/gameStore.ts
index ab8ff03..1d56080 100644
--- a/src/stores/gameStore.ts
+++ b/src/stores/gameStore.ts
@@ -32,9 +32,6 @@ export const useGameStore = defineStore('game', {
     }
   },
   actions: {
-    setLoginMessage(message: string | null) {
-      this.loginMessage = message
-    },
     addNotification(notification: Notification) {
       if (!notification.id) {
         notification.id = Math.random().toString(16)