feat(settings): hide API key from frontend, use status+edit instead of password field

Backend changes:
- Add civitai_api_key to _NO_SYNC_KEYS, return only boolean civitai_api_key_set
- Clean up known template placeholder on load to prevent false positive

Frontend changes:
- Replace type=password with type=text + CSS masking (-webkit-text-security)
- Replace pre-filled input with status display (Configured/Not configured)
- Add inline edit view with Save/Cancel buttons
- Re-add eye toggle via CSS class toggle (not type switching)
- Use CSS transitions for smooth status/edit view switching

This prevents Chromium/Vivaldi password manager from triggering
'save password' prompts when opening the settings modal.

locales/de.json

@@ -274,6 +274,9 @@
         "civitaiApiKey": "Civitai API Key",
         "civitaiApiKeyPlaceholder": "Geben Sie Ihren Civitai API Key ein",
         "civitaiApiKeyHelp": "Wird für die Authentifizierung beim Herunterladen von Modellen von Civitai verwendet",
+        "civitaiApiKeyConfigured": "Konfiguriert",
+        "civitaiApiKeyNotConfigured": "Nicht konfiguriert",
+        "civitaiApiKeySet": "Einrichten",
         "civitaiHost": {
             "label": "Civitai-Host",
             "help": "Wählen Sie aus, welche Civitai-Seite geöffnet wird, wenn Sie „View on Civitai“-Links verwenden.",

locales/en.json

@@ -274,6 +274,9 @@
         "civitaiApiKey": "Civitai API Key",
         "civitaiApiKeyPlaceholder": "Enter your Civitai API key",
         "civitaiApiKeyHelp": "Used for authentication when downloading models from Civitai",
+        "civitaiApiKeyConfigured": "Configured",
+        "civitaiApiKeyNotConfigured": "Not configured",
+        "civitaiApiKeySet": "Set up",
         "civitaiHost": {
             "label": "Civitai host",
             "help": "Choose which Civitai site opens when using View on Civitai links.",

locales/es.json

@@ -274,6 +274,9 @@
         "civitaiApiKey": "Clave API de Civitai",
         "civitaiApiKeyPlaceholder": "Introduce tu clave API de Civitai",
         "civitaiApiKeyHelp": "Utilizada para autenticación al descargar modelos de Civitai",
+        "civitaiApiKeyConfigured": "Configurado",
+        "civitaiApiKeyNotConfigured": "No configurado",
+        "civitaiApiKeySet": "Configurar",
         "civitaiHost": {
             "label": "Host de Civitai",
             "help": "Elige qué sitio de Civitai se abre al usar los enlaces de \"View on Civitai\".",

locales/fr.json

@@ -274,6 +274,9 @@
         "civitaiApiKey": "Clé API Civitai",
         "civitaiApiKeyPlaceholder": "Entrez votre clé API Civitai",
         "civitaiApiKeyHelp": "Utilisée pour l'authentification lors du téléchargement de modèles depuis Civitai",
+        "civitaiApiKeyConfigured": "Configuré",
+        "civitaiApiKeyNotConfigured": "Non configuré",
+        "civitaiApiKeySet": "Configurer",
         "civitaiHost": {
             "label": "Hôte Civitai",
             "help": "Choisissez quel site Civitai s'ouvre lorsque vous utilisez les liens « View on Civitai ».",

locales/he.json

@@ -274,6 +274,9 @@
         "civitaiApiKey": "מפתח API של Civitai",
         "civitaiApiKeyPlaceholder": "הזן את מפתח ה-API שלך מ-Civitai",
         "civitaiApiKeyHelp": "משמש לאימות בעת הורדת מודלים מ-Civitai",
+        "civitaiApiKeyConfigured": "מוגדר",
+        "civitaiApiKeyNotConfigured": "לא מוגדר",
+        "civitaiApiKeySet": "הגדר",
         "civitaiHost": {
             "label": "מארח Civitai",
             "help": "בחר איזה אתר של Civitai ייפתח בעת שימוש בקישורי \"View on Civitai\".",

locales/ja.json

@@ -274,6 +274,9 @@
         "civitaiApiKey": "Civitai APIキー",
         "civitaiApiKeyPlaceholder": "Civitai APIキーを入力してください",
         "civitaiApiKeyHelp": "Civitaiからモデルをダウンロードするときの認証に使用されます",
+        "civitaiApiKeyConfigured": "設定済み",
+        "civitaiApiKeyNotConfigured": "未設定",
+        "civitaiApiKeySet": "設定",
         "civitaiHost": {
             "label": "Civitai ホスト",
             "help": "「View on Civitai」リンクを使うときに開く Civitai サイトを選択します。",

locales/ko.json

@@ -274,6 +274,9 @@
         "civitaiApiKey": "Civitai API 키",
         "civitaiApiKeyPlaceholder": "Civitai API 키를 입력하세요",
         "civitaiApiKeyHelp": "Civitai에서 모델을 다운로드할 때 인증에 사용됩니다",
+        "civitaiApiKeyConfigured": "설정됨",
+        "civitaiApiKeyNotConfigured": "설정되지 않음",
+        "civitaiApiKeySet": "설정",
         "civitaiHost": {
             "label": "Civitai 호스트",
             "help": "\"View on Civitai\" 링크를 사용할 때 어떤 Civitai 사이트를 열지 선택합니다.",

locales/ru.json

@@ -274,6 +274,9 @@
         "civitaiApiKey": "Ключ API Civitai",
         "civitaiApiKeyPlaceholder": "Введите ваш ключ API Civitai",
         "civitaiApiKeyHelp": "Используется для аутентификации при загрузке моделей с Civitai",
+        "civitaiApiKeyConfigured": "Настроен",
+        "civitaiApiKeyNotConfigured": "Не настроен",
+        "civitaiApiKeySet": "Настроить",
         "civitaiHost": {
             "label": "Хост Civitai",
             "help": "Выберите, какой сайт Civitai будет открываться при использовании ссылок «View on Civitai».",

locales/zh-CN.json

@@ -274,6 +274,9 @@
         "civitaiApiKey": "Civitai API 密钥",
         "civitaiApiKeyPlaceholder": "请输入你的 Civitai API 密钥",
         "civitaiApiKeyHelp": "用于从 Civitai 下载模型时的身份验证",
+        "civitaiApiKeyConfigured": "已配置",
+        "civitaiApiKeyNotConfigured": "未配置",
+        "civitaiApiKeySet": "设置",
         "civitaiHost": {
             "label": "Civitai 站点",
             "help": "选择使用“在 Civitai 中查看”时默认打开的 Civitai 站点。",

locales/zh-TW.json

@@ -274,6 +274,9 @@
         "civitaiApiKey": "Civitai API 金鑰",
         "civitaiApiKeyPlaceholder": "請輸入您的 Civitai API 金鑰",
         "civitaiApiKeyHelp": "用於從 Civitai 下載模型時的身份驗證",
+        "civitaiApiKeyConfigured": "已設定",
+        "civitaiApiKeyNotConfigured": "未設定",
+        "civitaiApiKeySet": "設定",
         "civitaiHost": {
             "label": "Civitai 站點",
             "help": "選擇使用「在 Civitai 中查看」時預設開啟的 Civitai 站點。",

py/routes/handlers/misc_handlers.py

@@ -1328,6 +1328,9 @@ class SettingsHandler:
             "folder_paths",
             "libraries",
             "active_library",
+            # Sensitive — never expose the actual value to the frontend;
+            # frontend receives a boolean instead (civitai_api_key_set).
+            "civitai_api_key",
         }
     )
 
@@ -1382,6 +1385,9 @@ class SettingsHandler:
                     value = self._settings.get(key)
                     if value is not None:
                         response_data[key] = value
+            # Sensitive fields: only expose a boolean indicating whether set
+            raw_key = self._settings.get("civitai_api_key")
+            response_data["civitai_api_key_set"] = bool(raw_key)
             settings_file = getattr(self._settings, "settings_file", None)
             if settings_file:
                 response_data["settings_file"] = settings_file

py/services/settings_manager.py

@@ -134,6 +134,9 @@ class SettingsManager:
         self._template_path = (
             Path(__file__).resolve().parents[2] / "settings.json.example"
         )
+        # Known placeholder value in settings.json.example; any file containing
+        # this value should be treated as "not configured".
+        self._TEMPLATE_PLACEHOLDER_API_KEY = "your_civitai_api_key_here"
         self.settings = self._load_settings()
         self._migrate_setting_keys()
         self._ensure_default_settings()
@@ -165,6 +168,12 @@ class SettingsManager:
                     self._original_disk_payload = copy.deepcopy(data)
                     if self._matches_template_payload(data):
                         self._preserve_disk_template = True
+                    # Clean up the template placeholder so it is not treated
+                    # as a real key (affects both the frontend boolean and
+                    # the downloader's Authorization header).
+                    placeholder = self._TEMPLATE_PLACEHOLDER_API_KEY
+                    if data.get("civitai_api_key") == placeholder:
+                        data["civitai_api_key"] = ""
                 return data
             except json.JSONDecodeError as exc:
                 logger.error("Failed to parse settings.json: %s", exc)

static/css/components/modal/settings-modal.css

@@ -335,7 +335,12 @@
     }
 }
 
-/* API key input specific styles */
+/* API key input — CSS masking (prevents Chrome password manager triggers) */
+.api-key-masked {
+    -webkit-text-security: disc;
+}
+
+/* API key input specific styles (shared with proxy password) */
 .api-key-input {
     width: 100%; /* Take full width of parent */
     position: relative;
@@ -345,7 +350,7 @@
 
 .api-key-input input {
     width: 100%;
-    padding: 6px 40px 6px 10px; /* Add left padding */
+    padding: 6px 40px 6px 10px; /* Right padding for eye button */
     height: 32px;
     box-sizing: border-box;
     border-radius: var(--border-radius-xs);
@@ -353,6 +358,13 @@
     background-color: var(--lora-surface);
     color: var(--text-color);
     font-size: 0.95em;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.api-key-input input:focus {
+    border-color: var(--lora-accent);
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 79, 70, 229), 0.1);
 }
 
 .api-key-input .toggle-visibility {
@@ -364,12 +376,98 @@
     opacity: 0.6;
     cursor: pointer;
     padding: 4px 8px;
+    transition: opacity 0.2s ease;
 }
 
 .api-key-input .toggle-visibility:hover {
     opacity: 1;
 }
 
+/* API key item — stack status/edit views vertically for smooth cross-fade */
+.api-key-item .setting-control {
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+/* API key status display (shown when not editing) */
+.api-key-status {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    justify-content: flex-end;
+    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.25s ease;
+    max-height: 80px;
+    overflow: hidden;
+}
+
+.api-key-status.is-hidden {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(-4px);
+    pointer-events: none;
+    margin: 0;
+}
+
+.api-key-status-text {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.95em;
+    white-space: nowrap;
+    transition: color 0.2s ease;
+}
+
+/* Status color modifiers — replace inline styles */
+.api-key-status--configured .fa-check-circle {
+    color: var(--lora-success);
+}
+
+.api-key-status--unconfigured .fa-times-circle {
+    color: var(--lora-error);
+}
+
+/* Utility classes for status icon colors (used by JS) */
+.text-success {
+    color: var(--lora-success);
+}
+
+.text-error {
+    color: var(--lora-error);
+}
+
+/* API key inline edit container — flex row with input + buttons */
+.api-key-edit {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    justify-content: flex-end;
+    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.25s ease;
+    max-height: 80px;
+    overflow: hidden;
+}
+
+.api-key-edit.is-hidden {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(-4px);
+    pointer-events: none;
+    margin: 0;
+}
+
+.api-key-edit .api-key-input {
+    flex: 1;
+    min-width: 0;
+}
+
+.api-key-edit .primary-btn,
+.api-key-edit .secondary-btn {
+    height: 32px;
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
 /* Text input wrapper styles for consistent input styling */
 .text-input-wrapper {
     width: 100%;

static/js/managers/DoctorManager.js

@@ -327,11 +327,16 @@ export class DoctorManager {
             case 'open-settings':
                 modalManager.showModal('settingsModal');
                 window.setTimeout(() => {
+                    // Open the API key editor directly
+                    if (typeof settingsManager.editApiKey === 'function') {
+                        settingsManager.editApiKey();
+                    } else {
                         const input = document.getElementById('civitaiApiKey');
                         if (input) {
                             input.focus();
                             input.scrollIntoView({ behavior: 'smooth', block: 'center' });
                         }
+                    }
                 }, 100);
                 break;
             case 'open-settings-syntax-format':

static/js/managers/SettingsManager.js

@@ -347,9 +347,9 @@ export class SettingsManager {
                         if (this.isOpen) {
                             this.loadSettingsToUI();
                         } else {
-                            // Clear sensitive fields on close to prevent browser save-password prompts
+                            // Reset API key edit mode on close
-                            const apiKeyInput = document.getElementById('civitaiApiKey');
+                            this.cancelEditApiKey(true);
-                            if (apiKeyInput) apiKeyInput.value = '';
+                            // Clear proxy password on close
                             const proxyPasswordInput = document.getElementById('proxyPassword');
                             if (proxyPasswordInput) proxyPasswordInput.value = '';
                         }
@@ -825,10 +825,8 @@ export class SettingsManager {
             usePortableCheckbox.checked = !!state.global.settings.use_portable_settings;
         }
 
-        const civitaiApiKeyInput = document.getElementById('civitaiApiKey');
+        // Update API key status display (do NOT pre-fill the input)
-        if (civitaiApiKeyInput) {
+        this.updateApiKeyStatus();
-            civitaiApiKeyInput.value = state.global.settings.civitai_api_key || '';
-        }
 
         const civitaiHostSelect = document.getElementById('civitaiHost');
         if (civitaiHostSelect) {
@@ -2898,16 +2896,97 @@ export class SettingsManager {
         }
     }
 
+    // ── CivitAI API Key management ──────────────────────────────
+
+    updateApiKeyStatus() {
+        const hasKey = !!(state.global.settings.civitai_api_key_set ||
+                          state.global.settings.civitai_api_key);
+        const statusEl = document.getElementById('civitaiApiKeyStatus');
+        const statusText = document.getElementById('civitaiApiKeyStatusText');
+        const actionBtn = document.getElementById('civitaiApiKeyActionBtn');
+        if (!statusText || !actionBtn) return;
+
+        if (hasKey) {
+            statusText.classList.remove('api-key-status--unconfigured');
+            statusText.classList.add('api-key-status--configured');
+            statusText.innerHTML = '<i class="fas fa-check-circle text-success"></i> '
+                + translate('settings.civitaiApiKeyConfigured', {}, 'Configured');
+            actionBtn.textContent = translate('common.actions.change', {}, 'Change');
+        } else {
+            statusText.classList.remove('api-key-status--configured');
+            statusText.classList.add('api-key-status--unconfigured');
+            statusText.innerHTML = '<i class="fas fa-times-circle text-error"></i> '
+                + translate('settings.civitaiApiKeyNotConfigured', {}, 'Not configured');
+            actionBtn.textContent = translate('settings.civitaiApiKeySet', {}, 'Set up');
+        }
+    }
+
+    editApiKey() {
+        const statusEl = document.getElementById('civitaiApiKeyStatus');
+        if (statusEl) statusEl.classList.add('is-hidden');
+        const editContainer = document.getElementById('civitaiApiKeyEdit');
+        if (editContainer) editContainer.classList.remove('is-hidden');
+        // Focus the input
+        const input = document.getElementById('civitaiApiKey');
+        if (input) {
+            input.value = '';  // Never pre-fill the secret
+            setTimeout(() => input.focus(), 50);
+        }
+    }
+
+    cancelEditApiKey(silent) {
+        const editContainer = document.getElementById('civitaiApiKeyEdit');
+        if (editContainer) editContainer.classList.add('is-hidden');
+        const statusContainer = document.getElementById('civitaiApiKeyStatus');
+        if (statusContainer) statusContainer.classList.remove('is-hidden');
+        // Clear any typed value
+        const input = document.getElementById('civitaiApiKey');
+        if (input) input.value = '';
+        if (!silent) {
+            this.updateApiKeyStatus();
+        }
+    }
+
+    async saveApiKey() {
+        const input = document.getElementById('civitaiApiKey');
+        if (!input) return;
+
+        const value = input.value.trim();
+
+        try {
+            await this.saveSetting('civitai_api_key', value);
+            showToast('toast.settings.settingsUpdated',
+                { setting: 'CivitAI API Key' }, 'success');
+        } catch (error) {
+            showToast('toast.settings.settingSaveFailed',
+                { message: error.message }, 'error');
+            return;
+        }
+
+        // Update the in-memory flag so the UI reflects the change
+        state.global.settings.civitai_api_key_set = !!value;
+        this.cancelEditApiKey(true);
+        this.updateApiKeyStatus();
+    }
+
     toggleInputVisibility(button) {
         const input = button.parentElement.querySelector('input');
+        if (!input) return;
         const icon = button.querySelector('i');
-
+        if (input.dataset.mask === 'css') {
-        if (input.type === 'password') {
+            // CSS-masked input (CivitAI API key) — toggle class, not type
+            input.classList.toggle('api-key-masked');
+            if (icon) {
+                icon.className = input.classList.contains('api-key-masked')
+                    ? 'fas fa-eye'
+                    : 'fas fa-eye-slash';
+            }
+        } else if (input.type === 'password') {
             input.type = 'text';
-            icon.className = 'fas fa-eye-slash';
+            if (icon) icon.className = 'fas fa-eye-slash';
         } else {
             input.type = 'password';
-            icon.className = 'fas fa-eye';
+            if (icon) icon.className = 'fas fa-eye';
         }
     }
 

static/js/state/index.js

@@ -5,6 +5,7 @@ import { DEFAULT_PATH_TEMPLATES, DEFAULT_PRIORITY_TAG_CONFIG } from '../utils/co
 
 const DEFAULT_SETTINGS_BASE = Object.freeze({
     civitai_api_key: '',
+    civitai_api_key_set: false,
     civitai_host: 'civitai.com',
     download_backend: 'python',
     aria2c_path: '',

templates/components/modals/settings_modal.html

@@ -95,21 +95,36 @@
                         <div class="setting-item api-key-item">
                             <div class="setting-row">
                                 <div class="setting-info">
-                                    <label for="civitaiApiKey">{{ t('settings.civitaiApiKey') }}</label>
+                                    <label>{{ t('settings.civitaiApiKey') }}</label>
                                     <i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.civitaiApiKeyHelp') }}"></i>
                                 </div>
                                 <div class="setting-control">
+                                    <!-- Status display (shown when not editing) -->
+                                    <div id="civitaiApiKeyStatus" class="api-key-status">
+                                        <span id="civitaiApiKeyStatusText" class="api-key-status-text api-key-status--unconfigured">
+                                            <i class="fas fa-times-circle text-error"></i>
+                                            {{ t('settings.civitaiApiKeyNotConfigured') }}
+                                        </span>
+                                        <button type="button" class="secondary-btn" id="civitaiApiKeyActionBtn" onclick="settingsManager.editApiKey()">
+                                            {{ t('settings.civitaiApiKeySet') }}
+                                        </button>
+                                    </div>
+                                    <!-- Inline edit view (shown when editing) -->
+                                    <div id="civitaiApiKeyEdit" class="api-key-edit is-hidden">
                                         <div class="api-key-input">
-                                        <input type="password" 
+                                            <input type="text"
                                                 id="civitaiApiKey"
+                                                class="api-key-masked"
                                                 placeholder="{{ t('settings.civitaiApiKeyPlaceholder') }}"
-                                            autocomplete="new-password"
+                                                autocomplete="off"
-                                            onblur="settingsManager.saveInputSetting('civitaiApiKey', 'civitai_api_key')"
+                                                data-mask="css" />
-                                            onkeydown="if(event.key === 'Enter') { this.blur(); }" />
+                                            <button type="button" class="toggle-visibility">
-                                        <button class="toggle-visibility">
                                                 <i class="fas fa-eye"></i>
                                             </button>
                                         </div>
+                                        <button type="button" class="primary-btn" onclick="settingsManager.saveApiKey()">{{ t('common.actions.save') }}</button>
+                                        <button type="button" class="secondary-btn" onclick="settingsManager.cancelEditApiKey()">{{ t('common.actions.cancel') }}</button>
+                                    </div>
                                 </div>
                             </div>
                         </div>

tests/routes/__snapshots__/test_api_snapshots.ambr

@@ -26,7 +26,7 @@
     'messages': list([
     ]),
     'settings': dict({
-      'civitai_api_key': 'test-key',
+      'civitai_api_key_set': True,
       'language': 'en',
       'theme': 'dark',
     }),

tests/routes/test_misc_routes.py

@@ -134,8 +134,10 @@ async def test_get_settings_excludes_no_sync_keys():
 
     assert payload["success"] is True
     # Regular settings should be synced
-    assert payload["settings"]["civitai_api_key"] == "abc"
     assert payload["settings"]["regular_setting"] == "value"
+    # civitai_api_key is in _NO_SYNC_KEYS; only the boolean flag is returned
+    assert payload["settings"].get("civitai_api_key") is None
+    assert payload["settings"]["civitai_api_key_set"] is True
     # _NO_SYNC_KEYS should not be synced
     assert "hash_chunk_size_mb" not in payload["settings"]
     assert "folder_paths" not in payload["settings"]