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>

docker-compose.yml

@@ -10,7 +10,7 @@ services:
       - internal
     volumes:
       - ./app:/app/app
-      - ./packages/file-graph:/app/packages/file-graph
+      - ./packages:/app/packages
   backend:
     build:
       context: .

packages/utils/auth.js

@@ -0,0 +1,38 @@
+export function isValidUsername(username) {
+  // Define a regular expression pattern for a valid Linux username.
+  const usernamePattern = /^[a-z][a-z0-9_-]*$/
+
+  // Test the username against the pattern.
+  if (!usernamePattern.test(username)) return false
+
+  // check if the username is between 1 and 32 characters
+  if (username.length < 4 || username.length > 32) {
+    return false
+  }
+
+  const reservedWords = [
+    'root',
+    'admin',
+    'administrator',
+    'sysadmin',
+    'system',
+    'daemon',
+    'bin',
+    'nobody',
+    'nogroup',
+    'guest',
+    'user',
+  ]
+  if (reservedWords.includes(username)) {
+    return false
+  }
+  return true
+}
+
+export function isValidEmail(email) {
+  // Define a regular expression pattern for a valid email address.
+  const emailPattern = /^[\w-.+]+@([\w][\w-]*\.)+[\w-]{2,}$/
+
+  // Test the email against the pattern.
+  return emailPattern.test(email)
+}

packages/utils/auth.test.js

@@ -1,4 +1,4 @@
-import { isValidEmail, isValidUsername } from '../../src/utils/auth'
+import { isValidEmail, isValidUsername } from './auth.js'
 
 test('check valid username', () => {
   const valid = ['alex', 'alex123', 'john_doe', 'john-doe', 'rudeus']

packages/utils/index.js

@@ -0,0 +1 @@
+export { isValidEmail, isValidUsername } from './auth.js'

packages/utils/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@linux-odyssey/utils",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "exports": "./index.js",
+  "license": "MIT"
+}

server/Dockerfile

@@ -4,10 +4,12 @@ WORKDIR /app
 COPY ./package.json yarn.lock ./
 COPY server/package.json ./server/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 --production
 
 COPY ./server ./server
 COPY packages/file-graph ./packages/file-graph
+COPY packages/utils ./packages/utils
 COPY quests ./quests
 
 WORKDIR /app/server

server/Dockerfile.dev

@@ -4,6 +4,7 @@ WORKDIR /app
 COPY package.json yarn.lock ./
 COPY server/package.json ./server/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 server/nodemon.json ./server/nodemon.json

server/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@linux-odyssey/file-graph": "*",
+    "@linux-odyssey/utils": "*",
     "bcrypt": "^5.1.1",
     "commander": "^11.0.0",
     "connect-mongo": "^5.0.0",

server/src/api/controllers/authController.js

@@ -1,10 +1,6 @@
+import { isValidEmail, isValidUsername } from '@linux-odyssey/utils'
 import User from '../../models/user.js'
-import {
-  genJWT,
-  hashPassword,
-  isValidEmail,
-  isValidUsername,
-} from '../../utils/auth.js'
+import { genJWT, hashPassword } from '../../utils/auth.js'
 
 export async function issueToken(req, res) {
   const { user } = req

server/src/utils/auth.js

@@ -47,42 +47,3 @@ export function verifyJWT(token) {
     })
   })
 }
-
-export function isValidUsername(username) {
-  // Define a regular expression pattern for a valid Linux username.
-  const usernamePattern = /^[a-z][a-z0-9_-]*$/
-
-  // Test the username against the pattern.
-  if (!usernamePattern.test(username)) return false
-
-  // check if the username is between 1 and 32 characters
-  if (username.length < 4 || username.length > 32) {
-    return false
-  }
-
-  const reservedWords = [
-    'root',
-    'admin',
-    'administrator',
-    'sysadmin',
-    'system',
-    'daemon',
-    'bin',
-    'nobody',
-    'nogroup',
-    'guest',
-    'user',
-  ]
-  if (reservedWords.includes(username)) {
-    return false
-  }
-  return true
-}
-
-export function isValidEmail(email) {
-  // Define a regular expression pattern for a valid email address.
-  const emailPattern = /^[\w-.+]+@([\w][\w-]*\.)+[\w-]{2,}$/
-
-  // Test the email against the pattern.
-  return emailPattern.test(email)
-}