feat: separate Login and Register Page

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>