Adjusted login validation

src/screens/Login.vue

@@ -8,12 +8,14 @@
         <div class="relative">
           <img src="/assets/login/login-box-outer.svg" class="absolute w-full h-full" />
           <img src="/assets/login/login-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" />
-          <form @submit.prevent="loginFunc" class="relative p-10">
+
+          <!-- Login Form -->
+          <form v-show="switchForm === 'login'" @submit.prevent="loginFunc" class="relative p-10">
             <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]" id="password" v-model="password" type="password" name="password" placeholder="Password" required />
-                <span v-if="formError" class="text-red-200 text-sm absolute top-full mt-1">{{ notification }}</span>
+                <span v-if="gameStore.loginMessage" class="text-red-200 text-sm absolute top-full mt-1">{{ gameStore.loginMessage }}</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">Play now</button> 
@@ -26,7 +28,30 @@
               </div>
             </div>
             <div class="pt-8">
-              <p class="m-0 text-center">Don't have an account? <button class="text-cyan-50 text-base p-0" @click.prevent="registerFunc">Sign up</button></p>
+              <p class="m-0 text-center">Don't have an account? <button ref="toggleRegister" class="text-cyan-50 text-base p-0" @click.prevent="switchForm = 'register'">Sign up</button></p>
+            </div>
+          </form>
+
+          <!-- Register Form -->
+          <form v-show="switchForm === 'register'" @submit.prevent="registerFunc" class="relative p-10">
+            <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]" 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>
+              <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> 
+
+              <!-- Divider shape -->
+              <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
+                <div class="w-0.5 h-full bg-white/30"></div>
+                <div class="w-36 h-full bg-white/30"></div>
+                <div class="w-0.5 h-full bg-white/30"></div>
+              </div>
+            </div>
+            <div class="pt-8">
+              <p class="m-0 text-center">Already have an account? <button class="text-cyan-50 text-base p-0" @click.prevent="switchForm = 'login'">Log in</button></p>
             </div>
           </form>
         </div>
@@ -44,9 +69,7 @@ import { useCookies } from '@vueuse/integrations/useCookies'
 const gameStore = useGameStore()
 const username = ref('')
 const password = ref('')
-let formError = false
+const switchForm = ref('login')
-let notification = ''
-
 // automatic login because of development
 onMounted(async () => {
   const token = useCookies().get('token')
@@ -59,8 +82,7 @@ onMounted(async () => {
 async function loginFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
-    notification = 'Please enter a valid username and password'
+    gameStore.setLoginMessage('Please enter a valid username and password')
-    formError = true
     return
   }
 
@@ -68,12 +90,9 @@ async function loginFunc() {
   const response = await login(username.value, password.value)
 
   if (response.success === undefined) {
-    notification = response.error
+    gameStore.setLoginMessage(response.error)
-    formError = true
     return
   }
-
-  console.log(formError)
   gameStore.setToken(response.token)
   gameStore.initConnection()
   return true // Indicate success
@@ -82,8 +101,7 @@ async function loginFunc() {
 async function registerFunc() {
   // check if username and password are valid
   if (username.value === '' || password.value === '') {
-    notification = 'Please enter a valid username and password'
+    gameStore.setLoginMessage('Please enter a valid username and password')
-    formError = true
     return
   }
 
@@ -91,15 +109,13 @@ async function registerFunc() {
   const response = await register(username.value, password.value)
 
   if (response.success === undefined) {
-    notification = response.error
+    gameStore.setLoginMessage(response.error)
-    formError = true
     return
   }
 
   const loginSuccess = await loginFunc()
   if (!loginSuccess) {
-    notification = 'Login after registration failed. Please try logging in manually.'
+    gameStore.setLoginMessage('Login after registration failed. Please try logging in manually.')
-    formError = true
   }
 }
 </script>

src/stores/gameStore.ts

@@ -7,6 +7,7 @@ import { useCookies } from '@vueuse/integrations/useCookies'
 export const useGameStore = defineStore('game', {
   state: () => {
     return {
+      loginMessage: null as string | null,
       notifications: [] as Notification[],
       assets: [] as Asset[],
       token: '' as string | null,
@@ -31,6 +32,9 @@ 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)