Enhance demo mode credential validation and refine MSW configuration

- Updated demo credential logic to accept any password ≥8 characters for improved UX.
- Improved MSW configuration to ignore non-API requests and warn only for unhandled API calls.
- Adjusted `DemoModeBanner` to reflect updated password requirements for demo credentials.

frontend/src/components/demo/DemoModeBanner.tsx

@@ -43,7 +43,9 @@ export function DemoModeBanner() {
             </p>
           </div>
           <div className="space-y-2">
-            <p className="text-xs font-medium text-muted-foreground">Demo Credentials:</p>
+            <p className="text-xs font-medium text-muted-foreground">
+              Demo Credentials (any password ≥8 chars works):
+            </p>
             <div className="space-y-1.5">
               <code className="block rounded bg-muted px-2 py-1.5 text-xs font-mono">
                 <span className="text-muted-foreground">user:</span>{' '}

frontend/src/mocks/browser.ts

@@ -53,14 +53,37 @@ export async function startMockServiceWorker() {
 
   try {
     await worker.start({
-      onUnhandledRequest: 'warn', // Warn about unmocked requests
+      // Only intercept requests to the API, bypass everything else (Next.js routes, etc.)
+      onUnhandledRequest(request, print) {
+        // Ignore Next.js internal requests
+        const url = new URL(request.url);
+        if (
+          url.pathname.startsWith('/_next') ||
+          url.pathname.startsWith('/__next') ||
+          url.pathname.startsWith('/api/') ||
+          url.pathname === '/favicon.ico' ||
+          url.pathname.match(/\.(js|css|png|jpg|svg|woff|woff2)$/)
+        ) {
+          return;
+        }
+
+        // Ignore locale routes (Next.js i18n)
+        if (url.pathname === '/en' || url.pathname === '/it' || url.pathname.startsWith('/en/') || url.pathname.startsWith('/it/')) {
+          return;
+        }
+
+        // Only warn about actual API requests we might have missed
+        if (url.hostname.includes('localhost') && url.port === '8000') {
+          print.warning();
+        }
+      },
       serviceWorker: {
         url: '/mockServiceWorker.js',
       },
     });
 
     console.log('%c[MSW] Demo Mode Active', 'color: #00bfa5; font-weight: bold;');
-    console.log('[MSW] All API calls are mocked (no backend required)');
+    console.log('[MSW] All API calls to localhost:8000 are mocked');
     console.log('[MSW] Demo credentials:');
     console.log('  Regular user: demo@example.com / DemoPass123');
     console.log('  Admin user: admin@example.com / AdminPass123');

frontend/src/mocks/data/users.ts

@@ -117,21 +117,26 @@ export function updateCurrentUser(updates: Partial<UserResponse>) {
 
 /**
  * Validate demo credentials
+ * In demo mode, we're lenient with passwords to improve UX
  */
 export function validateCredentials(email: string, password: string): UserResponse | null {
-  // Demo user
+  // Demo user - accept documented password or any password >= 8 chars
-  if (email === 'demo@example.com' && password === 'DemoPass123') {
+  if (email === 'demo@example.com') {
-    return demoUser;
+    if (password === 'DemoPass123' || password.length >= 8) {
+      return demoUser;
+    }
   }
 
-  // Demo admin
+  // Demo admin - accept documented password or any password >= 8 chars
-  if (email === 'admin@example.com' && password === 'AdminPass123') {
+  if (email === 'admin@example.com') {
-    return demoAdmin;
+    if (password === 'AdminPass123' || password.length >= 8) {
+      return demoAdmin;
+    }
   }
 
-  // Sample users (generic password for demo)
+  // Sample users - accept any valid password (it's a demo!)
   const user = sampleUsers.find((u) => u.email === email);
-  if (user && password === 'DemoPass123') {
+  if (user && password.length >= 8) {
     return user;
   }