Implemented sign up form

frontend/package-lock.json

@@ -16,6 +16,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
+        "validator": "^13.7.0",
         "web-vitals": "^1.0.1"
       },
       "devDependencies": {
@@ -18275,6 +18276,14 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/validator": {
+      "version": "13.7.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz",
+      "integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -32255,6 +32264,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "validator": {
+      "version": "13.7.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz",
+      "integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"

frontend/package.json

@@ -11,6 +11,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "validator": "^13.7.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

frontend/src/Components/SignUpForm.js

 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
+import isEmail from 'validator/lib/isEmail';
+import isEmpty from 'validator/lib/isEmpty';
+import equals from 'validator/lib/equals';
+
 
 const SignUpForm = () => {
     const[formData, setFormData] = useState({
@@ -7,20 +11,28 @@ const SignUpForm = () => {
         lastName: '', 
         email: '', 
         password: '',
+        confirmPassword: '',
         successMsg: false,
         errorMsg: false
     })
 
-    const handleChange = (evt) => {
+    const handleChange = (event) => {
         setFormData({
             ...formData,
-            [evt.target.name]: evt.target.value,
+            [event.target.name]: event.target.value,
         })
+        console.log(formData)
 
     }
 
-    const handleSubmit = (evt) => {
-        evt.preventDefault()
+    const handleSubmit = (event) => {
+        event.preventDefault()
+        console.log(formData)
+
+        // Form validation
+        if (isEmpty(username) || isEmpty(lastName) || isEmpty(email) || isEmpty(confirmPassword)) {
+
+        }
     }
 
     return (
@@ -32,6 +44,7 @@ const SignUpForm = () => {
                     <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='lastName' value={formData.lastName} type='text' placeholder='Last Name' onChange={handleChange}></input>
                     <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='email' value={formData.email} type='email' placeholder='Email Address' onChange={handleChange}></input>
                     <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='password' value={formData.password} type='password' placeholder='Password' onChange={handleChange}></input>
+                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='confirmPassword' value={formData.confirmPassword} type='password' placeholder='Confirm Password' onChange={handleChange}></input>
                     <button className='py-4 px-14 text-white bg-purple-500 hover:bg-purple-400 font-montserrat font-medium rounded-full' type='submit'>Sign Up</button>
                     <div className='mt-6 '>
                         <p className='forgot-password'>

frontend/yarn.lock

@@ -10194,6 +10194,11 @@
     "spdx-correct" "^3.0.0"
     "spdx-expression-parse" "^3.0.0"
 
+"validator@^13.7.0":
+  "integrity" "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw=="
+  "resolved" "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz"
+  "version" "13.7.0"
+
 "vary@~1.1.2":
   "resolved" "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
   "version" "1.1.2"