Сделана компактная кнопка показа ключей в регистрации
This commit is contained in:
parent
d2205648e6
commit
35fc6ebf62
@ -1,2 +1,2 @@
|
||||
client.version=1.2.113
|
||||
server.version=1.2.105
|
||||
client.version=1.2.114
|
||||
server.version=1.2.106
|
||||
|
||||
@ -15,6 +15,19 @@ function makeSecretField({ label, value }) {
|
||||
|
||||
const row = document.createElement('div');
|
||||
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');
|
||||
input.className = 'input key-input';
|
||||
@ -23,16 +36,22 @@ function makeSecretField({ label, value }) {
|
||||
input.value = value;
|
||||
|
||||
const toggleBtn = document.createElement('button');
|
||||
toggleBtn.className = 'ghost-btn';
|
||||
toggleBtn.className = 'icon-btn key-toggle-btn';
|
||||
toggleBtn.type = 'button';
|
||||
toggleBtn.textContent = 'Показать';
|
||||
toggleBtn.innerHTML = eyeOffIcon;
|
||||
toggleBtn.setAttribute('aria-label', 'Показать ключ');
|
||||
toggleBtn.title = 'Показать ключ';
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
if (input.type === 'password') {
|
||||
input.type = 'text';
|
||||
toggleBtn.textContent = 'Скрыть';
|
||||
toggleBtn.innerHTML = eyeIcon;
|
||||
toggleBtn.setAttribute('aria-label', 'Скрыть ключ');
|
||||
toggleBtn.title = 'Скрыть ключ';
|
||||
} else {
|
||||
input.type = 'password';
|
||||
toggleBtn.textContent = 'Показать';
|
||||
toggleBtn.innerHTML = eyeOffIcon;
|
||||
toggleBtn.setAttribute('aria-label', 'Показать ключ');
|
||||
toggleBtn.title = 'Показать ключ';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user