71 lines
3.5 KiB
HTML
71 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Вход - LPRA</title>
|
|
<link rel="stylesheet" href="{{asset "app.css"}}">
|
|
</head>
|
|
<body>
|
|
<div class="center">
|
|
<div class="card">
|
|
<h1>Вход в панель</h1>
|
|
{{if .Error}}<div class="err" id="err">{{.Error}}</div>{{else}}<div class="err" id="err" hidden></div>{{end}}
|
|
<form method="post" action="/login">
|
|
<label for="u">Имя пользователя</label>
|
|
<input type="text" id="u" name="username" value="{{.Username}}" autocomplete="username webauthn" autofocus required>
|
|
<label for="pw">Пароль</label>
|
|
<input type="password" id="pw" name="password" autocomplete="current-password" required>
|
|
<div style="margin-top:18px"><button type="submit" style="width:100%">Войти</button></div>
|
|
</form>
|
|
<div class="or" id="or" hidden>или</div>
|
|
<button type="button" class="keybtn btn ghost" id="keylogin" hidden><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>Войти с ключом доступа</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Sign in with a passkey: with the name typed, its keys are offered; without
|
|
// it, the device offers the keys it keeps for this site.
|
|
(function () {
|
|
if (!(window.PublicKeyCredential && navigator.credentials && window.isSecureContext)) return;
|
|
var btn = document.getElementById('keylogin'), err = document.getElementById('err');
|
|
btn.hidden = false;
|
|
document.getElementById('or').hidden = false;
|
|
var 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(/=+$/, '');
|
|
};
|
|
var dec = function (str) {
|
|
var s = atob(str.replace(/-/g, '+').replace(/_/g, '/') + '==='.slice((str.length + 3) % 4)), b = new Uint8Array(s.length);
|
|
for (var i = 0; i < s.length; i++) b[i] = s.charCodeAt(i);
|
|
return b.buffer;
|
|
};
|
|
function show(t) { err.textContent = t; err.hidden = !t; }
|
|
btn.onclick = function () {
|
|
btn.disabled = true;
|
|
show('');
|
|
fetch('/api/login/key/begin', {method: 'POST', headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({username: document.getElementById('u').value})})
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (r) {
|
|
if (!r.ok) throw new Error(r.error);
|
|
var o = r.options;
|
|
o.challenge = dec(o.challenge);
|
|
o.allowCredentials.forEach(function (c) { c.id = dec(c.id); });
|
|
return navigator.credentials.get({publicKey: o});
|
|
})
|
|
.then(function (c) {
|
|
return fetch('/api/login/key/finish', {method: 'POST', headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({id: enc(c.rawId), clientDataJSON: enc(c.response.clientDataJSON),
|
|
authenticatorData: enc(c.response.authenticatorData), signature: enc(c.response.signature)})})
|
|
.then(function (r) { return r.json(); });
|
|
})
|
|
.then(function (r) { if (!r.ok) throw new Error(r.error); location.href = '/'; })
|
|
.catch(function (e) { show(e && e.name === 'NotAllowedError' ? 'Вход по ключу отменён.' : (e && e.message) || 'Не вышло.'); })
|
|
.then(function () { btn.disabled = false; });
|
|
};
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|