Профиль: реальные UserParam данные в правой вкладке и обновление через сервер

2026-04-05 20:39:17 +03:00 · 2026-04-05 20:39:17 +03:00 · 525627c972
commit 525627c972
parent cf5460c5c7
8 changed files with 385 additions and 56 deletions
--- a/Dev_Docs/API/03_Session_Management_API.md
+++ b/Dev_Docs/API/03_Session_Management_API.md
@ -114,3 +114,23 @@
  }
 }
 ```
+
+
+## 4. Формат `sessionId`
+
+Текущее серверное значение `sessionId` генерируется как:
+
+- случайные **32 байта** (`SecureRandom`),
+- кодирование в **стандартный Base64 RFC 4648** (алфавит `A-Z a-z 0-9 + /`),
+- **без padding** `=`.
+
+Практически это строка длиной около **43 символов** (для 32 байт без `=`).
+
+Пример реального формата:
+
+```
+K9v3nQ4u8jYk0a2p7cD4mLx1zR0sT5wV6bN8eH3fQ1M
+```
+
+Важно: это **не человеко-читаемое имя**, а непрозрачный идентификатор.
+Нужно передавать его как есть, без нормализации регистра и без URL-экранирования внутри JSON.
--- a/Dev_Docs/API/04_Add_Block_to_Blockchain_API.md
+++ b/Dev_Docs/API/04_Add_Block_to_Blockchain_API.md
@ -133,3 +133,28 @@
   - пересобрать следующий блок на актуальной вершине.
 3. Для edit-блоков всегда ссылаться на **оригинальный** блок, а не на предыдущий edit.
 4. Для связей/подписок использовать target на **root** (HEADER или CREATE_CHANNEL), а не на произвольный пост.
+
+
+## 8. USER_PARAM для «личных данных»
+
+Да, на текущем API это можно добавить **без изменения серверного кода**:
+
+- в `UserParam` поле `param` сейчас не ограничено фиксированным справочником;
+- сервер хранит пары `param -> value` как строки (при наличии корректной подписи и `time_ms`);
+- чтение уже есть через `GetUserParam` и `ListUserParams`.
+
+Рекомендуемый стартовый набор ключей для профиля (MVP):
+
+- `name`
+- `last_name`
+- `address_physical`
+- `address_web`
+- `phone`
+
+Практическая рекомендация: заранее зафиксировать единый словарь ключей в клиенте/документации, чтобы избежать дублей вида `lastname` vs `last_name`, `site` vs `address_web` и т.д.
+
+Ограничения, которые важно учесть:
+
+- сейчас нет серверной ACL-политики чтения параметров (в MVP их может читать любой клиент, который знает `login`);
+- нет валидации формата значений для конкретных ключей (телефон, URL и т.д. проверяются только на стороне клиента);
+- нет отдельного индекса/поиска по этим полям — только точечное чтение и listing по `login`.
--- a/Dev_Docs/API/05_Technical_Requests_API.md
+++ b/Dev_Docs/API/05_Technical_Requests_API.md
@ -135,3 +135,23 @@
 - `Ping` нужен для keep-alive и проверки, что WebSocket-соединение живо.
 - `GetServerInfo` нужен для выбора сервера в сети и показа публичной информации об узле.
 - Оба запроса доступны без авторизации.
+
+
+## 4. Прямое техническое сообщение в конкретную сессию
+
+На текущий момент в публичном JSON API этого документа **нет отдельного RPC** для отправки произвольного технического сообщения в конкретную сессию пользователя (по `sessionId`).
+
+Что уже есть в системе:
+
+- сервер хранит `sessionId` активной сессии;
+- есть `ListSessions`, чтобы клиент получил список sessionId своего пользователя;
+- у сервера есть внутренний реестр активных WS-подключений по `sessionId`.
+
+Чего не хватает для полноценной фичи «direct tech message by sessionId»:
+
+1. отдельная API-операция (например, `SendSessionTechMessage`);
+2. правило авторизации (кто имеет право писать в чужую/свою сессию);
+3. унифицированный формат payload и события доставки;
+4. коды ошибок (`SESSION_OFFLINE`, `SESSION_NOT_FOUND`, `FORBIDDEN` и т.п.).
+
+Итог: как инфраструктурная база это почти готово, но нужен отдельный RPC-слой и политика доступа.
--- a/shine-UI/js/pages/profile-view.js
+++ b/shine-UI/js/pages/profile-view.js
@ -1,19 +1,24 @@
 import { renderHeader } from '../components/header.js?v=20260403081123';
 import { profile } from '../mock-data.js?v=20260403081123';
+import { state } from '../state.js?v=20260403081123';
+import { loadProfileParams, profileFieldDefs, saveProfileParams } from '../services/user-profile-params.js?v=20260403081123';

 export const pageMeta = { id: 'profile-view', title: 'Профиль' };

+function formatDateTime(timeMs) {
+  if (!timeMs) return 'ещё не заполнено';
+  return new Date(timeMs).toLocaleString('ru-RU');
+}
+
+function getDisplayName(fieldMap) {
+  const firstName = fieldMap.get('first_name')?.value?.trim() || '';
+  const lastName = fieldMap.get('last_name')?.value?.trim() || '';
+  const fullName = `${firstName} ${lastName}`.trim();
+  return fullName || profile.name;
+}
+
 export function render({ navigate }) {
-  const badgeHelp = {
-    official: {
-      title: 'Официальный аккаунт',
-      text: 'Эта настройка включает или отключает отметку официального аккаунта в профиле. Используйте её, когда нужно показать или скрыть подтверждённый статус.',
-    },
-    shine: {
-      title: 'Сияющий',
-      text: 'Этот переключатель включает или отключает режим «Сияющий». Он управляет отображением дополнительного визуального акцента для профиля.',
-    },
-  };
+  const login = state.session.login || profile.login;

  const screen = document.createElement('section');
  screen.className = 'stack';
@ -25,83 +30,169 @@ export function render({ navigate }) {
        { label: 'Кошелёк', onClick: () => navigate('wallet-view') },
        { label: 'Настройки', onClick: () => navigate('settings-view') },
      ],
-    })
+    }),
  );

  const card = document.createElement('div');
  card.className = 'card stack';
-  card.innerHTML = `
-    <div class="row">
+
+  const topRow = document.createElement('div');
+  topRow.className = 'row';
+  topRow.innerHTML = `
+    <div class="row" style="gap:12px; align-items:center;">
      <div class="avatar large">${profile.avatarInitials}</div>
-      <div class="stack" style="justify-items:end; text-align:right;">
-        <button class="badge profile-badge-trigger" type="button" data-badge="official">✔ ${profile.badges[0]}</button>
-        <button class="badge alt profile-badge-trigger" type="button" data-badge="shine">✨ ${profile.badges[1]}</button>
+      <div>
+        <h2 style="font-size:22px; margin-bottom:2px;" data-profile-name="true">${profile.name}</h2>
+        <p class="meta-muted">${login}</p>
      </div>
    </div>
-    <div>
-      <h2 style="font-size:22px; margin-bottom:2px;">${profile.name}</h2>
-      <p class="meta-muted">${profile.login}</p>
-    </div>
-    <div class="stack" style="gap:8px;">
-      <div class="card" style="padding:10px;"><span class="meta-muted">Телефон:</span> ${profile.phone}</div>
-      <div class="card" style="padding:10px;"><span class="meta-muted">Адрес:</span> ${profile.address}</div>
-      <div class="card" style="padding:10px;"><span class="meta-muted">Email:</span> ${profile.email}</div>
-      <div class="card" style="padding:10px;"><span class="meta-muted">Соцсети:</span> ${profile.socials}</div>
-    </div>
+    <button class="primary-btn" type="button" data-open-edit="true">Обновить</button>
  `;

