Arch changes and feature flags

2025-11-23 15:46:51 +00:00
parent 6f1d09cd77
commit e1659c07ea
22 changed files with 577 additions and 119 deletions
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -63,6 +63,15 @@ body {
  background-color: #5a6268;
 }

+.btn-danger {
+  background-color: #dc3545;
+  color: white;
+}
+
+.btn-danger:hover {
+  background-color: #c82333;
+}
+
 .form-group {
  margin-bottom: 16px;
 }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { FeatureFlagProvider } from './contexts/FeatureFlagContext';
 import Register from './pages/Register';
 import Login from './pages/Login';
 import ForgotPassword from './pages/ForgotPassword';
@@ -12,19 +13,21 @@ import './App.css';

 const App: React.FC = () => {
  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Navigate to="/login" />} />
-        <Route path="/register" element={<Register />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/forgot-password" element={<ForgotPassword />} />
-        <Route path="/reset-password" element={<ResetPassword />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-        <Route path="/email-templates" element={<EmailTemplates />} />
-        <Route path="/membership-tiers" element={<MembershipTiers />} />
-        <Route path="/bounce-management" element={<BounceManagement />} />
-      </Routes>
-    </BrowserRouter>
+    <FeatureFlagProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Navigate to="/login" />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/forgot-password" element={<ForgotPassword />} />
+          <Route path="/reset-password" element={<ResetPassword />} />
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/email-templates" element={<EmailTemplates />} />
+          <Route path="/membership-tiers" element={<MembershipTiers />} />
+          <Route path="/bounce-management" element={<BounceManagement />} />
+        </Routes>
+      </BrowserRouter>
+    </FeatureFlagProvider>
  );
 };

