client quality/docs (#66)

client/.gitignore

@@ -35,3 +35,6 @@ storybook-static
 /blob-report/
 /playwright/.auth/
 /playwright/.cache/
+
+# Vitest browser failure screenshots
+__screenshots__/

client/e2e/auth.spec.ts

@@ -2,6 +2,10 @@ import { expect, test } from '@playwright/test';
 
 // These tests cover the unauthenticated flows; they run without a saved
 // session (see the 'auth-specs' project in playwright.config.ts).
+// Several of them perform real logins, which overwrite the user's single
+// stored refresh token server-side — so they must not overlap.
+test.describe.configure({ mode: 'serial' });
+
 test.describe('Authentication Flow', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/');
@@ -68,6 +72,48 @@ test.describe('Authentication Flow', () => {
     await expect(page.getByRole('menuitem', { name: /logout/i })).toBeVisible();
   });
 
+  test('should keep the session when logging back in and reloading', async ({
+    page,
+  }) => {
+    const login = async () => {
+      await page.goto('/login');
+      await page.getByLabel(/email/i).fill('test@example.com');
+      await page.getByLabel(/password/i).fill('testpassword');
+      await page.getByRole('button', { name: /login|sign in/i }).click();
+      await expect(page).toHaveURL(/.*\/app/);
+    };
+
+    await login();
+
+    // Log out via the UI, then log back in — all within the same SPA session.
+    await page.getByRole('button', { name: /user menu/i }).click();
+    await page.getByRole('menuitem', { name: /logout/i }).click();
+    await login();
+
+    // A reload must restore the session from the refresh cookie.
+    await page.reload();
+    await expect(page).toHaveURL(/.*\/app/, { timeout: 10_000 });
+    await expect(page.getByRole('button', { name: /user menu/i })).toBeVisible({
+      timeout: 10_000,
+    });
+  });
+
+  test('should not call authenticated logout when bootstrap has no session', async ({
+    page,
+  }) => {
+    const logoutCalls: string[] = [];
+    page.on('request', (req) => {
+      if (req.url().includes('/api/auth/logout')) {
+        logoutCalls.push(req.url());
+      }
+    });
+
+    await page.goto('/login');
+    await expect(page.getByLabel(/email/i)).toBeVisible();
+
+    expect(logoutCalls).toEqual([]);
+  });
+
   test('should register a new account and redirect to login', async ({
     page,
   }) => {

client/src/components/common/NewDocumentFormBody/new-document-form-body.tsx

@@ -64,6 +64,7 @@ export default function NewDocumentFormBody({
               type="text"
               label="Document Title"
               placeholder="New document title"
+              maxLength={200}
               error={errors.title}
               registration={register('title', {
                 required: 'Title is required',

client/src/components/ui/Auth/login-form.tsx

@@ -49,6 +49,7 @@ export default function LoginForm({
           id="email"
           label="Email"
           placeholder="Enter your email"
+          maxLength={254}
           registration={register('email')}
           error={errors.email}
           autoComplete="email"
@@ -59,6 +60,7 @@ export default function LoginForm({
           id="password"
           label="Password"
           placeholder="Enter your password"
+          maxLength={128}
           registration={register('password')}
           error={errors.password}
           autoComplete="current-password"

client/src/components/ui/Auth/register-form.tsx

@@ -46,6 +46,7 @@ export default function RegisterForm({
           id="email"
           label="Email"
           placeholder="Enter your email"
+          maxLength={254}
           registration={register('email')}
           error={errors.email}
           autoComplete="email"
@@ -56,6 +57,7 @@ export default function RegisterForm({
           label="Username"
           id="username"
           placeholder="Enter your username"
+          maxLength={50}
           registration={register('username')}
           error={errors.username}
           autoComplete="username"
@@ -66,6 +68,7 @@ export default function RegisterForm({
           label="Full Name"
           id="fullname"
           placeholder="Enter your full name"
+          maxLength={100}
           registration={register('fullName')}
           error={errors.fullName}
           autoComplete="name"
@@ -76,6 +79,7 @@ export default function RegisterForm({
           id="password"
           label="Password"
           placeholder="Enter your password"
+          maxLength={128}
           registration={register('password')}
           error={errors.password}
           autoComplete="new-password"

client/src/context/auth/auth-provider.tsx

@@ -1,19 +1,29 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-import { api } from '@/lib/api';
+import { api, onSessionExpired, refreshAccessToken } from '@/lib/api';
 import { type User } from '@/types/api';
 import { setAccessToken as storeToken, clearAccessToken } from '@/utils/token';
 
 import { AuthContext } from './auth-context';
 
 /**
- * Session bootstrap: refreshes the token cookie on mount, exposes login/logout and mirrors the token into api defaults and module storage.
+ * Session bootstrap: restores the session from the refresh cookie on mount,
+ * exposes login/logout and mirrors the token into api defaults and module
+ * storage. A failed bootstrap simply means signed out — it never calls the
+ * authenticated logout endpoint.
  */
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const [user, setUser] = useState<User | null>(null);
   const [accessToken, setAccessToken] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
 
+  const markSignedOut = () => {
+    setAccessToken(null);
+    setUser(null);
+    delete api.defaults.headers.common['Authorization'];
+    clearAccessToken();
+  };
+
   const login = (token: string, user: User) => {
     setAccessToken(token);
     setUser(user);
@@ -22,33 +32,32 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   };
 
   const logout = async () => {
-    await api.post('/auth/logout');
-    setAccessToken(null);
-    setUser(null);
-    localStorage.setItem('wasLoggedOut', 'true');
-    delete api.defaults.headers.common['Authorization'];
-    clearAccessToken();
+    // The server may already be unreachable or the session expired; local
+    // cleanup happens either way.
+    try {
+      await api.post('/auth/logout');
+    } catch {
+      // session already dead server-side
+    }
+    markSignedOut();
   };
 
   useEffect(() => {
-    const refresh = async () => {
-      if (localStorage.getItem('wasLoggedOut') === 'true') {
-        localStorage.removeItem('wasLoggedOut');
-        setLoading(false);
-        return;
-      }
+    const bootstrap = async () => {
       try {
-        const res = await api.post('/auth/refresh');
-        const { accessToken, user } = res.data;
+        // Shares the single-flight with the response interceptor, so a
+        // bootstrap racing an in-flight refresh triggers only one request.
+        const { accessToken, user } = await refreshAccessToken();
         login(accessToken, user);
       } catch {
-        logout();
+        markSignedOut();
       } finally {
         setLoading(false);
       }
     };
 
-    refresh();
+    bootstrap();
+    return onSessionExpired(markSignedOut);
   }, []);
 
   if (loading) return null;

client/src/features/Dashboard/components/DocumentCardDropdown/rename-modal.tsx

@@ -85,6 +85,7 @@ export function RenameDocumentModal({
             type="text"
             value={newTitle}
             onChange={(e) => setNewTitle(e.target.value)}
+            maxLength={200}
             className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             placeholder="Enter document title"
             onKeyDown={handleKeyDown}

client/src/features/DocumentPage/components/DocumentHeader/CollaboratorsDropdown/collaborators-dropdown.tsx

@@ -116,6 +116,7 @@ export const CollaboratorsDropdown = ({
                 placeholder="Email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
+                maxLength={254}
                 aria-label="Collaborator email"
                 className="h-8 min-w-0 flex-1 rounded border border-surface-border bg-transparent px-2 text-xs outline-none focus-visible:border-ring"
               />