add UI and basic UI tests

Author: devksingh4

src/api/routes/apiKey.ts

@@ -25,7 +25,7 @@ import { z } from "zod";
 
 const apiKeyRoute: FastifyPluginAsync = async (fastify, _options) => {
   await fastify.register(rateLimiter, {
-    limit: 5,
+    limit: 15,
     duration: 30,
     rateLimitIdentifier: "apiKey",
   });
@@ -178,10 +178,12 @@ const apiKeyRoute: FastifyPluginAsync = async (fastify, _options) => {
         const unmarshalled = result.Items.map((x) =>
           unmarshall(x),
         ) as ApiKeyDynamoEntry[];
-        const filtered = unmarshalled.map((x) => ({
-          ...x,
-          keyHash: undefined,
-        }));
+        const filtered = unmarshalled
+          .map((x) => ({
+            ...x,
+            keyHash: undefined,
+          }))
+          .filter((x) => !x.expiresAt || x.expiresAt < Date.now());
         return reply.status(200).send(filtered);
       } catch (e) {
         if (e instanceof BaseError) {

src/common/types/apiKey.ts

@@ -1,14 +1,17 @@
 import { AppRoles } from "../roles.js";
 import { z } from "zod"
 
-export type ApiKeyDynamoEntry = {
+export type ApiKeyMaskedEntry = {
   keyId: string;
-  keyHash: string;
   roles: AppRoles[];
   owner: string;
   description: string;
   createdAt: number;
   expiresAt?: number;
+}
+
+export type ApiKeyDynamoEntry = ApiKeyMaskedEntry & {
+  keyHash: string;
 };
 
 export type DecomposedApiKey = {
@@ -31,3 +34,5 @@ export const apiKeyPostBody = z.object({
     message: "expiresAt must be a future epoch time.",
   }).openapi({ description: "Epoch timestamp of when the key expires.", example: 1745362658 })
 })
+
+export type ApiKeyPostBody = z.infer<typeof apiKeyPostBody>;

src/ui/Router.tsx

@@ -24,6 +24,7 @@ import { ManageRoomRequestsPage } from './pages/roomRequest/RoomRequestLanding.p
 import { ViewRoomRequest } from './pages/roomRequest/ViewRoomRequest.page';
 import { ViewLogsPage } from './pages/logs/ViewLogs.page';
 import { TermsOfService } from './pages/tos/TermsOfService.page';
+import { ManageApiKeysPage } from './pages/apiKeys/ManageKeys.page';
 
 const ProfileRediect: React.FC = () => {
   const location = useLocation();
@@ -195,6 +196,10 @@ const authenticatedRouter = createBrowserRouter([
     path: '/logs',
     element: <ViewLogsPage />,
   },
+  {
+    path: '/apiKeys',
+    element: <ManageApiKeysPage />,
+  },
   // Catch-all route for authenticated users shows 404 page
   {
     path: '*',

src/ui/components/AppShell/index.tsx

@@ -20,6 +20,7 @@ import {
   IconLock,
   IconDoor,
   IconHistory,
+  IconKey,
 } from '@tabler/icons-react';
 import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -89,6 +90,13 @@ export const navItems = [
     description: null,
     validRoles: [AppRoles.AUDIT_LOG_VIEWER],
   },
+  {
+    link: '/apiKeys',
+    name: 'API Keys',
+    icon: IconKey,
+    description: null,
+    validRoles: [AppRoles.MANAGE_ORG_API_KEYS],
+  },
 ];
 
 export const extLinks = [

src/ui/components/BlurredTextDisplay.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Text, Overlay, Box, ActionIcon } from '@mantine/core';
+import { IconEye, IconEyeOff } from '@tabler/icons-react';
+
+export const BlurredTextDisplay: React.FC<{ text: string; initialState?: boolean }> = ({
+  text,
+  initialState = false,
+}) => {
+  const [visible, setVisible] = useState(initialState);
+
+  return (
+    <Box pos="relative" maw={400} mx="auto">
+      <Text
+        ta="center"
+        fw={600}
+        fz="sm"
+        p="md"
+        bg="var(--mantine-color-gray-light)"
+        style={{
+          wordBreak: 'break-all',
+          borderRadius: 4,
+        }}
+      >
+        {text}
+      </Text>
+
+      {!visible && (
+        <Overlay
+          blur={7}
+          radius={3}
+          opacity={1}
+          color="var(--mantine-color-gray-light)"
+          zIndex={5}
+          center
+          style={{
+            position: 'absolute', // Made position explicit
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      )}
+
+      <ActionIcon
+        variant="light"
+        size="sm"
+        onClick={() => setVisible((v) => !v)}
+        pos="absolute"
+        top={5}
+        right={5}
+        style={{ zIndex: 10 }}
+      >
+        {visible ? <IconEyeOff size={16} /> : <IconEye size={16} />}
+      </ActionIcon>
+    </Box>
+  );
+};

src/ui/pages/apiKeys/ManageKeys.page.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { Card, Container, Divider, Title, Text } from '@mantine/core';
+import { AuthGuard } from '@ui/components/AuthGuard';
+import { AppRoles } from '@common/roles';
+import { useApi } from '@ui/util/api';
+import { OrgApiKeyTable } from './ManageKeysTable';
+
+export const ManageApiKeysPage: React.FC = () => {
+  const api = useApi('core');
+
+  return (
+    <AuthGuard
+      resourceDef={{ service: 'core', validRoles: [AppRoles.MANAGE_ORG_API_KEYS] }}
+      showSidebar={true}
+    >
+      <Container>
+        <Title>API Keys</Title>
+        <Text>Manage organization API keys.</Text>
+        <Text size="xs" c="dimmed">
+          These keys' permissions are not tied to any one user, and can be managed by organization
+          admins.
+        </Text>
+        <Divider m="md" />
+        <OrgApiKeyTable
+          getApiKeys={() => api.get('/api/v1/apiKey/org').then((res) => res.data)}
+          deleteApiKeys={(ids) =>
+            Promise.all(ids.map((id) => api.delete(`/api/v1/apiKey/org/${id}`))).then(() => {})
+          }
+          createApiKey={(data) => api.post('/api/v1/apiKey/org', data).then((res) => res.data)}
+        />
+      </Container>
+    </AuthGuard>
+  );
+};