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

This commit is contained in:
ai5590 2026-04-05 20:39:17 +03:00
parent cf5460c5c7
commit 525627c972
8 changed files with 385 additions and 56 deletions

View File

@ -114,3 +114,23 @@
} }
} }
``` ```
## 4. Формат `sessionId`
Текущее серверное значение `sessionId` генерируется как:
- случайные **32 байта** (`SecureRandom`),
- кодирование в **стандартный Base64 RFC 4648** (алфавит `A-Z a-z 0-9 + /`),
- **без padding** `=`.
Практически это строка длиной около **43 символов** (для 32 байт без `=`).
Пример реального формата:
```
K9v3nQ4u8jYk0a2p7cD4mLx1zR0sT5wV6bN8eH3fQ1M
```
Важно: это **не человеко-читаемое имя**, а непрозрачный идентификатор.
Нужно передавать его как есть, без нормализации регистра и без URL-экранирования внутри JSON.

View File

@ -133,3 +133,28 @@
- пересобрать следующий блок на актуальной вершине. - пересобрать следующий блок на актуальной вершине.
3. Для edit-блоков всегда ссылаться на **оригинальный** блок, а не на предыдущий edit. 3. Для edit-блоков всегда ссылаться на **оригинальный** блок, а не на предыдущий edit.
4. Для связей/подписок использовать target на **root** (HEADER или CREATE_CHANNEL), а не на произвольный пост. 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`.

View File

@ -135,3 +135,23 @@
- `Ping` нужен для keep-alive и проверки, что WebSocket-соединение живо. - `Ping` нужен для keep-alive и проверки, что WebSocket-соединение живо.
- `GetServerInfo` нужен для выбора сервера в сети и показа публичной информации об узле. - `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-слой и политика доступа.

View File

@ -1,19 +1,24 @@
import { renderHeader } from '../components/header.js?v=20260403081123'; import { renderHeader } from '../components/header.js?v=20260403081123';
import { profile } from '../mock-data.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: 'Профиль' }; 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 }) { export function render({ navigate }) {
const badgeHelp = { const login = state.session.login || profile.login;
official: {
title: 'Официальный аккаунт',
text: 'Эта настройка включает или отключает отметку официального аккаунта в профиле. Используйте её, когда нужно показать или скрыть подтверждённый статус.',
},
shine: {
title: 'Сияющий',
text: 'Этот переключатель включает или отключает режим «Сияющий». Он управляет отображением дополнительного визуального акцента для профиля.',
},
};
const screen = document.createElement('section'); const screen = document.createElement('section');
screen.className = 'stack'; screen.className = 'stack';
@ -25,83 +30,169 @@ export function render({ navigate }) {
{ label: 'Кошелёк', onClick: () => navigate('wallet-view') }, { label: 'Кошелёк', onClick: () => navigate('wallet-view') },
{ label: 'Настройки', onClick: () => navigate('settings-view') }, { label: 'Настройки', onClick: () => navigate('settings-view') },
], ],
}) }),
); );
const card = document.createElement('div'); const card = document.createElement('div');
card.className = 'card stack'; 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="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>
</div>
<div> <div>
<h2 style="font-size:22px; margin-bottom:2px;">${profile.name}</h2> <h2 style="font-size:22px; margin-bottom:2px;" data-profile-name="true">${profile.name}</h2>
<p class="meta-muted">${profile.login}</p> <p class="meta-muted">${login}</p>
</div> </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> </div>
<button class="primary-btn" type="button" data-open-edit="true">Обновить</button>
`; `;
const modal = document.createElement('div'); const hint = document.createElement('div');
modal.className = 'profile-help-modal'; hint.className = 'card profile-data-help';
modal.hidden = true; hint.innerHTML = `
modal.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-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 class="row" style="align-items:flex-start;">
<div> <div>
<div class="meta-muted" style="margin-bottom:4px;">Управление функцией</div> <div class="meta-muted" style="margin-bottom:4px;">Обновление личных данных</div>
<h3 id="profile-help-title" style="font-size:18px;"></h3> <h3 id="profile-edit-title" style="font-size:18px;">Редактирование профиля</h3>
</div> </div>
<button class="icon-btn profile-help-close" type="button" aria-label="Закрыть"></button> <button class="icon-btn profile-help-close" type="button" aria-label="Закрыть"></button>
</div> </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> </div>
`; `;
const titleEl = modal.querySelector('#profile-help-title'); const profileNameEl = topRow.querySelector('[data-profile-name="true"]');
const textEl = modal.querySelector('.profile-help-text'); const openEditBtn = topRow.querySelector('[data-open-edit="true"]');
const dialogEl = modal.querySelector('.profile-help-dialog'); 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() { let currentFields = profileFieldDefs.map((field) => ({ ...field, value: '', timeMs: 0 }));
modal.hidden = true;
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) { async function refreshParams() {
const content = badgeHelp[type]; status.className = 'status-line';
if (!content) return; status.textContent = 'Загрузка параметров...';
openEditBtn.disabled = true;
titleEl.textContent = content.title; try {
textEl.textContent = content.text; const fields = await loadProfileParams(login);
modal.hidden = false; 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(); dialogEl.focus();
} }
card.querySelectorAll('.profile-badge-trigger').forEach((button) => { async function saveChanges() {
button.addEventListener('click', () => openModal(button.dataset.badge)); 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; const target = event.target;
if (target instanceof HTMLElement && (target.dataset.close === 'true' || target.classList.contains('profile-help-close'))) { if (target instanceof HTMLElement && (target.dataset.close === 'true' || target.classList.contains('profile-help-close'))) {
closeModal(); closeEditModal();
} }
}); });
modal.addEventListener('keydown', (event) => { editModal.addEventListener('keydown', (event) => {
if (event.key === 'Escape') { if (event.key === 'Escape') closeEditModal();
closeModal();
}
}); });
screen.append(card, modal); card.append(topRow, hint, status, listWrap);
screen.append(card, editModal);
refreshParams();
return screen; return screen;
} }

View File

@ -8,9 +8,10 @@ import {
randomBase64, randomBase64,
signBase64, signBase64,
} from './crypto-utils.js?v=20260403081123'; } 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 BCH_SUFFIX = '001';
const USER_PARAMETER_PREFIX = 'SHiNe/UserParameter:';
function normalizeServerUrl(url) { function normalizeServerUrl(url) {
const value = (url || '').trim(); const value = (url || '').trim();
@ -235,6 +236,51 @@ export class AuthService {
return response.payload || {}; 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) { async reportClientError(details) {
try { try {
const response = await this.ws.request('ClientErrorLog', details || {}, 3000); const response = await this.ws.request('ClientErrorLog', details || {}, 3000);

View File

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

View File

@ -131,6 +131,38 @@
font-size: 14px; 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 { .auth-screen {
min-height: calc(100dvh - 48px - env(safe-area-inset-bottom)); min-height: calc(100dvh - 48px - env(safe-area-inset-bottom));
display: grid; display: grid;

27
task/2.md Normal file
View File

@ -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 пользователя.
- Данные не зависят от мок-заглушек старой версии страницы.
- Сценарий повторного изменения поля корректно показывает последнее актуальное значение.