From d0b717a128c5006aaab431cfb3d6dd31428001a2 Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@shootify.io>
Date: Mon, 24 Nov 2025 18:54:05 +0100
Subject: [PATCH] Enhance demo mode credential validation and refine MSW
 configuration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 .../src/components/demo/DemoModeBanner.tsx    |  4 ++-
 frontend/src/mocks/browser.ts                 | 27 +++++++++++++++++--
 frontend/src/mocks/data/users.ts              | 21 +++++++++------
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/demo/DemoModeBanner.tsx b/frontend/src/components/demo/DemoModeBanner.tsx
index 7d648da..b7a2401 100644
--- a/frontend/src/components/demo/DemoModeBanner.tsx
+++ b/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>{' '}
diff --git a/frontend/src/mocks/browser.ts b/frontend/src/mocks/browser.ts
index 1814b8f..6a9af04 100644
--- a/frontend/src/mocks/browser.ts
+++ b/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');
diff --git a/frontend/src/mocks/data/users.ts b/frontend/src/mocks/data/users.ts
index c3ff9b0..a5c77e5 100644
--- a/frontend/src/mocks/data/users.ts
+++ b/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
-  if (email === 'demo@example.com' && password === 'DemoPass123') {
-    return demoUser;
+  // Demo user - accept documented password or any password >= 8 chars
+  if (email === 'demo@example.com') {
+    if (password === 'DemoPass123' || password.length >= 8) {
+      return demoUser;
+    }
   }
 
-  // Demo admin
-  if (email === 'admin@example.com' && password === 'AdminPass123') {
-    return demoAdmin;
+  // Demo admin - accept documented password or any password >= 8 chars
+  if (email === 'admin@example.com') {
+    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;
   }