alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(ext/settings): display section (password coloring)

Browse Source
This commit is contained in:
adlee-was-taken
2026-05-03 21:08:50 -04:00
parent 9c47709d14
commit ffa8232dfd
1 changed files with 64 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
extension/src/popup/components/settings.ts
View File

@@ -1,5 +1,6 @@
import { sendMessage, escapeHtml } from '../../shared/state';
import type { VaultSettings, DeviceSettings } from '../../shared/types';
import type { ColorScheme } from '../../shared/color-scheme';
import {
loadColorScheme, saveColorScheme, resetColorScheme,
DEFAULT_DIGIT_COLOR, DEFAULT_SYMBOL_COLOR,
@@ -175,8 +176,69 @@ async function renderAutofillSection(content: HTMLElement): Promise<void> {
});
}
function renderDisplaySection(content: HTMLElement): void {
content.innerHTML = '<p class="muted" style="padding:20px;font-size:12px;">Display — coming soon</p>';
async function renderDisplaySection(content: HTMLElement): Promise<void> {
const scheme = await loadColorScheme();
content.innerHTML = `
<h3 class="settings-section-title">Password coloring</h3>
<div class="setting-row">
<div class="setting-row__info">
<div class="setting-row__title">Digit color</div>
</div>
<div class="setting-row__control">
<input type="color" id="digit-color" value="${escapeHtml(scheme.digit_color)}">
</div>
</div>
<div class="setting-row">
<div class="setting-row__info">
<div class="setting-row__title">Symbol color</div>
</div>
<div class="setting-row__control">
<input type="color" id="symbol-color" value="${escapeHtml(scheme.symbol_color)}">
</div>
</div>
<div class="setting-row">
<div class="setting-row__info">
<div class="setting-row__title">Preview</div>
</div>
<div class="setting-row__control">
<span id="color-preview" style="font-family:monospace; font-size:13px;"></span>
</div>
</div>
<div style="margin-top:12px;">
<button class="btn" id="reset-colors" style="font-size:11px;">Reset defaults</button>
</div>
`;
function refreshPreview(s: ColorScheme): void {
const preview = document.getElementById('color-preview');
if (!preview) return;
preview.style.setProperty('--relicario-pwd-digit-color', s.digit_color);
preview.style.setProperty('--relicario-pwd-symbol-color', s.symbol_color);
preview.innerHTML = '';
preview.appendChild(colorizePassword('Abc123!@#'));
}
refreshPreview(scheme);
document.getElementById('digit-color')?.addEventListener('change', async (e) => {
const color = (e.target as HTMLInputElement).value;
const current = await loadColorScheme();
await saveColorScheme({ ...current, digit_color: color });
refreshPreview({ ...current, digit_color: color });
});
document.getElementById('symbol-color')?.addEventListener('change', async (e) => {
const color = (e.target as HTMLInputElement).value;
const current = await loadColorScheme();
await saveColorScheme({ ...current, symbol_color: color });
refreshPreview({ ...current, symbol_color: color });
});
document.getElementById('reset-colors')?.addEventListener('click', async () => {
await resetColorScheme();
renderDisplaySection(content);
});
}
async function renderGeneratorSection(content: HTMLElement): Promise<void> {