feat: api key authentication (#291)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/tests/api-key.spec.ts

@@ -0,0 +1,70 @@
+// frontend/tests/api-key.spec.ts
+import { expect, test } from '@playwright/test';
+import { apiKeys } from './data';
+import { cleanupBackend } from './utils/cleanup.util';
+
+test.describe('API Key Management', () => {
+	test.beforeEach(async ({ page }) => {
+		await cleanupBackend()
+		await page.goto('/settings/admin/api-keys');
+	});
+
+	test('Create new API key', async ({ page }) => {
+		await page.getByRole('button', { name: 'Add API Key' }).click();
+
+		// Fill out the API key form
+		const name = 'New Test API Key';
+		await page.getByLabel('Name').fill(name);
+		await page.getByLabel('Description').fill('Created by automated test');
+
+		// Choose the date
+		const currentDate = new Date();
+		await page.getByLabel('Expires At').click();
+		await page.getByLabel('Select year').click();
+		// Select the next year
+		await page.getByText((currentDate.getFullYear() + 1).toString()).click();
+		// Select the first day of the month
+		await page
+			.getByRole('button', { name: /([A-Z][a-z]+), ([A-Z][a-z]+) 1, (\d{4})/ })
+			.first()
+			.click();
+
+		// Submit the form
+		await page.getByRole('button', { name: 'Save' }).click();
+
+		// Verify the success dialog appears
+		await expect(page.getByRole('heading', { name: 'API Key Created' })).toBeVisible();
+
+		// Verify the key details are shown
+		await expect(page.getByRole('cell', { name })).toBeVisible();
+
+		// Verify the token is displayed (should be 32 characters)
+		const token = await page.locator('.font-mono').textContent();
+		expect(token?.length).toBe(32);
+
+		// Close the dialog
+		await page.getByRole('button', { name: 'Close' }).click();
+
+		await page.reload();
+
+		// Verify the key appears in the list
+		await expect(page.getByRole('cell', { name }).first()).toContainText(name);
+	});
+
+	test('Revoke API key', async ({ page }) => {
+		const apiKey = apiKeys[0];
+
+		await page
+			.getByRole('row', { name: apiKey.name })
+			.getByRole('button', { name: 'Revoke' })
+			.click();
+
+		await page.getByText('Revoke', { exact: true }).click();
+
+		// Verify success message
+		await expect(page.getByRole('status')).toHaveText('API key revoked successfully');
+
+		// Verify key is no longer in the list
+		await expect(page.getByRole('cell', { name: apiKey.name })).not.toBeVisible();
+	});
+});