ability to revoke API keys, fixed bug showing another user's api key in the UI

frontend/src/api.js

@@ -2904,6 +2904,33 @@ export default class API {
     }
   }
 
+  static async revokeApiKey({ user_id = null } = {}) {
+    try {
+      const body = {};
+      if (user_id) {
+        body.user_id = user_id;
+      }
+
+      const response = await request(`${host}/api/accounts/api-keys/revoke/`, {
+        method: 'POST',
+        body,
+      });
+
+      // If the backend returned an updated user, refresh the users store
+      try {
+        if (response && response.user) {
+          useUsersStore.getState().updateUser(response.user);
+        }
+      } catch (e) {
+        // ignore store update errors
+      }
+
+      return response;
+    } catch (e) {
+      errorNotification('Failed to revoke API key', e);
+    }
+  }
+
   static async updateUser(id, body) {
     try {
       const response = await request(`${host}/api/accounts/users/${id}/`, {

frontend/src/components/forms/User.jsx

@@ -15,8 +15,11 @@ import {
   Switch,
   Box,
   Tooltip,
+  Grid,
+  SimpleGrid,
+  useMantineTheme,
 } from '@mantine/core';
-import { RotateCcwKey, X } from 'lucide-react';
+import { RotateCcwKey, RotateCw, X } from 'lucide-react';
 import { Copy, Key } from 'lucide-react';
 import { useForm } from '@mantine/form';
 import useChannelsStore from '../../store/channels';
@@ -35,6 +38,8 @@ const User = ({ user = null, isOpen, onClose }) => {
   const [generatedKey, setGeneratedKey] = useState(null);
   const [userAPIKey, setUserAPIKey] = useState(user?.api_key || null);
 
+  const theme = useMantineTheme();
+
   const form = useForm({
     mode: 'uncontrolled',
     initialValues: {
@@ -120,6 +125,7 @@ const User = ({ user = null, isOpen, onClose }) => {
     }
 
     form.reset();
+    setUserAPIKey(null);
     onClose();
   };
 
@@ -145,9 +151,7 @@ const User = ({ user = null, isOpen, onClose }) => {
         setEnableXC(true);
       }
 
-      if (user?.api_key) {
-        setUserAPIKey(user.api_key);
-      }
+      setUserAPIKey(user.api_key || null);
     } else {
       form.reset();
     }
@@ -194,6 +198,34 @@ const User = ({ user = null, isOpen, onClose }) => {
     }
   };
 
+  const onRevokeKey = async () => {
+    if (!canGenerateKey) return;
+
+    setGenerating(true);
+    try {
+      const payload = {};
+      if (authUser.user_level == USER_LEVELS.ADMIN && user?.id) {
+        payload.user_id = user.id;
+      }
+
+      const resp = await API.revokeApiKey(payload);
+      // backend returns { success: true } - clear local state
+      if (resp && resp.success) {
+        setGeneratedKey(null);
+        setUserAPIKey(null);
+
+        // If we're revoking the current authenticated user's key, update auth store
+        if (user?.id && authUser?.id === user.id) {
+          setUser({ ...authUser, api_key: null });
+        }
+      }
+    } catch (e) {
+      // API shows notifications
+    } finally {
+      setGenerating(false);
+    }
+  };
+
   return (
     <Modal opened={isOpen} onClose={onClose} title="User" size="xl">
       <form onSubmit={form.onSubmit(onSubmit)}>
@@ -333,16 +365,32 @@ const User = ({ user = null, isOpen, onClose }) => {
                   />
                 )}
 
-                <Button
-                  leftSection={<Key size={14} />}
-                  size="xs"
-                  onClick={onGenerateKey}
-                  loading={generating}
-                  color="blue"
-                  variant="light"
-                >
-                  {userAPIKey ? 'Regenerate API Key' : 'Generate API Key'}
-                </Button>
+                <Group gap="xs" grow>
+                  <Button
+                    leftSection={<Key size={14} />}
+                    size="xs"
+                    onClick={onGenerateKey}
+                    loading={generating}
+                    variant="light"
+                    fullWidth
+                  >
+                    {userAPIKey ? 'Regenerate API Key' : 'Generate API Key'}
+                  </Button>
+
+                  {userAPIKey && (
+                    <Button
+                      leftSection={<X size={14} />}
+                      size="xs"
+                      onClick={onRevokeKey}
+                      loading={generating}
+                      color={theme.colors.red[5]}
+                      variant="light"
+                      fullWidth
+                    >
+                      Revoke API Key
+                    </Button>
+                  )}
+                </Group>
               </Stack>
             )}
           </Stack>