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.
This commit is contained in:
Will Miao
2026-06-19 08:05:04 +08:00
parent faf64f8986
commit b24b1a7e57
19 changed files with 274 additions and 29 deletions

View File

@@ -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>