frontend/tokens: Dont require name for token

fix #230

Author: ffreddow

frontend/src/pages/Tokens.tsx

@@ -133,7 +133,24 @@ export function Tokens() {
         e.preventDefault();
         try {
             await sodium.ready;
-            const encryptedTokenName = sodium.crypto_box_seal(tokenName, pub_key as Uint8Array);
+            // Generate automatic name if empty
+            let finalTokenName = tokenName.trim();
+            if (finalTokenName === "") {
+                // Find the highest existing "Token-N" number
+                let maxTokenNumber = 0;
+                const tokenPattern = /^Token-(\d+)$/;
+                for (const token of tokens) {
+                    const match = token.name.match(tokenPattern);
+                    if (match) {
+                        const num = parseInt(match[1], 10);
+                        if (num > maxTokenNumber) {
+                            maxTokenNumber = num;
+                        }
+                    }
+                }
+                finalTokenName = `Token-${maxTokenNumber + 1}`;
+            }
+            const encryptedTokenName = sodium.crypto_box_seal(finalTokenName, pub_key as Uint8Array);
             const { data, response, error } = await fetchClient.POST('/user/create_authorization_token', {
                 body: { use_once: useOnce, name: Base64.fromUint8Array(encryptedTokenName) },
                 credentials: 'same-origin'
@@ -146,7 +163,7 @@ export function Tokens() {
                 token: await buildToken(user, data),
                 use_once: data.use_once,
                 id: data.id,
-                name: tokenName,
+                name: finalTokenName,
                 createdAt: new Date(data.created_at * 1000),
                 lastUsedAt: data.last_used_at ? new Date(data.last_used_at * 1000) : null,
             };
@@ -212,9 +229,11 @@ export function Tokens() {
                                 type="text"
                                 placeholder={t("tokens.name_placeholder")}
                                 value={tokenName}
-                                required
                                 onChange={(e) => setTokenName((e.target as HTMLInputElement).value)}
                             />
+                            <Form.Text className="text-muted small">
+                                {t("tokens.name_auto_generate")}
+                            </Form.Text>
                         </Form.Group>
                         <div className="d-flex align-items-center justify-content-between">
                             <Form.Check

frontend/src/pages/__tests__/Tokens.test.tsx

@@ -0,0 +1,101 @@
+import { render, screen, waitFor } from '@testing-library/preact';
+import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
+import { Tokens } from '../Tokens';
+
+/**
+ * Tests for the Tokens component
+ *
+ * This component manages authorization tokens for the application.
+ * It handles token creation, display, and deletion.
+ */
+describe('Tokens Component', () => {
+  const mockUserData = {
+    id: 'user-123',
+    name: 'John Doe',
+    email: '[email protected]',
+    has_old_charger: false,
+  };
+
+  let fetchClient: typeof import('../../utils').fetchClient;
+  let showAlert: Mock;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+
+    const utils = await import('../../utils');
+    fetchClient = utils.fetchClient;
+
+    const alertModule = await import('../../components/Alert');
+    showAlert = alertModule.showAlert as unknown as Mock;
+  });
+
+  it('renders loading spinner initially', () => {
+    (fetchClient.GET as unknown as Mock).mockImplementation(() =>
+      new Promise(() => {}) // Never resolves
+    );
+
+    render(<Tokens />);
+    expect(screen.getByText('Loading...')).toBeTruthy();
+  });
+
+  it('renders component after successful data fetch', async () => {
+    (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 } });
+    });
+
+    render(<Tokens />);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Loading...')).toBeNull();
+    }, { timeout: 2000 });
+
+    expect(screen.getByText('tokens.create_token')).toBeTruthy();
+  });
+
+  it('shows error when user fetch fails', async () => {
+    (fetchClient.GET as unknown as Mock).mockImplementation((path: string) => {
+      if (path === '/user/me') {
+        return Promise.resolve({ data: null, error: 'Error', response: { status: 400 } });
+      }
+      return Promise.resolve({ data: { tokens: [] }, error: null, response: { status: 200 } });
+    });
+
+    render(<Tokens />);
+
+    await waitFor(() => {
+      expect(showAlert).toHaveBeenCalledWith('tokens.fetch_user_failed', 'danger');
+    }, { timeout: 2000 });
+  });
+
+  it('shows error when tokens fetch fails', async () => {
+    (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: null, error: 'Error', response: { status: 400 } });
+      }
+      return Promise.resolve({ data: null, error: 'Not found', response: { status: 404 } });
+    });
+
+    render(<Tokens />);
+
+    await waitFor(() => {
+      expect(showAlert).toHaveBeenCalledWith('tokens.fetch_tokens_failed', 'danger');
+    }, { timeout: 2000 });
+  });
+});