feat: add error handling for choose username

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.')