Add missing password protection files

- Add PasswordProtection component (tsx and css)
- Add password_auth middleware
- Fix HF Spaces build error

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

backend/app/middleware/password_auth.py

@@ -0,0 +1,56 @@
+from fastapi import Request, HTTPException, status
+from fastapi.responses import JSONResponse
+from starlette.middleware.base import BaseHTTPMiddleware
+from app.config.settings import get_settings
+import logging
+
+logger = logging.getLogger(__name__)
+
+class PasswordProtectionMiddleware(BaseHTTPMiddleware):
+    """
+    Middleware to protect API endpoints with password verification
+    """
+    
+    def __init__(self, app):
+        super().__init__(app)
+        self.settings = get_settings()
+        
+        # Endpoints that don't require password protection
+        self.exempt_paths = {
+            "/api/verify-password",
+            "/health",
+            "/api/health",
+            "/docs",
+            "/openapi.json",
+            "/redoc"
+        }
+    
+    async def dispatch(self, request: Request, call_next):
+        # Skip protection for exempt paths
+        if request.url.path in self.exempt_paths:
+            return await call_next(request)
+        
+        # Skip protection for non-API paths (static files, frontend)
+        if not request.url.path.startswith("/api/"):
+            return await call_next(request)
+        
+        # Skip protection for OPTIONS requests (CORS preflight)
+        if request.method == "OPTIONS":
+            return await call_next(request)
+        
+        # Check for password verification in session/headers
+        password_verified = request.headers.get("X-Password-Verified")
+        
+        if password_verified != "true":
+            return JSONResponse(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                content={
+                    "success": False,
+                    "error": {
+                        "code": "PASSWORD_REQUIRED",
+                        "message": "Password verification required to access this endpoint"
+                    }
+                }
+            )
+        
+        return await call_next(request)

frontend/src/components/PasswordProtection.css

@@ -0,0 +1,127 @@
+.password-protection {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+}
+
+.password-container {
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+}
+
+.password-header {
+  margin-bottom: 30px;
+}
+
+.password-header h1 {
+  color: #2c3e50;
+  font-size: 2rem;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+.password-header p {
+  color: #7f8c8d;
+  font-size: 1rem;
+  margin: 0;
+}
+
+.password-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.password-input-group {
+  text-align: left;
+}
+
+.password-input-group label {
+  display: block;
+  color: #2c3e50;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.password-input-group input {
+  width: 100%;
+  padding: 14px 16px;
+  border: 2px solid #e1e8ed;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.password-input-group input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.password-input-group input:disabled {
+  background-color: #f8f9fa;
+  cursor: not-allowed;
+}
+
+.password-error {
+  background-color: #fee;
+  border: 1px solid #f5c6cb;
+  color: #721c24;
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 0.9rem;
+}
+
+.password-submit {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 14px 24px;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.password-submit:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+.password-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.password-footer {
+  margin-top: 30px;
+  color: #95a5a6;
+}
+
+.password-footer small {
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
+@media (max-width: 480px) {
+  .password-container {
+    padding: 30px 20px;
+    margin: 20px;
+  }
+  
+  .password-header h1 {
+    font-size: 1.75rem;
+  }
+}

frontend/src/components/PasswordProtection.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from 'react';
+import './PasswordProtection.css';
+import { gradingApi } from '../api/grading';
+
+interface PasswordProtectionProps {
+  onPasswordCorrect: () => void;
+}
+
+const PasswordProtection: React.FC<PasswordProtectionProps> = ({ onPasswordCorrect }) => {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  // 檢查是否已經有有效的密碼 session
+  useEffect(() => {
+    const savedPassword = sessionStorage.getItem('app_password_verified');
+    if (savedPassword === 'true') {
+      onPasswordCorrect();
+    }
+  }, [onPasswordCorrect]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!password.trim()) {
+      setError('請輸入密碼');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      // 發送密碼驗證請求到後端
+      const data = await gradingApi.verifyPassword(password);
+
+      if (data.success) {
+        // 密碼正確，保存到 sessionStorage
+        sessionStorage.setItem('app_password_verified', 'true');
+        onPasswordCorrect();
+      } else {
+        setError(data.message || '密碼錯誤，請重試');
+      }
+    } catch (err) {
+      console.error('Password verification error:', err);
+      setError('驗證失敗，請檢查網路連線');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="password-protection">
+      <div className="password-container">
+        <div className="password-header">
+          <h1>🔒 AI 批改平台</h1>
+          <p>請輸入存取密碼以繼續使用</p>
+        </div>
+        
+        <form onSubmit={handleSubmit} className="password-form">
+          <div className="password-input-group">
+            <label htmlFor="password">存取密碼</label>
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="請輸入密碼"
+              disabled={loading}
+              autoFocus
+            />
+          </div>
+          
+          {error && (
+            <div className="password-error">
+              {error}
+            </div>
+          )}
+          
+          <button 
+            type="submit" 
+            className="password-submit"
+            disabled={loading || !password.trim()}
+          >
+            {loading ? '驗證中...' : '進入平台'}
+          </button>
+        </form>
+        
+        <div className="password-footer">
+          <p>
+            <small>
+              此平台需要密碼保護以確保使用安全性
+              <br />
+              如需協助，請聯絡管理員
+            </small>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PasswordProtection;