model-changes

src/Navbar/Navbar.css

@@ -19,6 +19,7 @@
 
 .navbar-left-margin {
     margin-left: 40px;
+    cursor: pointer;
 }
 
 .navbar-right-margin {

src/Navbar/Navbar.jsx

@@ -27,13 +27,16 @@ const Navbar = () => {
   return (
     <>
       <div className="navbar">
-        <div className="navbar-contents navbar-left-margin">
+        <div className="navbar-contents navbar-left-margin"
+         onClick={() => navigate(`/profile`)}
+         >
           <img
             alt="Image"
             className="pfp"
             src="https://st4.depositphotos.com/9998432/22597/v/450/depositphotos_225976914-stock-illustration-person-gray-photo-placeholder-man.jpg"
             width="35"
             height="35"
+
           />
           <div>Nishant Kaushal</div>
         </div>

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;
-}
+}
+
+.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;
+}
+
+

src/Profile/profile.jsx

@@ -1,23 +1,30 @@
 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({
     photo: defaultPhoto,
     name: "Niko",
     email: "[email protected]",
     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 (
     <>
       <Navbar />
@@ -107,21 +149,49 @@ const Profile = () => {
             />
           </label>
           <label>
-            password:
-            <input
-              type="email"
-              value={newProfileData.email}
-              onChange={(e) => setNewProfileData({ ...newProfileData, email: e.target.value })}
-            />
+            Password:
+            <div className="password-field">
+              <input
+                type={showPassword ? "text" : "password"}
+                className={passwordsMatch ? 'input-normal' : 'input-faded'}
+                value={newProfileData.password}
+                onChange={(e) => setNewProfileData({ ...newProfileData, password: e.target.value })}
+              />
+              <span onClick={togglePasswordVisibility} className="eye-icon">
+                {showPassword ? <FaEyeSlash /> : <FaEye />}
+              </span>
+            </div>
+          </label>
+          <label>
+            Confirm Password:
+            <div className="password-field">
+              <input
+                type={showConfirmPassword ? "text" : "password"}
+                className={passwordsMatch ? 'input-normal' : 'input-faded'}
+                value={newProfileData.confirmPassword}
+                onChange={(e) => setNewProfileData({ ...newProfileData, confirmPassword: e.target.value })}
+              />
+              <span onClick={toggleConfirmPasswordVisibility} className="eye-icon">
+                {showConfirmPassword ? <FaEyeSlash /> : <FaEye />}
+              </span>
+            </div>
           </label>
           <div className="modal-buttons">
             <button type="button" onClick={handleSave}>Save</button>
             <button type="button" onClick={closeModal}>Cancel</button>
           </div>
         </form>
       </Modal>
+
+      {/* Alert Modal for Success or Error Messages */}
+      <AlertModal
+        isOpen={alertIsOpen}
+        onClose={() => setAlertIsOpen(false)}
+        message={alertMessage}
+        iserror={isError}
+      />
     </>
   );
 };
 
-export default Profile;
+export default Profile;

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,13 +77,28 @@ 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);
       setIsAlertOpen(true);
       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 = () => {
                   />
                 </label>
               </div>
+
               <div>
                 <label>
                   Mobile No.
@@ -149,10 +164,13 @@ 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."
                   />
                 </label>
               </div>
+
               <div>
                 <label>
                   Password:
@@ -169,21 +187,18 @@ const SignUp = () => {
                     {d1 ? (
                       <FaEye
                         className="eyes-signup eye-icon-signup"
-                        onClick={() => {
-                          setDisplay1(false);
-                        }}
+                        onClick={() => setDisplay1(false)}
                       />
                     ) : (
                       <FaEyeSlash
                         className="eyes-signup eye-icon-slash-signup"
-                        onClick={() => {
-                          setDisplay1(true);
-                        }}
+                        onClick={() => setDisplay1(true)}
                       />
                     )}
                   </div>
                 </label>
               </div>
+
               <div>
                 <label>
                   Confirm Password:
@@ -200,16 +215,12 @@ const SignUp = () => {
                     {d2 ? (
                       <FaEye
                         className="eyes-signup eye-icon-signup"
-                        onClick={() => {
-                          setDisplay2(false);
-                        }}
+                        onClick={() => setDisplay2(false)}
                       />
                     ) : (
                       <FaEyeSlash
                         className="eyes-signup eye-icon-slash-signup"
-                        onClick={() => {
-                          setDisplay2(true);
-                        }}
+                        onClick={() => setDisplay2(true)}
                       />
                     )}
                   </div>