Сделана компактная кнопка показа ключей в регистрации

This commit is contained in:
AidarKC 2026-06-02 16:43:38 +04:00
parent d2205648e6
commit 35fc6ebf62
2 changed files with 25 additions and 6 deletions

View File

@ -1,2 +1,2 @@
client.version=1.2.113 client.version=1.2.114
server.version=1.2.105 server.version=1.2.106

View File

@ -15,6 +15,19 @@ function makeSecretField({ label, value }) {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'inline-input-row'; row.className = 'inline-input-row';
const eyeIcon = `
<svg class="key-toggle-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M2.4 12s3.6-6.5 9.6-6.5S21.6 12 21.6 12s-3.6 6.5-9.6 6.5S2.4 12 2.4 12Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="2.9" fill="none" stroke="currentColor" stroke-width="1.8"/>
</svg>
`;
const eyeOffIcon = `
<svg class="key-toggle-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M3 4l18 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M2.4 12s3.6-6.5 9.6-6.5c2.4 0 4.5.8 6.1 1.9" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
<path d="M21.6 12s-3.6 6.5-9.6 6.5c-2.4 0-4.5-.8-6.1-1.9" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
</svg>
`;
const input = document.createElement('input'); const input = document.createElement('input');
input.className = 'input key-input'; input.className = 'input key-input';
@ -23,16 +36,22 @@ function makeSecretField({ label, value }) {
input.value = value; input.value = value;
const toggleBtn = document.createElement('button'); const toggleBtn = document.createElement('button');
toggleBtn.className = 'ghost-btn'; toggleBtn.className = 'icon-btn key-toggle-btn';
toggleBtn.type = 'button'; toggleBtn.type = 'button';
toggleBtn.textContent = 'Показать'; toggleBtn.innerHTML = eyeOffIcon;
toggleBtn.setAttribute('aria-label', 'Показать ключ');
toggleBtn.title = 'Показать ключ';
toggleBtn.addEventListener('click', () => { toggleBtn.addEventListener('click', () => {
if (input.type === 'password') { if (input.type === 'password') {
input.type = 'text'; input.type = 'text';
toggleBtn.textContent = 'Скрыть'; toggleBtn.innerHTML = eyeIcon;
toggleBtn.setAttribute('aria-label', 'Скрыть ключ');
toggleBtn.title = 'Скрыть ключ';
} else { } else {
input.type = 'password'; input.type = 'password';
toggleBtn.textContent = 'Показать'; toggleBtn.innerHTML = eyeOffIcon;
toggleBtn.setAttribute('aria-label', 'Показать ключ');
toggleBtn.title = 'Показать ключ';
} }
}); });