--- a/frontend/src/components/FeatureFlagStatus.tsx
+++ b/frontend/src/components/FeatureFlagStatus.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { useFeatureFlags } from '../contexts/FeatureFlagContext';
+
+const FeatureFlagStatus: React.FC = () => {
+  const { flags, loading, error, reloadFlags } = useFeatureFlags();
+
+  if (loading) {
+    return <div style={{ fontSize: '14px', color: '#666' }}>Loading feature flags...</div>;
+  }
+
+  if (error) {
+    return <div style={{ fontSize: '14px', color: '#d32f2f' }}>Error loading feature flags</div>;
+  }
+
+  if (!flags) {
+    return null;
+  }
+
+  const handleReload = async () => {
+    try {
+      await reloadFlags();
+      console.log('Feature flags reloaded');
+    } catch (error) {
+      console.error('Failed to reload feature flags:', error);
+    }
+  };
+
+  return (
+    <div className="card" style={{ marginBottom: '20px' }}>
+      <h4 style={{ marginBottom: '16px' }}>Feature Flags Status</h4>
+      
+      <div style={{ display: 'grid', gap: '8px', marginBottom: '16px' }}>
+        {Object.entries(flags.flags).map(([name, value]) => (
+          <div
+            key={name}
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: '8px 12px',
+              backgroundColor: '#f5f5f5',
+              borderRadius: '4px',
+              fontSize: '14px'
+            }}
+          >
+            <span style={{ fontWeight: '500' }}>
+              {name.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
+            </span>
+            <span
+              style={{
+                padding: '2px 8px',
+                borderRadius: '12px',
+                fontSize: '12px',
+                fontWeight: '500',
+                backgroundColor: value ? '#4CAF50' : '#f44336',
+                color: 'white'
+              }}
+            >
+              {String(value)}
+            </span>
+          </div>
+        ))}
+      </div>
+      
+      <button
+        className="btn btn-secondary"
+        onClick={handleReload}
+        style={{ fontSize: '12px', padding: '6px 12px' }}
+      >
+        Reload Flags
+      </button>
+      
+      <p style={{ fontSize: '12px', color: '#666', marginTop: '12px', marginBottom: 0 }}>
+        Feature flags are loaded from environment variables. Changes require updating the .env file and reloading.
+      </p>
+    </div>
+  );
+};
+
+export default FeatureFlagStatus;
--- a/frontend/src/components/MembershipSetup.tsx
+++ b/frontend/src/components/MembershipSetup.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { membershipService, paymentService, MembershipTier, MembershipCreateData, PaymentCreateData } from '../services/membershipService';
+import { useFeatureFlags } from '../contexts/FeatureFlagContext';
 import SquarePayment from './SquarePayment';

 interface MembershipSetupProps {
@@ -15,6 +16,8 @@ const MembershipSetup: React.FC<MembershipSetupProps> = ({ onMembershipCreated,
  const [paymentMethod, setPaymentMethod] = useState<'square' | 'cash' | null>(null);
  const [error, setError] = useState('');
  const [createdMembershipId, setCreatedMembershipId] = useState<number | null>(null);
+  
+  const { isEnabled } = useFeatureFlags();

  useEffect(() => {
    loadTiers();
@@ -202,26 +205,28 @@ const MembershipSetup: React.FC<MembershipSetupProps> = ({ onMembershipCreated,
                <span>→</span>
              </button>

-              <button
-                className="btn btn-secondary"
-                onClick={() => handlePaymentMethodSelect('cash')}
-                disabled={loading}
-                style={{
-                  padding: '16px',
-                  textAlign: 'left',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
-                }}
-              >
-                <div>
-                  <strong>Cash Payment</strong>
-                  <div style={{ fontSize: '14px', marginTop: '4px', opacity: 0.8 }}>
-                    Pay in person or by check
+              {isEnabled('CASH_PAYMENT_ENABLED') && (
+                <button
+                  className="btn btn-secondary"
+                  onClick={() => handlePaymentMethodSelect('cash')}
+                  disabled={loading}
+                  style={{
+                    padding: '16px',
+                    textAlign: 'left',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center'
+                  }}
+                >
+                  <div>
+                    <strong>Cash Payment</strong>
+                    <div style={{ fontSize: '14px', marginTop: '4px', opacity: 0.8 }}>
+                      Pay in person or by check
+                    </div>
                  </div>
-                </div>
-                <span>→</span>
-              </button>
+                  <span>→</span>
+                </button>
+              )}
            </div>

            <div style={{ marginTop: '20px', textAlign: 'center' }}>
--- a/frontend/src/components/ProfileMenu.tsx
+++ b/frontend/src/components/ProfileMenu.tsx
@@ -285,19 +285,33 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({ onClose }) =>
            </div>
          )}

-          <div className="modal-buttons">
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '16px' }}>
            <button
              type="button"
              onClick={onClose}
              disabled={loading}
-              className="modal-btn-cancel"
+              style={{
+                padding: '10px 20px',
+                backgroundColor: '#6c757d',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer'
+              }}
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
-              className="modal-btn-primary"
+              style={{
+                padding: '10px 20px',
+                backgroundColor: '#28a745',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer'
+              }}
            >
              {loading ? 'Changing...' : 'Change Password'}
            </button>
--- a/frontend/src/contexts/FeatureFlagContext.tsx
+++ b/frontend/src/contexts/FeatureFlagContext.tsx
@@ -0,0 +1,94 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { featureFlagService, FeatureFlags } from '../services/featureFlagService';
+
+interface FeatureFlagContextType {
+  flags: FeatureFlags | null;
+  loading: boolean;
+  error: string | null;
+  isEnabled: (flagName: string) => boolean;
+  getFlagValue: (flagName: string, defaultValue?: any) => any;
+  reloadFlags: () => Promise<void>;
+}
+
+const FeatureFlagContext = createContext<FeatureFlagContextType | undefined>(undefined);
+
+export const useFeatureFlags = (): FeatureFlagContextType => {
+  const context = useContext(FeatureFlagContext);
+  if (context === undefined) {
+    throw new Error('useFeatureFlags must be used within a FeatureFlagProvider');
+  }
+  return context;
+};
+
+interface FeatureFlagProviderProps {
+  children: React.ReactNode;
+}
+
+export const FeatureFlagProvider: React.FC<FeatureFlagProviderProps> = ({ children }) => {
+  const [flags, setFlags] = useState<FeatureFlags | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadFlags = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const flagsData = await featureFlagService.getAllFlags();
+      setFlags(flagsData);
+    } catch (err: any) {
+      console.error('Failed to load feature flags:', err);
+      setError('Failed to load feature flags');
+      // Set default flags on error
+      setFlags({
+        flags: {
+          CASH_PAYMENT_ENABLED: true,
+          EMAIL_NOTIFICATIONS_ENABLED: true,
+          EVENT_MANAGEMENT_ENABLED: true,
+          AUTO_RENEWAL_ENABLED: false,
+          MEMBERSHIP_TRANSFERS_ENABLED: false,
+          BULK_OPERATIONS_ENABLED: false,
+          ADVANCED_REPORTING_ENABLED: false,
+          API_RATE_LIMITING_ENABLED: true,
+        },
+        enabled_flags: ['CASH_PAYMENT_ENABLED', 'EMAIL_NOTIFICATIONS_ENABLED', 'EVENT_MANAGEMENT_ENABLED', 'API_RATE_LIMITING_ENABLED']
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const reloadFlags = async () => {
+    await loadFlags();
+  };
+
+  const isEnabled = (flagName: string): boolean => {
+    if (!flags) return false;
+    const upperFlagName = flagName.toUpperCase();
+    return Boolean(flags.flags[upperFlagName]);
+  };
+
+  const getFlagValue = (flagName: string, defaultValue: any = null): any => {
+    if (!flags) return defaultValue;
+    const upperFlagName = flagName.toUpperCase();
+    return flags.flags[upperFlagName] ?? defaultValue;
+  };
+
+  useEffect(() => {
+    loadFlags();
+  }, []);
+
+  const contextValue: FeatureFlagContextType = {
+    flags,
+    loading,
+    error,
+    isEnabled,
+    getFlagValue,
+    reloadFlags,
+  };
+
+  return (
+    <FeatureFlagContext.Provider value={contextValue}>
+      {children}
+    </FeatureFlagContext.Provider>
+  );
+};
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -4,6 +4,7 @@ import { authService, userService, membershipService, paymentService, eventServi
 import MembershipSetup from '../components/MembershipSetup';
 import ProfileMenu from '../components/ProfileMenu';
 import ProfileEdit from '../components/ProfileEdit';
+import FeatureFlagStatus from '../components/FeatureFlagStatus';

 const Dashboard: React.FC = () => {
  const navigate = useNavigate();
@@ -38,6 +39,8 @@ const Dashboard: React.FC = () => {
  const [showRSVPModal, setShowRSVPModal] = useState(false);
  const [selectedEventForRSVP, setSelectedEventForRSVP] = useState<Event | null>(null);
  const [eventRSVPList, setEventRSVPList] = useState<EventRSVP[]>([]);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [userToDelete, setUserToDelete] = useState<User | null>(null);

  useEffect(() => {
    if (!authService.isAuthenticated()) {
@@ -183,6 +186,26 @@ const Dashboard: React.FC = () => {
    }
  };

+  const handleDeleteUser = async () => {
+    if (!userToDelete) return;
+
+    try {
+      await userService.deleteUser(userToDelete.id);
+      await loadData(); // Reload data to reflect changes
+      setShowDeleteConfirm(false);
+      setUserToDelete(null);
+      alert('User deleted successfully');
+    } catch (error: any) {
+      console.error('Failed to delete user:', error);
+      alert(`Failed to delete user: ${error.response?.data?.detail || error.message}`);
+    }
+  };
+
+  const confirmDeleteUser = (u: User) => {
+    setUserToDelete(u);
+    setShowDeleteConfirm(true);
+  };
+
  const getStatusClass = (status: string) => {
    switch (status.toLowerCase()) {
      case 'active':
@@ -694,6 +717,11 @@ const Dashboard: React.FC = () => {
          </div>
        )}

+        {/* Feature Flag Management - Super Admin Only */}
+        {user?.role === 'super_admin' && (
+          <FeatureFlagStatus />
+        )}
+
        {/* User Management Section */}
        {(user?.role === 'admin' || user?.role === 'super_admin') && (
          <div className="card" style={{ marginTop: '20px' }}>
@@ -788,6 +816,18 @@ const Dashboard: React.FC = () => {
                          {u.role === 'super_admin' && (
                            <span style={{ fontSize: '12px', color: '#666' }}>Super Admin</span>
                          )}
+                          {user?.role === 'super_admin' && u.id !== user?.id && (
+                            <button
+                              className="btn btn-danger"
+                              onClick={(e) => {
+                                e.stopPropagation(); // Prevent row click
+                                confirmDeleteUser(u);
+                              }}
+                              style={{ fontSize: '12px', padding: '4px 8px', marginLeft: '4px' }}
+                            >
+                              Delete
+                            </button>
+                          )}
                        </td>
                      </tr>
                    );
@@ -1363,6 +1403,53 @@ const Dashboard: React.FC = () => {
          </div>
        </div>
      )}
+
+      {/* Delete User Confirmation Modal */}
+      {showDeleteConfirm && userToDelete && (
+        <div className="modal-overlay">
+          <div className="modal-content">
+            <h3 style={{ color: '#dc3545' }}>Delete User</h3>
+            <p>Are you sure you want to delete the user <strong>{userToDelete.first_name} {userToDelete.last_name}</strong> ({userToDelete.email})?</p>
+            <p style={{ color: '#dc3545', fontSize: '14px' }}>
+              ⚠️ This action cannot be undone. All associated memberships and payments will also be deleted.
+            </p>
+            
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '20px' }}>
+              <button
+                type="button"
+                onClick={() => {
+                  setShowDeleteConfirm(false);
+                  setUserToDelete(null);
+                }}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: '#6c757d',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer'
+                }}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleDeleteUser}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: '#dc3545',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer'
+                }}
+              >
+                Delete User
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
    </>
  );
 };
--- a/frontend/src/services/featureFlagService.ts
+++ b/frontend/src/services/featureFlagService.ts
@@ -0,0 +1,29 @@
+import api from './api';
+
+export interface FeatureFlag {
+  name: string;
+  enabled: boolean;
+  value: any;
+}
+
+export interface FeatureFlags {
+  flags: { [key: string]: any };
+  enabled_flags: string[];
+}
+
+export const featureFlagService = {
+  async getAllFlags(): Promise<FeatureFlags> {
+    const response = await api.get('/feature-flags/flags');
+    return response.data;
+  },
+
+  async getFlag(flagName: string): Promise<FeatureFlag> {
+    const response = await api.get(`/feature-flags/flags/${flagName}`);
+    return response.data;
+  },
+
+  async reloadFlags(): Promise<{ message: string }> {
+    const response = await api.post('/feature-flags/flags/reload');
+    return response.data;
+  }
+};
--- a/frontend/src/services/membershipService.ts
+++ b/frontend/src/services/membershipService.ts
@@ -225,6 +225,11 @@ export const userService = {
    const response = await api.put(`/users/${userId}`, data);
    return response.data;
  },
+
+  async deleteUser(userId: number): Promise<{ message: string }> {
+    const response = await api.delete(`/users/${userId}`);
+    return response.data;
+  },
 };

 export const membershipService = {