From 7c7e907bcd54a3407652fe3da72ddba4a519ee9a Mon Sep 17 00:00:00 2001
From: squiz <wallisf@cardiff.ac.uk>
Date: Sat, 18 Dec 2021 16:00:02 +0000
Subject: [PATCH] Implemented sign up form
---
frontend/package-lock.json | 14 ++++++++++++++
frontend/package.json | 1 +
frontend/src/Components/SignUpForm.js | 21 +++++++++++++++++----
frontend/yarn.lock | 5 +++++
4 files changed, 37 insertions(+), 4 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a1347f4e..28a3287c 100644
--- a/frontend/package-lock.json
+++ b/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"
diff --git a/frontend/package.json b/frontend/package.json
index d1127079..2b582d45 100644
--- a/frontend/package.json
+++ b/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": {
diff --git a/frontend/src/Components/SignUpForm.js b/frontend/src/Components/SignUpForm.js
index 9b811fe0..44d918d5 100644
--- a/frontend/src/Components/SignUpForm.js
+++ b/frontend/src/Components/SignUpForm.js
@@ -1,5 +1,9 @@
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'>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8069d64c..b3d7e1ba 100644
--- a/frontend/yarn.lock
+++ b/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"
--
GitLab