From c5ccf03ac5ad333c8c054ce275aa9dabe49aa803 Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Fri, 13 Oct 2023 16:38:25 +0800
Subject: [PATCH] feat: add username and email check in frontend

---
 app/Dockerfile                                |  2 +
 app/Dockerfile.dev                            |  1 +
 app/package.json                              |  1 +
 app/src/components/AuthForm.vue               |  2 +-
 app/src/views/RegisterPage.vue                | 51 +++++++++++++------
 docker-compose.yml                            |  2 +-
 packages/utils/auth.js                        | 38 ++++++++++++++
 {server/tests => packages}/utils/auth.test.js |  2 +-
 packages/utils/index.js                       |  1 +
 packages/utils/package.json                   |  8 +++
 server/Dockerfile                             |  2 +
 server/Dockerfile.dev                         |  1 +
 server/package.json                           |  1 +
 server/src/api/controllers/authController.js  |  8 +--
 server/src/utils/auth.js                      | 39 --------------
 15 files changed, 95 insertions(+), 64 deletions(-)
 create mode 100644 packages/utils/auth.js
 rename {server/tests => packages}/utils/auth.test.js (92%)
 create mode 100644 packages/utils/index.js
 create mode 100644 packages/utils/package.json

diff --git a/app/Dockerfile b/app/Dockerfile
index 30a17f7..8c9b986 100644
--- a/app/Dockerfile
+++ b/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
diff --git a/app/Dockerfile.dev b/app/Dockerfile.dev
index a58a1cc..7548510 100644
--- a/app/Dockerfile.dev
+++ b/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
diff --git a/app/package.json b/app/package.json
index 4381231..9746862 100644
--- a/app/package.json
+++ b/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",
diff --git a/app/src/components/AuthForm.vue b/app/src/components/AuthForm.vue
index c37fae5..f710d53 100644
--- a/app/src/components/AuthForm.vue
+++ b/app/src/components/AuthForm.vue
@@ -43,7 +43,7 @@ const clearError = () => {
 }
 
 const handleSubmit = () => {
-  clearError()
+  if (errorMessage.value) return
   try {
     emit('onSubmit', {
       username: username.value,
diff --git a/app/src/views/RegisterPage.vue b/app/src/views/RegisterPage.vue
index 0a9c83f..0ea7ac1 100644
--- a/app/src/views/RegisterPage.vue
+++ b/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>
diff --git a/docker-compose.yml b/docker-compose.yml
index 195f55f..93ca8c9 100644
--- a/docker-compose.yml
+++ b/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: .
diff --git a/packages/utils/auth.js b/packages/utils/auth.js
new file mode 100644
index 0000000..cd26d47
--- /dev/null
+++ b/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)
+}
diff --git a/server/tests/utils/auth.test.js b/packages/utils/auth.test.js
similarity index 92%
rename from server/tests/utils/auth.test.js
rename to packages/utils/auth.test.js
index 4254ed8..e7d45a7 100644
--- a/server/tests/utils/auth.test.js
+++ b/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']
diff --git a/packages/utils/index.js b/packages/utils/index.js
new file mode 100644
index 0000000..ab747e8
--- /dev/null
+++ b/packages/utils/index.js
@@ -0,0 +1 @@
+export { isValidEmail, isValidUsername } from './auth.js'
diff --git a/packages/utils/package.json b/packages/utils/package.json
new file mode 100644
index 0000000..09e9205
--- /dev/null
+++ b/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"
+}
diff --git a/server/Dockerfile b/server/Dockerfile
index 078876b..5bee61f 100644
--- a/server/Dockerfile
+++ b/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
diff --git a/server/Dockerfile.dev b/server/Dockerfile.dev
index d6c2d35..488c1ca 100644
--- a/server/Dockerfile.dev
+++ b/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
diff --git a/server/package.json b/server/package.json
index 317b6bb..7ba551b 100644
--- a/server/package.json
+++ b/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",
diff --git a/server/src/api/controllers/authController.js b/server/src/api/controllers/authController.js
index acca879..1a12555 100644
--- a/server/src/api/controllers/authController.js
+++ b/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
diff --git a/server/src/utils/auth.js b/server/src/utils/auth.js
index ec95600..66fe0cb 100644
--- a/server/src/utils/auth.js
+++ b/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)
-}