238 lines
17 KiB
JavaScript
238 lines
17 KiB
JavaScript
// The account button in the top bar: a dialog with who is signed in, their
|
|
// passkeys (add one, remove one), the password switch and signing out. The
|
|
// password can be turned off once there is a passkey to sign in with.
|
|
(function () {
|
|
'use strict';
|
|
var btn = document.getElementById('acct');
|
|
if (!btn) return;
|
|
|
|
var b64u = {
|
|
enc: function (buf) {
|
|
var s = '', b = new Uint8Array(buf);
|
|
for (var i = 0; i < b.length; i++) s += String.fromCharCode(b[i]);
|
|
return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
|
|
},
|
|
dec: function (str) {
|
|
var s = atob(str.replace(/-/g, '+').replace(/_/g, '/') + '==='.slice((str.length + 3) % 4));
|
|
var b = new Uint8Array(s.length);
|
|
for (var i = 0; i < s.length; i++) b[i] = s.charCodeAt(i);
|
|
return b.buffer;
|
|
}
|
|
};
|
|
var esc = function (s) { return String(s).replace(/[&<>"]/g, function (c) { return {'&': '&', '<': '<', '>': '>', '"': '"'}[c]; }); };
|
|
var when = function (t) { return t ? new Date(t * 1000).toLocaleString() : 'ещё не использовался'; };
|
|
var csrf = (document.cookie.match(/(?:^|; )lpra_csrf=([^;]*)/) || [])[1] || '';
|
|
var X = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>';
|
|
var KEY = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="4.5"/><path d="m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3"/></svg>';
|
|
|
|
var dlg = document.createElement('dialog');
|
|
dlg.id = 'acctdlg';
|
|
dlg.tabIndex = -1;
|
|
dlg.innerHTML =
|
|
'<div class="dlg-h"><strong style="flex:1">Аккаунт</strong>' +
|
|
'<button type="button" class="btn ghost small icon close x" data-close title="Закрыть" aria-label="Закрыть">' + X + '</button></div>' +
|
|
'<div class="dlg-b acct">' +
|
|
' <div class="acct-who"><span class="acct-ava"></span><div class="acct-whotext"><div class="acct-name"></div><div class="muted acct-mode"></div></div>' +
|
|
' <form method="post" action="/logout" class="acct-out"><input type="hidden" name="csrf"><button type="submit" class="btn ghost">Выйти</button></form></div>' +
|
|
' <label class="acct-pw"><span><b>Вход по паролю</b><small class="muted acct-pwnote"></small></span>' +
|
|
' <input type="checkbox" class="sw" role="switch"></label>' +
|
|
' <label class="acct-pw acct-ai"><span><b>ИИ-ассистент</b><small class="muted">кнопка чата в правом нижнем углу</small></span>' +
|
|
' <input type="checkbox" class="sw" role="switch"></label>' +
|
|
' <details class="acct-chpw"><summary>Сменить пароль</summary>' +
|
|
' <form class="acct-pwform" autocomplete="on">' +
|
|
' <input type="text" name="username" autocomplete="username" hidden>' +
|
|
' <input type="password" name="current" placeholder="текущий пароль" autocomplete="current-password" required>' +
|
|
' <input type="password" name="new" placeholder="новый пароль, от 8 символов" autocomplete="new-password" minlength="8" required>' +
|
|
' <input type="password" name="again" placeholder="новый ещё раз" autocomplete="new-password" required>' +
|
|
' <button type="submit">Сменить</button></form></details>' +
|
|
' <details class="acct-pin"><summary>PIN-код <small class="acct-pinstate"></small></summary>' +
|
|
' <form class="acct-pinform">' +
|
|
' <input type="password" name="current" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" placeholder="текущий PIN" autocomplete="off">' +
|
|
' <input type="password" name="pin" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" placeholder="новый PIN, 4 цифры" autocomplete="off">' +
|
|
' <input type="password" name="again" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" placeholder="новый ещё раз" autocomplete="off">' +
|
|
' <div class="row"><button type="button" class="btn danger acct-pindel">Убрать PIN</button><button type="submit" class="acct-pinsave">Сохранить</button></div>' +
|
|
' </form>' +
|
|
' <label class="acct-pingrace"><span>На этом устройстве не спрашивать после ввода</span><select>' +
|
|
' <option value="0">каждый раз</option><option value="5">5 минут</option><option value="15">15 минут</option>' +
|
|
' <option value="30">30 минут</option><option value="60">60 минут</option></select></label>' +
|
|
' <p class="acct-pinmsg" aria-live="polite"></p><p class="muted" style="font-size:12px;margin:8px 0 0">Спрашивается в каждой новой вкладке; при перезагрузке той же вкладки - нет.</p></details>' +
|
|
' <details class="acct-view"><summary>Вид</summary><div class="acct-viewin">' +
|
|
' <label><span>Значки вкладок</span><select data-pref="tabIcons"><option value="">слева от названия</option><option value="right">справа от названия</option><option value="hide">не показывать</option></select></label>' +
|
|
' <label><span>Шрифт терминала</span><select data-pref="termFont" data-num><option value="0">обычный</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="18">18</option><option value="20">20</option></select></label>' +
|
|
' <label><span>Списки файлов</span><select data-pref="compact" data-bool><option value="">обычные</option><option value="1">компактные</option></select></label>' +
|
|
' <label><span>Время изменения файлов</span><select data-pref="fileTime"><option value="">показывать</option><option value="hide">скрыть</option></select></label>' +
|
|
' <label><span>Анимации</span><select data-pref="motion"><option value="">включены</option><option value="off">выключены</option></select></label>' +
|
|
' </div></details>' +
|
|
' <div class="acct-keysec">' +
|
|
' <h3>Ключи доступа</h3>' +
|
|
' <p class="muted acct-hint">Вход отпечатком, лицом, PIN-кодом устройства или аппаратным ключом. Ключей может быть несколько - например, телефон и ноутбук.</p>' +
|
|
' <ul class="acct-keys"></ul>' +
|
|
' <div class="acct-add"><input type="text" class="acct-keyname" maxlength="60" placeholder="название, например «телефон»">' +
|
|
' <button type="button" class="acct-addbtn">Добавить ключ</button></div>' +
|
|
' <p class="acct-msg"></p>' +
|
|
' </div>' +
|
|
'</div>';
|
|
document.body.appendChild(dlg);
|
|
dlg.querySelector('.acct-out [name=csrf]').value = decodeURIComponent(csrf);
|
|
var $ = function (sel) { return dlg.querySelector(sel); };
|
|
$('[data-close]').onclick = function () { dlg.close(); };
|
|
// Вид: each change applies at once and is kept on the server.
|
|
dlg.querySelectorAll('[data-pref]').forEach(function (sel) {
|
|
var k = sel.dataset.pref, cur = window.Prefs ? Prefs.get()[k] : '';
|
|
sel.value = sel.hasAttribute('data-bool') ? (cur ? '1' : '') : String(cur || (sel.hasAttribute('data-num') ? 0 : ''));
|
|
sel.onchange = function () {
|
|
var v = sel.hasAttribute('data-bool') ? sel.value === '1' : sel.hasAttribute('data-num') ? Number(sel.value) : sel.value;
|
|
if (window.Prefs) Prefs.set(k, v).then(function (ok) { if (!ok) msg('не сохранилось', true); });
|
|
};
|
|
});
|
|
var supported = !!(window.PublicKeyCredential && navigator.credentials && window.isSecureContext);
|
|
|
|
function msg(text, bad) {
|
|
$('.acct-msg').textContent = text || '';
|
|
$('.acct-msg').className = 'acct-msg' + (bad ? ' bad' : '');
|
|
}
|
|
function load() {
|
|
return fetch('/api/panel/account', {cache: 'no-store'}).then(function (r) { return r.json(); }).then(function (d) {
|
|
$('.acct-name').textContent = d.username;
|
|
dlg.querySelector('.acct-pwform [name=username]').value = d.username;
|
|
const pf = dlg.querySelector('.acct-pinform');
|
|
dlg.querySelector('.acct-pinstate').textContent = d.pin ? '· установлен' : '· не задан';
|
|
pf.current.hidden = !d.pin;
|
|
pf.querySelector('.acct-pindel').hidden = !d.pin;
|
|
pf.querySelector('.acct-pinsave').textContent = d.pin ? 'Сменить' : 'Установить';
|
|
$('.acct-pingrace').hidden = !d.pin;
|
|
try { $('.acct-pingrace select').value = localStorage.getItem('lpra.pin.grace') || '0'; } catch (e) { /* default */ }
|
|
$('.acct-ava').textContent = (d.username || '?').slice(0, 1).toUpperCase();
|
|
$('.acct-mode').textContent = d.password_off ? 'вход только по ключу доступа' : d.keys.length ? 'вход по паролю или ключу' : 'вход по паролю';
|
|
const sw = $('.acct-pw .sw');
|
|
sw.checked = !d.password_off;
|
|
sw.disabled = !d.keys.length || d.pw_locked;
|
|
$('.acct-pwnote').textContent = d.pw_locked ? 'закреплено администратором' + (d.password_off ? ': только по ключу' : '')
|
|
: !d.keys.length ? 'выключить можно, когда есть хотя бы один ключ'
|
|
: d.password_off ? 'выключен: войти можно только ключом' : 'можно выключить и входить только ключом';
|
|
var ul = $('.acct-keys');
|
|
ul.innerHTML = d.keys.length ? '' : '<li class="muted">Ключей пока нет.</li>';
|
|
d.keys.forEach(function (k) {
|
|
var li = document.createElement('li');
|
|
li.innerHTML = '<span class="acct-kicon">' + KEY + '</span><div class="acct-kinfo"><div>' + esc(k.name) + '</div>' +
|
|
'<div class="muted">добавлен ' + esc(when(k.created)) + ' · вход: ' + esc(when(k.last_used)) + '</div></div>' +
|
|
'<button type="button" class="btn danger small" title="Удалить ключ">Удалить</button>';
|
|
li.querySelector('button').onclick = async function () {
|
|
var last = d.keys.length === 1;
|
|
if (!await UI.confirm('Удалить ключ «' + k.name + '»?' + (last && d.password_off ? ' Это последний ключ: вход по паролю снова включится.' : ''), {ok: 'Удалить', danger: true})) return;
|
|
fetch('/api/panel/account/keys/' + k.id + '/delete', {method: 'POST'}).then(function (r) { return r.json(); })
|
|
.then(function (r) { if (!r.ok) msg(r.error, true); else { msg('ключ удалён'); load(); } });
|
|
};
|
|
ul.appendChild(li);
|
|
});
|
|
});
|
|
}
|
|
$('.acct-addbtn').onclick = function () {
|
|
if (!supported) { msg('этот браузер не умеет ключи доступа, или страница открыта не по https', true); return; }
|
|
var add = $('.acct-addbtn');
|
|
add.disabled = true;
|
|
msg('подтвердите на устройстве…');
|
|
fetch('/api/panel/account/keys/begin', {method: 'POST'}).then(function (r) { return r.json(); }).then(function (r) {
|
|
var o = r.options;
|
|
o.challenge = b64u.dec(o.challenge);
|
|
o.user.id = b64u.dec(o.user.id);
|
|
o.excludeCredentials.forEach(function (c) { c.id = b64u.dec(c.id); });
|
|
return navigator.credentials.create({publicKey: o});
|
|
}).then(function (cred) {
|
|
return fetch('/api/panel/account/keys/finish', {
|
|
method: 'POST', headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
name: $('.acct-keyname').value,
|
|
clientDataJSON: b64u.enc(cred.response.clientDataJSON),
|
|
attestationObject: b64u.enc(cred.response.attestationObject)
|
|
})
|
|
}).then(function (r) { return r.json(); });
|
|
}).then(function (r) {
|
|
if (!r.ok) { msg(r.error, true); return; }
|
|
$('.acct-keyname').value = '';
|
|
msg('ключ добавлен - теперь вход по нему');
|
|
load();
|
|
}).catch(function (e) {
|
|
msg(e && e.name === 'NotAllowedError' ? 'отменено' : e && e.name === 'InvalidStateError' ? 'этот ключ уже добавлен' : 'не вышло: ' + (e && e.message || e), true);
|
|
}).then(function () { add.disabled = false; });
|
|
};
|
|
$('.acct-pwform').onsubmit = function (ev) {
|
|
ev.preventDefault();
|
|
const f = ev.target;
|
|
if (f.new.value !== f.again.value) { msg('новые пароли не совпадают', true); return; }
|
|
f.querySelector('button').disabled = true;
|
|
fetch('/api/panel/account/password/change', {method: 'POST', headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({current: f.current.value, new: f.new.value})})
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (r) {
|
|
if (!r.ok) { msg(r.error, true); return; }
|
|
f.reset();
|
|
dlg.querySelector('.acct-chpw').open = false;
|
|
msg('пароль сменён');
|
|
})
|
|
.catch(function () { msg('ошибка сети', true); })
|
|
.then(function () { f.querySelector('button').disabled = false; });
|
|
};
|
|
function pinMsg(text, bad) {
|
|
$('.acct-pinmsg').textContent = text || '';
|
|
$('.acct-pinmsg').className = 'acct-pinmsg' + (bad ? ' bad' : '');
|
|
}
|
|
function savePin(pin) {
|
|
const f = $('.acct-pinform');
|
|
return fetch('/api/panel/account/pin', {method: 'POST', headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({pin: pin, current: f.current.value})})
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (r) {
|
|
if (!r.ok) { pinMsg(r.error, true); return; }
|
|
f.reset();
|
|
// This tab stays unlocked: the PIN is for tabs opened from now on.
|
|
try { sessionStorage.setItem('lpra.pin.ok', '1'); } catch (e) { /* asked next load */ }
|
|
pinMsg(pin ? 'PIN сохранён' : 'PIN убран');
|
|
load();
|
|
})
|
|
.catch(function () { pinMsg('ошибка сети', true); });
|
|
}
|
|
$('.acct-pinform').onsubmit = function (ev) {
|
|
ev.preventDefault();
|
|
const f = ev.target;
|
|
if (!/^[0-9]{4}$/.test(f.pin.value)) { pinMsg('PIN - ровно 4 цифры', true); return; }
|
|
if (f.pin.value !== f.again.value) { pinMsg('новые PIN не совпадают', true); return; }
|
|
savePin(f.pin.value);
|
|
};
|
|
$('.acct-pingrace select').onchange = function (ev) {
|
|
const min = Number(ev.target.value);
|
|
try {
|
|
localStorage.setItem('lpra.pin.grace', String(min));
|
|
// Counted from now, as the PIN was entered to get here.
|
|
localStorage.setItem('lpra.pin.until', min ? String(Date.now() + min * 60000) : '0');
|
|
} catch (e) { pinMsg('браузер не даёт сохранить настройку', true); return; }
|
|
pinMsg(min ? 'на этом устройстве PIN не спросят ' + min + ' мин после ввода' : 'PIN спрашивается в каждой новой вкладке');
|
|
};
|
|
$('.acct-pindel').onclick = async function () {
|
|
if (await UI.confirm('Убрать PIN-код?', {ok: 'Убрать', danger: true})) savePin('');
|
|
};
|
|
// The assistant: each user's own switch; the chat button follows it.
|
|
fetch('/api/panel/ai', {cache: 'no-store'}).then(function (r) { return r.json(); }).then(function (d) { $('.acct-ai .sw').checked = !!d.on; }).catch(function () {});
|
|
$('.acct-ai .sw').onchange = function (ev) {
|
|
var on = ev.target.checked;
|
|
fetch('/api/panel/ai/toggle', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({on: on})})
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (r) { if (!r.ok) { ev.target.checked = !on; msg(r.error, true); } else document.dispatchEvent(new CustomEvent('lpra:ai', {detail: on})); });
|
|
};
|
|
$('.acct-pw .sw').onchange = async function (ev) {
|
|
const off = !ev.target.checked;
|
|
if (off && !await UI.confirm('Выключить вход по паролю? Войти можно будет только ключом доступа. Если ключи потеряются, их сможет сбросить другой администратор в «Настройках».', {ok: 'Выключить', danger: true})) {
|
|
ev.target.checked = true;
|
|
return;
|
|
}
|
|
fetch('/api/panel/account/password', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({off: off})})
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (r) { if (!r.ok) msg(r.error, true); else msg(off ? 'вход по паролю выключен' : 'вход по паролю включён'); load(); });
|
|
};
|
|
btn.onclick = function () {
|
|
msg('');
|
|
pinMsg('');
|
|
load().then(function () { dlg.showModal(); dlg.focus(); });
|
|
};
|
|
})();
|