More snackbar

web/src/components/admin/users/UserDetailDialog.tsx

@@ -78,6 +78,7 @@ const UserDetailDialog: React.FC<UserDetailDialogProps> = ({
     const [applications, setApplications] = useState<Application[]>([]);
     const [loadingApps, setLoadingApps] = useState(false);
     const [saving, setSaving] = useState(false);
+    const [togglingActive, setTogglingActive] = useState(false);
     const [togglingPermIds, setTogglingPermIds] = useState<Set<number>>(new Set());
     const { showNotification } = useNotification();
 
@@ -102,6 +103,20 @@ const UserDetailDialog: React.FC<UserDetailDialogProps> = ({
         }
     }, [tab, user]);
 
+    const handleToggleActive = async (checked: boolean) => {
+        if (!user) return;
+        setTogglingActive(true);
+        const res = await adminService.updateUser(user.id, {
+            active: checked,
+            rate_limit_id: rateLimitId,
+        });
+        setTogglingActive(false);
+        if (res.error) { showNotification(res.error, 'error'); return; }
+        setActive(checked);
+        showNotification(checked ? 'Account enabled' : 'Account disabled', 'success');
+        onUserUpdated();
+    };
+
     const handleSaveOverview = async () => {
         if (!user) return;
         setSaving(true);
@@ -111,7 +126,7 @@ const UserDetailDialog: React.FC<UserDetailDialogProps> = ({
         });
         setSaving(false);
         if (res.error) { showNotification(res.error, 'error'); return; }
-        showNotification('User updated', 'success');
+        showNotification('Rate limit updated', 'success');
         onUserUpdated();
     };
 
@@ -156,8 +171,8 @@ const UserDetailDialog: React.FC<UserDetailDialogProps> = ({
             <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 {user.username}
                 <Chip
-                    label={user.active ? 'Active' : 'Disabled'}
+                    label={active ? 'Active' : 'Disabled'}
-                    color={user.active ? 'success' : 'error'}
+                    color={active ? 'success' : 'error'}
                     size="small"
                 />
             </DialogTitle>
@@ -173,7 +188,11 @@ const UserDetailDialog: React.FC<UserDetailDialogProps> = ({
                 <TabPanel value={tab} index={0}>
                     <Stack spacing={3}>
                         <FormControlLabel
-                            control={<Switch checked={active} onChange={e => setActive(e.target.checked)} />}
+                            control={
+                                togglingActive
+                                    ? <Box sx={{ width: 58, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CircularProgress size={20} /></Box>
+                                    : <Switch checked={active} onChange={e => handleToggleActive(e.target.checked)} />
+                            }
                             label="Account Active"
                         />
                         <FormControl fullWidth>