diff --git a/README.md b/README.md
index 69a6ecd..dea2efb 100644
--- a/README.md
+++ b/README.md
@@ -12,3 +12,15 @@ You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+
+## Changes Made
+
+- Added validation for email and password fields
+- Implemented error handling for form submission
+- Added success message display
+- Updated styling and layout
+
+## Contributor
+
+- [Atul Sahani](https://github.com/atulsahani8)
diff --git a/package-lock.json b/package-lock.json
index b7c7e3d..f1f1d33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
+ "email-validator": "^2.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
@@ -6506,6 +6507,14 @@
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.46.tgz",
"integrity": "sha512-UtV0xUA/dibCKKP2JMxOpDtXR74zABevuUEH4K0tvduFSIoxRVcYmQsbB51kXsFTX8MmOyWMt8tuZAlmDOqkrQ=="
},
+ "node_modules/email-validator": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz",
+ "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==",
+ "engines": {
+ "node": ">4.0"
+ }
+ },
"node_modules/emittery": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -20901,6 +20910,11 @@
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.46.tgz",
"integrity": "sha512-UtV0xUA/dibCKKP2JMxOpDtXR74zABevuUEH4K0tvduFSIoxRVcYmQsbB51kXsFTX8MmOyWMt8tuZAlmDOqkrQ=="
},
+ "email-validator": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz",
+ "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ=="
+ },
"emittery": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
diff --git a/package.json b/package.json
index e43f16a..5bc6284 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
+ "email-validator": "^2.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
diff --git a/src/components/LoginForm/index.js b/src/components/LoginForm/index.js
index 7cd1254..a68ba57 100644
--- a/src/components/LoginForm/index.js
+++ b/src/components/LoginForm/index.js
@@ -1,5 +1,4 @@
import { useState } from 'react';
-import Alert from '@mui/material/Alert';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Paper from '@mui/material/Paper';
@@ -9,42 +8,99 @@ import Snackbar from '@mui/material/Snackbar';
import Typography from '@mui/material/Typography';
import logo from '../../assets/logo.svg';
-
export default function LoginForm() {
- const [showAlert, setShowAlert] = useState(false);
- const validateForm = (event) => {
- event.preventDefault()
- const data = new FormData(event.currentTarget);
- const email = data.get('email');
- const password = data.get('password');
+ const [showSuccessSnackbar, setShowSuccessSnackbar] = useState(false);
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [emailError, setEmailError] = useState(false);
+ const [passwordError, setPasswordError] = useState(false);
+ const [errorMessage, setErrorMessage] = useState('');
+
+ const validateForm = () => {
+ let isValid = true;
+
+ // Perform basic form validation
+ if (email === '') {
+ setEmailError(true);
+ isValid = false;
+ } else {
+ setEmailError(false);
+ }
+
+ if (password === '') {
+ setPasswordError(true);
+ isValid = false;
+ } else {
+ setPasswordError(false);
+ }
+
+
- // Add validation code here
+ // Perform password validation
+ if (isValid) {
+ // Check password length
+ if (password.length < 8) {
+ setErrorMessage('Password must be a minimum of 8 characters.');
+ setPasswordError(true);
+ isValid = false;
+ }
+ // Check if password contains both uppercase and lowercase letters
+ else if (!/[A-Z]/.test(password) || !/[a-z]/.test(password)) {
+ setErrorMessage('Password must contain both uppercase and lowercase letters.');
+ setPasswordError(true);
+ isValid = false;
+ }
+ // Check if password contains at least one numerical digit
+ else if (!/\d/.test(password)) {
+ setErrorMessage('Password must contain at least one numerical digit.');
+ setPasswordError(true);
+ isValid = false;
+ }
+ // Check if password contains at least one special character
+ else if (!/[!@#$%^&*()\-_=+[\]{};:'"\\|,.<>/?]/.test(password)) {
+ setErrorMessage('Password must contain at least one special character.');
+ setPasswordError(true);
+ isValid = false;
+ } else {
+ setErrorMessage('');
+ setPasswordError(false);
+ }
+ }
+
+ return isValid;
+ };
- }
+
+
const handleSubmit = (event) => {
event.preventDefault();
- const data = new FormData(event.currentTarget);
- console.log({
- email: data.get('email'),
- password: data.get('password'),
- });
- validateForm(event);
- setShowAlert("Login Successful");
+
+ const isValid = validateForm();
+
+ if (isValid) {
+ console.log({
+ email,
+ password,
+ });
+
+ setShowSuccessSnackbar(true);
+ }
+ };
+
+ const handleSuccessSnackbarClose = () => {
+ setShowSuccessSnackbar(false);
};
return (
<>
- {showAlert &&
- setShowAlert(false)}
- message={showAlert}
- >
- {showAlert}
-
- }
+
+
-
+
@@ -87,6 +141,9 @@ export default function LoginForm() {
name="email"
autoComplete="email"
autoFocus
+ value={email}
+ error={emailError}
+ onChange={(e) => setEmail(e.target.value)}
/>
setPassword(e.target.value)}
/>
-