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 { login, register } from '../utils/auth'
+import { RouterLink, useRouter } from 'vue-router'
 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 () => {
-  try {
-    const isSuccess = await login(username.value, password.value)
-    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 error = (err) => {
+  console.error(err)
+  errorMessage.value = err
 }
 
 const clearError = () => {
   errorMessage.value = ''
 }
 
-const goBack = () => {
-  isRegister.value = false
+const handleSubmit = () => {
+  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-else>Log in / Sign up</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>
+        <span v-if="isRegister">Register</span>
+        <span v-else>Log in</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>