feat: add username and email check in frontend

app/Dockerfile

@@ -4,10 +4,12 @@ WORKDIR /app
 COPY package.json yarn.lock ./
 COPY app/package.json ./app/package.json
 COPY packages/file-graph/package.json ./packages/file-graph/package.json
+COPY packages/utils/package.json ./packages/utils/package.json
 RUN yarn install --frozen-lockfile
 
 COPY app ./app
 COPY packages/file-graph ./packages/file-graph
+COPY packages/utils ./packages/utils
 RUN yarn build
 
 # Production stage

app/Dockerfile.dev

@@ -4,6 +4,7 @@ WORKDIR /app
 COPY package.json yarn.lock ./
 COPY app/package.json ./app/package.json
 COPY packages/file-graph/package.json ./packages/file-graph/package.json
+COPY packages/utils/package.json ./packages/utils/package.json
 RUN yarn install --frozen-lockfile
 
 WORKDIR /app/app

app/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@linux-odyssey/file-graph": "*",
+    "@linux-odyssey/utils": "*",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",

app/src/components/AuthForm.vue

@@ -43,7 +43,7 @@ const clearError = () => {
 }
 
 const handleSubmit = () => {
-  clearError()
+  if (errorMessage.value) return
   try {
     emit('onSubmit', {
       username: username.value,

app/src/views/RegisterPage.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { isValidEmail, isValidUsername } from '@linux-odyssey/utils'
 import AuthForm from '../components/AuthForm.vue'
 import Background from '../components/DynamicBackground.vue'
 
@@ -26,21 +27,35 @@ function handleRegister({ username, email, password, success, error }) {
     })
 }
 
-// async function check({ username, password, email }) {
-//   try {
-//     const res = await api.get('/auth/check-username', {
-//       params: { username },
-//     })
-//     const { type, available } = res.data
-//   } catch (err) {
-//     if (err.response?.status === 400) {
-//       errorMessage.value = 'Invalid username or email.'
-//       return
-//     }
-//     errorMessage.value = 'Something went wrong.'
-//     console.error(err)
-//   }
-// }
+async function check({ username, email, error }) {
+  if (username && !isValidUsername(username)) {
+    error('Invalid username.')
+    return
+  }
+  if (email && !isValidEmail(email)) {
+    error('Invalid email.')
+    return
+  }
+  if (!username && !email) {
+    return
+  }
+  try {
+    const res = await api.get('/auth/check-username', {
+      params: { username },
+    })
+    const { type, available } = res.data
+    if (!available) {
+      error(`${type} already exists.`)
+    }
+  } catch (err) {
+    if (err.response?.status === 400) {
+      error('Invalid username or email.')
+      return
+    }
+    console.error(err)
+    error('Something went wrong.')
+  }
+}
 </script>
 <template>
   <div class="relative w-screen h-screen">
@@ -49,7 +64,11 @@ function handleRegister({ username, email, 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="handleRegister" :isRegister="true" />
+        <AuthForm
+          @onSubmit="handleRegister"
+          @onChange="check"
+          :isRegister="true"
+        />
       </div>
     </div>
   </div>