Этап 5: история — экспорт и импорт .bare, устройства, место, пагинация
Экспорт: ключ архива из секрета аккаунта через HKDF, заголовок ровно 65 байт (magic, версия, соль, 32 сырых байта отпечатка владельца, iv) и он же целиком AAD шифротекста. Ника владельца в файле нет. Импорт сверяет отпечаток до расшифровки, сливает идемпотентно по id, а записи peers берёт только для ников, которых в локальном TOFU ещё нет: архивом доверие к ключу не перебить. Настройки: устройства с датой и пометкой «это устройство», «занято N МБ», кнопка «экспортировать» в подтверждении выхода и в подтверждении входа под другим ником — долг этапа 1 и обещание ADR-029 закрыты. Лента: страницы по 50 с подгрузкой вверх без прыжка прокрутки; новая страница вставляется, а не пересобирает ленту. ADR-050: импорт не перезаписывает лежащую запись — у своей есть состояние отправки, которого в архиве нет. ADR-054: архив — недоверенный ввод. Ревью собрало архивы с ts вне диапазона Date, мусорным lastId, ником с bidi-переопределением и roomId с обходом пути: каждый из них навсегда ломал ленту или счётчик. Теперь форма ника, roomId, id, ts и автора проверяется, а lastId из файла не читается вовсе. ADR-051, 052, 053: тексты и кнопки, устройства и место, страницы ленты без виртуализации. Приёмка: формат сверен побайтно на модулях, скачанных с боевого сервера, — смещения заголовка, отпечаток сырыми байтами, новые соль и iv на каждый экспорт, подмена любого байта заголовка ломает расшифровку, чужой секрет не открывает, семь видов битых файлов отвергнуты. 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
+233
-9
@@ -1,11 +1,22 @@
|
||||
// Настройки — docs/ui.md, «Настройки». На этом этапе только разделы,
|
||||
// которые уже работают: кто ты, уведомления, установка приложения, смена
|
||||
// пароля, выход, удаление аккаунта. Устройства и история — дальше по плану.
|
||||
// Настройки — docs/ui.md, «Настройки»: кто ты, уведомления, установка
|
||||
// приложения, устройства, история, смена пароля, выход, удаление аккаунта.
|
||||
|
||||
import { ApiError } from "../api.js";
|
||||
import { fingerprintGroups } from "../crypto.js";
|
||||
import { ARCHIVE_EXT, ArchiveError, exportHistory, importHistory } from "../export.js";
|
||||
import * as pwa from "../pwa.js";
|
||||
import { INSTALL_IOS, button, confirmPanel, el, field, message, setError, setNote } from "./dom.js";
|
||||
import {
|
||||
EXPORT_FAILED,
|
||||
INSTALL_IOS,
|
||||
button,
|
||||
clear,
|
||||
confirmPanel,
|
||||
el,
|
||||
field,
|
||||
message,
|
||||
setError,
|
||||
setNote,
|
||||
} from "./dom.js";
|
||||
|
||||
// Состояния уведомлений и инструкция установки — docs/ui.md, «Настройки».
|
||||
const NOTIFICATIONS = {
|
||||
@@ -16,6 +27,27 @@ const NOTIFICATIONS = {
|
||||
|
||||
const INSTALL_HINT = "поделиться → на экран «домой»";
|
||||
|
||||
// Сколько символов идентификатора устройства видно в списке (docs/ui.md,
|
||||
// «Настройки»). Восьми хватает, чтобы отличить одно устройство от другого:
|
||||
// идентификатор случайный.
|
||||
const ID_SHOWN = 8;
|
||||
|
||||
// Дата появления устройства — местная, цифрами: она стоит в строке рядом
|
||||
// с идентификатором, и длинная форма её бы утопила (ADR-052).
|
||||
const DEVICE_DAY = new Intl.DateTimeFormat("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
// МБ занятого места — 1024×1024 байта (ADR-052).
|
||||
const MB = 1024 * 1024;
|
||||
|
||||
// Импорт не дошёл до базы: места на устройстве нет или ключей аккаунта
|
||||
// на нём нет (docs/ui.md, «Тексты состояний»). Порча самого файла говорит
|
||||
// о себе своими словами.
|
||||
const IMPORT_FAILED = "импорт не удался";
|
||||
|
||||
export function renderSettings(root, ctx) {
|
||||
root.append(head(ctx));
|
||||
const body = el("div", "body settings");
|
||||
@@ -24,7 +56,7 @@ export function renderSettings(root, ctx) {
|
||||
if (install !== null) {
|
||||
body.append(install);
|
||||
}
|
||||
body.append(passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
|
||||
body.append(devicesBlock(ctx), historyBlock(), passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
|
||||
root.append(body);
|
||||
}
|
||||
|
||||
@@ -137,6 +169,187 @@ function installBlock() {
|
||||
return box;
|
||||
}
|
||||
|
||||
// devicesBlock — «устройства»: список идентификаторов, дата появления
|
||||
// и «удалить» (docs/ui.md, «Настройки»).
|
||||
//
|
||||
// У своей строки кнопки нет: там пометка «это устройство». Удаление уносит
|
||||
// сессии устройства, и на своём это оставило бы человека на экране входа
|
||||
// с целой историей и без объяснения; отцепляет своё устройство «выйти»
|
||||
// (ADR-052).
|
||||
function devicesBlock(ctx) {
|
||||
const box = block("устройства");
|
||||
const list = el("ul", "devices");
|
||||
const note = message();
|
||||
box.append(list, note);
|
||||
|
||||
const row = (item) => {
|
||||
const line = el("li", "device");
|
||||
line.append(el("span", "device__id", item.id.slice(0, ID_SHOWN)));
|
||||
if (Number.isFinite(item.createdAt)) {
|
||||
line.append(el("span", "tag", DEVICE_DAY.format(item.createdAt)));
|
||||
}
|
||||
if (item.current) {
|
||||
line.append(el("span", "tag", "это устройство"));
|
||||
return line;
|
||||
}
|
||||
const drop = el("button", "link", "удалить");
|
||||
drop.type = "button";
|
||||
drop.addEventListener("click", async () => {
|
||||
drop.disabled = true;
|
||||
setNote(note, "");
|
||||
try {
|
||||
await ctx.removeDevice(item.id);
|
||||
await paint();
|
||||
} catch (err) {
|
||||
setError(note, ctx.errorText(err));
|
||||
drop.disabled = false;
|
||||
}
|
||||
});
|
||||
line.append(drop);
|
||||
return line;
|
||||
};
|
||||
|
||||
// paint перечитывает список: он же и есть ответ на удаление.
|
||||
async function paint() {
|
||||
let items;
|
||||
try {
|
||||
items = await ctx.devices();
|
||||
} catch (err) {
|
||||
setError(note, ctx.errorText(err));
|
||||
return;
|
||||
}
|
||||
setNote(note, "");
|
||||
clear(list);
|
||||
for (const item of items) {
|
||||
list.append(row(item));
|
||||
}
|
||||
}
|
||||
|
||||
paint();
|
||||
return box;
|
||||
}
|
||||
|
||||
// historyBlock — «история»: занятое место, экспорт и импорт архива
|
||||
// (docs/ui.md, «Настройки»).
|
||||
function historyBlock() {
|
||||
const box = block("история");
|
||||
// Место занято не только сообщениями: считает его браузер, а не мы
|
||||
// (ADR-009). Браузер, который считать не умеет, строки не получает —
|
||||
// писать в неё нечего (ADR-052).
|
||||
const used = el("p", "state", "");
|
||||
used.hidden = true;
|
||||
// Строка перечитывается и после импорта: «добавлено N сообщений» рядом
|
||||
// с прежней цифрой — две строки об одном действии, говорящие разное.
|
||||
const showSpace = async () => {
|
||||
const bytes = await space();
|
||||
if (bytes === null) {
|
||||
return;
|
||||
}
|
||||
used.textContent = `занято ${megabytes(bytes)} МБ`;
|
||||
used.hidden = false;
|
||||
};
|
||||
showSpace();
|
||||
const out = button("экспорт");
|
||||
const take = button("импорт");
|
||||
// Выбор файла — обычный <input type="file">, спрятанный за кнопкой:
|
||||
// системный вид ему тут не к месту, а поведение нужно родное.
|
||||
const picker = el("input");
|
||||
picker.type = "file";
|
||||
picker.accept = ARCHIVE_EXT;
|
||||
picker.hidden = true;
|
||||
const note = message();
|
||||
box.append(used, out, take, picker, note);
|
||||
|
||||
out.addEventListener("click", () => runExport(out, note));
|
||||
take.addEventListener("click", () => {
|
||||
if (take.disabled) {
|
||||
return;
|
||||
}
|
||||
setNote(note, "");
|
||||
picker.click();
|
||||
});
|
||||
picker.addEventListener("change", async () => {
|
||||
const file = picker.files?.[0] ?? null;
|
||||
// Тот же файл, выбранный второй раз подряд, обязан считаться выбором:
|
||||
// без сброса change не приходит.
|
||||
picker.value = "";
|
||||
if (file === null) {
|
||||
return;
|
||||
}
|
||||
take.disabled = true;
|
||||
try {
|
||||
const added = await importHistory(file);
|
||||
setNote(note, `добавлено ${plural(added)}`);
|
||||
await showSpace();
|
||||
} catch (err) {
|
||||
setError(note, err instanceof ArchiveError ? err.message : IMPORT_FAILED);
|
||||
} finally {
|
||||
take.disabled = false;
|
||||
}
|
||||
});
|
||||
return box;
|
||||
}
|
||||
|
||||
// runExport — «экспорт» в разделе истории и «экспортировать» в подтверждении
|
||||
// выхода: действие одно, кнопки две. Удача говорит сама за себя — браузер
|
||||
// сохраняет файл, писать об этом нечего.
|
||||
async function runExport(action, note) {
|
||||
if (action.disabled) {
|
||||
return;
|
||||
}
|
||||
action.disabled = true;
|
||||
setNote(note, "");
|
||||
try {
|
||||
await exportHistory();
|
||||
} catch {
|
||||
setError(note, EXPORT_FAILED);
|
||||
} finally {
|
||||
action.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
// space — занятое место в байтах или null, если браузер его не считает
|
||||
// (docs/storage.md, ADR-009). Это оценка происхождения целиком: индексы
|
||||
// и служебные страницы IndexedDB тоже занимают место.
|
||||
async function space() {
|
||||
if (!navigator.storage?.estimate) {
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const { usage } = await navigator.storage.estimate();
|
||||
return Number.isFinite(usage) ? usage : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// megabytes — «занято N МБ» человеческим числом: до десятых, пока меньше
|
||||
// десяти, дальше целые (ADR-052). Десятые округляются вверх: пара сотен
|
||||
// килобайт — это не «0 МБ».
|
||||
function megabytes(bytes) {
|
||||
const value = bytes / MB;
|
||||
if (value >= 10) {
|
||||
return String(Math.round(value));
|
||||
}
|
||||
return (Math.ceil(value * 10) / 10).toLocaleString("ru-RU");
|
||||
}
|
||||
|
||||
// plural склоняет «сообщение» с числом: «добавлено 1 сообщение»,
|
||||
// «добавлено 2 сообщения», «добавлено 5 сообщений» (docs/ui.md).
|
||||
function plural(count) {
|
||||
const tail = count % 100;
|
||||
const last = count % 10;
|
||||
if (tail < 11 || tail > 14) {
|
||||
if (last === 1) {
|
||||
return `${count} сообщение`;
|
||||
}
|
||||
if (last >= 2 && last <= 4) {
|
||||
return `${count} сообщения`;
|
||||
}
|
||||
}
|
||||
return `${count} сообщений`;
|
||||
}
|
||||
|
||||
function passwordBlock(ctx) {
|
||||
const box = block("сменить пароль");
|
||||
const form = el("form", "form");
|
||||
@@ -198,27 +411,38 @@ function passwordBlock(ctx) {
|
||||
function exitBlock(ctx) {
|
||||
const box = block("выйти");
|
||||
const start = button("выйти");
|
||||
// Кнопки «экспортировать» пока нет: экспорт — этап 5 (docs/plan.md).
|
||||
const panel = confirmPanel("история на этом устройстве будет удалена. экспортировать сначала?", "выйти");
|
||||
// История на этом устройстве — единственная копия, поэтому подтверждение
|
||||
// предлагает сначала сохранить её (docs/ui.md, ADR-029).
|
||||
const panel = confirmPanel(
|
||||
"история на этом устройстве будет удалена. экспортировать сначала?",
|
||||
"выйти",
|
||||
"экспортировать",
|
||||
);
|
||||
const note = message();
|
||||
|
||||
start.addEventListener("click", () => {
|
||||
start.hidden = true;
|
||||
panel.root.hidden = false;
|
||||
panel.yes.focus();
|
||||
panel.extra.focus();
|
||||
});
|
||||
// Экспорт подтверждение не закрывает: человек скачивает архив и решает
|
||||
// дальше сам.
|
||||
panel.extra.addEventListener("click", () => runExport(panel.extra, note));
|
||||
panel.no.addEventListener("click", () => {
|
||||
panel.root.hidden = true;
|
||||
setNote(note, "");
|
||||
start.hidden = false;
|
||||
start.focus();
|
||||
});
|
||||
panel.yes.addEventListener("click", async () => {
|
||||
panel.yes.disabled = true;
|
||||
panel.no.disabled = true;
|
||||
panel.extra.disabled = true;
|
||||
await ctx.signOut();
|
||||
ctx.go("#/");
|
||||
});
|
||||
|
||||
box.append(start, panel.root);
|
||||
box.append(start, panel.root, note);
|
||||
return box;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user