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.
2026-06-19 08:52:05 -03:00 · 2026-06-19 08:05:04 +08:00
parent faf64f8986
commit b24b1a7e57
19 changed files with 274 additions and 29 deletions
--- a/locales/de.json
+++ b/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.",
--- a/locales/en.json
+++ b/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.",
--- a/locales/es.json
+++ b/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\".",
--- a/locales/fr.json
+++ b/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 ».",
--- a/locales/he.json
+++ b/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\".",
--- a/locales/ja.json
+++ b/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 サイトを選択します。",
--- a/locales/ko.json
+++ b/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 사이트를 열지 선택합니다.",
--- a/locales/ru.json
+++ b/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».",
--- a/locales/zh-CN.json
+++ b/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 站点。",
--- a/locales/zh-TW.json
+++ b/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 站點。",
--- a/py/routes/handlers/misc_handlers.py
+++ b/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
--- a/py/services/settings_manager.py
+++ b/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)
--- a/static/css/components/modal/settings-modal.css
+++ b/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%;
--- a/static/js/managers/DoctorManager.js
+++ b/static/js/managers/DoctorManager.js
@@ -327,10 +327,15 @@ export class DoctorManager {
            case 'open-settings':
                modalManager.showModal('settingsModal');
                window.setTimeout(() => {
-                    const input = document.getElementById('civitaiApiKey');
-                    if (input) {
-                        input.focus();
-                        input.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    // 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;
--- a/static/js/managers/SettingsManager.js
+++ b/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
-                            const apiKeyInput = document.getElementById('civitaiApiKey');
-                            if (apiKeyInput) apiKeyInput.value = '';
+                            // Reset API key edit mode on close
+                            this.cancelEditApiKey(true);
+                            // 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');
-        if (civitaiApiKeyInput) {
-            civitaiApiKeyInput.value = state.global.settings.civitai_api_key || '';
-        }
+        // Update API key status display (do NOT pre-fill the input)
+        this.updateApiKeyStatus();

        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.type === 'password') {
+        if (input.dataset.mask === 'css') {
+            // 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';
        }
    }

--- a/static/js/state/index.js
+++ b/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: '',
--- a/templates/components/modals/settings_modal.html
+++ b/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">
-                                    <div class="api-key-input">
-                                        <input type="password" 
-                                            id="civitaiApiKey" 
-                                            placeholder="{{ t('settings.civitaiApiKeyPlaceholder') }}"
-                                            autocomplete="new-password"
-                                            onblur="settingsManager.saveInputSetting('civitaiApiKey', 'civitai_api_key')"
-                                            onkeydown="if(event.key === 'Enter') { this.blur(); }" />
-                                        <button class="toggle-visibility">
-                                            <i class="fas fa-eye"></i>
+                                    <!-- 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="text"
+                                                id="civitaiApiKey"
+                                                class="api-key-masked"
+                                                placeholder="{{ t('settings.civitaiApiKeyPlaceholder') }}"
+                                                autocomplete="off"
+                                                data-mask="css" />
+                                            <button type="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>
--- a/tests/routes/snapshots/test_api_snapshots.ambr
+++ b/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',
    }),
--- a/tests/routes/test_misc_routes.py
+++ b/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"]