From ef1f649ce5819fbabe1e7ff9690ac8536c3aade1 Mon Sep 17 00:00:00 2001 From: Kratik1093 Date: Thu, 19 Sep 2024 23:09:26 +0530 Subject: [PATCH 1/3] model-changes --- src/Profile/profile.css | 16 ++++++++++--- src/Profile/profile.jsx | 53 ++++++++++++++++++++++++++++++++--------- src/Sign_up/SignUp.jsx | 4 ++++ 3 files changed, 59 insertions(+), 14 deletions(-) diff --git a/src/Profile/profile.css b/src/Profile/profile.css index 2a4792c..534dbe3 100644 --- a/src/Profile/profile.css +++ b/src/Profile/profile.css @@ -80,7 +80,7 @@ /* Modal styles */ .modal { - background-color: #1a1a1a; + background-color: #282828; padding: 20px; border-radius: 10px; width: 500px; @@ -116,7 +116,7 @@ padding: 10px; margin-top: 5px; border-radius: 5px; - background-color: #282828; + background-color: #1a1a1a; border: 1px solid #fffdfd; color: white; } @@ -143,4 +143,14 @@ .modal-buttons button:hover { background-color: #45a049; -} \ No newline at end of file +} + +.input-faded { + opacity: 0.5; + border: 1px solid red; +} + +.input-normal { + opacity: 1; + border: 1px solid #ccc; +} diff --git a/src/Profile/profile.jsx b/src/Profile/profile.jsx index af8cae5..8f99146 100644 --- a/src/Profile/profile.jsx +++ b/src/Profile/profile.jsx @@ -1,12 +1,11 @@ import React, { useState } from 'react'; -import './profile.css'; // Ensure the CSS file is created for styling +import './profile.css'; import Navbar from '../Navbar/Navbar'; -import { FaPlus } from 'react-icons/fa'; // Importing the plus icon -import Modal from 'react-modal'; // Importing react-modal +import { FaPlus } from 'react-icons/fa'; +import Modal from 'react-modal'; +import defaultPhoto from "../Assets/profile_photo.png"; -import defaultPhoto from "../Assets/profile_photo.png"; // Corrected import statement - -Modal.setAppElement('#root'); // Set the root element for accessibility +Modal.setAppElement('#root'); const Profile = () => { const [profileData, setProfileData] = useState({ @@ -14,6 +13,8 @@ const Profile = () => { name: "Niko", email: "niko@gmail.com", mobile_no: "1234567890", + password: "qwerty123", + confirmPassword: "qwerty123" }); const [modalIsOpen, setModalIsOpen] = useState(false); @@ -29,6 +30,24 @@ const Profile = () => { }; const handleSave = () => { + const { email, mobile_no, password, confirmPassword } = newProfileData; + + if (!email.includes('@')) { + alert("Please enter a valid email address."); + return; + } + + const mobileRegex = /^\d{10}$/; + if (!mobileRegex.test(mobile_no)) { + alert("Please enter a valid 10-digit mobile number."); + return; + } + + if (password !== confirmPassword) { + alert("Passwords do not match."); + return; + } + setProfileData(newProfileData); setModalIsOpen(false); alert("Profile updated successfully!"); @@ -48,6 +67,8 @@ const Profile = () => { } }; + const passwordsMatch = newProfileData.password === newProfileData.confirmPassword; + return ( <> @@ -107,11 +128,21 @@ const Profile = () => { /> +
@@ -124,4 +155,4 @@ const Profile = () => { ); }; -export default Profile; \ No newline at end of file +export default Profile; diff --git a/src/Sign_up/SignUp.jsx b/src/Sign_up/SignUp.jsx index 93d16d9..3a1b644 100644 --- a/src/Sign_up/SignUp.jsx +++ b/src/Sign_up/SignUp.jsx @@ -78,6 +78,7 @@ const SignUp = () => { const handleFormSubmit = (e) => { e.preventDefault(); + // Check if passwords match if (formData.password !== formData.confirmPassword) { setAlertMessage("Passwords do not match!"); setIsErrorAlert(true); @@ -85,6 +86,7 @@ const SignUp = () => { return; // Stop further execution } + // If it's the first click, open warning modal if (isFirstClick) { setIsWarningOpen(true); setIsFirstClick(false); @@ -149,7 +151,9 @@ const SignUp = () => { placeholder="Enter your Mobile No." value={formData.mobileNumber} onChange={handleChange} + pattern="[0-9]{10}" // Validation for exactly 10 digits required + title="Mobile number must be exactly 10 digits." />
From 4e69d4443655cad483096d0bbf1a1040b0751a1a Mon Sep 17 00:00:00 2001 From: Kratik1093 Date: Sat, 21 Sep 2024 21:39:15 +0530 Subject: [PATCH 2/3] updates --- src/Navbar/Navbar.jsx | 1 + src/Profile/profile.css | 16 +++++++++++++ src/Profile/profile.jsx | 51 +++++++++++++++++++++++++++++------------ src/Sign_up/SignUp.jsx | 39 ++++++++++++++++++------------- 4 files changed, 76 insertions(+), 31 deletions(-) diff --git a/src/Navbar/Navbar.jsx b/src/Navbar/Navbar.jsx index df90b41..b554f64 100644 --- a/src/Navbar/Navbar.jsx +++ b/src/Navbar/Navbar.jsx @@ -34,6 +34,7 @@ const Navbar = () => { src="https://st4.depositphotos.com/9998432/22597/v/450/depositphotos_225976914-stock-illustration-person-gray-photo-placeholder-man.jpg" width="35" height="35" + onClick={() => navigate(`/profile`)} />
Nishant Kaushal
diff --git a/src/Profile/profile.css b/src/Profile/profile.css index 534dbe3..f151b02 100644 --- a/src/Profile/profile.css +++ b/src/Profile/profile.css @@ -119,6 +119,8 @@ background-color: #1a1a1a; border: 1px solid #fffdfd; color: white; + width: 90%; + padding-right: 40px; } .modal-buttons { @@ -154,3 +156,17 @@ opacity: 1; border: 1px solid #ccc; } +.password-field { + position: relative; + width: 100%; /* Set width to be the same as other inputs */ +} + +.eye-icon { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; +} + + diff --git a/src/Profile/profile.jsx b/src/Profile/profile.jsx index 8f99146..a313f08 100644 --- a/src/Profile/profile.jsx +++ b/src/Profile/profile.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import './profile.css'; import Navbar from '../Navbar/Navbar'; -import { FaPlus } from 'react-icons/fa'; +import { FaPlus, FaEye, FaEyeSlash } from 'react-icons/fa'; import Modal from 'react-modal'; import defaultPhoto from "../Assets/profile_photo.png"; @@ -13,12 +13,14 @@ const Profile = () => { name: "Niko", email: "niko@gmail.com", mobile_no: "1234567890", - password: "qwerty123", - confirmPassword: "qwerty123" + password: "Qwerty@123", + confirmPassword: "Qwerty@123" }); const [modalIsOpen, setModalIsOpen] = useState(false); const [newProfileData, setNewProfileData] = useState(profileData); + const [showPassword, setShowPassword] = useState(false); + const [showConfirmPassword, setShowConfirmPassword] = useState(false); const openModal = () => { setNewProfileData(profileData); @@ -43,6 +45,12 @@ const Profile = () => { return; } + const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; + if (!passwordRegex.test(password)) { + alert("Password must be at least 8 characters, contain one uppercase letter, one number, and one special character."); + return; + } + if (password !== confirmPassword) { alert("Passwords do not match."); return; @@ -67,6 +75,9 @@ const Profile = () => { } }; + const togglePasswordVisibility = () => setShowPassword(!showPassword); + const toggleConfirmPasswordVisibility = () => setShowConfirmPassword(!showConfirmPassword); + const passwordsMatch = newProfileData.password === newProfileData.confirmPassword; return ( @@ -129,21 +140,31 @@ const Profile = () => {
diff --git a/src/Sign_up/SignUp.jsx b/src/Sign_up/SignUp.jsx index 3a1b644..216273d 100644 --- a/src/Sign_up/SignUp.jsx +++ b/src/Sign_up/SignUp.jsx @@ -2,8 +2,7 @@ import React, { useEffect, useState } from "react"; import "./Sign_up.css"; import var1 from "../Assets/iips_logo2.png"; import { useNavigate } from "react-router-dom"; -import { FaEye } from "react-icons/fa"; -import { FaEyeSlash } from "react-icons/fa"; +import { FaEye, FaEyeSlash } from "react-icons/fa"; import AlertModal from "../AlertModal/AlertModal"; import Loader from "../Loader/Loader"; @@ -23,8 +22,8 @@ const SignUp = () => { const [loading, setLoading] = useState(false); // Loading state for signup button const [loadingSpinner, setLoadingSpinner] = useState(true); const [isFirstClick, setIsFirstClick] = useState(true); // Track if it is the first click - const [d1, setDisplay1] = useState(false); - const [d2, setDisplay2] = useState(false); + const [d1, setDisplay1] = useState(false); // Toggle password visibility + const [d2, setDisplay2] = useState(false); // Toggle confirm password visibility useEffect(() => { setTimeout(() => { @@ -78,6 +77,9 @@ const SignUp = () => { const handleFormSubmit = (e) => { e.preventDefault(); + // Regular expression to check for at least 8 characters, 1 uppercase letter, and 1 special character + const passwordRegex = /^(?=.*[A-Z])(?=.*[!@#$%^&*])(?=.*[a-zA-Z]).{8,}$/; + // Check if passwords match if (formData.password !== formData.confirmPassword) { setAlertMessage("Passwords do not match!"); @@ -86,6 +88,16 @@ const SignUp = () => { return; // Stop further execution } + // Check if the password meets the required criteria + if (!passwordRegex.test(formData.password)) { + setAlertMessage( + "Password must be at least 8 characters, include a capital letter and a special character." + ); + setIsErrorAlert(true); + setIsAlertOpen(true); + return; + } + // If it's the first click, open warning modal if (isFirstClick) { setIsWarningOpen(true); @@ -142,6 +154,7 @@ const SignUp = () => { />
+
+
+
From 0d787f197129dd3ca4098e14128ef06b68454781 Mon Sep 17 00:00:00 2001 From: Kratik1093 Date: Sat, 21 Sep 2024 22:23:46 +0530 Subject: [PATCH 3/3] updates2-12 --- src/Navbar/Navbar.css | 1 + src/Navbar/Navbar.jsx | 6 ++++-- src/Profile/profile.jsx | 28 +++++++++++++++++++++++----- 3 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/Navbar/Navbar.css b/src/Navbar/Navbar.css index 6bf99f4..ae33309 100644 --- a/src/Navbar/Navbar.css +++ b/src/Navbar/Navbar.css @@ -19,6 +19,7 @@ .navbar-left-margin { margin-left: 40px; + cursor: pointer; } .navbar-right-margin { diff --git a/src/Navbar/Navbar.jsx b/src/Navbar/Navbar.jsx index b554f64..661dae2 100644 --- a/src/Navbar/Navbar.jsx +++ b/src/Navbar/Navbar.jsx @@ -27,14 +27,16 @@ const Navbar = () => { return ( <>
-
+
navigate(`/profile`)} + > Image navigate(`/profile`)} + />
Nishant Kaushal
diff --git a/src/Profile/profile.jsx b/src/Profile/profile.jsx index a313f08..657e517 100644 --- a/src/Profile/profile.jsx +++ b/src/Profile/profile.jsx @@ -3,6 +3,7 @@ import './profile.css'; import Navbar from '../Navbar/Navbar'; import { FaPlus, FaEye, FaEyeSlash } from 'react-icons/fa'; import Modal from 'react-modal'; +import AlertModal from '../AlertModal/AlertModal'; import defaultPhoto from "../Assets/profile_photo.png"; Modal.setAppElement('#root'); @@ -18,6 +19,9 @@ const Profile = () => { }); const [modalIsOpen, setModalIsOpen] = useState(false); + const [alertIsOpen, setAlertIsOpen] = useState(false); + const [alertMessage, setAlertMessage] = useState(""); + const [isError, setIsError] = useState(false); const [newProfileData, setNewProfileData] = useState(profileData); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); @@ -31,34 +35,40 @@ const Profile = () => { setModalIsOpen(false); }; + const openAlertModal = (message, isError = false) => { + setAlertMessage(message); + setIsError(isError); + setAlertIsOpen(true); + }; + const handleSave = () => { const { email, mobile_no, password, confirmPassword } = newProfileData; if (!email.includes('@')) { - alert("Please enter a valid email address."); + openAlertModal("Please enter a valid email address.", true); return; } const mobileRegex = /^\d{10}$/; if (!mobileRegex.test(mobile_no)) { - alert("Please enter a valid 10-digit mobile number."); + openAlertModal("Please enter a valid 10-digit mobile number.", true); return; } const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; if (!passwordRegex.test(password)) { - alert("Password must be at least 8 characters, contain one uppercase letter, one number, and one special character."); + openAlertModal("Password must be at least 8 characters, contain one uppercase letter, one number, and one special character.", true); return; } if (password !== confirmPassword) { - alert("Passwords do not match."); + openAlertModal("Passwords do not match.", true); return; } setProfileData(newProfileData); setModalIsOpen(false); - alert("Profile updated successfully!"); + openAlertModal("Profile updated successfully!"); }; const handleImageChange = (event) => { @@ -172,6 +182,14 @@ const Profile = () => {
+ + {/* Alert Modal for Success or Error Messages */} + setAlertIsOpen(false)} + message={alertMessage} + iserror={isError} + /> ); };