refactor: reuse AuthForm in ChooseUsernamePage

app/src/views/ChooseUsernamePage.vue

@@ -1,6 +1,46 @@
 <script setup>
-import UsernameForm from '../components/UsernameForm.vue'
+import { isValidUsername } from '@linux-odyssey/utils'
+import AuthForm from '../components/AuthForm.vue'
 import Background from '../components/DynamicBackground.vue'
+
+import api from '../utils/api'
+
+async function checkUsername({ username, error }) {
+  if (username && !isValidUsername(username)) {
+    error('Invalid username.')
+    return
+  }
+  if (username.length > 3) {
+    try {
+      const { data } = await api.get('/auth/check-username', {
+        params: { username },
+      })
+
+      const { available } = data
+      if (!available) {
+        error('Username is already taken.')
+      }
+    } catch {
+      error('Invalid username.')
+    }
+  }
+}
+
+function handleSubmit({ username, success, error }) {
+  api
+    .post('/auth/register-from-session', {
+      username,
+    })
+    .then(success)
+    .catch((err) => {
+      if (err.response?.status === 409) {
+        error('Username is already taken.')
+      } else {
+        console.error(err.message)
+        error('Something went wrong.')
+      }
+    })
+}
 </script>
 <template>
   <div class="relative w-screen h-screen">
@@ -9,7 +49,12 @@ import Background from '../components/DynamicBackground.vue'
       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">
-        <UsernameForm />
+        <AuthForm
+          @onSubmit="handleSubmit"
+          @onChange="checkUsername"
+          type="username"
+          :socialLogin="false"
+        />
       </div>
     </div>
   </div>

app/src/views/LoginPage.vue

@@ -21,7 +21,7 @@ const handleLogin = async ({ username, password, success, error }) => {
       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" />
+        <AuthForm @onSubmit="handleLogin" type="login" />
       </div>
     </div>
   </div>

app/src/views/RegisterPage.vue

@@ -67,7 +67,7 @@ async function check({ username, email, error }) {
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"
-          :isRegister="true"
+          type="register"
         />
       </div>
     </div>