Adding code

src/components/ProfileForm.jsx

@@ -9,6 +9,7 @@ import './ProfileForm.css';
 const ProfileForm = () => {
   const navigate = useNavigate();
   const [activeView, setActiveView] = useState('profile');
+  const [subView, setSubView] = useState('details'); // Add this state for toggling
   const [formData, setFormData] = useState({
     firstname: '',
     lastname: '',
@@ -17,6 +18,13 @@ const ProfileForm = () => {
     createdDate: new Date().toISOString().split('T')[0],
     lastLoginDate: new Date().toISOString().split('T')[0],
   });
+  
+  // Add password state
+  const [passwordData, setPasswordData] = useState({
+    currentPassword: '',
+    newPassword: '',
+    confirmNewPassword: ''
+  });
 
   useEffect(() => {
     const fetchData = async () => {
@@ -47,6 +55,15 @@ const ProfileForm = () => {
     setFormData({ ...formData, [name]: value });
   };
 
+  // Add password change handler
+  const handlePasswordChange = (e) => {
+    const { name, value } = e.target;
+    setPasswordData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
   const handleNavClick = (view) => {
     if (view === 'profile') {
       navigate('/user/profile');
@@ -55,6 +72,183 @@ const ProfileForm = () => {
     }
   };
 
+  const validateForm = () => {
+    const newErrors = {};
+
+    // Password validation
+    if (!passwordData.currentPassword) {
+      newErrors.currentPassword = 'Current Password is required';
+    }
+
+    // Confirm password validation
+    if (passwordData.newPassword !== passwordData.confirmNewPassword) {
+      newErrors.confirmNewPassword = 'Passwords do not match';
+    }
+
+    return newErrors;
+  };
+
+  // Add password submit handler
+  const handlePasswordSubmit = async (e) => {
+    e.preventDefault();
+    // You can add your password update logic here
+    console.log('Password update requested:', passwordData);
+
+    const validationErrors = validateForm();
+
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const userId = tokenService.getUserId();
+      const currentPassword = passwordData.currentPassword;
+      const newPassword = passwordData.newPassword;
+      const confirmNewPassword = passwordData.confirmNewPassword;
+
+      const response = await userApi.update_password(userId, currentPassword, newPassword, confirmNewPassword);
+      if (response) {
+        console.log('Successfully updated password');
+      } else {
+        console.error('Error updating password');
+      }
+    } catch (error) {
+    } finally {
+    }
+  };
+
+  // Render password change form
+  const renderPasswordForm = () => (
+    <div className="profile-form">
+      <h2>Change Password</h2>
+      <form onSubmit={handlePasswordSubmit}>
+        <div>
+          <label htmlFor="currentPassword">Current Password:</label>
+          <input
+            type="password"
+            id="currentPassword"
+            name="currentPassword"
+            value={passwordData.currentPassword}
+            onChange={handlePasswordChange}
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="newPassword">New Password:</label>
+          <input
+            type="password"
+            id="newPassword"
+            name="newPassword"
+            value={passwordData.newPassword}
+            onChange={handlePasswordChange}
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="confirmNewPassword">Confirm New Password:</label>
+          <input
+            type="password"
+            id="confirmNewPassword"
+            name="confirmNewPassword"
+            value={passwordData.confirmNewPassword}
+            onChange={handlePasswordChange}
+            required
+          />
+        </div>
+        <button type="submit">Update Password</button>
+        <button type="button" onClick={() => setSubView('details')}>
+          Back to Profile
+        </button>
+      </form>
+    </div>
+  );
+
+  // Render profile details form
+  const renderProfileForm = () => (
+    <div className="profile-form">
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2>User Profile</h2>
+        <button 
+          type="button" 
+          onClick={() => setSubView('password')}
+          style={{ marginBottom: '15px' }}
+        >
+          Change Password
+        </button>
+      </div>
+      <form>
+        <div>
+          <label htmlFor="firstname">First Name:</label>
+          <input
+            type="text"
+            id="firstname"
+            name="firstname"
+            value={formData.firstname}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="lastname">Last Name:</label>
+          <input
+            type="text"
+            id="lastname"
+            name="lastname"
+            value={formData.lastname}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="phone">Phone:</label>
+          <input
+            type="tel"
+            id="phone"
+            name="phone"
+            value={formData.phone}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="username">Username:</label>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            value={formData.username}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="createdDate">Created Date:</label>
+          <input
+            type="text"
+            id="createdDate"
+            name="createdDate"
+            value={formData.createdDate}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="lastLoginDate">Last Login Date:</label>
+          <input
+            type="text"
+            id="lastLoginDate"
+            name="lastLoginDate"
+            value={formData.lastLoginDate}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+      </form>
+    </div>
+  );
+
   return (
     <div className="dashboard-container">
       {/* Navbar */}
@@ -84,76 +278,8 @@ const ProfileForm = () => {
         </div>
       </nav>
 
-      {/* Main Content */}
+      {/* Main Content - Toggle between views */}
-      <div className="profile-form">
+      {subView === 'details' ? renderProfileForm() : renderPasswordForm()}
-        <h2>User Profile</h2>
-        <form>
-          <div>
-            <label htmlFor="firstname">First Name:</label>
-            <input
-              type="text"
-              id="firstname"
-              name="firstname"
-              value={formData.firstname}
-              onChange={handleChange}
-              readOnly
-            />
-          </div>
-          <div>
-            <label htmlFor="lastname">Last Name:</label>
-            <input
-              type="text"
-              id="lastname"
-              name="lastname"
-              value={formData.lastname}
-              onChange={handleChange}
-              readOnly
-            />
-          </div>
-          <div>
-            <label htmlFor="phone">Phone:</label>
-            <input
-              type="tel"
-              id="phone"
-              name="phone"
-              value={formData.phone}
-              onChange={handleChange}
-              readOnly
-            />
-          </div>
-          <div>
-            <label htmlFor="username">Username:</label>
-            <input
-              type="text"
-              id="username"
-              name="username"
-              value={formData.username}
-              onChange={handleChange}
-              readOnly
-            />
-          </div>
-          <div>
-            <label htmlFor="createdDate">Created Date:</label>
-            <input
-              type="text"
-              id="createdDate"
-              name="createdDate"
-              value={formData.createdDate}
-              readOnly
-            />
-          </div>
-          <div>
-            <label htmlFor="lastLoginDate">Last Login Date:</label>
-            <input
-              type="text"
-              id="lastLoginDate"
-              name="lastLoginDate"
-              value={formData.lastLoginDate}
-              readOnly
-            />
-          </div>
-        </form>
-      </div>
     </div>
   );
 };