+ setAlertIsOpen(false)}
+ message={alertMessage}
+ iserror={isError}
+ />
);
};
-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..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,10 @@ 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!");
setIsErrorAlert(true);
@@ -85,6 +88,17 @@ 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);
setIsFirstClick(false);
@@ -140,6 +154,7 @@ const SignUp = () => {
/>
+
navigate(`/profile`)}
+ >
diff --git a/src/Profile/profile.css b/src/Profile/profile.css
index 2a4792c..f151b02 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,9 +116,11 @@
padding: 10px;
margin-top: 5px;
border-radius: 5px;
- background-color: #282828;
+ background-color: #1a1a1a;
border: 1px solid #fffdfd;
color: white;
+ width: 90%;
+ padding-right: 40px;
}
.modal-buttons {
@@ -143,4 +145,28 @@
.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;
+}
+.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 af8cae5..657e517 100644
--- a/src/Profile/profile.jsx
+++ b/src/Profile/profile.jsx
@@ -1,12 +1,12 @@
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, FaEye, FaEyeSlash } from 'react-icons/fa';
+import Modal from 'react-modal';
+import AlertModal from '../AlertModal/AlertModal';
+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,10 +14,17 @@ const Profile = () => {
name: "Niko",
email: "niko@gmail.com",
mobile_no: "1234567890",
+ password: "Qwerty@123",
+ confirmPassword: "Qwerty@123"
});
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);
const openModal = () => {
setNewProfileData(profileData);
@@ -28,10 +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('@')) {
+ openAlertModal("Please enter a valid email address.", true);
+ return;
+ }
+
+ const mobileRegex = /^\d{10}$/;
+ if (!mobileRegex.test(mobile_no)) {
+ 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)) {
+ openAlertModal("Password must be at least 8 characters, contain one uppercase letter, one number, and one special character.", true);
+ return;
+ }
+
+ if (password !== confirmPassword) {
+ openAlertModal("Passwords do not match.", true);
+ return;
+ }
+
setProfileData(newProfileData);
setModalIsOpen(false);
- alert("Profile updated successfully!");
+ openAlertModal("Profile updated successfully!");
};
const handleImageChange = (event) => {
@@ -48,6 +85,11 @@ const Profile = () => {
}
};
+ const togglePasswordVisibility = () => setShowPassword(!showPassword);
+ const toggleConfirmPasswordVisibility = () => setShowConfirmPassword(!showConfirmPassword);
+
+ const passwordsMatch = newProfileData.password === newProfileData.confirmPassword;
+
return (
<>
Nishant Kaushal
@@ -120,8 +182,16 @@ const Profile = () => {
+
+ {/* Alert Modal for Success or Error Messages */}
+