Several fixes, improvements, refactor for authentication

src/components/login/RegisterForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="registerFunc" class="relative px-6 py-11">
+  <form @submit.prevent="submit" class="relative px-6 py-11">
     <div class="flex flex-col gap-5 p-2 mb-8 relative">
       <div class="w-full grid gap-3 relative">
         <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
@@ -8,7 +8,7 @@
           <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
           <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
         </div>
-        <span v-if="loginError" class="text-red-200 text-xs -mt-2">{{ loginError }}</span>
+        <span v-if="formError" class="text-red-200 text-xs -mt-2">{{ formError }}</span>
       </div>
       <button class="btn-cyan xs:w-full" type="submit">Register now</button>
 
@@ -37,7 +37,7 @@ const gameStore = useGameStore()
 const username = ref('')
 const password = ref('')
 const email = ref('')
-const loginError = ref('')
+const formError = ref('')
 const showPassword = ref(false)
 
 // automatic login because of development
@@ -49,34 +49,15 @@ onMounted(async () => {
   }
 })
 
-async function loginFunc() {
-  // check if username and password are valid
-  if (username.value === '' || password.value === '') {
-    loginError.value = 'Please enter a valid username and password'
-    return
-  }
-
-  // send login event to server
-  const response = await login(username.value, password.value)
-
-  if (response.success === undefined) {
-    loginError.value = response.error
-    return
-  }
-  gameStore.setToken(response.token)
-  gameStore.initConnection()
-  return true // Indicate success
-}
-
-async function registerFunc() {
+async function submit() {
   // check if username and password are valid
   if (username.value === '' || email.value === '' || password.value === '') {
-    loginError.value = 'Please enter a valid username, email, and password'
+    formError.value = 'Please enter a valid username, email, and password'
     return
   }
 
   if (email.value === '') {
-    loginError.value = 'Please enter an email'
+    formError.value = 'Please enter an email'
     return
   }
 
@@ -84,14 +65,18 @@ async function registerFunc() {
   const response = await register(username.value, email.value, password.value)
 
   if (response.success === undefined) {
-    loginError.value = response.error
+    formError.value = response.error
     return
   }
 
-  const loginSuccess = await loginFunc()
-  if (!loginSuccess) {
-    loginError.value = 'Login after registration failed. Please try logging in manually.'
+  const loginResponse = await login(username.value, password.value)
+
+  if (!loginResponse) {
+    formError.value = 'Login after registration failed. Please try logging in manually.'
     return
   }
+
+  gameStore.setToken(loginResponse.token)
+  gameStore.initConnection()
 }
 </script>