Add embedded Dev Quick Login to Login Page

frontend/src/components/DevQuickLogin.tsx

@@ -3,7 +3,7 @@ import apiClient from '../api/client';
 import { setCookie } from '../utils/cookies';
 import { useQueryClient } from '@tanstack/react-query';
 
-interface TestUser {
+export interface TestUser {
   username: string;
   password: string;
   role: string;
@@ -70,7 +70,11 @@ const testUsers: TestUser[] = [
   },
 ];
 
-export function DevQuickLogin() {
+interface DevQuickLoginProps {
+  embedded?: boolean;
+}
+
+export function DevQuickLogin({ embedded = false }: DevQuickLoginProps) {
   const queryClient = useQueryClient();
   const [loading, setLoading] = useState<string | null>(null);
   const [isMinimized, setIsMinimized] = useState(false);
@@ -98,15 +102,15 @@ export function DevQuickLogin() {
 
       // Reload page to trigger auth flow
       window.location.reload();
-    } catch (error) {
+    } catch (error: any) {
       console.error('Quick login failed:', error);
-      alert(`Failed to login as ${user.label}: ${error.message}`);
+      alert(`Failed to login as ${user.label}: ${error.message || 'Unknown error'}`);
     } finally {
       setLoading(null);
     }
   };
 
-  if (isMinimized) {
+  if (!embedded && isMinimized) {
     return (
       <div className="fixed bottom-4 right-4 z-50">
         <button
@@ -119,19 +123,25 @@ export function DevQuickLogin() {
     );
   }
 
+  const containerClasses = embedded
+    ? "w-full bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mt-6"
+    : "fixed bottom-4 right-4 z-50 bg-white rounded-lg shadow-2xl border-2 border-gray-300 p-4 max-w-md";
+
   return (
-    <div className="fixed bottom-4 right-4 z-50 bg-white rounded-lg shadow-2xl border-2 border-gray-300 p-4 max-w-md">
+    <div className={containerClasses}>
       <div className="flex items-center justify-between mb-3">
-        <h3 className="font-bold text-gray-800 flex items-center gap-2">
+        <h3 className="font-bold text-gray-800 dark:text-white flex items-center gap-2">
           <span>🔓</span>
           <span>Quick Login (Dev Only)</span>
         </h3>
-        <button
-          onClick={() => setIsMinimized(true)}
-          className="text-gray-500 hover:text-gray-700 text-xl leading-none"
-        >
-          ×
-        </button>
+        {!embedded && (
+          <button
+            onClick={() => setIsMinimized(true)}
+            className="text-gray-500 hover:text-gray-700 text-xl leading-none"
+          >
+            ×
+          </button>
+        )}
       </div>
 
       <div className="grid grid-cols-2 gap-2">
@@ -172,8 +182,8 @@ export function DevQuickLogin() {
         ))}
       </div>
 
-      <div className="mt-3 text-xs text-gray-500 text-center">
-        Password for all: <code className="bg-gray-100 px-1 rounded">test123</code>
+      <div className="mt-3 text-xs text-gray-500 dark:text-gray-400 text-center">
+        Password for all: <code className="bg-gray-100 dark:bg-gray-700 px-1 rounded">test123</code>
       </div>
     </div>
   );

frontend/src/pages/LoginPage.tsx

@@ -10,6 +10,7 @@ import { useNavigate } from 'react-router-dom';
 import SmoothScheduleLogo from '../components/SmoothScheduleLogo';
 import OAuthButtons from '../components/OAuthButtons';
 import LanguageSelector from '../components/LanguageSelector';
+import { DevQuickLogin } from '../components/DevQuickLogin';
 import { AlertCircle, Loader2, User, Lock, ArrowRight } from 'lucide-react';
 
 const LoginPage: React.FC = () => {
@@ -240,6 +241,9 @@ const LoginPage: React.FC = () => {
           <div className="mt-8 flex justify-center">
             <LanguageSelector />
           </div>
+          
+          {/* Dev Quick Login */}
+          <DevQuickLogin embedded />
         </div>
       </div>
     </div>