gmail 顯示畫面調整

models.py

@@ -263,7 +263,7 @@ def record_log(ip, cookie, account, role, action, status, time_mode, custom_time
                     from security import trigger_identity_verification
                     from config import FIXED_TEST_EMAIL
                     # 以帳戶名稱作為識別 key，信件收件人統一使用 FIXED_TEST_EMAIL
-                    trigger_identity_verification(account, FIXED_TEST_EMAIL, log_time)
+                    trigger_identity_verification(account, FIXED_TEST_EMAIL, log_time, reason=status)
                     print(f"🚨 [Security Alert Triggered] Account: {account}, Status: {status}")
                 except Exception as e:
                     print(f"❌ [Security Alert Error] {e}")

security.py

@@ -16,7 +16,7 @@ import os
 from config import SMTP_CONFIG, FIXED_TEST_EMAIL, RESEND_API_KEY, EMAIL_PROVIDER
 from auth import _get_or_create_session_entry, session_cache_lock, session_cache, _verify_token_to_user
 from utils import get_current_time
-from fastapi.responses import JSONResponse
+from fastapi.responses import JSONResponse, HTMLResponse
 
 def _send_via_resend(recipient_email: str, subject: str, html_body: str) -> bool:
     """
@@ -102,12 +102,14 @@ def _send_via_smtp(recipient_email: str, subject: str, html_body: str) -> bool:
         return False
 
 
-def send_security_alert(recipient_email: str, verify_token: str, account_name: str = ""):
+def send_security_alert(recipient_email: str, verify_token: str, account_name: str = "", anomaly_timestamp: str = "", reason: str = ""):
     """
     當偵測到異常時，發送包含兩個鏈接的郵件：
     - 這是我本人（信任）
     - 這不是我（封鎖）
     account_name: 觸發異常的帳戶名稱（用於顯示在信件中）
+    anomaly_timestamp: 異常發生的時間
+    reason: 異常原因
 
     發送優先順序：
       1. Resend（若 RESEND_API_KEY 已設定，適合 HF 部署）
@@ -124,21 +126,75 @@ def send_security_alert(recipient_email: str, verify_token: str, account_name: s
     print(f"🔗 [Security Alert] account={account_name}, block_url={block_url}")
     print(f"📧 [Security Alert] 使用發送方式: {EMAIL_PROVIDER.upper()}")
 
-    # 帳號顯示名稱（若有提供則加入說明）
-    account_info = f"<p><strong>⚠️ 警示帳號：{account_name}</strong></p>" if account_name else ""
+    # 計算有效截止時間 (5分鐘後)
+    expiration_time = ""
+    if anomaly_timestamp:
+        try:
+            ts_str = anomaly_timestamp.strip()
+            dt = datetime.datetime.strptime(ts_str, "%Y-%m-%d %H:%M:%S")
+            exp_dt = dt + datetime.timedelta(minutes=5)
+            expiration_time = exp_dt.strftime("%Y-%m-%d %H:%M:%S")
+        except Exception:
+            try:
+                import pandas as pd
+                dt = pd.to_datetime(ts_str).to_pydatetime()
+                exp_dt = dt + datetime.timedelta(minutes=5)
+                expiration_time = exp_dt.strftime("%Y-%m-%d %H:%M:%S")
+            except Exception:
+                expiration_time = "收到信件後 5 分鐘內"
+    else:
+        now_dt = datetime.datetime.now(datetime.timezone(datetime.timedelta(hours=8)))
+        anomaly_timestamp = now_dt.strftime("%Y-%m-%d %H:%M:%S")
+        expiration_time = (now_dt + datetime.timedelta(minutes=5)).strftime("%Y-%m-%d %H:%M:%S")
+
+    # 清理原因前綴
+    clean_reason = reason.lstrip("⚠️").replace("異常_", "") if reason else "偵測到異常操作行為"
 
     subject = f"[數位保鏢] 安全提醒：帳號 {account_name} 偵測到異常操作" if account_name else "安全提醒：請確認是否為本人操作"
     html_body = f"""
-    <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;">
-        <h2 style="color: #d32f2f;">🔐 數位保鏢安全警示通知</h2>
-        {account_info}
-        <p>系統偵測到此帳號可能發生異常登入或操作行為，請確認是否為本人所為。</p>
-        <p>請於 <strong>5 分鐘內</strong> 點選以下其中一項進行確認：</p>
-        <div style="margin: 20px 0;">
-            <a href="{trust_url}" style="display: inline-block; padding: 12px 24px; background-color: #2e7d32; color: white; text-decoration: none; border-radius: 6px; margin-right: 12px;">✅ 這是我本人（繼續使用）</a>
-            <a href="{block_url}" style="display: inline-block; padding: 12px 24px; background-color: #c62828; color: white; text-decoration: none; border-radius: 6px;">🚫 這不是我（立即封鎖）</a>
+    <div style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; max-width: 550px; margin: 0 auto; padding: 25px; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); background-color: #ffffff;">
+        <div style="text-align: center; margin-bottom: 20px;">
+            <h2 style="color: #dc2626; margin: 0 0 10px 0; font-size: 22px;">🔐 數位保鏢安全警示通知</h2>
+            <div style="height: 3px; background: linear-gradient(90deg, #ef4444, #f87171); border-radius: 2px;"></div>
         </div>
-        <p style="color: #757575; font-size: 12px;">若您未主動進行任何操作，請立即點選「這不是我（立即封鎖）」以保護帳號安全。逾時未確認將自動封鎖帳號。</p>
+        
+        <p style="color: #374151; font-size: 15px; line-height: 1.6;">
+            系統偵測到您的帳號發生異常登入或敏感操作行為。為了保護您的帳戶安全，已暫時限制您的操作，請確認此行為是否為本人所為：
+        </p>
+
+        <!-- Information Table Card -->
+        <div style="background-color: #f9fafb; border-left: 4px solid #dc2626; padding: 15px; margin: 20px 0; border-radius: 6px;">
+            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
+                <tr>
+                    <td style="padding: 6px 0; color: #6b7280; width: 110px; font-weight: bold;">⚠️ 警示帳號：</td>
+                    <td style="padding: 6px 0; color: #111827; font-weight: bold;">{account_name}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 6px 0; color: #6b7280; font-weight: bold;">🕒 發生時間：</td>
+                    <td style="padding: 6px 0; color: #111827;">{anomaly_timestamp}</td>
+                </tr>
+                <tr>
+                    <td style="padding: 6px 0; color: #6b7280; font-weight: bold;">⏳ 信件有效期：</td>
+                    <td style="padding: 6px 0; color: #b91c1c; font-weight: bold;">{expiration_time} (5 分鐘內有效)</td>
+                </tr>
+                <tr>
+                    <td style="padding: 6px 0; color: #6b7280; font-weight: bold;">🔍 異常原因：</td>
+                    <td style="padding: 6px 0; color: #111827; font-weight: bold;">{clean_reason}</td>
+                </tr>
+            </table>
+        </div>
+
+        <!-- Verification Actions -->
+        <div style="margin: 25px 0; text-align: center;">
+            <a href="{trust_url}" style="display: inline-block; padding: 12px 24px; background-color: #16a34a; color: white; text-decoration: none; border-radius: 8px; font-weight: bold; margin-right: 15px; box-shadow: 0 2px 4px rgba(22,163,74,0.2);">✅ 這是我本人（解封）</a>
+            <a href="{block_url}" style="display: inline-block; padding: 12px 24px; background-color: #dc2626; color: white; text-decoration: none; border-radius: 8px; font-weight: bold; box-shadow: 0 2px 4px rgba(220,38,38,0.2);">🚫 這不是我（封鎖）</a>
+        </div>
+
+        <hr style="border: 0; border-top: 1px solid #f3f4f6; margin: 20px 0;">
+        <p style="color: #6b7280; font-size: 12px; line-height: 1.5; margin: 0;">
+            ※ 若您未主動進行任何操作，請立即點選「這不是我（立即封鎖）」以保護帳號安全。<br>
+            ※ 逾時（5 分鐘）未確認，系統將基於安全考量自動封鎖該帳號。
+        </p>
     </div>
     """
     html_body = html_body.replace("\xa0", " ")
@@ -157,11 +213,14 @@ def send_security_alert(recipient_email: str, verify_token: str, account_name: s
 
     return success
 
-def trigger_identity_verification(account_key: str, recipient_email: str, anomaly_timestamp: str):
+
+def trigger_identity_verification(account_key: str, recipient_email: str, anomaly_timestamp: str, reason: str = "偵測到異常操作"):
     """
     觸發身份驗證
     account_key: 用於 session_cache 的識別 key（帳戶名稱）
     recipient_email: 安全警報信件的收件人（統一使用 FIXED_TEST_EMAIL）
+    anomaly_timestamp: 異常發生時間
+    reason: 異常原因
     """
     # 如果已經封鎖，保持更強的決定
     entry = _get_or_create_session_entry(account_key)
@@ -177,20 +236,152 @@ def trigger_identity_verification(account_key: str, recipient_email: str, anomal
         })
 
     # 寄送信件時傳入帳戶名稱，讓收件人知道是哪個帳號觸發警示
-    success = send_security_alert(recipient_email, verify_token, account_name=account_key)
+    success = send_security_alert(recipient_email, verify_token, account_name=account_key, anomaly_timestamp=anomaly_timestamp, reason=reason)
     return verify_token, success
 
+def _render_verification_page(success: bool, title: str, message: str, status_badge: str = ""):
+    icon_class = "success-icon" if success else "error-icon"
+    svg_icon = """
+        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width: 48px; height: 48px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
+    """ if success else """
+        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width: 48px; height: 48px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path></svg>
+    """
+    
+    status_html = ""
+    if status_badge:
+        badge_class = "status-active" if "啟用" in status_badge or "解封" in status_badge else "status-blocked"
+        status_html = f'<div class="status-badge {badge_class}">{status_badge}</div>'
+
+    html = f"""<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數位保鏢 - 身份驗證</title>
+    <style>
+        body {{
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: #f3f4f6;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            color: #1f2937;
+        }}
+        .card {{
+            background-color: #ffffff;
+            border-radius: 16px;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+            padding: 40px 30px;
+            width: 90%;
+            max-width: 400px;
+            text-align: center;
+            box-sizing: border-box;
+        }}
+        .icon-container {{
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            margin: 0 auto 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }}
+        .success-icon {{
+            background-color: #ecfdf5;
+            color: #10b981;
+        }}
+        .error-icon {{
+            background-color: #fef2f2;
+            color: #ef4444;
+        }}
+        h1 {{
+            font-size: 22px;
+            margin: 0 0 12px;
+            font-weight: 700;
+        }}
+        p {{
+            font-size: 14px;
+            color: #4b5563;
+            line-height: 1.6;
+            margin: 0 0 20px;
+        }}
+        .status-badge {{
+            display: inline-block;
+            padding: 6px 16px;
+            border-radius: 20px;
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 24px;
+        }}
+        .status-active {{
+            background-color: #d1fae5;
+            color: #065f46;
+        }}
+        .status-blocked {{
+            background-color: #fee2e2;
+            color: #991b1b;
+        }}
+        .button {{
+            display: inline-block;
+            background-color: #3b82f6;
+            color: #ffffff;
+            text-decoration: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-weight: 600;
+            font-size: 14px;
+            transition: background-color 0.2s;
+            cursor: pointer;
+            border: none;
+            outline: none;
+            width: 100%;
+            box-sizing: border-box;
+        }}
+        .button:hover {{
+            background-color: #2563eb;
+        }}
+        .footer-note {{
+            font-size: 12px;
+            color: #9ca3af;
+            margin-top: 24px;
+            margin-bottom: 0;
+        }}
+    </style>
+</head>
+<body>
+    <div class="card">
+        <div class="icon-container {icon_class}">
+            {svg_icon}
+        </div>
+        <h1>{title}</h1>
+        <p>{message}</p>
+        {status_html}
+        <button onclick="window.close()" class="button">關閉視窗</button>
+        <p class="footer-note">此頁面將於 3 秒後自動嘗試關閉</p>
+    </div>
+    <script>
+        setTimeout(function() {{
+            window.close();
+        }}, 3000);
+    </script>
+</body>
+</html>"""
+    return HTMLResponse(content=html, status_code=200 if success else 400)
+
+
 def verify_identity(token: str, choice: str):
     """郵件鏈接回調處理"""
     token = token.strip()
     user_email = _verify_token_to_user(token)
     if not user_email:
         print(f"❌ [Verification Failed] Invalid token: {token}")
-        return JSONResponse({"ok": False, "error": "Invalid or expired token"}, status_code=400)
+        return _render_verification_page(False, "驗證失敗", "此連結已失效、過期或無效，請確認是否已點擊過。")
 
     # 處理選擇
     choice_norm = choice.lower().strip()
-    active_choices = {"trust", "allow", "yes", "這是我本人（信任）"}
+    active_choices = {"trust", "allow", "yes", "這幕是我本人（信任）", "這是我本人（信任）", "這是我本人（繼續使用）"}
     blocked_choices = {"block", "deny", "blocked", "封鎖", "不是我", "這不是我（封鎖）"}
 
     if choice_norm in active_choices:
@@ -198,24 +389,22 @@ def verify_identity(token: str, choice: str):
     elif choice_norm in blocked_choices:
         next_status = "blocked"
     else:
-        return JSONResponse({"ok": False, "error": "Invalid choice"}, status_code=400)
+        return _render_verification_page(False, "驗證失敗", "無效的操作選項，請重新由警示信件點選。")
 
     with session_cache_lock:
         # 確保 key 經過正規化
         user_email = user_email.strip().replace("\xa0", " ")
         entry = session_cache.get(user_email)
         if not entry:
-            return JSONResponse({"ok": False, "error": "Session not found"}, status_code=404)
+            return _render_verification_page(False, "驗證失敗", "找不到相關的登入會話，可能已被系統清除。")
 
         entry["status"] = next_status
         # Token 是單次使用：決定後清除
         entry["pending_token"] = None
 
-    return {
-        "ok": True,
-        "user_email": user_email,
-        "status": next_status,
-    }
+    status_badge_text = "帳號狀態：已啟用 (解封)" if next_status == "active" else "帳號狀態：已封鎖 (安全防護)"
+    success_msg = f"已成功驗證帳號：{user_email}"
+    return _render_verification_page(True, "身份驗證完成", success_msg, status_badge=status_badge_text)
 
 def test_send_security_alert():
     """
@@ -225,7 +414,7 @@ def test_send_security_alert():
     """
     anomaly_timestamp = datetime.datetime.now(datetime.timezone(datetime.timedelta(hours=8))).strftime("%Y-%m-%d %H:%M:%S")
     # 測試時以 FIXED_TEST_EMAIL 同時作為 account_key 與收件人
-    token, success = trigger_identity_verification(FIXED_TEST_EMAIL, FIXED_TEST_EMAIL, anomaly_timestamp)
+    token, success = trigger_identity_verification(FIXED_TEST_EMAIL, FIXED_TEST_EMAIL, anomaly_timestamp, reason="手動觸發測試警報")
     if not token:
         return {"ok": False, "error": "Already blocked or session not available"}
     return {"ok": True, "user_email": FIXED_TEST_EMAIL, "token": token, "email_sent": success}