Restore registration step flow and create new session on login

shine-UI/js/pages/device-session-view.js

@@ -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;
 }

shine-UI/js/pages/device-view.js

@@ -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;
 }

shine-UI/js/pages/login-password-view.js

@@ -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.createSessionForExistingUser(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);

shine-UI/js/pages/register-view.js

@@ -1,5 +1,5 @@
 import { renderHeader } from '../components/header.js?v=20260327192619';
-import { state } from '../state.js?v=20260327192619';
+import { authService, state } from '../state.js?v=20260327192619';
 
 export const pageMeta = { id: 'register-view', title: 'Зарегистрироваться', showAppChrome: false };
 
@@ -22,16 +22,41 @@ 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 = 'Проверить логин';
+
+  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 +64,7 @@ export function render({ navigate }) {
   `;
   form.children[0].append(loginInput);
   form.children[1].append(passwordInput);
-  form.append(advanced);
+  form.append(checkButton, statusText);
 
   const actions = document.createElement('div');
   actions.className = 'auth-footer-actions';
@@ -54,9 +79,21 @@ 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) {
+      window.alert('Выберите свободный логин');
+      return;
+    }
+
+    state.registrationDraft.login = loginInput.value.trim();
     state.registrationDraft.password = passwordInput.value;
+
+    if (!state.registrationDraft.password) {
+      window.alert('Введите пароль');
+      return;
+    }
+
     navigate('registration-payment-view');
   });
 

shine-UI/js/pages/registration-keys-view.js

@@ -1,5 +1,12 @@
 import { renderHeader } from '../components/header.js?v=20260327192619';
-import { authorizeSession, state } from '../state.js?v=20260327192619';
+import {
+  authService,
+  authorizeSession,
+  refreshSessions,
+  setAuthError,
+  setAuthInfo,
+  state,
+} from '../state.js?v=20260327192619';
 
 export const pageMeta = { id: 'registration-keys-view', title: 'Сохранение ключей', showAppChrome: false };
 
@@ -15,11 +22,11 @@ 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 = 'Какие ключи вы хотите сохранить на этом устройстве?';
+  question.textContent = 'Какие ключи сохранить в зашифрованном контейнере IndexedDB?';
 
   const rootToggle = document.createElement('input');
   rootToggle.type = 'checkbox';
@@ -31,19 +38,8 @@ export function render({ navigate }) {
 
   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;
-  });
+  deviceToggle.checked = true;
+  deviceToggle.disabled = true;
 
   const rootRow = document.createElement('label');
   rootRow.className = 'checkbox-row';
@@ -55,7 +51,7 @@ export function render({ navigate }) {
 
   const deviceRow = document.createElement('label');
   deviceRow.className = 'checkbox-row';
-  deviceRow.append(deviceToggle, document.createTextNode('device key'));
+  deviceRow.append(deviceToggle, document.createTextNode('device key (всегда)'));
 
   card.append(title, question, rootRow, deviceRow, blockchainRow);
 
@@ -72,9 +68,41 @@ 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 {
+      if (!state.registrationDraft.pendingKeyBundle || !state.registrationDraft.pendingSessionMaterial) {
+        throw new Error('Сначала завершите шаг регистрации на предыдущем экране');
+      }
+
+      state.keyStorage.saveRoot = rootToggle.checked;
+      state.keyStorage.saveBlockchain = blockchainToggle.checked;
+
+      await authService.persistSelectedKeys(
+        state.registrationDraft.login,
+        state.registrationDraft.storagePwd,
+        state.registrationDraft.pendingKeyBundle,
+        {
+          saveRoot: state.keyStorage.saveRoot,
+          saveBlockchain: state.keyStorage.saveBlockchain,
+        },
+      );
+      await authService.persistSessionMaterial(
+        state.registrationDraft.login,
+        state.registrationDraft.pendingSessionMaterial,
+      );
+
+      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);

shine-UI/js/pages/registration-payment-view.js

@@ -1,5 +1,11 @@
 import { renderHeader } from '../components/header.js?v=20260327192619';
-import { refreshRegistrationBalance, state } from '../state.js?v=20260327192619';
+import {
+  authService,
+  refreshRegistrationBalance,
+  setAuthError,
+  setAuthInfo,
+  state,
+} from '../state.js?v=20260327192619';
 
 export const pageMeta = { id: 'registration-payment-view', title: 'Оплата регистрации', showAppChrome: false };
 
@@ -66,8 +72,28 @@ export function render({ navigate }) {
   submitButton.className = 'primary-btn';
   submitButton.type = 'button';
   submitButton.textContent = 'Зарегистрироваться';
-  submitButton.addEventListener('click', () => {
-    navigate('registration-keys-view');
+  submitButton.addEventListener('click', async () => {
+    try {
+      submitButton.disabled = true;
+      submitButton.textContent = 'Регистрация...';
+
+      await authService.reconnect(state.entrySettings.shineServer);
+      const result = await authService.registerUser(state.registrationDraft.login, state.registrationDraft.password);
+      state.registrationDraft.sessionId = result.sessionId;
+      state.registrationDraft.storagePwd = result.storagePwd;
+      state.registrationDraft.pendingKeyBundle = result.keyBundle;
+      state.registrationDraft.pendingSessionMaterial = result.sessionMaterial;
+
+      setAuthInfo(`Отлично, вы зарегистрировались: ${result.login}`);
+      window.alert('Отлично, вы зарегистрировались');
+      navigate('registration-keys-view');
+    } catch (error) {
+      setAuthError(error.message);
+      window.alert(error.message);
+    } finally {
+      submitButton.disabled = false;
+      submitButton.textContent = 'Зарегистрироваться';
+    }
   });
 
   card.innerHTML = `