More iteration

2025-11-10 15:20:11 +00:00
parent 93aeda8e83
commit f1c4ff19d6
9 changed files with 491 additions and 12 deletions
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -207,3 +207,105 @@ body {
  background-color: #f8d7da;
  color: #721c24;
 }
+
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.modal-content {
+  background: white;
+  padding: 24px;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.modal-content h3 {
+  margin: 0 0 20px 0;
+  color: #333;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.modal-form-group {
+  margin-bottom: 16px;
+}
+
+.modal-form-group label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+}
+
+.modal-form-group input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #333;
+  background-color: #fff;
+}
+
+.modal-form-group input:focus {
+  outline: none;
+  border-color: #0066cc;
+}
+
+.modal-error {
+  color: #dc3545;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.modal-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.modal-btn-cancel {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  color: #333;
+  font-size: 14px;
+}
+
+.modal-btn-cancel:hover {
+  background: #f8f9fa;
+}
+
+.modal-btn-primary {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  background: #007bff;
+  color: white;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.modal-btn-primary:hover:not(:disabled) {
+  background: #0056b3;
+}
+
+.modal-btn-primary:disabled {
+  background: #6c757d;
+  cursor: not-allowed;
+}
--- a/frontend/src/components/ProfileMenu.tsx
+++ b/frontend/src/components/ProfileMenu.tsx
@@ -0,0 +1,226 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { authService } from '../services/membershipService';
+
+interface ProfileMenuProps {
+  userName: string;
+}
+
+const ProfileMenu: React.FC<ProfileMenuProps> = ({ userName }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showChangePassword, setShowChangePassword] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleLogout = () => {
+    authService.logout();
+    navigate('/login');
+  };
+
+  const handleChangePassword = () => {
+    setShowChangePassword(true);
+    setIsOpen(false);
+  };
+
+  const handleCloseChangePassword = () => {
+    setShowChangePassword(false);
+  };
+
+  const dropdownStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: '100%',
+    right: 0,
+    background: 'white',
+    border: '1px solid #ddd',
+    borderRadius: '4px',
+    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+    minWidth: '160px',
+    zIndex: 1000,
+  };
+
+  const menuItemStyle: React.CSSProperties = {
+    display: 'block',
+    width: '100%',
+    padding: '12px 16px',
+    background: 'none',
+    border: 'none',
+    textAlign: 'left',
+    cursor: 'pointer',
+    color: '#333',
+    fontSize: '14px',
+  };
+
+  return (
+    <>
+      <div style={{ position: 'relative' }} ref={menuRef}>
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: 'white',
+            cursor: 'pointer',
+            fontSize: '16px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px'
+          }}
+        >
+          <span>{userName}</span>
+          <span style={{ fontSize: '12px' }}>▼</span>
+        </button>
+
+        {isOpen && (
+          <div style={dropdownStyle}>
+            <button
+              style={{ ...menuItemStyle, borderRadius: '4px 4px 0 0' }}
+              onClick={handleChangePassword}
+            >
+              Change Password
+            </button>
+            <button
+              style={{ ...menuItemStyle, borderRadius: '0 0 4px 4px' }}
+              onClick={handleLogout}
+            >
+              Log Out
+            </button>
+          </div>
+        )}
+      </div>
+
+      {showChangePassword && (
+        <ChangePasswordModal onClose={handleCloseChangePassword} />
+      )}
+    </>
+  );
+};
+
+interface ChangePasswordModalProps {
+  onClose: () => void;
+}
+
+const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({ onClose }) => {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (newPassword !== confirmPassword) {
+      setError('New passwords do not match');
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setError('New password must be at least 8 characters long');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      await authService.changePassword({
+        current_password: currentPassword,
+        new_password: newPassword
+      });
+
+      alert('Password changed successfully!');
+      onClose();
+    } catch (error: any) {
+      setError(error.response?.data?.detail || 'Failed to change password');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        <h3>Change Password</h3>
+
+        <form onSubmit={handleSubmit}>
+          <div className="modal-form-group">
+            <label>
+              Current Password
+            </label>
+            <input
+              type="password"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="modal-form-group">
+            <label>
+              New Password
+            </label>
+            <input
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              required
+              minLength={8}
+            />
+          </div>
+
+          <div className="modal-form-group">
+            <label>
+              Confirm New Password
+            </label>
+            <input
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              minLength={8}
+            />
+          </div>
+
+          {error && (
+            <div className="modal-error">
+              {error}
+            </div>
+          )}
+
+          <div className="modal-buttons">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={loading}
+              className="modal-btn-cancel"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="modal-btn-primary"
+            >
+              {loading ? 'Changing...' : 'Change Password'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileMenu;
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { authService, userService, membershipService, paymentService, User, Membership, Payment } from '../services/membershipService';
 import MembershipSetup from '../components/MembershipSetup';
+import ProfileMenu from '../components/ProfileMenu';

 const Dashboard: React.FC = () => {
  const navigate = useNavigate();
@@ -53,11 +54,6 @@ const Dashboard: React.FC = () => {
    }
  };

-  const handleLogout = () => {
-    authService.logout();
-    navigate('/login');
-  };
-
  const handleMembershipSetup = () => {
    setShowMembershipSetup(true);
  };
@@ -94,6 +90,17 @@ const Dashboard: React.FC = () => {
    }
  };

+  const handleUpdateUserRole = async (userId: number, newRole: string) => {
+    try {
+      await userService.updateUserRole(userId, newRole);
+      // Reload data to reflect changes
+      await loadData();
+    } catch (error) {
+      console.error('Failed to update user role:', error);
+      alert('Failed to update user role. Please try again.');
+    }
+  };
+
  const getStatusClass = (status: string) => {
    switch (status.toLowerCase()) {
      case 'active':
@@ -125,7 +132,7 @@ const Dashboard: React.FC = () => {
      <>
        <nav className="navbar">
          <h1>SASA Membership Portal</h1>
-          <button onClick={handleLogout}>Log Out</button>
+          <ProfileMenu userName={`${user?.first_name} ${user?.last_name}`} />
        </nav>
        <div className="container">
          <MembershipSetup
@@ -143,7 +150,7 @@ const Dashboard: React.FC = () => {
    <>
      <nav className="navbar">
        <h1>SASA Membership Portal</h1>
-        <button onClick={handleLogout}>Log Out</button>
+        <ProfileMenu userName={`${user?.first_name} ${user?.last_name}`} />
      </nav>

      <div className="container">
@@ -157,7 +164,7 @@ const Dashboard: React.FC = () => {
            <p><strong>Email:</strong> {user?.email}</p>
            {user?.phone && <p><strong>Phone:</strong> {user.phone}</p>}
            {user?.address && <p><strong>Address:</strong> {user.address}</p>}
-            <p><strong>Member since:</strong> {user && formatDate(user.created_at)}</p>
+            <p><strong>Registered since:</strong> {user && formatDate(user.created_at)}</p>
          </div>

          {/* Membership Card */}
@@ -167,7 +174,7 @@ const Dashboard: React.FC = () => {
              <h4 style={{ color: '#0066cc', marginBottom: '8px' }}>{activeMembership.tier.name}</h4>
              <p><strong>Status:</strong> <span className={`status-badge ${getStatusClass(activeMembership.status)}`}>{activeMembership.status.toUpperCase()}</span></p>
              <p><strong>Annual Fee:</strong> £{activeMembership.tier.annual_fee.toFixed(2)}</p>
-              <p><strong>Start Date:</strong> {formatDate(activeMembership.start_date)}</p>
+              <p><strong>Member since:</strong> {formatDate(activeMembership.start_date)}</p>
              <p><strong>Renewal Date:</strong> {formatDate(activeMembership.end_date)}</p>
              <p><strong>Auto Renew:</strong> {activeMembership.auto_renew ? 'Yes' : 'No'}</p>
              <div style={{ marginTop: '12px', padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
@@ -308,6 +315,76 @@ const Dashboard: React.FC = () => {
            )}
          </div>
        )}
+
+        {/* User Management Section */}
+        {(user?.role === 'admin' || user?.role === 'super_admin') && (
+          <div className="card" style={{ marginTop: '20px' }}>
+            <h3 style={{ marginBottom: '16px' }}>User Management</h3>
+            
+            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <thead>
+                <tr style={{ borderBottom: '2px solid #ddd' }}>
+                  <th style={{ padding: '12px', textAlign: 'left' }}>Name</th>
+                  <th style={{ padding: '12px', textAlign: 'left' }}>Email</th>
+                  <th style={{ padding: '12px', textAlign: 'left' }}>Role</th>
+                  <th style={{ padding: '12px', textAlign: 'left' }}>Status</th>
+                  <th style={{ padding: '12px', textAlign: 'left' }}>Joined</th>
+                  <th style={{ padding: '12px', textAlign: 'left' }}>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {allUsers.map(u => (
+                  <tr key={u.id} style={{ borderBottom: '1px solid #eee' }}>
+                    <td style={{ padding: '12px' }}>{u.first_name} {u.last_name}</td>
+                    <td style={{ padding: '12px' }}>{u.email}</td>
+                    <td style={{ padding: '12px' }}>
+                      <span style={{
+                        backgroundColor: u.role === 'super_admin' ? '#dc3545' : 
+                                       u.role === 'admin' ? '#ffc107' : '#28a745',
+                        color: u.role === 'member' ? 'white' : 'black',
+                        padding: '4px 8px',
+                        borderRadius: '4px',
+                        fontSize: '12px',
+                        fontWeight: 'bold'
+                      }}>
+                        {u.role.toUpperCase()}
+                      </span>
+                    </td>
+                    <td style={{ padding: '12px' }}>
+                      <span className={`status-badge ${u.is_active ? 'status-active' : 'status-expired'}`}>
+                        {u.is_active ? 'ACTIVE' : 'INACTIVE'}
+                      </span>
+                    </td>
+                    <td style={{ padding: '12px' }}>{formatDate(u.created_at)}</td>
+                    <td style={{ padding: '12px' }}>
+                      {u.role === 'member' && (
+                        <button
+                          className="btn btn-primary"
+                          onClick={() => handleUpdateUserRole(u.id, 'admin')}
+                          style={{ fontSize: '12px', padding: '4px 8px', marginRight: '4px' }}
+                        >
+                          Make Admin
+                        </button>
+                      )}
+                      {u.role === 'admin' && u.id !== user?.id && (
+                        <button
+                          className="btn btn-secondary"
+                          onClick={() => handleUpdateUserRole(u.id, 'member')}
+                          style={{ fontSize: '12px', padding: '4px 8px' }}
+                        >
+                          Remove Admin
+                        </button>
+                      )}
+                      {u.role === 'super_admin' && (
+                        <span style={{ fontSize: '12px', color: '#666' }}>Super Admin</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
      </div>
    </>
  );
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -36,7 +36,7 @@ const Login: React.FC = () => {
  return (
    <div className="auth-container">
      <div className="auth-card">
-        <h2>Welcome Back</h2>
+        <h2>SASA Member Portal</h2>
        <p style={{ textAlign: 'center', marginBottom: '24px', color: '#666' }}>
          Log in to your membership account
        </p>
@@ -90,7 +90,7 @@ const Login: React.FC = () => {
            onClick={() => navigate('/register')}
            style={{ width: '100%' }}
          >
-            Join as New User
+            Join SASA
          </button>
        </div>
      </div>
--- a/frontend/src/services/membershipService.ts
+++ b/frontend/src/services/membershipService.ts
@@ -71,6 +71,11 @@ export interface ResetPasswordData {
  new_password: string;
 }

+export interface ChangePasswordData {
+  current_password: string;
+  new_password: string;
+}
+
 export interface MembershipCreateData {
  tier_id: number;
  start_date: string;
@@ -121,6 +126,11 @@ export const authService = {
    return response.data;
  },

+  async changePassword(data: ChangePasswordData) {
+    const response = await api.post('/auth/change-password', data);
+    return response.data;
+  },
+
  logout() {
    localStorage.removeItem('token');
  },
@@ -144,6 +154,11 @@ export const userService = {
  async getAllUsers(): Promise<User[]> {
    const response = await api.get('/users/');
    return response.data;
+  },
+
+  async updateUserRole(userId: number, role: string): Promise<User> {
+    const response = await api.put(`/users/${userId}`, { role });
+    return response.data;
  }
 };