feat: add error handling for choose username

app/src/utils/auth.js

@@ -17,16 +17,20 @@ export const login = async (username, password) => {
     await api.post('/auth/login', { username, password })
     return true
   } catch (err) {
-    if (err.response?.status === 401) {
-      throw new UnauthorizedError(err.response.data.message)
+    const { status } = err.response
+    switch (status) {
+      case 401:
+        throw new UnauthorizedError(err.response.data.message)
+
+      case 429:
+        throw new TooManyRequestsError(err.response.data.message)
+
+      case 400:
+        throw new ValidationError(err.response.data.message)
+
+      default:
+        throw err
     }
-    if (err.response?.status === 429) {
-      throw new TooManyRequestsError(err.response.data.message)
-    }
-    if (err.response?.status === 400) {
-      throw new ValidationError(err.response.data.message)
-    }
-    throw err
   }
 }
 
@@ -39,7 +43,7 @@ export const register = async (username, email, password) => {
     })
     return true
   } catch (err) {
-    const status = err.response?.status
+    const { status } = err.response
     if (status === 429) {
       throw new TooManyRequestsError(err.response.data.message)
     }
@@ -48,7 +52,7 @@ export const register = async (username, email, password) => {
     }
     if (status === 400) {
       const { errors } = err.response.data
-      if (errors?.length > 0) {
+      if (Array.isArray(errors) && errors.length > 0) {
         const { path, msg } = errors[0]
         switch (path) {
           case 'username':
@@ -61,11 +65,45 @@ export const register = async (username, email, password) => {
             throw new ValidationError(msg)
         }
       }
+      throw new ValidationError(err.response.data.message)
     }
     throw err
   }
 }
 
+export const checkUsername = async (username) => {
+  try {
+    await api.get('/auth/check-username', {
+      params: { username },
+    })
+    return true
+  } catch (err) {
+    const { status } = err.response
+    if (status === 429) {
+      throw new TooManyRequestsError('Too many requests')
+    }
+    if (status === 409) {
+      throw new ValidationError('Username is already taken')
+    }
+    throw err
+  }
+}
+
+export const chooseUsername = async (username) => {
+  try {
+    await api.post('/auth/register-from-session', { username })
+  } catch (err) {
+    switch (err.response?.status) {
+      case 400:
+        throw new ValidationError('Username is already taken')
+      case 401:
+        throw new UnauthorizedError('You are not a new user')
+      default:
+        throw err
+    }
+  }
+}
+
 export const logout = () => {
   return api.post('/auth/logout')
 }

app/src/views/ChooseUsernamePage.vue

@@ -2,44 +2,46 @@
 import { isValidUsername } from '@linux-odyssey/utils'
 import AuthForm from '../components/AuthForm.vue'
 import Background from '../components/DynamicBackground.vue'
+import { TooManyRequestsError, ValidationError } from '../utils/errors'
+import { checkUsername, chooseUsername } from '../utils/auth'
 
-import api from '../utils/api'
-
-async function checkUsername({ username, error }) {
+async function check({ 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.')
+      await checkUsername(username)
+    } catch (err) {
+      if (err instanceof TooManyRequestsError) {
+        error('Too many requests. Try again in 2 minutes.')
+        return
       }
-    } catch {
-      error('Invalid username.')
+      if (err instanceof ValidationError) {
+        error(err.message)
+        return
+      }
+      error('Something went wrong. Please try again later.')
     }
   }
 }
 
-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.')
-      }
-    })
+async function handleSubmit({ username, success, error }) {
+  try {
+    await chooseUsername(username)
+    success()
+  } catch (err) {
+    if (err instanceof TooManyRequestsError) {
+      error('Too many requests. Try again in 2 minutes.')
+      return
+    }
+    if (err instanceof ValidationError) {
+      error(err.message)
+      return
+    }
+    error(err.message)
+  }
 }
 </script>
 <template>
@@ -51,7 +53,7 @@ function handleSubmit({ username, success, error }) {
       <div class="h-2/3 w-1/3">
         <AuthForm
           @onSubmit="handleSubmit"
-          @onChange="checkUsername"
+          @onChange="check"
           type="username"
           :socialLogin="false"
         />

app/src/views/RegisterPage.vue

@@ -5,8 +5,7 @@ import { passwordPolicy } from '@linux-odyssey/constants'
 import AuthForm from '../components/AuthForm.vue'
 import Background from '../components/DynamicBackground.vue'
 
-import api from '../utils/api'
-import { register } from '../utils/auth'
+import { checkUsername, register } from '../utils/auth'
 import {
   UnauthorizedError,
   TooManyRequestsError,
@@ -52,13 +51,7 @@ async function check({ username, email, password, error }) {
     return
   }
   try {
-    const res = await api.get('/auth/check-username', {
-      params: { username },
-    })
-    const { available } = res.data
-    if (!available) {
-      error(`Username already exists.`)
-    }
+    await checkUsername(username)
   } catch (err) {
     if (err.response?.status === 400) {
       error('Invalid username.')

server/src/api/controllers/authController.js

@@ -75,7 +75,7 @@ export async function registerFromSession(req, res) {
   const { newUser } = req.session
 
   if (!newUser) {
-    res.status(400).json({
+    res.status(401).json({
       message: 'no new user found',
     })
     return