More iteration

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;