feature: signup and login work

This commit is contained in:
Andy Burke 2025-06-25 20:51:29 -07:00
parent a4a750b35c
commit 3d42591ee5
18 changed files with 956 additions and 65 deletions

View file

@ -468,6 +468,54 @@
top: 8px;
}
</style>
<script>
/* https://github.com/turistu/totp-in-javascript/blob/main/totp.js */
async function otp_totp(key, secs = 30, digits = 6) {
return otp_hotp(otp_unbase32(key), otp_pack64bu(Date.now() / 1000 / secs), digits);
}
async function otp_hotp(key, counter, digits) {
let y = self.crypto.subtle;
if (!y) throw Error("no self.crypto.subtle object available");
let k = await y.importKey("raw", key, { name: "HMAC", hash: "SHA-1" }, false, [
"sign",
]);
return otp_hotp_truncate(await y.sign("HMAC", k, counter), digits);
}
function otp_hotp_truncate(buf, digits) {
let a = new Uint8Array(buf),
i = a[19] & 0xf;
return otp_fmt(
10,
digits,
(((a[i] & 0x7f) << 24) | (a[i + 1] << 16) | (a[i + 2] << 8) | a[i + 3]) %
10 ** digits,
);
}
function otp_fmt(base, width, num) {
return num.toString(base).padStart(width, "0");
}
function otp_unbase32(s) {
let t = (s.toLowerCase().match(/\S/g) || [])
.map((c) => {
let i = "abcdefghijklmnopqrstuvwxyz234567".indexOf(c);
if (i < 0) throw Error(`bad char '${c}' in key`);
return otp_fmt(2, 5, i);
})
.join("");
if (t.length < 8) throw Error("key too short");
return new Uint8Array(t.match(/.{8}/g).map((d) => parseInt(d, 2)));
}
function otp_pack64bu(v) {
let b = new ArrayBuffer(8),
d = new DataView(b);
d.setUint32(0, v / 2 ** 32);
d.setUint32(4, v);
return b;
}
</script>
</head>
<body>
<div id="signup-login-wall">
@ -578,6 +626,13 @@
action="/api/auth"
onreply="(user)=>{ document.body.dataset.user = user; }"
>
<script>
const form = document.currentScript.closest("form");
form.on_response = (response) => {
// TODO: we should hold the session secret only in memory, not the cookie?
document.body.dataset.user = response.user;
};
</script>
<div>
<input
id="login-username"
@ -763,6 +818,50 @@
</body>
<script>
document.addEventListener("DOMContentLoaded", () => {
/* check if we are logged in */
(async () => {
try {
const session_id = (document.cookie.match(
/^(?:.*;)?\s*session_id\s*=\s*([^;]+)(?:.*)?$/,
) || [, null])[1];
// TODO: this wasn't really intended to be persisted in a cookie
const session_secret = (document.cookie.match(
/^(?:.*;)?\s*session_secret\s*=\s*([^;]+)(?:.*)?$/,
) || [, null])[1];
if (session_id && session_secret) {
const session_response = await fetch("/api/users/me", {
method: "GET",
headers: {
Accept: "application/json",
"x-session_id": session_id,
"x-totp": await otp_totp(session_secret),
},
});
if (!session_response.ok) {
const error_body = await session_response.json();
const error = error_body?.error;
console.dir({
error_body,
error,
});
return;
}
const user = await session_response.json();
document.body.dataset.user = user;
}
} catch (error) {
console.dir({
error,
});
}
})();
/* make all forms semi-smart */
const forms = document.querySelectorAll("form");
for (const form of forms) {
const script = form.querySelector("script");