refactor: reuse AuthForm in ChooseUsernamePage

app/src/components/AuthForm.vue

@@ -4,12 +4,21 @@ import { RouterLink, useRouter } from 'vue-router'
 import api from '../utils/api'
 
 const emit = defineEmits(['onSubmit', 'onChange'])
-const props = defineProps({
+defineProps({
-  isRegister: Boolean,
+  type: {
+    type: String,
+    default: 'login',
+  },
+  socialLogin: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: 'Linux Odyssey',
+  },
 })
 
-console.log(typeof props.isRegister)
-
 const router = useRouter()
 const username = ref('')
 const email = ref('')
@@ -79,37 +88,41 @@ const handleChange = () => {
   <div
     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>
+    <h1 class="text-text-primary text-3xl font-black mb-8">{{ title }}</h1>
     <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'
+          type === 'login' ? 'Email / Username' : 'Username'
         }}</label
         ><input
           type="text"
           id="username"
           ref="usernameInput"
           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"
+          :placeholder="
+            type === 'login'
+              ? 'Enter your email or username'
+              : 'Enter your username'
+          "
           v-model="username"
           @input="handleChange()"
           autocomplete="username"
         />
       </div>
-      <div class="mb-6" v-if="isRegister">
+      <div class="mb-6" v-if="type === 'register'">
         <label for="email" class="text-sm font-semibold text-text">Email</label
         ><input
           type="email"
           id="email"
           ref="emailInput"
           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"
+          placeholder="Enter your email"
           v-model="email"
           @input="handleChange()"
           autocomplete="email"
         />
       </div>
-      <div class="mb-6">
+      <div class="mb-6" v-if="type === 'login' || type === 'register'">
         <label for="password" class="text-sm font-semibold leading-6 text-text"
           >Password</label
         ><input
@@ -128,18 +141,18 @@ const handleChange = () => {
         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">Register</span>
+        <span v-if="type === 'login'">Log in</span>
-        <span v-else>Log in</span>
+        <span v-else>Register</span>
       </button>
 
       <p class="text-text flex justify-center mt-3">
-        <span v-if="isRegister"
+        <span v-if="type === 'register'"
           >Already have an account?
           <RouterLink class="text-text-primary" to="/login"
             >Log in</RouterLink
           ></span
         >
-        <span v-else
+        <span v-else-if="type === 'login'"
           >Don't have an account?
           <RouterLink class="text-text-primary" to="/register"
             >Register</RouterLink
@@ -147,7 +160,7 @@ const handleChange = () => {
         >
       </p>
 
-      <div v-if="hasSocialLogins">
+      <div v-if="socialLogin && hasSocialLogins">
         <hr class="my-8" />
         <p class="flex justify-center font-semibold text-text text-base">
           Log in with social account

app/src/components/UsernameForm.vue

@@ -1,82 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import api from '../utils/api'
-
-const username = ref('')
-const errorMessage = ref('')
-const router = useRouter()
-
-async function checkUsername() {
-  const user = username.value.trim()
-  errorMessage.value = ''
-  if (user.length > 3) {
-    try {
-      const { data } = await api.get('/auth/check-username', {
-        params: { username: user },
-      })
-
-      const { available } = data
-      if (!available) {
-        errorMessage.value = 'Username is already taken.'
-      } else {
-        errorMessage.value = ''
-      }
-    } catch {
-      errorMessage.value = 'Invalid username.'
-    }
-  }
-}
-
-async function handleSubmit() {
-  if (errorMessage.value) {
-    return
-  }
-  try {
-    const { data } = await api.post('/auth/register-from-session', {
-      username: username.value.trim(),
-    })
-    console.log(data)
-    router.push({ name: 'game' })
-  } catch (err) {
-    console.error(err.message)
-    if (err.response?.status === 409) {
-      errorMessage.value = 'Username is already taken.'
-    } else {
-      errorMessage.value = 'Something went wrong.'
-    }
-  }
-}
-</script>
-<template>
-  <div
-    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">Choose username</h1>
-    <form @submit.prevent="handleSubmit" class="w-full">
-      <div class="mb-6">
-        <label for="username" class="text-sm font-semibold text-text"
-          >Username</label
-        ><input
-          type="text"
-          id="username"
-          ref="usernameInput"
-          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="checkUsername"
-          autocomplete="username"
-        />
-      </div>
-      <p class="text-red-500 flex justify-center" v-if="errorMessage">
-        {{ errorMessage }}
-      </p>
-      <button
-        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>Sign up</span>
-      </button>
-    </form>
-  </div>
-</template>

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>