From b09d54a3ee9944f5e63347d297b81a42d140c744 Mon Sep 17 00:00:00 2001 From: Atul sahani Date: Fri, 14 Jul 2023 14:25:53 +0530 Subject: [PATCH] initial commit --- README.md | 12 +++ package-lock.json | 14 ++++ package.json | 1 + src/components/LoginForm/index.js | 128 +++++++++++++++++++++--------- 4 files changed, 119 insertions(+), 36 deletions(-) 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} - - } + + - + harrison.ai @@ -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)} /> -