feat: complete register validation

* add password policy in frontend

app/Dockerfile

@@ -5,6 +5,7 @@ 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
+COPY packages/constants/package.json ./packages/constants/package.json
 RUN yarn install --frozen-lockfile
 
 # Dev stage
@@ -16,6 +17,7 @@ CMD [ "yarn", "dev:docker", "--host", "0.0.0.0" ]
 FROM base as build
 COPY packages/file-graph ./packages/file-graph
 COPY packages/utils ./packages/utils
+COPY packages/constants ./packages/constants
 COPY app ./app
 RUN yarn build
 

app/package.json

@@ -11,15 +11,17 @@
     "preview": "vite preview"
   },
   "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",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@linux-odyssey/file-graph": "*",
+    "@linux-odyssey/utils": "*",
+    "@linux-odyssey/constants": "*",
     "axios": "^1.4.0",
     "socket.io-client": "^4.7.1",
+    "validator": "^13.11.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "xterm": "^5.2.1",

app/src/components/AuthForm.vue

@@ -128,6 +128,7 @@ const handleChange = () => {
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
           :placeholder="type === 'login' ? 'Email / Username' : 'Username'"
           v-model="username"
+          required
           @input="handleChange()"
           autocomplete="username"
         />
@@ -147,6 +148,7 @@ const handleChange = () => {
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
           placeholder="Email"
           v-model="email"
+          required
           @input="handleChange()"
           autocomplete="email"
         />
@@ -158,6 +160,7 @@ const handleChange = () => {
           class="my-4 bg-background-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-background-secondary"
           placeholder="Password"
           v-model="password"
+          required
           @input="handleChange()"
         />
       </div>

app/src/views/RegisterPage.vue

@@ -1,5 +1,7 @@
 <script setup>
-import { isValidEmail, isValidUsername } from '@linux-odyssey/utils'
+import validator from 'validator'
+import { isValidUsername } from '@linux-odyssey/utils'
+import { passwordPolicy } from '@linux-odyssey/constants'
 import AuthForm from '../components/AuthForm.vue'
 import Background from '../components/DynamicBackground.vue'
 
@@ -27,29 +29,35 @@ function handleRegister({ username, email, password, success, error }) {
     })
 }
 
-async function check({ username, email, error }) {
+async function check({ username, email, password, error }) {
   if (username && !isValidUsername(username)) {
     error('Invalid username.')
     return
   }
-  if (email && !isValidEmail(email)) {
+  if (email && !validator.isEmail(email)) {
     error('Invalid email.')
     return
   }
-  if (!username && !email) {
+  if (password && !validator.isStrongPassword(password, passwordPolicy)) {
+    error(
+      'Your password must be 8+ characters with at least one number, one upper and one lower case letter.'
+    )
+    return
+  }
+  if (!(username && email && password)) {
     return
   }
   try {
     const res = await api.get('/auth/check-username', {
       params: { username },
     })
-    const { type, available } = res.data
+    const { available } = res.data
     if (!available) {
-      error(`${type} already exists.`)
+      error(`Username already exists.`)
     }
   } catch (err) {
     if (err.response?.status === 400) {
-      error('Invalid username or email.')
+      error('Invalid username.')
       return
     }
     console.error(err)