Derive root/device/blockchain keys from password SHA-256

This commit is contained in:
ai5590
2026-03-30 01:52:12 +03:00
parent 1bf1c768dd
commit 4f825e2a86
10 changed files with 908 additions and 203 deletions
+23 -44
View File
@@ -1,5 +1,5 @@
import { renderHeader } from '../components/header.js?v=20260327192619';
import { deviceSessions } from '../mock-data.js?v=20260327192619';
import { authService, refreshSessions, setAuthError, state } from '../state.js?v=20260327192619';
export const pageMeta = { id: 'device-session-view', title: 'Сеанс устройства' };
@@ -18,7 +18,7 @@ export function render({ navigate, route }) {
screen.className = 'stack';
const sessionId = route?.params?.sessionId || '';
const session = deviceSessions.find((item) => item.sessionId === sessionId) || deviceSessions[0];
const session = (state.sessions || []).find((item) => item.sessionId === sessionId) || state.sessions[0];
screen.append(
renderHeader({
@@ -27,14 +27,22 @@ export function render({ navigate, route }) {
}),
);
if (!session) {
const empty = document.createElement('div');
empty.className = 'card';
empty.textContent = 'Сеанс не найден.';
screen.append(empty);
return screen;
}
const details = document.createElement('div');
details.className = 'card stack';
details.innerHTML = `
<div><p class="meta-muted">sessionId</p><p>${session.sessionId}</p></div>
<div><p class="meta-muted">clientInfoFromClient</p><p>${session.clientInfoFromClient}</p></div>
<div><p class="meta-muted">clientInfoFromRequest</p><p>${session.clientInfoFromRequest}</p></div>
<div><p class="meta-muted">geo</p><p>${session.geo}</p></div>
<div><p class="meta-muted">дата/время</p><p>${formatSessionTime(session.lastAuthenticatedAtMs)}</p></div>
<div><p class="meta-muted">clientInfoFromClient</p><p>${session.clientInfoFromClient || '-'}</p></div>
<div><p class="meta-muted">clientInfoFromRequest</p><p>${session.clientInfoFromRequest || '-'}</p></div>
<div><p class="meta-muted">geo</p><p>${session.geo || 'unknown'}</p></div>
<div><p class="meta-muted">дата/время</p><p>${formatSessionTime(session.lastAuthenticatedAtMs || Date.now())}</p></div>
`;
const actionBtn = document.createElement('button');
@@ -42,46 +50,17 @@ export function render({ navigate, route }) {
actionBtn.type = 'button';
actionBtn.textContent = 'Завершить сеанс';
const confirmModal = document.createElement('div');
confirmModal.className = 'modal-shell';
confirmModal.hidden = true;
confirmModal.innerHTML = `
<div class="modal-backdrop" data-close="true"></div>
<div class="modal-dialog card" role="dialog" aria-modal="true" tabindex="-1">
<p>Вы уверены, что хотите завершить этот сеанс?</p>
<div class="auth-footer-actions">
<button class="primary-btn" type="button" id="confirm-session-ok">ОК</button>
<button class="ghost-btn" type="button" data-close="true">Отмена</button>
</div>
</div>
`;
const openModal = () => {
confirmModal.hidden = false;
confirmModal.querySelector('.modal-dialog').focus();
};
const closeModal = () => {
confirmModal.hidden = true;
};
actionBtn.addEventListener('click', openModal);
confirmModal.querySelector('#confirm-session-ok').addEventListener('click', closeModal);
confirmModal.addEventListener('click', (event) => {
const target = event.target;
if (target instanceof HTMLElement && target.dataset.close === 'true') {
closeModal();
actionBtn.addEventListener('click', async () => {
try {
await authService.closeSession(session.sessionId);
await refreshSessions();
navigate('device-view');
} catch (error) {
setAuthError(error.message);
window.alert(error.message);
}
});
confirmModal.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
closeModal();
}
});
screen.append(details, actionBtn, confirmModal);
screen.append(details, actionBtn);
return screen;
}
+73 -87
View File
@@ -1,6 +1,11 @@
import { renderHeader } from '../components/header.js?v=20260327192619';
import { deviceSessions } from '../mock-data.js?v=20260327192619';
import { terminateCurrentSession } from '../state.js?v=20260327192619';
import {
refreshSessions,
setAuthError,
setAuthInfo,
state,
terminateCurrentSession,
} from '../state.js?v=20260327192619';
export const pageMeta = { id: 'device-view', title: 'Устройства' };
@@ -28,111 +33,92 @@ export function render({ navigate }) {
const actions = document.createElement('div');
actions.className = 'card stack';
actions.innerHTML = `
<button class="primary-btn" type="button" id="connect-device-btn">Подключить устройство</button>
<button class="primary-btn" type="button" id="reload-sessions-btn">Обновить сессии</button>
<button class="text-btn" type="button" id="show-keys-btn">Показать ключи</button>
`;
actions.querySelector('#connect-device-btn').addEventListener('click', () => navigate('connect-device-view'));
actions.querySelector('#show-keys-btn').addEventListener('click', () => navigate('show-keys-view'));
const sessionsBlock = document.createElement('div');
sessionsBlock.className = 'card stack';
const currentSession = deviceSessions[0];
const otherSessions = deviceSessions.slice(1);
const buildList = () => {
sessionsBlock.innerHTML = '';
const sessions = state.sessions || [];
const current = sessions.find((s) => s.sessionId === state.session.sessionId) || sessions[0];
const others = sessions.filter((s) => s.sessionId !== current?.sessionId);
const createSessionItem = (session, isCurrent) => {
const item = document.createElement('button');
item.className = 'session-item';
item.type = 'button';
item.innerHTML = `
<div class="row" style="align-items:flex-start;">
<div class="stack" style="gap:4px; text-align:left;">
<strong>${session.clientInfoFromClient}</strong>
<span class="meta-muted">${session.geo}</span>
const createSessionItem = (session, isCurrent) => {
const item = document.createElement('button');
item.className = 'session-item';
item.type = 'button';
item.innerHTML = `
<div class="row" style="align-items:flex-start;">
<div class="stack" style="gap:4px; text-align:left;">
<strong>${session.clientInfoFromClient || 'unknown client'}</strong>
<span class="meta-muted">${session.geo || 'unknown'}</span>
</div>
<span class="meta-muted">${formatSessionTime(session.lastAuthenticatedAtMs || Date.now())}</span>
</div>
<span class="meta-muted">${formatSessionTime(session.lastAuthenticatedAtMs)}</span>
</div>
${
isCurrent
? '<div><span class="session-current-badge">Текущий сеанс</span></div>'
: ''
}
`;
item.addEventListener('click', () => navigate(`device-session-view/${session.sessionId}`));
return item;
};
${isCurrent ? '<div><span class="session-current-badge">Текущий сеанс</span></div>' : ''}
`;
item.addEventListener('click', () => navigate(`device-session-view/${session.sessionId}`));
return item;
};
const currentMenu = document.createElement('div');
currentMenu.className = 'stack';
currentMenu.innerHTML = '<p class="meta-muted">Текущий сеанс</p>';
currentMenu.append(createSessionItem(currentSession, true));
if (!current) {
const empty = document.createElement('p');
empty.className = 'meta-muted';
empty.textContent = 'Активные сессии не найдены.';
sessionsBlock.append(empty);
return;
}
const endCurrentSessionBtn = document.createElement('button');
endCurrentSessionBtn.className = 'text-btn';
endCurrentSessionBtn.type = 'button';
endCurrentSessionBtn.textContent = 'Завершить текущую сессию';
currentMenu.append(endCurrentSessionBtn);
const currentMenu = document.createElement('div');
currentMenu.className = 'stack';
currentMenu.innerHTML = '<p class="meta-muted">Текущий сеанс</p>';
currentMenu.append(createSessionItem(current, true));
const othersMenu = document.createElement('div');
othersMenu.className = 'stack';
othersMenu.innerHTML = '<p class="meta-muted">Остальные активные сеансы</p>';
if (otherSessions.length === 0) {
const empty = document.createElement('p');
empty.className = 'meta-muted';
empty.textContent = 'Других активных сеансов нет.';
othersMenu.append(empty);
} else {
otherSessions.forEach((session) => {
othersMenu.append(createSessionItem(session, false));
const endCurrentSessionBtn = document.createElement('button');
endCurrentSessionBtn.className = 'text-btn';
endCurrentSessionBtn.type = 'button';
endCurrentSessionBtn.textContent = 'Завершить текущую сессию';
endCurrentSessionBtn.addEventListener('click', () => {
terminateCurrentSession();
navigate('start-view');
});
}
currentMenu.append(endCurrentSessionBtn);
const confirmModal = document.createElement('div');
confirmModal.className = 'modal-shell';
confirmModal.hidden = true;
confirmModal.innerHTML = `
<div class="modal-backdrop" data-close="true"></div>
<div class="modal-dialog card" role="dialog" aria-modal="true" tabindex="-1">
<p>Завершить текущую сессию?</p>
<div class="auth-footer-actions">
<button class="primary-btn" type="button" id="confirm-end-yes">Да</button>
<button class="ghost-btn" type="button" data-close="true">Нет</button>
</div>
</div>
`;
const othersMenu = document.createElement('div');
othersMenu.className = 'stack';
othersMenu.innerHTML = '<p class="meta-muted">Остальные активные сеансы</p>';
const openModal = () => {
confirmModal.hidden = false;
confirmModal.querySelector('.modal-dialog').focus();
if (others.length === 0) {
const empty = document.createElement('p');
empty.className = 'meta-muted';
empty.textContent = 'Других активных сеансов нет.';
othersMenu.append(empty);
} else {
others.forEach((session) => {
othersMenu.append(createSessionItem(session, false));
});
}
sessionsBlock.append(currentMenu, othersMenu);
};
const closeModal = () => {
confirmModal.hidden = true;
};
endCurrentSessionBtn.addEventListener('click', openModal);
confirmModal.querySelector('#confirm-end-yes').addEventListener('click', () => {
terminateCurrentSession();
navigate('start-view');
});
confirmModal.addEventListener('click', (event) => {
const target = event.target;
if (target instanceof HTMLElement && target.dataset.close === 'true') {
closeModal();
actions.querySelector('#reload-sessions-btn').addEventListener('click', async () => {
try {
await refreshSessions();
buildList();
setAuthInfo('Список сессий обновлён.');
} catch (error) {
setAuthError(error.message);
window.alert(error.message);
}
});
confirmModal.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
closeModal();
}
});
sessionsBlock.append(currentMenu, othersMenu);
screen.append(actions, sessionsBlock, confirmModal);
buildList();
screen.append(actions, sessionsBlock);
return screen;
}
+44 -15
View File
@@ -1,5 +1,14 @@
import { renderHeader } from '../components/header.js?v=20260327192619';
import { state } from '../state.js?v=20260327192619';
import {
authService,
authorizeSession,
clearAuthMessages,
refreshSessions,
setAuthBusy,
setAuthError,
setAuthInfo,
state,
} from '../state.js?v=20260327192619';
export const pageMeta = { id: 'login-password-view', title: 'Войти по логину', showAppChrome: false };
@@ -7,6 +16,8 @@ export function render({ navigate }) {
const screen = document.createElement('section');
screen.className = 'stack';
clearAuthMessages();
const form = document.createElement('div');
form.className = 'card stack';
@@ -22,16 +33,9 @@ export function render({ navigate }) {
passwordInput.value = state.loginDraft.password;
passwordInput.placeholder = 'Введите пароль';
const advanced = document.createElement('label');
advanced.className = 'checkbox-row';
advanced.innerHTML = `<input type="checkbox" /> <span>Расширенные настройки</span>`;
const advancedInput = advanced.querySelector('input');
advancedInput.addEventListener('change', () => {
if (advancedInput.checked) {
window.alert('Расширенные настройки в стартовой версии приложения пока не используются.');
advancedInput.checked = false;
}
});
const hint = document.createElement('p');
hint.className = 'meta-muted';
hint.textContent = 'Root/dev/bch ключи вычисляются из пароля через SHA-256, storagePwd каждый вход приходит с сервера.';
form.innerHTML = `
<label class="stack"><span class="field-label">Логин</span></label>
@@ -39,7 +43,7 @@ export function render({ navigate }) {
`;
form.children[0].append(loginInput);
form.children[1].append(passwordInput);
form.append(advanced);
form.append(hint);
const actions = document.createElement('div');
actions.className = 'auth-footer-actions';
@@ -54,10 +58,35 @@ export function render({ navigate }) {
enterButton.className = 'primary-btn';
enterButton.type = 'button';
enterButton.textContent = 'Войти';
enterButton.addEventListener('click', () => {
state.loginDraft.login = loginInput.value;
enterButton.addEventListener('click', async () => {
state.loginDraft.login = loginInput.value.trim();
state.loginDraft.password = passwordInput.value;
navigate('key-storage-view');
if (!state.loginDraft.login || !state.loginDraft.password) {
window.alert('Введите логин и пароль');
return;
}
setAuthBusy(true);
setAuthError('');
enterButton.disabled = true;
enterButton.textContent = 'Входим...';
try {
await authService.reconnect(state.entrySettings.shineServer);
const result = await authService.login(state.loginDraft.login, state.loginDraft.password);
authorizeSession(result);
await refreshSessions();
setAuthInfo('Успешный вход выполнен.');
navigate('profile-view');
} catch (error) {
setAuthError(error.message);
window.alert(error.message);
} finally {
setAuthBusy(false);
enterButton.disabled = false;
enterButton.textContent = 'Войти';
}
});
actions.append(backButton, enterButton);
+104 -14
View File
@@ -1,5 +1,12 @@
import { renderHeader } from '../components/header.js?v=20260327192619';
import { state } from '../state.js?v=20260327192619';
import {
authService,
clearAuthMessages,
setAuthBusy,
setAuthError,
setAuthInfo,
state,
} from '../state.js?v=20260327192619';
export const pageMeta = { id: 'register-view', title: 'Зарегистрироваться', showAppChrome: false };
@@ -7,6 +14,8 @@ export function render({ navigate }) {
const screen = document.createElement('section');
screen.className = 'stack';
clearAuthMessages();
const form = document.createElement('div');
form.className = 'card stack';
@@ -22,16 +31,55 @@ export function render({ navigate }) {
passwordInput.value = state.registrationDraft.password;
passwordInput.placeholder = 'Введите пароль';
const advanced = document.createElement('label');
advanced.className = 'checkbox-row';
advanced.innerHTML = `<input type="checkbox" /> <span>Расширенные настройки</span>`;
const advancedInput = advanced.querySelector('input');
advancedInput.addEventListener('change', () => {
if (advancedInput.checked) {
window.alert('Расширенные настройки в стартовой версии не работают и не будут работать.');
advancedInput.checked = false;
const statusText = document.createElement('p');
statusText.className = 'meta-muted';
statusText.textContent = 'Проверка логина: не выполнена';
const checkButton = document.createElement('button');
checkButton.className = 'ghost-btn';
checkButton.type = 'button';
checkButton.textContent = 'Проверить логин';
const saveRootRow = document.createElement('label');
saveRootRow.className = 'checkbox-row';
saveRootRow.innerHTML = `<input type="checkbox" ${state.keyStorage.saveRoot ? 'checked' : ''} /> <span>Сохранить root key</span>`;
const saveRootInput = saveRootRow.querySelector('input');
const saveBchRow = document.createElement('label');
saveBchRow.className = 'checkbox-row';
saveBchRow.innerHTML = `<input type="checkbox" ${state.keyStorage.saveBlockchain ? 'checked' : ''} /> <span>Сохранить blockchain key</span>`;
const saveBchInput = saveBchRow.querySelector('input');
const saveDevRow = document.createElement('label');
saveDevRow.className = 'checkbox-row';
saveDevRow.innerHTML = '<input type="checkbox" checked disabled /> <span>device key сохраняется всегда</span>';
async function runAvailabilityCheck() {
const login = loginInput.value.trim();
if (!login) {
statusText.textContent = 'Введите логин';
return false;
}
});
checkButton.disabled = true;
checkButton.textContent = 'Проверка...';
try {
await authService.reconnect(state.entrySettings.shineServer);
const isFree = await authService.ensureLoginFree(login);
statusText.textContent = isFree ? 'Логин свободен ✅' : 'Логин уже занят ❌';
statusText.className = isFree ? 'is-available' : 'is-unavailable';
return isFree;
} catch (error) {
statusText.textContent = error.message;
statusText.className = 'is-unavailable';
return false;
} finally {
checkButton.disabled = false;
checkButton.textContent = 'Проверить логин';
}
}
checkButton.addEventListener('click', runAvailabilityCheck);
form.innerHTML = `
<label class="stack"><span class="field-label">Логин</span></label>
@@ -39,7 +87,7 @@ export function render({ navigate }) {
`;
form.children[0].append(loginInput);
form.children[1].append(passwordInput);
form.append(advanced);
form.append(checkButton, statusText, saveRootRow, saveBchRow, saveDevRow);
const actions = document.createElement('div');
actions.className = 'auth-footer-actions';
@@ -54,10 +102,52 @@ export function render({ navigate }) {
nextButton.className = 'primary-btn';
nextButton.type = 'button';
nextButton.textContent = 'Далее';
nextButton.addEventListener('click', () => {
state.registrationDraft.login = loginInput.value;
nextButton.addEventListener('click', async () => {
const isFree = await runAvailabilityCheck();
if (!isFree) {
setAuthError('Выберите свободный логин');
return;
}
state.registrationDraft.login = loginInput.value.trim();
state.registrationDraft.password = passwordInput.value;
navigate('registration-payment-view');
state.keyStorage.saveRoot = saveRootInput.checked;
state.keyStorage.saveBlockchain = saveBchInput.checked;
state.keyStorage.saveDevice = true;
if (!state.registrationDraft.password) {
window.alert('Введите пароль');
return;
}
setAuthBusy(true);
nextButton.disabled = true;
nextButton.textContent = 'Создание...';
setAuthError('');
try {
await authService.reconnect(state.entrySettings.shineServer);
const result = await authService.register(
state.registrationDraft.login,
state.registrationDraft.password,
{
saveRoot: state.keyStorage.saveRoot,
saveBlockchain: state.keyStorage.saveBlockchain,
saveDevice: true,
},
);
state.registrationDraft.sessionId = result.sessionId;
state.registrationDraft.storagePwd = result.storagePwd;
setAuthInfo(`Пользователь ${result.login} зарегистрирован`);
navigate('registration-keys-view');
} catch (error) {
setAuthError(error.message);
window.alert(error.message);
} finally {
setAuthBusy(false);
nextButton.disabled = false;
nextButton.textContent = 'Далее';
}
});
actions.append(backButton, nextButton);
+27 -34
View File
@@ -1,5 +1,11 @@
import { renderHeader } from '../components/header.js?v=20260327192619';
import { authorizeSession, state } from '../state.js?v=20260327192619';
import {
authorizeSession,
refreshSessions,
setAuthError,
setAuthInfo,
state,
} from '../state.js?v=20260327192619';
export const pageMeta = { id: 'registration-keys-view', title: 'Сохранение ключей', showAppChrome: false };
@@ -15,47 +21,23 @@ export function render({ navigate }) {
const title = document.createElement('p');
title.className = 'auth-copy';
title.textContent = `Поздравляю, ваш логин ${displayLogin} зарегистрирован.`;
title.textContent = `Поздравляю, логин ${displayLogin} зарегистрирован.`;
const question = document.createElement('p');
question.className = 'auth-copy';
question.textContent = 'Какие ключи вы хотите сохранить на этом устройстве?';
const rootToggle = document.createElement('input');
rootToggle.type = 'checkbox';
rootToggle.checked = state.keyStorage.saveRoot;
const blockchainToggle = document.createElement('input');
blockchainToggle.type = 'checkbox';
blockchainToggle.checked = state.keyStorage.saveBlockchain;
const deviceToggle = document.createElement('input');
deviceToggle.type = 'checkbox';
deviceToggle.checked = state.keyStorage.saveDevice;
rootToggle.addEventListener('change', () => {
state.keyStorage.saveRoot = rootToggle.checked;
});
blockchainToggle.addEventListener('change', () => {
state.keyStorage.saveBlockchain = blockchainToggle.checked;
});
deviceToggle.addEventListener('change', () => {
state.keyStorage.saveDevice = deviceToggle.checked;
});
question.textContent = 'Ключи считаются из пароля (SHA-256 + суффиксы root.key/dev.key/bch.key). В IndexedDB сохраняются только выбранные ключи и всегда device key.';
const rootRow = document.createElement('label');
rootRow.className = 'checkbox-row';
rootRow.append(rootToggle, document.createTextNode('root key'));
rootRow.innerHTML = `<input type="checkbox" ${state.keyStorage.saveRoot ? 'checked' : ''} disabled /> <span>root key</span>`;
const blockchainRow = document.createElement('label');
blockchainRow.className = 'checkbox-row';
blockchainRow.append(blockchainToggle, document.createTextNode('blockchain key'));
blockchainRow.innerHTML = `<input type="checkbox" ${state.keyStorage.saveBlockchain ? 'checked' : ''} disabled /> <span>blockchain key</span>`;
const deviceRow = document.createElement('label');
deviceRow.className = 'checkbox-row';
deviceRow.append(deviceToggle, document.createTextNode('device key'));
deviceRow.innerHTML = '<input type="checkbox" checked disabled /> <span>device key</span>';
card.append(title, question, rootRow, deviceRow, blockchainRow);
@@ -72,9 +54,20 @@ export function render({ navigate }) {
okButton.className = 'primary-btn';
okButton.type = 'button';
okButton.textContent = 'OK';
okButton.addEventListener('click', () => {
authorizeSession();
navigate('profile-view');
okButton.addEventListener('click', async () => {
try {
authorizeSession({
login: state.registrationDraft.login,
sessionId: state.registrationDraft.sessionId,
storagePwd: state.registrationDraft.storagePwd,
});
await refreshSessions();
setAuthInfo('Регистрация завершена, список сессий загружен.');
navigate('profile-view');
} catch (error) {
setAuthError(error.message);
window.alert(error.message);
}
});
actions.append(cancelButton, okButton);
@@ -82,7 +75,7 @@ export function render({ navigate }) {
screen.append(
renderHeader({
title: 'Сохранение ключей',
leftAction: { label: '←', onClick: () => navigate('registration-payment-view') },
leftAction: { label: '←', onClick: () => navigate('start-view') },
}),
card,
actions,