From 640810c4df2124c9f8ca91c1b66b9445b4358dee Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Fri, 25 Apr 2025 23:30:22 +0800
Subject: [PATCH] update

---
 packages/frontend/src/stores/auth.store.ts    | 32 +++++++++++++++----
 .../frontend/src/stores/settings.store.ts     |  9 ++++++
 packages/frontend/src/views/LoginView.vue     | 24 +++++++-------
 3 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/stores/auth.store.ts b/packages/frontend/src/stores/auth.store.ts
index e3e8771..02d0388 100644
--- a/packages/frontend/src/stores/auth.store.ts
+++ b/packages/frontend/src/stores/auth.store.ts
@@ -26,6 +26,16 @@ interface PublicCaptchaConfig {
     recaptchaSiteKey?: string;
 }
 
+// Backend's full CAPTCHA Settings Interface (as returned by /settings/captcha)
+interface FullCaptchaSettings {
+    enabled: boolean;
+    provider: 'hcaptcha' | 'recaptcha' | 'none';
+    hcaptchaSiteKey?: string;
+    hcaptchaSecretKey?: string; // We won't use this in authStore
+    recaptchaSiteKey?: string;
+    recaptchaSecretKey?: string; // We won't use this in authStore
+}
+
 // Auth Store State 接口
 interface AuthState {
     isAuthenticated: boolean;
@@ -281,19 +291,29 @@ export const useAuthStore = defineStore('auth', {
             }
         },
 
-        // NEW: 获取公共 CAPTCHA 配置
+        // NEW: 获取公共 CAPTCHA 配置 (修改为从 /settings/captcha 获取)
         async fetchCaptchaConfig() {
             // Avoid refetching if already loaded
             if (this.publicCaptchaConfig !== null) return;
 
             // Don't set isLoading for this, it should be quick background fetch
             try {
-                console.log('[AuthStore] Fetching public CAPTCHA config...');
-                const response = await apiClient.get<PublicCaptchaConfig>('/auth/captcha/config');
-                this.publicCaptchaConfig = response.data;
-                console.log('[AuthStore] Public CAPTCHA config loaded:', this.publicCaptchaConfig);
+                console.log('[AuthStore] Fetching CAPTCHA config from /settings/captcha...');
+                // 修改 API 端点
+                const response = await apiClient.get<FullCaptchaSettings>('/settings/captcha');
+                const fullConfig = response.data;
+
+                // 从完整配置中提取公共部分
+                this.publicCaptchaConfig = {
+                    enabled: fullConfig.enabled,
+                    provider: fullConfig.provider,
+                    hcaptchaSiteKey: fullConfig.hcaptchaSiteKey,
+                    recaptchaSiteKey: fullConfig.recaptchaSiteKey,
+                };
+
+                console.log('[AuthStore] Public CAPTCHA config derived from /settings/captcha:', this.publicCaptchaConfig);
             } catch (error: any) {
-                console.error('获取公共 CAPTCHA 配置失败:', error.response?.data?.message || error.message);
+                console.error('获取 CAPTCHA 配置失败 (from /settings/captcha):', error.response?.data?.message || error.message);
                 // Set a default disabled config on error to prevent blocking login UI
                 this.publicCaptchaConfig = {
                     enabled: false,
diff --git a/packages/frontend/src/stores/settings.store.ts b/packages/frontend/src/stores/settings.store.ts
index 396f5d1..88fdd21 100644
--- a/packages/frontend/src/stores/settings.store.ts
+++ b/packages/frontend/src/stores/settings.store.ts
@@ -3,6 +3,7 @@ import apiClient from '../utils/apiClient'; // 使用统一的 apiClient
 import { ref, computed } from 'vue'; // 移除 watch
 import i18n, { setLocale, defaultLng } from '../i18n'; // Import i18n instance and setLocale
 import type { PaneName } from './layout.store'; // +++ Import PaneName type +++
+import { useAuthStore } from './auth.store'; // <--- 导入 authStore
 // Import CAPTCHA types from backend (adjust path if needed, assuming types are mirrored or shared)
 // For now, let's assume they are available via a shared types definition or manually defined here
 // Assuming manual definition for now if no shared types exist:
@@ -49,6 +50,8 @@ interface SettingsState {
 
 
 export const useSettingsStore = defineStore('settings', () => {
+  const authStore = useAuthStore(); // <--- 实例化 authStore
+
   // --- State ---
   const settings = ref<Partial<SettingsState>>({}); // 通用设置状态
   const parsedSidebarPaneWidths = ref<Record<string, string>>({}); // NEW: 解析后的侧边栏宽度对象
@@ -428,6 +431,12 @@ export const useSettingsStore = defineStore('settings', () => {
       }
       console.log('[SettingsStore] CAPTCHA 设置更新成功。');
 
+      // --- 新增：强制 authStore 重新获取配置 ---
+      console.log('[SettingsStore] Triggering authStore to refetch CAPTCHA config...');
+      authStore.publicCaptchaConfig = null; // 重置 authStore 的状态以允许重新获取
+      await authStore.fetchCaptchaConfig(); // 让 authStore 立即获取最新的配置
+      // -----------------------------------------
+
     } catch (err: any) {
       console.error('更新 CAPTCHA 设置失败:', err);
       error.value = err.response?.data?.message || err.message || '更新 CAPTCHA 设置失败';
diff --git a/packages/frontend/src/views/LoginView.vue b/packages/frontend/src/views/LoginView.vue
index e5065ec..ff4852a 100644
--- a/packages/frontend/src/views/LoginView.vue
+++ b/packages/frontend/src/views/LoginView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, computed } from 'vue'; // Import onMounted, computed
+import { reactive, ref, onMounted, computed } from 'vue'; // computed 已导入
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../stores/auth.store';
@@ -25,24 +25,24 @@ const hcaptchaWidget = ref<InstanceType<typeof VueHcaptcha> | null>(null); // NE
 // --- reCAPTCHA v3 Initialization ---
 const recaptchaInstance = useReCaptcha(); // Get the instance, might be undefined
 
+
 // --- CAPTCHA Event Handlers ---
-// TODO: Implement functions to handle successful CAPTCHA completion and token retrieval
 const handleCaptchaVerified = (token: string) => {
-  console.log('CAPTCHA verified, token:', token);
+  // console.log('CAPTCHA verified, token:', token);
   captchaToken.value = token;
   captchaError.value = null; // Clear error on successful verification
 };
 const handleCaptchaExpired = () => {
-  console.log('CAPTCHA expired');
+  // console.log('CAPTCHA expired');
   captchaToken.value = null;
 };
 const handleCaptchaError = (errorDetails: any) => {
   console.error('CAPTCHA error:', errorDetails);
   captchaToken.value = null;
-  captchaError.value = t('login.error.captchaLoadFailed'); // Need translation
+  captchaError.value = t('login.error.captchaLoadFailed');
 };
 const resetCaptchaWidget = () => {
-  console.log('Resetting CAPTCHA widget...');
+  // console.log('Resetting CAPTCHA widget...');
   captchaToken.value = null;
   // Reset hCaptcha if it exists
   hcaptchaWidget.value?.reset();
@@ -81,7 +81,7 @@ const handleSubmit = async () => {
 
     // Check if token exists (for both hCaptcha and reCAPTCHA)
     if (!captchaToken.value) {
-      captchaError.value = t('login.error.captchaRequired'); // Need translation
+      captchaError.value = t('login.error.captchaRequired');
       return; // Stop submission if CAPTCHA is required but not completed/obtained
     }
   }
@@ -107,7 +107,6 @@ const handleSubmit = async () => {
        resetCaptchaWidget(); // Reset the widget for potential retry
      }
   } // <-- Correctly closing the try block here
-  // --- Remove the extraneous else block that was causing the syntax error ---
 };
 
 // Fetch CAPTCHA config on component mount
@@ -138,6 +137,7 @@ onMounted(() => {
            <img src="../assets/logo.png" alt="Project Logo" class="h-16 w-auto">
          </div>
         <h2 class="text-2xl font-semibold mb-6 text-center text-foreground">{{ t('login.title') }}</h2>
+
         <form @submit.prevent="handleSubmit" class="space-y-5"> <!-- Reduced space slightly -->
           <!-- Regular Login Fields -->
           <div v-if="!loginRequires2FA" class="space-y-6">
@@ -167,10 +167,12 @@ onMounted(() => {
          </div>
 
          <!-- CAPTCHA Area -->
+         <!-- 恢复原始的 v-if 条件 -->
          <div v-if="publicCaptchaConfig?.enabled && !loginRequires2FA" class="space-y-2">
             <label class="block text-sm font-medium text-text-secondary">{{ t('login.captchaPrompt') }}</label>
             <!-- hCaptcha Component -->
-            <div v-if="publicCaptchaConfig.provider === 'hcaptcha' && publicCaptchaConfig.hcaptchaSiteKey">
+            <!-- 这里的内部 v-if 仍然可以保留，虽然理论上外层已经判断过了 -->
+            <div v-if="publicCaptchaConfig?.provider === 'hcaptcha' && publicCaptchaConfig.hcaptchaSiteKey">
                <VueHcaptcha
                  ref="hcaptchaWidget"
                  :sitekey="publicCaptchaConfig.hcaptchaSiteKey"
@@ -181,9 +183,9 @@ onMounted(() => {
                ></VueHcaptcha>
             </div>
             <!-- reCAPTCHA v3 Info (usually invisible) -->
-            <div v-else-if="publicCaptchaConfig.provider === 'recaptcha'">
+            <div v-else-if="publicCaptchaConfig?.provider === 'recaptcha'">
                 <p class="text-xs text-text-secondary italic">
-                  {{ t('login.recaptchaV3Notice', 'This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.') }}
+                  {{ t('login.recaptchaV3Notice') }}
                 </p>
                 <!-- v3 is typically invisible, token obtained programmatically on submit -->
             </div>