Этап 1: аккаунты — argon2id, сессии, ключевой блоб, вход и регистрация
Сервер: миграция 001 со всей схемой storage.md, store на modernc.org/sqlite (WAL, foreign_keys, один писатель), фоновая чистка раз в час, argon2id с параметрами ADR-021 и сверкой constant-time, сессии по SHA-256 токена, cookie bare_session, глобальная проверка Origin, девять эндпоинтов аккаунта. Ник в журнал не попадает: для /api/ пишется шаблон маршрута. Клиент: crypto.js по crypto.md построчно — мастер из пароля, два независимых ключа из мастера, ключевой блоб с ником в AAD, отпечаток от сырой точки; db.js со всеми хранилищами версии 1; экран входа и регистрации, настройки со сменой пароля, выходом и удалением аккаунта. Пароль не покидает клиент: проверено на боевом сервере — ни пароля, ни priv.d ни в одном теле запроса, вход на втором устройстве даёт тот же отпечаток. ADR-027: код internal для 500, причина только в журнале. ADR-028: тексты состояний клиента сведены в ui.md. ADR-029: вход под другим ником стирает историю только после подтверждения. ADR-030: верхняя граница итераций KDF, проверка границ на обеих сторонах. ADR-031: служебный выход перед повторным входом не заканчивает сеанс. ADR-032: каталог состояния 0700, файлы базы 0600. Прямые зависимости: modernc.org/sqlite, golang.org/x/crypto. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015DbCjVfTFq4ZFG8juD45YJ
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,188 @@
|
||||
// Экран входа и регистрации — docs/ui.md, «Вход и регистрация».
|
||||
|
||||
import { clear, confirmPanel, el, field, mark, message, setError, setNote } from "./dom.js";
|
||||
|
||||
const HINT = "пароль — это ключ шифрования, а не запись в базе. восстановления нет. "
|
||||
+ "не короче 12 символов; лучше — фраза из нескольких слов.";
|
||||
|
||||
const MODES = [
|
||||
["in", "вход"],
|
||||
["up", "регистрация"],
|
||||
];
|
||||
|
||||
export function renderAuth(root, ctx) {
|
||||
// Состояние экрана переживает перерисовку: режим, введённый ник и ошибка.
|
||||
const view = { mode: "in", nick: "", error: "" };
|
||||
const paint = () => {
|
||||
clear(root);
|
||||
root.append(screen(ctx, view, paint));
|
||||
};
|
||||
paint();
|
||||
}
|
||||
|
||||
function screen(ctx, view, paint) {
|
||||
const main = el("main", "auth");
|
||||
const inner = el("div", "auth__inner");
|
||||
main.append(inner);
|
||||
|
||||
const brand = el("div", "auth__brand");
|
||||
brand.append(mark(), el("span", null, "bare"));
|
||||
inner.append(brand);
|
||||
inner.append(tabs(view, paint));
|
||||
|
||||
const form = el("form", "form");
|
||||
form.noValidate = true;
|
||||
|
||||
const register = view.mode === "up";
|
||||
const nick = field("ник", { name: "nick", autocomplete: "username" });
|
||||
nick.input.value = view.nick;
|
||||
const password = field("пароль", {
|
||||
type: "password",
|
||||
name: "password",
|
||||
autocomplete: register ? "new-password" : "current-password",
|
||||
});
|
||||
form.append(nick.wrap, password.wrap);
|
||||
|
||||
let invite = null;
|
||||
if (register) {
|
||||
form.append(el("p", "hint", HINT));
|
||||
if (ctx.config?.inviteRequired) {
|
||||
invite = field("инвайт-код", { name: "invite", autocomplete: "off" });
|
||||
form.append(invite.wrap);
|
||||
}
|
||||
}
|
||||
|
||||
const label = register ? "регистрация" : "вход";
|
||||
const submit = el("button", "button", label);
|
||||
submit.type = "submit";
|
||||
form.append(submit);
|
||||
|
||||
// На устройстве могут лежать ключи другого ника: вход под этим сотрёт
|
||||
// историю прежнего, поэтому сначала подтверждение (ADR-029).
|
||||
const wipe = confirmPanel("", "удалить");
|
||||
form.append(wipe.root);
|
||||
|
||||
const note = message();
|
||||
form.append(note);
|
||||
if (view.error) {
|
||||
setError(note, view.error);
|
||||
}
|
||||
|
||||
const fail = (text) => {
|
||||
view.error = text;
|
||||
if (text) {
|
||||
setError(note, text);
|
||||
} else {
|
||||
setNote(note, "");
|
||||
}
|
||||
};
|
||||
|
||||
// run — то, ради чего экран: PBKDF2 и запрос к серверу. Вызывается либо
|
||||
// сразу, либо после подтверждения стирания.
|
||||
const run = async () => {
|
||||
submit.disabled = true;
|
||||
submit.textContent = "вычисляем ключ…";
|
||||
const pass = password.input.value;
|
||||
try {
|
||||
if (register) {
|
||||
await ctx.signUp(view.nick, pass, invite ? invite.input.value.trim() : "");
|
||||
} else {
|
||||
await ctx.signIn(view.nick, pass);
|
||||
}
|
||||
ctx.go("#/");
|
||||
} catch (err) {
|
||||
submit.disabled = false;
|
||||
submit.textContent = label;
|
||||
fail(ctx.errorText(err));
|
||||
}
|
||||
};
|
||||
|
||||
const hideWipe = () => {
|
||||
wipe.root.hidden = true;
|
||||
submit.hidden = false;
|
||||
};
|
||||
wipe.no.addEventListener("click", () => {
|
||||
hideWipe();
|
||||
submit.focus();
|
||||
});
|
||||
wipe.yes.addEventListener("click", () => {
|
||||
hideWipe();
|
||||
run();
|
||||
});
|
||||
|
||||
form.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
if (submit.disabled) {
|
||||
return;
|
||||
}
|
||||
view.nick = nick.input.value.trim().toLowerCase();
|
||||
nick.input.value = view.nick;
|
||||
const pass = password.input.value;
|
||||
fail("");
|
||||
hideWipe();
|
||||
|
||||
if (!ctx.validNick(view.nick)) {
|
||||
fail("ник: 2–32 символа, a–z, 0–9, _");
|
||||
nick.input.focus();
|
||||
return;
|
||||
}
|
||||
// Длина пароля проверяется в обоих режимах: короче минимума пароля
|
||||
// нет ни у одного аккаунта, считать по нему PBKDF2 незачем (docs/ui.md).
|
||||
if ([...pass].length < ctx.minPassword) {
|
||||
fail(`пароль: не короче ${ctx.minPassword} символов`);
|
||||
password.input.focus();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await ctx.ensureConfig();
|
||||
} catch (err) {
|
||||
fail(ctx.errorText(err));
|
||||
return;
|
||||
}
|
||||
// Поле инвайта могло не появиться: конфигурация приехала только что.
|
||||
if (register && ctx.config.inviteRequired && invite === null) {
|
||||
view.error = "нужен инвайт-код";
|
||||
paint();
|
||||
return;
|
||||
}
|
||||
|
||||
const other = await ctx.storedNick();
|
||||
if (other && other !== view.nick) {
|
||||
wipe.text.textContent = `на этом устройстве история @${other}. вход под другим ником удалит её.`;
|
||||
wipe.root.hidden = false;
|
||||
submit.hidden = true;
|
||||
wipe.yes.focus();
|
||||
return;
|
||||
}
|
||||
await run();
|
||||
});
|
||||
|
||||
inner.append(form);
|
||||
return main;
|
||||
}
|
||||
|
||||
// tabs — переключатель «вход / регистрация».
|
||||
function tabs(view, paint) {
|
||||
const wrap = el("div", "tabs");
|
||||
MODES.forEach(([mode, text], index) => {
|
||||
if (index > 0) {
|
||||
wrap.append(el("span", "tabs__sep", "/"));
|
||||
}
|
||||
const tab = el("button", "tab", text);
|
||||
tab.type = "button";
|
||||
const on = view.mode === mode;
|
||||
if (on) {
|
||||
tab.classList.add("is-on");
|
||||
}
|
||||
tab.setAttribute("aria-pressed", String(on));
|
||||
tab.addEventListener("click", () => {
|
||||
if (view.mode !== mode) {
|
||||
view.mode = mode;
|
||||
view.error = "";
|
||||
paint();
|
||||
}
|
||||
});
|
||||
wrap.append(tab);
|
||||
});
|
||||
return wrap;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
// Сборка узлов. innerHTML не используется нигде: сообщения и ники —
|
||||
// пользовательские данные (docs/ui.md, CSP из ADR-021).
|
||||
|
||||
const SVG = "http://www.w3.org/2000/svg";
|
||||
|
||||
export function el(tag, className, text) {
|
||||
const node = document.createElement(tag);
|
||||
if (className) {
|
||||
node.className = className;
|
||||
}
|
||||
if (text !== undefined) {
|
||||
node.textContent = text;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
export function clear(node) {
|
||||
while (node.firstChild) {
|
||||
node.removeChild(node.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
// mark — знак «скобы»: четыре угла рамки (docs/identity/brief.md).
|
||||
export function mark() {
|
||||
const svg = document.createElementNS(SVG, "svg");
|
||||
svg.setAttribute("class", "mark");
|
||||
svg.setAttribute("viewBox", "0 0 64 64");
|
||||
svg.setAttribute("fill", "none");
|
||||
svg.setAttribute("stroke", "currentColor");
|
||||
svg.setAttribute("stroke-width", "7");
|
||||
svg.setAttribute("aria-hidden", "true");
|
||||
for (const d of ["M10 26V10h16", "M38 10h16v16", "M54 38v16H38", "M26 54H10V38"]) {
|
||||
const path = document.createElementNS(SVG, "path");
|
||||
path.setAttribute("d", d);
|
||||
svg.append(path);
|
||||
}
|
||||
return svg;
|
||||
}
|
||||
|
||||
// field — подпись и строка ввода. Отдаёт и то, и другое: подпись идёт
|
||||
// в форму, ввод нужен обработчику.
|
||||
export function field(label, { type = "text", name, autocomplete } = {}) {
|
||||
const wrap = el("label", "field");
|
||||
wrap.append(el("span", null, label));
|
||||
const input = el("input");
|
||||
input.type = type;
|
||||
if (name) {
|
||||
input.name = name;
|
||||
}
|
||||
if (autocomplete) {
|
||||
input.autocomplete = autocomplete;
|
||||
}
|
||||
input.autocapitalize = "off";
|
||||
input.spellcheck = false;
|
||||
wrap.append(input);
|
||||
return { wrap, input };
|
||||
}
|
||||
|
||||
export function button(text, className = "button") {
|
||||
const node = el("button", className, text);
|
||||
node.type = "button";
|
||||
return node;
|
||||
}
|
||||
|
||||
// confirmPanel — вопрос и две кнопки; спрятан, пока не спросили.
|
||||
// Вопрос отдаётся наружу: его текст бывает известен только к моменту показа.
|
||||
export function confirmPanel(question, yesLabel) {
|
||||
const root = el("div");
|
||||
root.hidden = true;
|
||||
const text = el("p", "confirm", question);
|
||||
const yes = button(yesLabel);
|
||||
const no = button("отмена");
|
||||
const row = el("div", "row");
|
||||
row.append(yes, no);
|
||||
root.append(text, row);
|
||||
return { root, text, yes, no };
|
||||
}
|
||||
|
||||
// message — строка состояния под формой: ошибка цветом mark, ответ — mute.
|
||||
export function message() {
|
||||
const node = el("p", "message");
|
||||
node.setAttribute("aria-live", "polite");
|
||||
return node;
|
||||
}
|
||||
|
||||
export function setError(node, text) {
|
||||
node.className = "message message--error";
|
||||
node.textContent = text;
|
||||
}
|
||||
|
||||
export function setNote(node, text) {
|
||||
node.className = "message";
|
||||
node.textContent = text;
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
// Настройки — docs/ui.md, «Настройки». На этом этапе только разделы,
|
||||
// которые уже работают: кто ты, смена пароля, выход, удаление аккаунта.
|
||||
// Уведомления, устройства, история и установка приложения — дальше по плану.
|
||||
|
||||
import { ApiError } from "../api.js";
|
||||
import { fingerprintGroups } from "../crypto.js";
|
||||
import { button, confirmPanel, el, field, message, setError, setNote } from "./dom.js";
|
||||
|
||||
export function renderSettings(root, ctx) {
|
||||
root.append(head(ctx));
|
||||
const body = el("div", "body settings");
|
||||
body.append(identity(ctx), passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
|
||||
root.append(body);
|
||||
}
|
||||
|
||||
function head(ctx) {
|
||||
const bar = el("div", "head");
|
||||
const back = button("назад", "back");
|
||||
back.addEventListener("click", () => ctx.go("#/"));
|
||||
bar.append(back, el("span", "title", "настройки"));
|
||||
return bar;
|
||||
}
|
||||
|
||||
// identity — «ты: @nick» и свой отпечаток группами по 4 в две строки.
|
||||
function identity(ctx) {
|
||||
const box = el("section", "block block--first");
|
||||
box.append(el("p", "self", `ты: @${ctx.me.nick}`));
|
||||
const groups = fingerprintGroups(ctx.me.fingerprint ?? "");
|
||||
box.append(el("p", "fp", groups.slice(0, 8).join(" ")));
|
||||
box.append(el("p", "fp", groups.slice(8).join(" ")));
|
||||
return box;
|
||||
}
|
||||
|
||||
function passwordBlock(ctx) {
|
||||
const box = block("сменить пароль");
|
||||
const form = el("form", "form");
|
||||
form.noValidate = true;
|
||||
|
||||
const current = field("старый", { type: "password", autocomplete: "current-password" });
|
||||
const next = field("новый", { type: "password", autocomplete: "new-password" });
|
||||
const again = field("повтор", { type: "password", autocomplete: "new-password" });
|
||||
form.append(current.wrap, next.wrap, again.wrap);
|
||||
|
||||
const check = el("label", "check");
|
||||
const others = el("input");
|
||||
others.type = "checkbox";
|
||||
// Смена пароля по желанию завершает остальные сессии (ADR-015);
|
||||
// снять галочку можно, но это осознанный выбор, а не умолчание.
|
||||
others.checked = true;
|
||||
check.append(others, el("span", null, "выйти на других устройствах"));
|
||||
form.append(check);
|
||||
|
||||
const submit = el("button", "button", "сменить пароль");
|
||||
submit.type = "submit";
|
||||
const note = message();
|
||||
form.append(submit, note);
|
||||
|
||||
form.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
if (submit.disabled) {
|
||||
return;
|
||||
}
|
||||
setNote(note, "");
|
||||
if (next.input.value !== again.input.value) {
|
||||
setError(note, "пароли не совпадают");
|
||||
return;
|
||||
}
|
||||
if ([...next.input.value].length < ctx.minPassword) {
|
||||
setError(note, `пароль: не короче ${ctx.minPassword} символов`);
|
||||
return;
|
||||
}
|
||||
submit.disabled = true;
|
||||
submit.textContent = "вычисляем ключ…";
|
||||
try {
|
||||
await ctx.changePassword(current.input.value, next.input.value, others.checked);
|
||||
for (const input of [current.input, next.input, again.input]) {
|
||||
input.value = "";
|
||||
}
|
||||
setNote(note, "пароль изменён");
|
||||
} catch (err) {
|
||||
setError(note, passwordError(ctx, err));
|
||||
} finally {
|
||||
submit.disabled = false;
|
||||
submit.textContent = "сменить пароль";
|
||||
}
|
||||
});
|
||||
|
||||
box.append(form);
|
||||
return box;
|
||||
}
|
||||
|
||||
function exitBlock(ctx) {
|
||||
const box = block("выйти");
|
||||
const start = button("выйти");
|
||||
// Кнопки «экспортировать» пока нет: экспорт — этап 5 (docs/plan.md).
|
||||
const panel = confirmPanel("история на этом устройстве будет удалена. экспортировать сначала?", "выйти");
|
||||
|
||||
start.addEventListener("click", () => {
|
||||
start.hidden = true;
|
||||
panel.root.hidden = false;
|
||||
panel.yes.focus();
|
||||
});
|
||||
panel.no.addEventListener("click", () => {
|
||||
panel.root.hidden = true;
|
||||
start.hidden = false;
|
||||
start.focus();
|
||||
});
|
||||
panel.yes.addEventListener("click", async () => {
|
||||
panel.yes.disabled = true;
|
||||
panel.no.disabled = true;
|
||||
await ctx.signOut();
|
||||
ctx.go("#/");
|
||||
});
|
||||
|
||||
box.append(start, panel.root);
|
||||
return box;
|
||||
}
|
||||
|
||||
function deleteBlock(ctx) {
|
||||
const box = block("удалить аккаунт");
|
||||
const form = el("form", "form");
|
||||
form.noValidate = true;
|
||||
|
||||
const password = field("пароль", { type: "password", autocomplete: "current-password" });
|
||||
const submit = el("button", "button", "удалить аккаунт");
|
||||
submit.type = "submit";
|
||||
const panel = confirmPanel("аккаунт и вся история будут удалены навсегда.", "удалить");
|
||||
const note = message();
|
||||
form.append(password.wrap, submit, panel.root, note);
|
||||
|
||||
const back = () => {
|
||||
panel.root.hidden = true;
|
||||
panel.yes.disabled = false;
|
||||
panel.no.disabled = false;
|
||||
panel.yes.textContent = "удалить";
|
||||
submit.hidden = false;
|
||||
};
|
||||
|
||||
form.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
setNote(note, "");
|
||||
submit.hidden = true;
|
||||
panel.root.hidden = false;
|
||||
panel.yes.focus();
|
||||
});
|
||||
panel.no.addEventListener("click", () => {
|
||||
back();
|
||||
submit.focus();
|
||||
});
|
||||
panel.yes.addEventListener("click", async () => {
|
||||
panel.yes.disabled = true;
|
||||
panel.no.disabled = true;
|
||||
panel.yes.textContent = "вычисляем ключ…";
|
||||
try {
|
||||
await ctx.deleteAccount(password.input.value);
|
||||
ctx.go("#/");
|
||||
} catch (err) {
|
||||
back();
|
||||
setError(note, passwordError(ctx, err));
|
||||
}
|
||||
});
|
||||
|
||||
box.append(form);
|
||||
return box;
|
||||
}
|
||||
|
||||
function block(title) {
|
||||
const box = el("section", "block");
|
||||
box.append(el("h2", "section", title));
|
||||
return box;
|
||||
}
|
||||
|
||||
// passwordError: в настройках 401 означает ровно одно — не тот пароль.
|
||||
function passwordError(ctx, err) {
|
||||
if (err instanceof ApiError && err.code === "invalid_credentials") {
|
||||
return "неверный пароль";
|
||||
}
|
||||
return ctx.errorText(err);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
// Каркас: сайдбар со списком чатов и место под экран — docs/ui.md, «Каркас»
|
||||
// и «Список чатов». Чаты появятся на этапе 2, секции пока пустые.
|
||||
|
||||
import { el, mark } from "./dom.js";
|
||||
|
||||
// frame отдаёт корень и место под экран. screen — что показывать
|
||||
// на мобильном, где виден один экран за раз: "list" или "screen".
|
||||
export function frame(ctx, screen) {
|
||||
const root = el("div", "shell");
|
||||
root.dataset.screen = screen;
|
||||
const main = el("main", "main");
|
||||
root.append(side(ctx), main);
|
||||
return { root, main };
|
||||
}
|
||||
|
||||
function side(ctx) {
|
||||
const nav = el("nav", "side");
|
||||
|
||||
const brand = el("div", "brand");
|
||||
brand.append(mark(), el("span", null, "bare"));
|
||||
nav.append(brand);
|
||||
|
||||
const list = el("div", "list");
|
||||
for (const title of ["каналы", "личные"]) {
|
||||
list.append(el("h2", "section", title), el("ul", "items"));
|
||||
}
|
||||
nav.append(list);
|
||||
|
||||
const me = el("button", "me");
|
||||
me.type = "button";
|
||||
const dot = el("i");
|
||||
dot.setAttribute("aria-hidden", "true");
|
||||
me.append(dot, el("span", null, `ты: @${ctx.me.nick}`));
|
||||
me.addEventListener("click", () => ctx.go("#/settings"));
|
||||
nav.append(me);
|
||||
|
||||
return nav;
|
||||
}
|
||||
Reference in New Issue
Block a user