feat: separate Login and Register Page

app/src/components/AuthForm.vue

@@ -1,15 +1,18 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { RouterLink, useRouter } from 'vue-router'
-import { login, register } from '../utils/auth'
 import api from '../utils/api'
 
+const emit = defineEmits(['onSubmit', 'onChange'])
+const props = defineProps({
+  isRegister: Boolean,
+})
+
+console.log(typeof props.isRegister)
+
 const router = useRouter()
-const isRegister = ref(false)
 const username = ref('')
-const usernameInput = ref(null)
 const email = ref('')
-const emailInput = ref(null)
 const password = ref('')
 const errorMessage = ref('')
 
@@ -30,87 +33,45 @@ const success = () => {
   router.push({ name: 'game' })
 }
 
-const handleLogin = async () => {
+const error = (err) => {
-  try {
+  console.error(err)
-    const isSuccess = await login(username.value, password.value)
+  errorMessage.value = err
-    if (isSuccess) success()
-    else errorMessage.value = 'Wrong username or password.'
-  } catch (err) {
-    console.error(err)
-    errorMessage.value = 'Something went wrong.'
-  }
-}
-
-async function check() {
-  const user = username.value.trim()
-  try {
-    const res = await api.get('/auth/check-username', {
-      params: { username: user },
-    })
-    const { type, available } = res.data
-    if (available) {
-      if (type === 'email') {
-        email.value = user
-        username.value = ''
-      }
-      isRegister.value = true
-      usernameInput.value.focus()
-    } else {
-      await handleLogin()
-    }
-  } catch (err) {
-    if (err.response?.status === 400) {
-      errorMessage.value = 'Invalid username or email.'
-      return
-    }
-    errorMessage.value = 'Something went wrong.'
-    console.error(err)
-  }
-}
-
-function handleRegister() {
-  register(username.value, email.value, password.value)
-    .then((isSuccess) => {
-      if (isSuccess) {
-        success()
-      } else {
-        errorMessage.value = 'Something went wrong.'
-      }
-    })
-    .catch((err) => {
-      if (err.response?.status === 409) {
-        // Handle username or email already exists error here
-        if (err.response.data.type === 'username') {
-          errorMessage.value = 'Username already exists.'
-        } else if (err.response.data.type === 'email') {
-          errorMessage.value = 'Email already exists.'
-        } else {
-          errorMessage.value = 'Something went wrong.'
-        }
-      } else if (err.response?.status === 400) {
-        errorMessage.value = 'Invalid username or email.'
-      } else {
-        errorMessage.value = 'Something went wrong.'
-        console.error(err)
-      }
-    })
-}
-
-async function handleSubmit() {
-  if (!isRegister.value) {
-    check()
-    return
-  }
-  // register
-  handleRegister()
 }
 
 const clearError = () => {
   errorMessage.value = ''
 }
 
-const goBack = () => {
+const handleSubmit = () => {
-  isRegister.value = false
+  clearError()
+  try {
+    emit('onSubmit', {
+      username: username.value,
+      email: email.value,
+      password: password.value,
+      success,
+      error,
+    })
+  } catch (err) {
+    console.error(err)
+    errorMessage.value = 'Something went wrong'
+  }
+}
+
+const handleChange = () => {
+  clearError()
+  try {
+    emit('onChange', {
+      username: username.value,
+      email: email.value,
+      password: password.value,
+      success,
+      error,
+    })
+  } catch (err) {
+    console.error(err)
+    errorMessage.value = 'Something went wrong'
+  }
 }
 </script>
 <template>
@@ -119,7 +80,7 @@ const goBack = () => {
     class="bg-background border-8 border-background-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
     <h1 class="text-text-primary text-3xl font-black mb-8">Linux Odyssey</h1>
-    <form @submit.prevent="handleSubmit" class="w-full">
+    <form @submit.prevent="handleSubmit()" class="w-full">
       <div class="mb-6">
         <label for="username" class="text-sm font-semibold text-text">{{
           isRegister ? 'Username' : 'Email / Username'
@@ -131,7 +92,7 @@ const goBack = () => {
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
           placeholder="Enter your email or username"
           v-model="username"
-          @input="clearError"
+          @input="handleChange()"
           autocomplete="username"
         />
       </div>
@@ -144,7 +105,7 @@ const goBack = () => {
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
           placeholder="Enter your email or username"
           v-model="email"
-          @input="clearError"
+          @input="handleChange()"
           autocomplete="email"
         />
       </div>
@@ -157,7 +118,7 @@ const goBack = () => {
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
           placeholder="Enter your password"
           v-model="password"
-          @input="clearError"
+          @input="handleChange()"
         />
       </div>
       <p class="text-red-500 flex justify-center" v-if="errorMessage">
@@ -167,16 +128,25 @@ const goBack = () => {
         class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
         type="submit"
       >
-        <span v-if="isRegister">Sign up</span>
+        <span v-if="isRegister">Register</span>
-        <span v-else>Log in / Sign up</span>
+        <span v-else>Log in</span>
-      </button>
-      <button
-        class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
-        v-if="isRegister"
-        @click="goBack"
-      >
-        <span>Back to Login</span>
       </button>
+
+      <p class="text-text flex justify-center mt-3">
+        <span v-if="isRegister"
+          >Already have an account?
+          <RouterLink class="text-text-primary" to="/login"
+            >Log in</RouterLink
+          ></span
+        >
+        <span v-else
+          >Don't have an account?
+          <RouterLink class="text-text-primary" to="/register"
+            >Register</RouterLink
+          ></span
+        >
+      </p>
+
       <div v-if="hasSocialLogins">
         <hr class="my-8" />
         <p class="flex justify-center font-semibold text-text text-base">

app/src/components/HeaderPart.vue

@@ -6,7 +6,7 @@ const router = useRouter()
 
 const handleLogout = async () => {
   await logout()
-  router.push({ name: 'auth' })
+  router.push({ name: 'login' })
 }
 </script>
 

app/src/router.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import GamePage from './views/GamePage.vue'
-import AuthPage from './views/AuthPage.vue'
+import LoginPage from './views/LoginPage.vue'
+import RegisterPage from './views/RegisterPage.vue'
 import ChooseUsernamePage from './views/ChooseUsernamePage.vue'
 import { isLoggedIn } from './utils/auth'
 
@@ -11,8 +12,14 @@ const routes = [
   },
   {
     path: '/login',
-    name: 'auth',
+    name: 'login',
-    component: AuthPage,
+    component: LoginPage,
+    meta: { requiresGuest: true },
+  },
+  {
+    path: '/register',
+    name: 'register',
+    component: RegisterPage,
     meta: { requiresGuest: true },
   },
   {
@@ -41,7 +48,7 @@ router.beforeEach(async (to, from, next) => {
     // Check if the user isn't authenticated
     // Redirect to the login page
     next({
-      name: 'auth',
+      name: 'register',
       query: { redirect: to.fullPath }, // Optionally pass a redirect parameter
     })
   } else if (to.meta.requiresGuest && loggedIn) {

app/src/views/AuthPage.vue

@@ -1,16 +0,0 @@
-<script setup>
-import AuthenticationPart from '../components/AuthenticationPart.vue'
-import Background from '../components/DynamicBackground.vue'
-</script>
-<template>
-  <div class="relative w-screen h-screen">
-    <Background class="w-full h-full" />
-    <div
-      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
-    >
-      <div class="h-2/3 w-1/3">
-        <AuthenticationPart />
-      </div>
-    </div>
-  </div>
-</template>

app/src/views/LoginPage.vue

@@ -0,0 +1,28 @@
+<script setup>
+import AuthForm from '../components/AuthForm.vue'
+import Background from '../components/DynamicBackground.vue'
+
+import { login } from '../utils/auth'
+
+const handleLogin = async ({ username, password, success, error }) => {
+  try {
+    const isSuccess = await login(username, password)
+    if (isSuccess) success()
+    else error('Wrong username or password.')
+  } catch (err) {
+    console.error(err)
+  }
+}
+</script>
+<template>
+  <div class="relative w-screen h-screen">
+    <Background class="w-full h-full" />
+    <div
+      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+    >
+      <div class="h-2/3 w-1/3">
+        <AuthForm @onSubmit="handleLogin" :isRegister="false" />
+      </div>
+    </div>
+  </div>
+</template>

app/src/views/RegisterPage.vue

@@ -0,0 +1,56 @@
+<script setup>
+import AuthForm from '../components/AuthForm.vue'
+import Background from '../components/DynamicBackground.vue'
+
+import api from '../utils/api'
+import { register } from '../utils/auth'
+
+function handleRegister({ username, email, password, success, error }) {
+  register(username, email, password)
+    .then(success)
+    .catch((err) => {
+      if (err.response?.status === 409) {
+        // Handle username or email already exists error here
+        if (err.response.data.type === 'username') {
+          error('Username already exists.')
+        } else if (err.response.data.type === 'email') {
+          error('Email already exists.')
+        } else {
+          error('Something went wrong.')
+        }
+      } else if (err.response?.status === 400) {
+        error('Invalid username or email.')
+      } else {
+        console.error(err)
+      }
+    })
+}
+
+// async function check({ username, password, email }) {
+//   try {
+//     const res = await api.get('/auth/check-username', {
+//       params: { username },
+//     })
+//     const { type, available } = res.data
+//   } catch (err) {
+//     if (err.response?.status === 400) {
+//       errorMessage.value = 'Invalid username or email.'
+//       return
+//     }
+//     errorMessage.value = 'Something went wrong.'
+//     console.error(err)
+//   }
+// }
+</script>
+<template>
+  <div class="relative w-screen h-screen">
+    <Background class="w-full h-full" />
+    <div
+      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+    >
+      <div class="h-2/3 w-1/3">
+        <AuthForm @onSubmit="handleRegister" :isRegister="true" />
+      </div>
+    </div>
+  </div>
+</template>