feat: add login & signup flow

app/src/components/AuthenticationPart.vue

@@ -1,28 +1,114 @@
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { login } from '../utils/auth'
+import { login, register } from '../utils/auth'
+import api from '../utils/api'
 
 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('')
 
-const handleSubmit = async () => {
+const success = () => {
+  router.push({ name: 'game' })
+}
+
+const handleLogin = async () => {
   try {
-    const success = await login(username.value, password.value)
-    if (success) router.push({ name: 'game' })
+    const isSuccess = await login(username.value, password.value)
+    if (isSuccess) success()
     else errorMessage.value = 'Invalid username or password.'
   } catch (err) {
-    // show error message
     console.error(err)
     errorMessage.value = 'Something went wrong.'
   }
 }
 
+async function check() {
+  const user = username.value.trim()
+  try {
+    const res = await api.get('/auth/check', {
+      params: { username: user },
+    })
+    // user not exists, try register
+    const { type } = res.data
+    if (type === 'email') {
+      email.value = user
+      username.value = ''
+    }
+    isRegister.value = true
+    usernameInput.value.focus()
+  } catch (err) {
+    if (err.response?.status === 409) {
+      // user already exists, try login
+      await handleLogin()
+      return
+    }
+    if (err.response?.status === 400) {
+      errorMessage.value = 'Invalid username or email.'
+      return
+    }
+    errorMessage.value = 'Something went wrong.'
+    console.error(err)
+  }
+}
+
+async function handleSubmit() {
+  if (!isRegister.value) {
+    check()
+    return
+  }
+  // register
+  console.log('register', username.value, email.value, password.value)
+  api
+    .get('/auth/check', {
+      params: { username: username.value },
+    })
+    .then(() => {
+      // Username is available, now check if the email already exists
+      return api.get('/auth/check', { params: { email: email.value } })
+    })
+    .then(() => {
+      // Both username and email are available, proceed with registration
+      return 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)
+      }
+    })
+}
+
 const clearError = () => {
   errorMessage.value = ''
 }
+
+const goBack = () => {
+  isRegister.value = false
+}
 </script>
 <template>
   <!--login page-->
@@ -32,13 +118,29 @@ const clearError = () => {
     <h1 class="text-text-primary text-3xl font-black mb-8">Linux Odyssey</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'
+        }}</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="clearError"
+          autofocus
+        />
+      </div>
+      <div class="mb-6" v-if="isRegister">
         <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 address"
-          v-model="username"
+          placeholder="Enter your email or username"
+          v-model="email"
           @input="clearError"
         />
       </div>
@@ -61,7 +163,15 @@ const clearError = () => {
         class="inline-flex justify-center rounded-lg text-sm font-black py-2 mt-3 bg-text-primary text-background w-full"
         @click="handleSubmit"
       >
-        <span>Log in / Sign up</span>
+        <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>
       </button>
     </form>
   </div>

app/src/utils/auth.js

@@ -40,6 +40,24 @@ export const login = async (username, password) => {
   }
 }
 
+export const register = async (username, email, password) => {
+  try {
+    const res = await api.post('/auth/register', {
+      username,
+      password,
+      email,
+    })
+    const { token } = res.data
+    myToken.value = token
+    return true
+  } catch (err) {
+    if (err.response?.status === 409) {
+      return false
+    }
+    throw err
+  }
+}
+
 export const logout = () => {
   myToken.value = null
 }

server/src/api/controllers/authController.js

@@ -17,32 +17,40 @@ export async function issueToken(req, res) {
 }
 
 export async function checkUsername(req, res) {
-  const { username } = req.query
-  if (isValidEmail(username)) {
-    if (await User.exists({ email: username })) {
+  const { username, email } = req.query
+  const cred = username || email
+  if (!cred) {
+    res.status(400).json({
+      message: 'username or email is required',
+    })
+    return
+  }
+
+  if (isValidEmail(cred)) {
+    if (await User.exists({ email: cred })) {
       res.status(409).json({
         type: 'email',
-        message: `"${username}" already exists`,
+        message: `"${cred}" already exists`,
       })
       return
     }
     res.status(200).json({
       type: 'email',
-      message: `"${username}" is available`,
+      message: `"${cred}" is available`,
     })
     return
   }
-  if (isValidUsername(username)) {
-    if (await User.exists({ username })) {
+  if (isValidUsername(cred)) {
+    if (await User.exists({ username: cred })) {
       res.status(409).json({
         type: 'username',
-        message: `"${username}" already exists`,
+        message: `"${cred}" already exists`,
       })
       return
     }
     res.status(200).json({
       type: 'username',
-      message: `"${username}" is available`,
+      message: `"${cred}" is available`,
     })
     return
   }
@@ -63,15 +71,23 @@ export async function register(req, res, next) {
     res.status(409).json({
       message: 'username or email already exists',
     })
+    console.log(await User.find({ $or: [{ username }, { email }] }))
     return
   }
   const user = new User({
     username,
     email,
   })
-  user.hashedPassword = await hashPassword(password)
-  await user.save()
-  req.user = user
-  res.status(201)
-  next()
+  try {
+    user.hashedPassword = await hashPassword(password)
+    await user.save()
+    req.user = user
+    res.status(201)
+    next()
+  } catch (err) {
+    console.error(err)
+    res.status(500).json({
+      message: 'error registering user',
+    })
+  }
 }