Merge pull request #3 from Messaging-Application/MA-40-check-user-input

MA 40 check user input

.eslintrc.cjs

@@ -11,5 +11,6 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components':"off",
+    '@typescript-eslint/no-explicit-any': 'off',
   },
 }

src/__tests__/validation.test.tsx

@@ -0,0 +1,107 @@
+import {
+    validateUsername,
+    validateEmail,
+    passwordsMatch,
+    validateName,
+    validatePassword,
+  } from '../utils';
+
+  describe('Validation Functions', () => {
+    describe('validateUsername', () => {
+        it('should throw an error when username is empty', () => {
+          expect(() => validateUsername('')).toThrow('Please enter a username.');
+        });
+
+        it('should throw an error when username contains invalid characters', () => {
+          expect(() => validateUsername('user@name')).toThrow(
+            'Username should only contain numbers, letters, dashes, dots, and underscores.'
+          );
+        });
+
+        it.each(['username-123', 'username_123', 'username.123'])(
+          'should return true when username is valid (%s)',
+          (validUsername) => {
+            expect(validateUsername(validUsername)).toBe(true);
+          }
+        );
+    });
+
+    describe('validateEmail', () => {
+        it('should throw an error when email is empty', () => {
+          expect(() => validateEmail('')).toThrow('Please enter an email.');
+        });
+
+        it('should throw an error when email is invalid', () => {
+          expect(() => validateEmail('invalid_email')).toThrow(
+            'Please enter a valid email address.'
+          );
+        });
+
+        it('should return true when email is valid', () => {
+          expect(validateEmail('[email protected]')).toBe(true);
+        });
+      });
+
+      describe('passwordsMatch', () => {
+        it('should throw an error when password is empty', () => {
+          expect(() => passwordsMatch('', 'confirm')).toThrow('Please enter a password.');
+        });
+
+        it('should throw an error when confirm password is empty', () => {
+          expect(() => passwordsMatch('password', '')).toThrow('Please confirm the password.');
+        });
+
+        it('should throw an error when passwords do not match', () => {
+          expect(() => passwordsMatch('password', 'confirm')).toThrow("Password don't match");
+        });
+
+        it('should return true when passwords match', () => {
+          expect(passwordsMatch('password', 'password')).toBe(true);
+        });
+      });
+
+      describe('validateName', () => {
+        it('should throw an error when name is empty', () => {
+          expect(() => validateName('')).toThrow('Please enter a name.');
+        });
+
+        it('should throw an error when name contains numbers', () => {
+          expect(() => validateName('John123')).toThrow('Name should not contain numbers.');
+        });
+
+        it('should return true when name is valid', () => {
+          expect(validateName('John')).toBe(true);
+        });
+      });
+
+      describe('validatePassword', () => {
+        it('should throw an error when password is empty', () => {
+          expect(() => validatePassword('')).toThrow('Please enter a password.');
+        });
+
+        it('should throw an error when password length is less than 8 characters', () => {
+          expect(() => validatePassword('pass')).toThrow('Password must be at least 8 characters long.');
+        });
+
+        it('should throw an error when password does not contain uppercase letter', () => {
+          expect(() => validatePassword('password')).toThrow('Password must contain at least one uppercase letter.');
+        });
+
+        it('should throw an error when password does not contain lowercase letter', () => {
+          expect(() => validatePassword('PASSWORD')).toThrow('Password must contain at least one lowercase letter.');
+        });
+
+        it('should throw an error when password does not contain a digit', () => {
+          expect(() => validatePassword('Password')).toThrow('Password must contain at least one digit.');
+        });
+
+        it('should throw an error when password does not contain a special character', () => {
+          expect(() => validatePassword('Password123')).toThrow('Password must contain at least one special character ($@$!%*?&).');
+        });
+
+        it('should return true when password is valid', () => {
+          expect(validatePassword('Password123$')).toBe(true);
+        });
+      });
+  });
+

src/components/Register.tsx

@@ -2,6 +2,13 @@ import '../index.css'
 
 import { useState } from "react";
 import React from 'react';
+import { 
+  validateEmail, 
+  validatePassword,  
+  validateUsername,  
+  passwordsMatch,
+  validateName,  
+} from "../utils";
 // import { UserContext } from "./UserProvider";
 
 const Register: React.FC = () => {
@@ -38,11 +45,15 @@ const Register: React.FC = () => {
   const submitHandler = async (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     setErrorMessage("");
-    if (!username || !password || !confirm || !email || !firstname || !lastname) {
-      setErrorMessage("Please fill all the fields");
-    } else if (confirm != password) {
-      setErrorMessage("Passwords don't match");
-    } else {
+
+    try {
+      validateUsername(username);
+      validateName(firstname);
+      validateName(lastname);
+      validateEmail(email);
+      validatePassword(password); 
+      passwordsMatch(password, confirm);
+      // if no errors
       const body = {
         username,
         password,
@@ -70,7 +81,13 @@ const Register: React.FC = () => {
       .catch((err) => {
         console.error(err.message);
       });
+
+    } catch (error: any) {
+      // Handle the error
+      console.error('An error occurred:', error.message);
+      setErrorMessage(error.message);
     }
+
   };
 
   function togglePassword() {

src/utils/index.tsx

@@ -0,0 +1 @@
+export * from "./validation";

src/utils/validation.tsx

@@ -0,0 +1,75 @@
+export const validateUsername = (username: string): true => {
+    if (username.trim() === '') {
+        throw new Error('Please enter a username.');
+    }
+    if (!/^[a-zA-Z0-9_.-]*$/.test(username)) {
+        throw new Error('Username should only contain numbers, letters, dashes, dots, and underscores.');
+    }
+    return true;
+};
+
+export const validateEmail = (email: string): true => {
+    if (email.trim() === '') {
+        throw new Error('Please enter an email.');
+    }
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      throw new Error('Please enter a valid email address.');
+    }
+    return true;
+};
+
+
+export const passwordsMatch = (password: string, confirm: string): true => {
+    if (password.trim() === '') {
+        throw new Error('Please enter a password.');
+    }
+    if (confirm.trim() === '') {
+        throw new Error('Please confirm the password.');
+    }
+    if (confirm != password) {
+        throw new Error("Password don't match");
+    }
+    return true;
+}
+
+export const validateName = (name: string): true => {
+    if (name.trim() === '') {
+        throw new Error('Please enter a name.');
+    }
+    if (!/^[^\d]*$/.test(name)) {
+        throw new Error('Name should not contain numbers.');
+    }
+    return true;
+};
+
+export const validatePassword = (password: string): true => {
+    if (password.trim() === '') {
+        throw new Error('Please enter a password.');
+    }
+    // Check if the password meets minimum length requirement
+    if (password.length < 8) {
+        throw new Error('Password must be at least 8 characters long.');
+    }
+
+    // Check if the password contains at least one uppercase letter
+    if (!/[A-Z]/.test(password)) {
+        throw new Error('Password must contain at least one uppercase letter.');
+    }
+
+    // Check if the password contains at least one lowercase letter
+    if (!/[a-z]/.test(password)) {
+        throw new Error('Password must contain at least one lowercase letter.');
+    }
+
+    // Check if the password contains at least one digit
+    if (!/\d/.test(password)) {
+        throw new Error('Password must contain at least one digit.');
+    }
+
+    // Check if the password contains at least one special character
+    if (!/[$@$!%*?&]/.test(password)) {
+        throw new Error('Password must contain at least one special character ($@$!%*?&).');
+    }
+    return true;
+};