From cfd98e53c70957a74ec956316eab445ca8e801c7 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Tue, 29 Apr 2025 15:26:59 +0800
Subject: [PATCH] update

---
 packages/frontend/src/locales/en-US.json     |  2 +-
 packages/frontend/src/locales/zh-CN.json     |  2 +-
 packages/frontend/src/views/SettingsView.vue | 44 ++++++++++----------
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/packages/frontend/src/locales/en-US.json b/packages/frontend/src/locales/en-US.json
index 9af5001..5bd9023 100644
--- a/packages/frontend/src/locales/en-US.json
+++ b/packages/frontend/src/locales/en-US.json
@@ -386,7 +386,7 @@
       }
     },
     "ipWhitelist": {
-      "title": "IP Whitelist",
+      "title": "IP Whitelist Management",
       "description": "Configure allowed IP addresses or ranges to access this application. Leave empty to allow all IPs.",
       "label": "Allowed IP Addresses/Ranges (one per line or comma-separated):",
       "hint": "Supports IPv4, IPv6, and CIDR (e.g., 192.168.1.100, 10.0.0.0/8, 2001:db8::/32).",
diff --git a/packages/frontend/src/locales/zh-CN.json b/packages/frontend/src/locales/zh-CN.json
index 2b1c903..e7788d6 100644
--- a/packages/frontend/src/locales/zh-CN.json
+++ b/packages/frontend/src/locales/zh-CN.json
@@ -386,7 +386,7 @@
       }
     },
     "ipWhitelist": {
-      "title": "IP 白名单",
+      "title": "IP 白名单管理",
       "description": "配置允许访问此应用的 IP 地址或范围。留空则允许所有 IP。",
       "label": "允许的 IP 地址/范围 (每行一个或用逗号分隔):",
       "hint": "支持 IPv4, IPv6 和 CIDR (例如 192.168.1.100, 10.0.0.0/8, 2001:db8::/32)。",
diff --git a/packages/frontend/src/views/SettingsView.vue b/packages/frontend/src/views/SettingsView.vue
index e141bc9..a226009 100644
--- a/packages/frontend/src/views/SettingsView.vue
+++ b/packages/frontend/src/views/SettingsView.vue
@@ -101,27 +101,6 @@
                  </div>
                  <p v-if="twoFactorMessage" :class="['mt-3 text-sm', twoFactorSuccess ? 'text-success' : 'text-error']">{{ twoFactorMessage }}</p>
               </div>
-              <hr class="border-border/50">
-              <!-- IP Whitelist -->
-              <div class="settings-section-content">
-                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.ipWhitelist.title') }}</h3>
-                 <p class="text-sm text-text-secondary mb-4">{{ $t('settings.ipWhitelist.description') }}</p>
-                 <form @submit.prevent="handleUpdateIpWhitelist" class="space-y-4">
-                   <div>
-                     <label for="ipWhitelist" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.ipWhitelist.label') }}</label>
-                     <textarea id="ipWhitelist" v-model="ipWhitelistInput" rows="4"
-                               class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary font-mono text-sm"></textarea>
-                     <small class="block mt-1 text-xs text-text-secondary">{{ $t('settings.ipWhitelist.hint') }}</small>
-                   </div>
-                   <div class="flex items-center justify-between">
-                      <button type="submit"
-                              class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-150 ease-in-out text-sm font-medium">
-                        {{ $t('settings.ipWhitelist.saveButton') }}
-                      </button>
-                      <p v-if="ipWhitelistMessage" :class="['text-sm', ipWhitelistSuccess ? 'text-success' : 'text-error']">{{ ipWhitelistMessage }}</p>
-                   </div>
-                 </form>
-              </div>
               <hr class="border-border/50"> <!-- Separator -->
               <!-- CAPTCHA Settings -->
               <div class="settings-section-content">
@@ -195,6 +174,29 @@
             </div>
           </div>
 
+          <!-- IP Whitelist Section: Only show if settings data is loaded -->
+          <div v-if="settings" class="bg-background border border-border rounded-lg shadow-sm overflow-hidden">
+            <h2 class="text-lg font-semibold text-foreground px-6 py-4 border-b border-border bg-header/50">{{ $t('settings.ipWhitelist.title') }}</h2>
+            <div class="p-6 space-y-6">
+               <p class="text-sm text-text-secondary mb-4">{{ $t('settings.ipWhitelist.description') }}</p>
+               <form @submit.prevent="handleUpdateIpWhitelist" class="space-y-4">
+                 <div>
+                   <label for="ipWhitelist" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.ipWhitelist.label') }}</label>
+                   <textarea id="ipWhitelist" v-model="ipWhitelistInput" rows="4"
+                             class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary font-mono text-sm"></textarea>
+                   <small class="block mt-1 text-xs text-text-secondary">{{ $t('settings.ipWhitelist.hint') }}</small>
+                 </div>
+                 <div class="flex items-center justify-between">
+                    <button type="submit" :disabled="ipWhitelistLoading"
+                            class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
+                      {{ ipWhitelistLoading ? $t('common.loading') : $t('settings.ipWhitelist.saveButton') }}
+                    </button>
+                    <p v-if="ipWhitelistMessage" :class="['text-sm', ipWhitelistSuccess ? 'text-success' : 'text-error']">{{ ipWhitelistMessage }}</p>
+                 </div>
+               </form>
+            </div>
+          </div>
+
           <!-- IP Blacklist Section: Only show if settings data is loaded (as config depends on it) -->
            <div v-if="settings" class="bg-background border border-border rounded-lg shadow-sm overflow-hidden">
              <h2 class="text-lg font-semibold text-foreground px-6 py-4 border-b border-border bg-header/50">{{ $t('settings.ipBlacklist.title') }}</h2>