-  const modal = document.createElement('div');
-  modal.className = 'profile-help-modal';
-  modal.hidden = true;
-  modal.innerHTML = `
+  const hint = document.createElement('div');
+  hint.className = 'card profile-data-help';
+  hint.innerHTML = `
+    <div class="meta-muted">Личные данные пользователя</div>
+    <p>Поля ниже читаются из реальных пользовательских параметров сервера (ListUserParams). Кнопка «Обновить» отправляет UpsertUserParam, что добавляет новую запись в блокчейн.</p>
+  `;
+
+  const status = document.createElement('div');
+  status.className = 'status-line';
+  status.textContent = 'Загрузка параметров...';
+
+  const listWrap = document.createElement('div');
+  listWrap.className = 'stack profile-param-list';
+
+  const editModal = document.createElement('div');
+  editModal.className = 'profile-help-modal';
+  editModal.hidden = true;
+  editModal.innerHTML = `
    <div class="profile-help-backdrop" data-close="true"></div>
-    <div class="profile-help-dialog card" role="dialog" aria-modal="true" aria-labelledby="profile-help-title" tabindex="-1">
+    <div class="profile-help-dialog card" role="dialog" aria-modal="true" aria-labelledby="profile-edit-title" tabindex="-1">
      <div class="row" style="align-items:flex-start;">
        <div>
