frontend/tokens: add search

ffreddow · ffreddow · commit b484ce4983d6 · 2025-12-05T16:22:39.000+01:00
diff --git a/frontend/src/locales/de.ts b/frontend/src/locales/de.ts
@@ -233,6 +233,10 @@ export const de ={
         "sort_name_asc": "Name A-Z",
         "sort_name_desc": "Name Z-A",
         "sort_last_used_desc": "Kürzlich verwendet",
+        "search_label": "Token suchen",
+        "search_placeholder": "Nach Name suchen...",
+        "no_tokens": "Noch keine Token vorhanden. Erstelle oben ein Token, um zu starten.",
+        "no_tokens_search": "Keine Token entsprechen deiner Suche.",
         firmware_needed
     },
     "wg_client": {
diff --git a/frontend/src/locales/en.ts b/frontend/src/locales/en.ts
@@ -233,6 +233,10 @@ export const en = {
         "sort_name_asc": "Name A-Z",
         "sort_name_desc": "Name Z-A",
         "sort_last_used_desc": "Recently used",
+        "search_label": "Search tokens",
+        "search_placeholder": "Search by name",
+        "no_tokens": "No authorization tokens yet. Create one above to get started.",
+        "no_tokens_search": "No tokens match your search.",
         firmware_needed
     },
     "wg_client": {
diff --git a/frontend/src/pages/Tokens.tsx b/frontend/src/pages/Tokens.tsx
@@ -76,6 +76,7 @@ export function Tokens() {
     const [user, setUser] = useState<components["schemas"]["UserInfo"] | null>(null);
     const [loading, setLoading] = useState(true);
     const [sortOption, setSortOption] = useState<SortOption>('created-desc');
+    const [searchQuery, setSearchQuery] = useState("");
 
     const sortedTokens = useMemo(() => {
         const copy = [...tokens];
@@ -100,6 +101,18 @@ export function Tokens() {
         return copy;
     }, [tokens, sortOption]);
 
+    const filteredTokens = useMemo(() => {
+        const normalizedQuery = searchQuery.trim().toLowerCase();
+        if (!normalizedQuery) {
+            return sortedTokens;
+        }
+
+        return sortedTokens.filter((token) => {
+            const nameMatch = token.name.toLowerCase().includes(normalizedQuery);
+            return nameMatch;
+        });
+    }, [searchQuery, sortedTokens]);
+
     // Fetch tokens and user data from the server on component mount
     useEffect(() => {
         async function fetchTokens() {
@@ -292,30 +305,42 @@ export function Tokens() {
                     </Form>
                 </Card.Body>
                 <Card.Header className="border-top pb-2">
-                    <div className="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
-                        <h5 className="mb-0">{t("tokens.existing_tokens")}</h5>
-                        <Form.Select
-                            aria-label={t("tokens.sort_label")}
-                            className="w-auto"
-                            value={sortOption}
-                            onChange={(e) => setSortOption((e.target as HTMLSelectElement).value as SortOption)}
-                        >
-                            {SORT_OPTIONS.map((option) => (
-                                <option key={option.value} value={option.value}>
-                                    {t(option.labelKey)}
-                                </option>
-                            ))}
-                        </Form.Select>
+                    <div className="d-flex flex-column gap-3">
+                        <div className="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
+                            <h5 className="mb-0">{t("tokens.existing_tokens")}</h5>
+                            <Form.Select
+                                className="w-auto"
+                                value={sortOption}
+                                onChange={(e) => setSortOption((e.target as HTMLSelectElement).value as SortOption)}
+                            >
+                                {SORT_OPTIONS.map((option) => (
+                                    <option key={option.value} value={option.value}>
+                                        {t(option.labelKey)}
+                                    </option>
+                                ))}
+                            </Form.Select>
+                        </div>
+                        <Form.Control
+                            type="search"
+                            className="mb-2"
+                            placeholder={t("tokens.search_placeholder")}
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery((e.target as HTMLInputElement).value)}
+                        />
                     </div>
                 </Card.Header>
                 <Card.Body>
-                    {sortedTokens.map((token, index) => {
+                    {filteredTokens.length === 0 ? (
+                        <p className="text-muted fst-italic mb-0">
+                            {searchQuery.trim() ? t("tokens.no_tokens_search") : t("tokens.no_tokens")}
+                        </p>
+                    ) : filteredTokens.map((token, index) => {
                         const isUsed = token.use_once && token.lastUsedAt !== null;
                         const statusVariant = isUsed ? "danger" : (token.use_once ? "success" : "warning");
                         const statusText = isUsed ? t("tokens.used") : (token.use_once ? t("tokens.use_once") : t("tokens.reusable"));
 
                         return (
-                            <div key={token.id} className={`token-item ${index !== sortedTokens.length - 1 ? 'mb-4' : ''}`}>
+                            <div key={token.id} className={`token-item ${index !== filteredTokens.length - 1 ? 'mb-4' : ''}`}>
                                 <div className="d-flex justify-content-between align-items-start mb-2">
                                     <div>
                                         <h6 className={`mb-1 fw-bold ${isUsed ? 'text-muted' : ''}`}>{token.name}</h6>
@@ -373,7 +398,7 @@ export function Tokens() {
                                         {t("tokens.delete")}
                                     </Button>
                                 </div>
-                                {index !== sortedTokens.length - 1 && <hr className="mt-3" />}
+                                {index !== filteredTokens.length - 1 && <hr className="mt-3" />}
                             </div>
                         );
                     })}
diff --git a/frontend/src/pages/__tests__/Tokens.test.tsx b/frontend/src/pages/__tests__/Tokens.test.tsx
@@ -1,5 +1,5 @@
-import { render, screen, waitFor, fireEvent } from '@testing-library/preact';
-import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
+import { render, screen, waitFor, fireEvent, cleanup } from '@testing-library/preact';
+import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from 'vitest';
 
 vi.mock('argon2-browser', () => ({
   hash: vi.fn(async () => ({ hash: new Uint8Array([1, 2, 3]) })),
@@ -26,17 +26,52 @@ describe('Tokens Component', () => {
 
   let fetchClient: typeof import('../../utils').fetchClient;
   let showAlert: Mock;
+  let restoreIntervalMocks: (() => void) | null = null;
 
   beforeEach(async () => {
     vi.clearAllMocks();
 
+    const originalSetInterval = globalThis.setInterval;
+    const originalClearInterval = globalThis.clearInterval;
+    globalThis.setInterval = ((handler: (...args: unknown[]) => void) => {
+      return { __fake: 'interval' } as unknown as NodeJS.Timeout;
+    }) as typeof setInterval;
+    globalThis.clearInterval = (() => undefined) as typeof clearInterval;
+    restoreIntervalMocks = () => {
+      globalThis.setInterval = originalSetInterval;
+      globalThis.clearInterval = originalClearInterval;
+    };
+
     const utils = await import('../../utils');
     fetchClient = utils.fetchClient;
+    (fetchClient.GET as unknown as Mock).mockImplementation((path: string) => {
+      if (path === '/user/me') {
+        return Promise.resolve({
+          data: mockUserData,
+          error: null,
+          response: { status: 200 },
+        });
+      }
+      if (path === '/user/get_authorization_tokens') {
+        return Promise.resolve({
+          data: { tokens: [] },
+          error: null,
+          response: { status: 200 },
+        });
+      }
+      return Promise.resolve({ data: null, error: 'Not found', response: { status: 404 } });
+    });
 
     const alertModule = await import('../../components/Alert');
     showAlert = alertModule.showAlert as unknown as Mock;
   });
 
+  afterEach(() => {
+    cleanup();
+    restoreIntervalMocks?.();
+    restoreIntervalMocks = null;
+  });
+
   it('renders loading spinner initially', () => {
     render(<Tokens />);
     expect(screen.getByText('Loading...')).toBeTruthy();
@@ -161,4 +196,75 @@ describe('Tokens Component', () => {
       expect(getTokenNames()).toEqual(['Charlie', 'Bravo', 'Alpha']);
     });
   });
+
+  it('filters tokens using the search field', async () => {
+    const base64 = Base64 as unknown as { toUint8Array: Mock };
+    const encoder = new TextEncoder();
+    base64.toUint8Array.mockImplementation((value: string) => encoder.encode(value));
+
+    const libsodium = sodium as unknown as { crypto_box_seal_open: Mock };
+    libsodium.crypto_box_seal_open.mockImplementation((binary: Uint8Array) => binary);
+
+    (fetchClient.GET as unknown as Mock).mockImplementation((path: string) => {
+      if (path === '/user/me') {
+        return Promise.resolve({
+          data: mockUserData,
+          error: null,
+          response: { status: 200 },
+        });
+      }
+      if (path === '/user/get_authorization_tokens') {
+        return Promise.resolve({
+          data: {
+            tokens: [
+              { token: 'token-alpha', use_once: false, id: '1', name: 'Alpha', created_at: 1_000, last_used_at: null },
+              { token: 'token-bravo', use_once: false, id: '2', name: 'Bravo', created_at: 2_000, last_used_at: 1_900 },
+              { token: 'token-charlie', use_once: false, id: '3', name: 'Charlie', created_at: 1_500, last_used_at: 1_950 },
+            ],
+          },
+          error: null,
+          response: { status: 200 },
+        });
+      }
+      return Promise.resolve({ data: null, error: 'Not found', response: { status: 404 } });
+    });
+
+    render(<Tokens />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('tokens.search_label')).toBeTruthy();
+    });
+
+    const getTokenNames = () => screen
+      .queryAllByRole('heading', { level: 6 })
+      .map((heading) => heading.textContent?.trim())
+      .filter(Boolean);
+
+    await waitFor(() => {
+      expect(getTokenNames()).toEqual(['Bravo', 'Charlie', 'Alpha']);
+    });
+
+    const searchInput = screen.getByLabelText('tokens.search_label');
+    const changeSearch = (value: string) => fireEvent.change(searchInput, { target: { value } });
+
+    changeSearch('char');
+    await waitFor(() => {
+      expect(getTokenNames()).toEqual(['Charlie']);
+    });
+
+    changeSearch('brav');
+    await waitFor(() => {
+      expect(getTokenNames()).toEqual(['Bravo']);
+    });
+
+    changeSearch('zzz');
+    await waitFor(() => {
+      expect(screen.getByText('tokens.no_tokens_search')).toBeTruthy();
+    });
+
+    changeSearch('');
+    await waitFor(() => {
+      expect(getTokenNames()).toEqual(['Bravo', 'Charlie', 'Alpha']);
+    });
+  });
 });
