Сделана компактная кнопка показа ключей в регистрации
This commit is contained in:
parent
d2205648e6
commit
35fc6ebf62
@ -1,2 +1,2 @@
|
|||||||
client.version=1.2.113
|
client.version=1.2.114
|
||||||
server.version=1.2.105
|
server.version=1.2.106
|
||||||
|
|||||||
@ -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 = 'Показать ключ';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user