-          <div class="meta-muted" style="margin-bottom:4px;">Управление функцией</div>
-          <h3 id="profile-help-title" style="font-size:18px;"></h3>
+          <div class="meta-muted" style="margin-bottom:4px;">Обновление личных данных</div>
+          <h3 id="profile-edit-title" style="font-size:18px;">Редактирование профиля</h3>
        </div>
        <button class="icon-btn profile-help-close" type="button" aria-label="Закрыть">✕</button>
      </div>
-      <p class="profile-help-text"></p>
+      <p class="profile-help-text">После сохранения по каждому полю отправляется `UpsertUserParam`. Сервер хранит историю, а на экране показывается самое свежее значение по времени.</p>
+      <form class="stack" data-profile-form="true"></form>
+      <div class="row">
+        <button class="ghost-btn" type="button" data-cancel-edit="true">Отмена</button>
+        <button class="primary-btn" type="button" data-save-profile="true">Сохранить</button>
+      </div>
    </div>
  `;

-  const titleEl = modal.querySelector('#profile-help-title');
-  const textEl = modal.querySelector('.profile-help-text');
-  const dialogEl = modal.querySelector('.profile-help-dialog');
+  const profileNameEl = topRow.querySelector('[data-profile-name="true"]');
+  const openEditBtn = topRow.querySelector('[data-open-edit="true"]');
+  const formEl = editModal.querySelector('[data-profile-form="true"]');
+  const dialogEl = editModal.querySelector('.profile-help-dialog');
+  const saveBtn = editModal.querySelector('[data-save-profile="true"]');

-  function closeModal() {
-    modal.hidden = true;
+  let currentFields = profileFieldDefs.map((field) => ({ ...field, value: '', timeMs: 0 }));
+
+  function renderParams(fields) {
+    const fieldMap = new Map(fields.map((field) => [field.key, field]));
+    profileNameEl.textContent = getDisplayName(fieldMap);
+
+    listWrap.innerHTML = '';
+    fields.forEach((field) => {
+      const row = document.createElement('div');
+      row.className = 'card profile-param-item';
+      row.innerHTML = `
+        <div class="profile-param-head">
+          <span class="meta-muted">${field.label}</span>
+          <span class="meta-muted">${field.key}</span>
+        </div>
+        <div class="profile-param-value">${field.value || '—'}</div>
+        <div class="meta-muted profile-param-time">Обновлено: ${formatDateTime(field.timeMs)}</div>
+      `;
+      listWrap.append(row);
+    });
  }

-  function openModal(type) {
-    const content = badgeHelp[type];
-    if (!content) return;
+  async function refreshParams() {
+    status.className = 'status-line';
+    status.textContent = 'Загрузка параметров...';
+    openEditBtn.disabled = true;

-    titleEl.textContent = content.title;
-    textEl.textContent = content.text;
-    modal.hidden = false;
+    try {
+      const fields = await loadProfileParams(login);
+      currentFields = fields;
+      renderParams(fields);
+      status.className = 'status-line is-available';
+      status.textContent = 'Актуальные параметры загружены с сервера.';
+    } catch (error) {
+      renderParams(currentFields);
+      status.className = 'status-line is-unavailable';
+      status.textContent = `Не удалось загрузить параметры: ${error.message || 'ошибка сети'}`;
+    } finally {
+      openEditBtn.disabled = false;
+    }
+  }
+
+  function closeEditModal() {
+    editModal.hidden = true;
+  }
+
+  function openEditModal() {
+    formEl.innerHTML = '';
+
+    currentFields.forEach((field) => {
+      const fieldWrap = document.createElement('label');
+      fieldWrap.className = 'stack';
+      fieldWrap.innerHTML = `
+        <span class="field-label">${field.label}</span>
+        <input class="input" type="text" name="${field.key}" placeholder="${field.placeholder || ''}" value="${field.value || ''}" />
+      `;
+      formEl.append(fieldWrap);
+    });
+
+    editModal.hidden = false;
    dialogEl.focus();
  }

-  card.querySelectorAll('.profile-badge-trigger').forEach((button) => {
-    button.addEventListener('click', () => openModal(button.dataset.badge));
-  });
+  async function saveChanges() {
+    const valuesByKey = {};
+    currentFields.forEach((field) => {
+      const input = formEl.querySelector(`input[name="${field.key}"]`);
+      valuesByKey[field.key] = input instanceof HTMLInputElement ? input.value : '';
+    });

-  modal.addEventListener('click', (event) => {
+    saveBtn.disabled = true;
+    try {
+      await saveProfileParams(login, valuesByKey);
+      closeEditModal();
+      await refreshParams();
+    } catch (error) {
+      status.className = 'status-line is-unavailable';
+      status.textContent = `Не удалось сохранить: ${error.message || 'ошибка сети'}`;
+    } finally {
+      saveBtn.disabled = false;
+    }
+  }
+
+  openEditBtn.addEventListener('click', openEditModal);
+  saveBtn.addEventListener('click', saveChanges);
+  editModal.querySelector('[data-cancel-edit="true"]').addEventListener('click', closeEditModal);
+
+  editModal.addEventListener('click', (event) => {
    const target = event.target;
    if (target instanceof HTMLElement && (target.dataset.close === 'true' || target.classList.contains('profile-help-close'))) {
-      closeModal();
+      closeEditModal();
    }
  });

-  modal.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape') {
-      closeModal();
-    }
+  editModal.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') closeEditModal();
  });

-  screen.append(card, modal);
+  card.append(topRow, hint, status, listWrap);
+  screen.append(card, editModal);
+
+  refreshParams();
+
  return screen;
 }
--- a/shine-UI/js/services/auth-service.js
+++ b/shine-UI/js/services/auth-service.js
@ -8,9 +8,10 @@ import {
  randomBase64,
  signBase64,
 } from './crypto-utils.js?v=20260403081123';
-import { loadSessionMaterial, saveEncryptedUserSecrets, saveSessionMaterial } from './key-vault.js?v=20260403081123';
+import { loadEncryptedUserSecrets, loadSessionMaterial, saveEncryptedUserSecrets, saveSessionMaterial } from './key-vault.js?v=20260403081123';

 const BCH_SUFFIX = '001';
+const USER_PARAMETER_PREFIX = 'SHiNe/UserParameter:';

 function normalizeServerUrl(url) {
  const value = (url || '').trim();
@ -235,6 +236,51 @@ export class AuthService {
    return response.payload || {};
  }

+
+  async listUserParams(login) {
+    const cleanLogin = (login || '').trim();
+    if (!cleanLogin) throw new Error('Не передан login');
+    const response = await this.ws.request('ListUserParams', { login: cleanLogin });
+    if (response.status !== 200) throw opError('ListUserParams', response);
+    return response.payload || {};
+  }
+
+  async upsertUserParam({ login, param, value, timeMs = Date.now(), storagePwd }) {
+    const cleanLogin = (login || '').trim();
+    const cleanParam = (param || '').trim();
+    if (!cleanLogin || !cleanParam) throw new Error('Не переданы login/param');
+    if (!storagePwd) throw new Error('Не передан storagePwd для подписи UserParam');
+
+    const user = await this.getUser(cleanLogin);
+    const deviceKey = String(user?.deviceKey || '').trim();
+    if (!deviceKey) {
+      throw new Error('GetUser не вернул deviceKey для подписи UserParam');
+    }
+
+    const savedKeys = await loadEncryptedUserSecrets(cleanLogin, storagePwd);
+    const devicePrivatePkcs8 = savedKeys?.deviceKey;
+    if (!devicePrivatePkcs8) {
+      throw new Error('На устройстве нет сохраненного приватного deviceKey');
+    }
+
+    const privateKey = await importPkcs8Ed25519(devicePrivatePkcs8);
+    const cleanValue = String(value ?? '');
+    const signText = `${USER_PARAMETER_PREFIX}${cleanLogin}${cleanParam}${timeMs}${cleanValue}`;
+    const signature = await signBase64(privateKey, signText);
+
+    const response = await this.ws.request('UpsertUserParam', {
+      login: cleanLogin,
+      param: cleanParam,
+      time_ms: Number(timeMs),
+      value: cleanValue,
+      device_key: deviceKey,
+      signature,
+    });
+
+    if (response.status !== 200) throw opError('UpsertUserParam', response);
+    return response.payload || {};
+  }
+
  async reportClientError(details) {
    try {
      const response = await this.ws.request('ClientErrorLog', details || {}, 3000);
--- a/shine-UI/js/services/user-profile-params.js
+++ b/shine-UI/js/services/user-profile-params.js
@ -0,0 +1,68 @@
+import { authService, state } from '../state.js?v=20260403081123';
+
+export const profileFieldDefs = [
+  { key: 'first_name', readKeys: ['first_name', 'name'], label: 'First name', placeholder: 'Введите имя' },
+  { key: 'last_name', readKeys: ['last_name'], label: 'Last name', placeholder: 'Введите фамилию' },
+  { key: 'address_physical', readKeys: ['address_physical'], label: 'Address physical', placeholder: 'Город, улица, дом' },
+  { key: 'address_web', readKeys: ['address_web'], label: 'Address web', placeholder: 'Сайт или профиль' },
+  { key: 'phone', readKeys: ['phone'], label: 'Phone', placeholder: '+7 ...' },
+];
+
+function normalizeItems(responsePayload) {
+  const params = responsePayload?.params;
+  if (!Array.isArray(params)) return [];
+  return params
+    .map((item) => ({
+      param: String(item?.param || '').trim(),
+      value: String(item?.value || ''),
+      timeMs: Number(item?.time_ms || 0),
+    }))
+    .filter((item) => item.param);
+}
+
+function getLatestByAliases(items, aliases) {
+  let latest = null;
+  items.forEach((item) => {
+    if (!aliases.includes(item.param)) return;
+    if (!latest || item.timeMs >= latest.timeMs) {
+      latest = item;
+    }
+  });
+  return latest;
+}
+
+export async function loadProfileParams(login) {
+  const payload = await authService.listUserParams(login);
+  const items = normalizeItems(payload);
+
+  return profileFieldDefs.map((field) => {
+    const latest = getLatestByAliases(items, field.readKeys);
+    return {
+      key: field.key,
+      label: field.label,
+      placeholder: field.placeholder,
+      value: latest?.value || '',
+      timeMs: latest?.timeMs || 0,
+    };
+  });
+}
+
+export async function saveProfileParams(login, valuesByKey) {
+  const storagePwd = state.session.storagePwdInMemory;
+  if (!storagePwd) {
+    throw new Error('Нет storagePwd в памяти сессии. Выполните вход заново.');
+  }
+
+  const baseTime = Date.now();
+
+  for (let i = 0; i < profileFieldDefs.length; i += 1) {
+    const field = profileFieldDefs[i];
+    await authService.upsertUserParam({
+      login,
+      param: field.key,
+      value: String(valuesByKey[field.key] || '').trim(),
+      timeMs: baseTime + i,
+      storagePwd,
+    });
+  }
+}
--- a/shine-UI/styles/components.css
+++ b/shine-UI/styles/components.css
@ -131,6 +131,38 @@
  font-size: 14px;
 }

+
+.profile-data-help p {
+  margin-top: 6px;
+  line-height: 1.4;
+  color: #d8e3ff;
+}
+
+.profile-param-list {
+  gap: 8px;
+}
+
+.profile-param-item {
+  padding: 10px;
+  gap: 6px;
+}
+
+.profile-param-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.profile-param-value {
+  font-size: 15px;
+  color: #eef3ff;
+  word-break: break-word;
+}
+
+.profile-param-time {
+  font-size: 12px;
+}
+
 .auth-screen {
  min-height: calc(100dvh - 48px - env(safe-area-inset-bottom));
  display: grid;
--- a/task/2.md
+++ b/task/2.md
@ -0,0 +1,27 @@
+# Задача 2 — Проверка работы личных данных на правой вкладке профиля
+
+## Что реализовано
+- На правой вкладке `Профиль` отображаются реальные пользовательские параметры, загружаемые с сервера через `ListUserParams`.
+- Добавлены поля профиля:
+  - `first_name` (чтение с обратной совместимостью с `name`)
+  - `last_name`
+  - `address_physical`
+  - `address_web`
+  - `phone`
+- Добавлена кнопка `Обновить`, которая открывает форму редактирования.
+- При сохранении UI отправляет `UpsertUserParam` по каждому полю; сервер добавляет новые записи в блокчейн-историю параметров.
+- После сохранения экран заново запрашивает данные и показывает актуальные значения.
+
+## Что проверить вручную
+1. Авторизоваться пользователем и открыть правую вкладку `Профиль`.
+2. Убедиться, что поля загрузились не из заглушек, а из `ListUserParams`.
+3. Нажать `Обновить`, заполнить поля и нажать `Сохранить`.
+4. Убедиться, что после сохранения значения обновились на экране.
+5. Повторно изменить, например, `phone`.
+6. Убедиться, что отображается последнее значение (`самая новая запись` по времени).
+7. Перезайти на страницу профиля и убедиться, что значения сохраняются и снова читаются с сервера.
+
+## Ожидаемый результат
+- Правая вкладка профиля работает по-настоящему через API пользователя.
+- Данные не зависят от мок-заглушек старой версии страницы.
+- Сценарий повторного изменения поля корректно показывает последнее актуальное значение.