tsk-5: Add profile page (#12)

Closes #5 Reviewed-on: phoenix/textsender#12
2026-07-01 23:56:22 -04:00
parent f2bdb60d55
commit be1238e24d
5 changed files with 229 additions and 9 deletions
@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { tokenService } from '../services/TokenService';
+import { userApi } from '../api/loginApi';
+
+import './ProfileForm.css';
+
+const ProfileForm = () => {
+  const navigate = useNavigate();
+  const [activeView, setActiveView] = useState('profile');
+  const [formData, setFormData] = useState({
+    firstname: '',
+    lastname: '',
+    phone: '',
+    username: '',
+    createdDate: new Date().toISOString().split('T')[0],
+    lastLoginDate: new Date().toISOString().split('T')[0],
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const userId = tokenService.getUserId();
+      const response = await userApi.get_user_profile(userId);
+
+      if (response) {
+        const userProfile = response.data[0];
+        setFormData((prev) => ({
+          ...prev,
+          firstname: userProfile.firstname,
+          lastname: userProfile.lastname,
+          phone: userProfile.phone_number,
+          username: userProfile.username,
+          createdDate: userProfile.created,
+          lastLoginDate: userProfile.last_login,
+        }));
+      } else {
+        console.error('Error getting user profile');
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleNavClick = (view) => {
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
+      navigate(`/${view}`);
+    }
+  };
+
+  return (
+    <div className="dashboard-container">
+      {/* Navbar */}
+      <nav className="dashboard-nav">
+        <div className="nav-logo">
+          <span className="logo-text">Dashboard</span>
+        </div>
+        <div className="nav-links">
+          <button
+            className={`nav-link ${activeView === 'dashboard' ? 'active' : ''}`}
+            onClick={() => handleNavClick('dashboard')}
+          >
+            Dashboard
+          </button>
+          <button
+            className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
+            onClick={() => handleNavClick('settings')}
+          >
+            Settings
+          </button>
+          <button
+            className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
+            onClick={() => handleNavClick('profile')}
+          >
+            Profile
+          </button>
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      <div className="profile-form">
+        <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>
+  );
+};
+
+export default ProfileForm;