SHA256
30 03 25
Добавил сайт с UI прямо сюда
This commit is contained in:
AidarKC
@@ -0,0 +1,41 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { channelPosts, channels } from '../mock-data.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'channel-view', title: 'Канал' };
|
||||
|
||||
export function render({ navigate, route }) {
|
||||
const channelId = route.params.channelId || 'ch1';
|
||||
const channel = channels.find((c) => c.id === channelId) || channels[0];
|
||||
const posts = channelPosts[channelId] || [];
|
||||
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: `Канал: ${channel.name}`,
|
||||
leftAction: { label: '←', onClick: () => navigate('channels-list') },
|
||||
})
|
||||
);
|
||||
|
||||
const head = document.createElement('div');
|
||||
head.className = 'card';
|
||||
head.innerHTML = `
|
||||
<strong># ${channel.name}</strong>
|
||||
<p class="meta-muted" style="margin-top:4px;">${channel.description}</p>
|
||||
<p class="meta-muted" style="margin-top:8px;">Публичный канал, режим только чтение</p>
|
||||
`;
|
||||
|
||||
const feed = document.createElement('div');
|
||||
feed.className = 'stack';
|
||||
|
||||
posts.forEach((post) => {
|
||||
const card = document.createElement('article');
|
||||
card.className = 'card stack';
|
||||
card.innerHTML = `<strong>${post.title}</strong><p class="meta-muted">${post.body}</p>`;
|
||||
feed.append(card);
|
||||
});
|
||||
|
||||
screen.append(head, feed);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { channels } from '../mock-data.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'channels-list', title: 'Каналы' };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(renderHeader({ title: 'Каналы' }));
|
||||
|
||||
const search = document.createElement('div');
|
||||
search.className = 'card';
|
||||
search.textContent = 'Найти канал';
|
||||
search.style.color = 'var(--text-muted)';
|
||||
|
||||
const list = document.createElement('div');
|
||||
list.className = 'stack';
|
||||
|
||||
channels.forEach((channel) => {
|
||||
const row = document.createElement('article');
|
||||
row.className = 'list-item';
|
||||
row.innerHTML = `
|
||||
<div class="avatar">${channel.initials}</div>
|
||||
<div>
|
||||
<strong># ${channel.name}</strong>
|
||||
<p class="meta-muted" style="margin-top:4px;">${channel.description}</p>
|
||||
<p class="meta-muted" style="margin-top:6px; color:#d8e3ff;">${channel.lastMessage}</p>
|
||||
</div>
|
||||
<div style="display:grid; justify-items:end; gap:6px;">
|
||||
<span class="badge alt" style="padding:4px 8px; font-size:10px;">Канал</span>
|
||||
<span class="meta-muted">${channel.time}</span>
|
||||
${channel.unread ? `<span class="unread">${channel.unread}</span>` : '<span></span>'}
|
||||
</div>
|
||||
`;
|
||||
row.addEventListener('click', () => navigate(`channel-view/${channel.id}`));
|
||||
list.append(row);
|
||||
});
|
||||
|
||||
screen.append(search, list);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { directMessages } from '../mock-data.js?v=20260327192619';
|
||||
import { addChatMessage, getChatMessages } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'chat-view', title: 'Чат' };
|
||||
|
||||
function renderLog(list, chatId) {
|
||||
list.innerHTML = '';
|
||||
const messages = getChatMessages(chatId);
|
||||
messages.forEach((msg) => {
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = `bubble ${msg.from}`;
|
||||
bubble.textContent = msg.text;
|
||||
list.append(bubble);
|
||||
});
|
||||
list.scrollTop = list.scrollHeight;
|
||||
}
|
||||
|
||||
export function render({ navigate, route }) {
|
||||
const chatId = route.params.chatId || 'u1';
|
||||
const contact = directMessages.find((d) => d.id === chatId) || directMessages[0];
|
||||
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: `Чат: ${contact.name}`,
|
||||
leftAction: { label: '←', onClick: () => navigate('messages-list') },
|
||||
})
|
||||
);
|
||||
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'chat-wrap';
|
||||
|
||||
const log = document.createElement('div');
|
||||
log.className = 'messages-log';
|
||||
|
||||
const form = document.createElement('form');
|
||||
form.className = 'chat-input';
|
||||
form.innerHTML = `
|
||||
<input class="input" type="text" name="message" placeholder="Введите сообщение" maxlength="300" />
|
||||
<button class="primary-btn" type="submit">Отправить</button>
|
||||
`;
|
||||
|
||||
form.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
const input = form.elements.message;
|
||||
addChatMessage(chatId, input.value);
|
||||
input.value = '';
|
||||
renderLog(log, chatId);
|
||||
});
|
||||
|
||||
renderLog(log, chatId);
|
||||
wrap.append(log, form);
|
||||
screen.append(wrap);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'connect-device-view', title: 'Подключить устройство' };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Подключить устройство',
|
||||
leftAction: { label: '←', onClick: () => navigate('device-view') },
|
||||
}),
|
||||
);
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
card.innerHTML = `
|
||||
<p>Выберите, какие ключи передать на подключаемое устройство</p>
|
||||
<label class="checkbox-row"><input type="checkbox" id="connect-root" ${state.deviceConnect.root ? 'checked' : ''} /> root key</label>
|
||||
<label class="checkbox-row"><input type="checkbox" id="connect-blockchain" ${state.deviceConnect.blockchain ? 'checked' : ''} /> blockchain key</label>
|
||||
<label class="checkbox-row"><input type="checkbox" id="connect-device" checked disabled /> device key</label>
|
||||
<div class="row">
|
||||
<button class="icon-btn small-btn" type="button" id="tech-help">Техсправка</button>
|
||||
</div>
|
||||
<div class="stack">
|
||||
<button class="primary-btn" type="button" id="open-qr">Показать QR-код для подключения</button>
|
||||
<button class="text-btn" type="button" id="open-camera">Подключить через камеру</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const rootToggle = card.querySelector('#connect-root');
|
||||
const blockchainToggle = card.querySelector('#connect-blockchain');
|
||||
const deviceToggle = card.querySelector('#connect-device');
|
||||
deviceToggle.checked = true;
|
||||
|
||||
rootToggle.addEventListener('change', () => {
|
||||
state.deviceConnect.root = rootToggle.checked;
|
||||
});
|
||||
blockchainToggle.addEventListener('change', () => {
|
||||
state.deviceConnect.blockchain = blockchainToggle.checked;
|
||||
});
|
||||
deviceToggle.addEventListener('change', () => {
|
||||
state.deviceConnect.device = true;
|
||||
deviceToggle.checked = true;
|
||||
});
|
||||
|
||||
const helpModal = document.createElement('div');
|
||||
helpModal.className = 'modal-shell';
|
||||
helpModal.hidden = true;
|
||||
helpModal.innerHTML = `
|
||||
<div class="modal-backdrop" data-close="true"></div>
|
||||
<div class="modal-dialog card" role="dialog" aria-modal="true" tabindex="-1">
|
||||
<div class="row" style="align-items:flex-start;">
|
||||
<h3 style="font-size:18px;">Техсправка</h3>
|
||||
<button class="icon-btn" type="button" data-close="true" aria-label="Закрыть">✕</button>
|
||||
</div>
|
||||
<div class="stack" style="gap:6px;">
|
||||
<p class="meta-muted">пользователь выбирает ключи для передачи</p>
|
||||
<p class="meta-muted">передать можно только существующие ключи</p>
|
||||
<p class="meta-muted">если ключа нет — он недоступен</p>
|
||||
<p class="meta-muted">blockchain key — можно передать или нет</p>
|
||||
<p class="meta-muted">root key — только если существует</p>
|
||||
<p class="meta-muted">device key передаётся всегда</p>
|
||||
<p class="meta-muted">подключение происходит напрямую через QR</p>
|
||||
<p class="meta-muted">сервер не используется</p>
|
||||
<p class="meta-muted">текущая логика: устройство 1 показывает QR, устройство 2 сканирует</p>
|
||||
<p class="meta-muted">обратный сценарий пока не реализован</p>
|
||||
</div>
|
||||
<button class="primary-btn" type="button" data-close="true">OK</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const openHelp = () => {
|
||||
helpModal.hidden = false;
|
||||
helpModal.querySelector('.modal-dialog').focus();
|
||||
};
|
||||
|
||||
const closeHelp = () => {
|
||||
helpModal.hidden = true;
|
||||
};
|
||||
|
||||
card.querySelector('#tech-help').addEventListener('click', openHelp);
|
||||
card.querySelector('#open-qr').addEventListener('click', () => navigate('device-qr-view'));
|
||||
card.querySelector('#open-camera').addEventListener('click', () => navigate('device-camera-view'));
|
||||
|
||||
helpModal.addEventListener('click', (event) => {
|
||||
const target = event.target;
|
||||
if (target instanceof HTMLElement && target.dataset.close === 'true') {
|
||||
closeHelp();
|
||||
}
|
||||
});
|
||||
|
||||
helpModal.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
closeHelp();
|
||||
}
|
||||
});
|
||||
|
||||
screen.append(card, helpModal);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { contactDirectory, directMessages } from '../mock-data.js?v=20260327192619';
|
||||
import { ensureChat } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'contact-search-view', title: 'Поиск контактов' };
|
||||
|
||||
function getMatches(query) {
|
||||
const normalized = query.trim().toLowerCase();
|
||||
if (!normalized) return [];
|
||||
|
||||
return contactDirectory
|
||||
.filter((contact) => contact.name.toLowerCase().startsWith(normalized))
|
||||
.slice(0, 5);
|
||||
}
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.className = 'input';
|
||||
input.type = 'text';
|
||||
input.name = 'contact';
|
||||
input.placeholder = 'Введите имя контакта';
|
||||
input.autocomplete = 'off';
|
||||
input.maxLength = 80;
|
||||
|
||||
const resultsCard = document.createElement('section');
|
||||
resultsCard.className = 'card stack';
|
||||
resultsCard.hidden = true;
|
||||
|
||||
const status = document.createElement('p');
|
||||
status.className = 'meta-muted';
|
||||
|
||||
const resultsList = document.createElement('div');
|
||||
resultsList.className = 'stack';
|
||||
|
||||
let latestMatches = [];
|
||||
|
||||
const renderResults = (matches, query) => {
|
||||
latestMatches = matches;
|
||||
resultsList.innerHTML = '';
|
||||
resultsCard.hidden = false;
|
||||
|
||||
if (!query.trim()) {
|
||||
status.textContent = 'Введите первые буквы имени, чтобы найти контакт.';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!matches.length) {
|
||||
status.textContent = 'Совпадений не найдено.';
|
||||
return;
|
||||
}
|
||||
|
||||
status.textContent = `Найдено пользователей: ${matches.length}`;
|
||||
|
||||
matches.forEach((contact) => {
|
||||
const row = document.createElement('article');
|
||||
row.className = 'list-item';
|
||||
row.innerHTML = `
|
||||
<div class="avatar">${contact.initials}</div>
|
||||
<div>
|
||||
<strong>${contact.name}</strong>
|
||||
<p class="meta-muted" style="margin-top:4px;">${contact.about}</p>
|
||||
</div>
|
||||
<div class="meta-muted">Контакт</div>
|
||||
`;
|
||||
resultsList.append(row);
|
||||
});
|
||||
};
|
||||
|
||||
const searchButton = document.createElement('button');
|
||||
searchButton.className = 'primary-btn';
|
||||
searchButton.type = 'button';
|
||||
searchButton.textContent = 'Найти';
|
||||
searchButton.addEventListener('click', () => {
|
||||
renderResults(getMatches(input.value), input.value);
|
||||
});
|
||||
|
||||
const addButton = document.createElement('button');
|
||||
addButton.className = 'ghost-btn';
|
||||
addButton.type = 'button';
|
||||
addButton.textContent = 'Добавить';
|
||||
addButton.addEventListener('click', () => {
|
||||
if (!latestMatches.length) {
|
||||
status.textContent = 'Сначала выполните поиск, чтобы добавить контакт.';
|
||||
resultsCard.hidden = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const contact = latestMatches[0];
|
||||
const exists = directMessages.some((item) => item.id === contact.id);
|
||||
|
||||
if (!exists) {
|
||||
directMessages.unshift({
|
||||
id: contact.id,
|
||||
name: contact.name,
|
||||
initials: contact.initials,
|
||||
lastMessage: 'Новый контакт добавлен. Можно начинать диалог.',
|
||||
time: 'сейчас',
|
||||
unread: 0,
|
||||
});
|
||||
}
|
||||
|
||||
ensureChat(contact.id);
|
||||
navigate(`chat-view/${contact.id}`);
|
||||
});
|
||||
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'contact-search-actions';
|
||||
controls.append(searchButton, addButton);
|
||||
|
||||
const formCard = document.createElement('section');
|
||||
formCard.className = 'card stack';
|
||||
formCard.append(input, controls);
|
||||
|
||||
resultsCard.append(status, resultsList);
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Поиск контактов',
|
||||
leftAction: { label: '←', onClick: () => navigate('messages-list') },
|
||||
}),
|
||||
formCard,
|
||||
resultsCard,
|
||||
);
|
||||
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'device-camera-view', title: 'Подключить через камеру' };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Подключить через камеру',
|
||||
leftAction: { label: '←', onClick: () => navigate('connect-device-view') },
|
||||
}),
|
||||
);
|
||||
|
||||
const frame = document.createElement('div');
|
||||
frame.className = 'camera-shell';
|
||||
frame.innerHTML = `
|
||||
<div class="camera-placeholder">Область камеры (демо-заглушка)</div>
|
||||
<div class="camera-frame"></div>
|
||||
<div class="camera-hint">Логика сканирования пока не реализована</div>
|
||||
`;
|
||||
|
||||
screen.append(frame);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { profile } from '../mock-data.js?v=20260327192619';
|
||||
import { state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'device-qr-view', title: 'Показать QR-код' };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const selectedKeys = [];
|
||||
if (state.deviceConnect.root) selectedKeys.push('root key');
|
||||
if (state.deviceConnect.blockchain) selectedKeys.push('blockchain key');
|
||||
if (state.deviceConnect.device) selectedKeys.push('device key');
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Показать QR-код',
|
||||
leftAction: { label: '←', onClick: () => navigate('connect-device-view') },
|
||||
}),
|
||||
);
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack qr-card';
|
||||
card.innerHTML = `
|
||||
<img class="qr-image" src="img/device-qr-64.svg" width="64" height="64" alt="QR-код для подключения" />
|
||||
<p class="meta-muted">Логин пользователя: ${profile.login}</p>
|
||||
<p class="meta-muted">Передаваемые ключи: ${selectedKeys.join(', ')}</p>
|
||||
<button class="primary-btn" type="button" id="qr-ok">OK</button>
|
||||
`;
|
||||
|
||||
card.querySelector('#qr-ok').addEventListener('click', () => navigate('connect-device-view'));
|
||||
|
||||
screen.append(card);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { deviceSessions } from '../mock-data.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'device-session-view', title: 'Сеанс устройства' };
|
||||
|
||||
function formatSessionTime(ms) {
|
||||
return new Date(ms).toLocaleString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
export function render({ navigate, route }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const sessionId = route?.params?.sessionId || '';
|
||||
const session = deviceSessions.find((item) => item.sessionId === sessionId) || deviceSessions[0];
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Сеанс устройства',
|
||||
leftAction: { label: '←', onClick: () => navigate('device-view') },
|
||||
}),
|
||||
);
|
||||
|
||||
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>
|
||||
`;
|
||||
|
||||
const actionBtn = document.createElement('button');
|
||||
actionBtn.className = 'text-btn';
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
confirmModal.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
screen.append(details, actionBtn, confirmModal);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { deviceSessions } from '../mock-data.js?v=20260327192619';
|
||||
import { terminateCurrentSession } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'device-view', title: 'Устройства' };
|
||||
|
||||
function formatSessionTime(ms) {
|
||||
return new Date(ms).toLocaleString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Устройства',
|
||||
leftAction: { label: '←', onClick: () => navigate('settings-view') },
|
||||
}),
|
||||
);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'card stack';
|
||||
actions.innerHTML = `
|
||||
<button class="primary-btn" type="button" id="connect-device-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 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>
|
||||
</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;
|
||||
};
|
||||
|
||||
const currentMenu = document.createElement('div');
|
||||
currentMenu.className = 'stack';
|
||||
currentMenu.innerHTML = '<p class="meta-muted">Текущий сеанс</p>';
|
||||
currentMenu.append(createSessionItem(currentSession, true));
|
||||
|
||||
const endCurrentSessionBtn = document.createElement('button');
|
||||
endCurrentSessionBtn.className = 'text-btn';
|
||||
endCurrentSessionBtn.type = 'button';
|
||||
endCurrentSessionBtn.textContent = 'Завершить текущую сессию';
|
||||
currentMenu.append(endCurrentSessionBtn);
|
||||
|
||||
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 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 openModal = () => {
|
||||
confirmModal.hidden = false;
|
||||
confirmModal.querySelector('.modal-dialog').focus();
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
confirmModal.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
sessionsBlock.append(currentMenu, othersMenu);
|
||||
screen.append(actions, sessionsBlock, confirmModal);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { checkServerAvailability, saveEntrySettings, state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'entry-settings-view', title: 'Настройки входа', showAppChrome: false };
|
||||
|
||||
const SERVER_FIELDS = [
|
||||
{ key: 'solanaServer', label: 'Адрес Solana сервера' },
|
||||
{ key: 'shineServer', label: 'Адрес сервера Сияние' },
|
||||
{ key: 'arweaveServer', label: 'Адрес сервера Arweave' },
|
||||
];
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const draft = {
|
||||
language: state.entrySettings.language,
|
||||
solanaServer: state.entrySettings.solanaServer,
|
||||
shineServer: state.entrySettings.shineServer,
|
||||
arweaveServer: state.entrySettings.arweaveServer,
|
||||
statuses: { ...state.entrySettings.statuses },
|
||||
};
|
||||
|
||||
const timers = new Map();
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.className = 'card stack';
|
||||
|
||||
const languageLabel = document.createElement('label');
|
||||
languageLabel.className = 'stack';
|
||||
languageLabel.innerHTML = `<span class="field-label">Язык</span>`;
|
||||
|
||||
const languageSelect = document.createElement('select');
|
||||
languageSelect.className = 'select';
|
||||
languageSelect.innerHTML = `
|
||||
<option value="ru">Русский</option>
|
||||
<option value="en">English</option>
|
||||
`;
|
||||
languageSelect.value = draft.language;
|
||||
languageSelect.addEventListener('change', () => {
|
||||
draft.language = languageSelect.value;
|
||||
});
|
||||
languageLabel.append(languageSelect);
|
||||
|
||||
body.append(languageLabel);
|
||||
|
||||
SERVER_FIELDS.forEach((field) => {
|
||||
const block = document.createElement('div');
|
||||
block.className = 'stack';
|
||||
|
||||
const title = document.createElement('label');
|
||||
title.className = 'field-label';
|
||||
title.textContent = field.label;
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.className = 'input';
|
||||
input.type = 'text';
|
||||
input.value = draft[field.key];
|
||||
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'row wrap-row';
|
||||
|
||||
const checkButton = document.createElement('button');
|
||||
checkButton.className = 'ghost-btn server-check-btn';
|
||||
checkButton.type = 'button';
|
||||
checkButton.textContent = 'Проверить';
|
||||
|
||||
const status = document.createElement('span');
|
||||
status.className = 'status-line';
|
||||
|
||||
const applyStatus = (value) => {
|
||||
draft.statuses[field.key] = value;
|
||||
checkButton.classList.remove('is-available', 'is-unavailable');
|
||||
status.classList.remove('is-available', 'is-unavailable');
|
||||
|
||||
if (value === 'available') {
|
||||
status.textContent = 'Доступен';
|
||||
checkButton.classList.add('is-available');
|
||||
status.classList.add('is-available');
|
||||
} else if (value === 'unavailable') {
|
||||
status.textContent = 'Недоступен';
|
||||
checkButton.classList.add('is-unavailable');
|
||||
status.classList.add('is-unavailable');
|
||||
} else {
|
||||
status.textContent = 'Статус не проверен';
|
||||
}
|
||||
};
|
||||
|
||||
const runCheck = () => {
|
||||
draft[field.key] = input.value.trim();
|
||||
applyStatus(checkServerAvailability(input.value));
|
||||
};
|
||||
|
||||
applyStatus(draft.statuses[field.key]);
|
||||
|
||||
checkButton.addEventListener('click', runCheck);
|
||||
input.addEventListener('input', () => {
|
||||
draft[field.key] = input.value;
|
||||
applyStatus('idle');
|
||||
window.clearTimeout(timers.get(field.key));
|
||||
timers.set(field.key, window.setTimeout(runCheck, 3000));
|
||||
});
|
||||
input.addEventListener('blur', runCheck);
|
||||
input.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
runCheck();
|
||||
}
|
||||
});
|
||||
|
||||
controls.append(checkButton, status);
|
||||
block.append(title, input, controls);
|
||||
body.append(block);
|
||||
});
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-footer-actions';
|
||||
|
||||
const cancelButton = document.createElement('button');
|
||||
cancelButton.className = 'ghost-btn';
|
||||
cancelButton.type = 'button';
|
||||
cancelButton.textContent = 'Отмена';
|
||||
cancelButton.addEventListener('click', () => navigate('start-view'));
|
||||
|
||||
const saveButton = document.createElement('button');
|
||||
saveButton.className = 'primary-btn';
|
||||
saveButton.type = 'button';
|
||||
saveButton.textContent = 'Сохранить';
|
||||
saveButton.addEventListener('click', () => {
|
||||
saveEntrySettings(draft);
|
||||
navigate('start-view');
|
||||
});
|
||||
|
||||
actions.append(cancelButton, saveButton);
|
||||
|
||||
const help = document.createElement('button');
|
||||
help.className = 'help-fab';
|
||||
help.type = 'button';
|
||||
help.textContent = '?';
|
||||
help.addEventListener('click', () => {
|
||||
window.alert(
|
||||
'Текст для разработчиков: после ввода адреса любого сервера автопроверка запускается по кнопке "Проверить", после перехода в другое поле или если подождать больше 3 секунд. Зелёный статус означает доступность, красный — недоступность.',
|
||||
);
|
||||
});
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Настройки входа',
|
||||
leftAction: { label: '←', onClick: () => navigate('start-view') },
|
||||
}),
|
||||
body,
|
||||
actions,
|
||||
help,
|
||||
);
|
||||
|
||||
screen.cleanup = () => {
|
||||
timers.forEach((timerId) => window.clearTimeout(timerId));
|
||||
};
|
||||
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { authorizeSession, state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'key-storage-view', title: 'Какие ключи сохранить', showAppChrome: false };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
|
||||
const rootToggle = document.createElement('input');
|
||||
rootToggle.type = 'checkbox';
|
||||
rootToggle.checked = state.keyStorage.saveRoot;
|
||||
rootToggle.addEventListener('change', () => {
|
||||
state.keyStorage.saveRoot = rootToggle.checked;
|
||||
if (rootToggle.checked) {
|
||||
window.alert('Мы советуем не сохранять главный ключ на устройстве, он используется только для смены паролей и основных настроек.');
|
||||
}
|
||||
});
|
||||
|
||||
const blockchainToggle = document.createElement('input');
|
||||
blockchainToggle.type = 'checkbox';
|
||||
blockchainToggle.checked = state.keyStorage.saveBlockchain;
|
||||
blockchainToggle.addEventListener('change', () => {
|
||||
state.keyStorage.saveBlockchain = blockchainToggle.checked;
|
||||
});
|
||||
|
||||
const deviceToggle = document.createElement('input');
|
||||
deviceToggle.type = 'checkbox';
|
||||
deviceToggle.checked = true;
|
||||
deviceToggle.disabled = true;
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="key-card stack">
|
||||
<label class="checkbox-row"><span class="field-label">Root Key</span></label>
|
||||
<input class="input" type="text" value="${state.keyStorage.rootKey}" />
|
||||
</div>
|
||||
<div class="key-card stack">
|
||||
<label class="checkbox-row"><span class="field-label">Blockchain Key</span></label>
|
||||
<input class="input" type="text" value="${state.keyStorage.blockchainKey}" />
|
||||
</div>
|
||||
<div class="key-card stack">
|
||||
<label class="checkbox-row"><span class="field-label">Device Key</span></label>
|
||||
<input class="input" type="text" value="${state.keyStorage.deviceKey}" />
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.children[0].querySelector('label').prepend(rootToggle);
|
||||
card.children[1].querySelector('label').prepend(blockchainToggle);
|
||||
card.children[2].querySelector('label').prepend(deviceToggle);
|
||||
|
||||
const rootInput = card.children[0].querySelector('.input');
|
||||
rootInput.addEventListener('input', () => {
|
||||
state.keyStorage.rootKey = rootInput.value;
|
||||
});
|
||||
|
||||
const blockchainInput = card.children[1].querySelector('.input');
|
||||
blockchainInput.addEventListener('input', () => {
|
||||
state.keyStorage.blockchainKey = blockchainInput.value;
|
||||
});
|
||||
|
||||
const deviceInput = card.children[2].querySelector('.input');
|
||||
deviceInput.addEventListener('input', () => {
|
||||
state.keyStorage.deviceKey = deviceInput.value;
|
||||
});
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-footer-actions';
|
||||
|
||||
const cancelButton = document.createElement('button');
|
||||
cancelButton.className = 'ghost-btn';
|
||||
cancelButton.type = 'button';
|
||||
cancelButton.textContent = 'Отмена';
|
||||
cancelButton.addEventListener('click', () => navigate('login-password-view'));
|
||||
|
||||
const okButton = document.createElement('button');
|
||||
okButton.className = 'primary-btn';
|
||||
okButton.type = 'button';
|
||||
okButton.textContent = 'OK';
|
||||
okButton.addEventListener('click', () => {
|
||||
authorizeSession();
|
||||
navigate('profile-view');
|
||||
});
|
||||
|
||||
actions.append(cancelButton, okButton);
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Какие ключи сохранить',
|
||||
leftAction: { label: '←', onClick: () => navigate('login-password-view') },
|
||||
}),
|
||||
card,
|
||||
actions,
|
||||
);
|
||||
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'language-view', title: 'Язык' };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Язык',
|
||||
leftAction: { label: '←', onClick: () => navigate('settings-view') },
|
||||
}),
|
||||
);
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
card.innerHTML = `
|
||||
<label class="checkbox-row"><input type="radio" name="language" value="ru" ${state.entrySettings.language === 'ru' ? 'checked' : ''} /> Русский</label>
|
||||
<label class="checkbox-row"><input type="radio" name="language" value="en" ${state.entrySettings.language === 'en' ? 'checked' : ''} /> English</label>
|
||||
`;
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-footer-actions';
|
||||
actions.innerHTML = `
|
||||
<button class="primary-btn" type="button" id="language-ok">ОК</button>
|
||||
<button class="ghost-btn" type="button" id="language-cancel">Отмена</button>
|
||||
`;
|
||||
|
||||
actions.querySelector('#language-ok').addEventListener('click', () => {
|
||||
const selected = card.querySelector('input[name="language"]:checked');
|
||||
if (selected) {
|
||||
state.entrySettings.language = selected.value;
|
||||
}
|
||||
navigate('settings-view');
|
||||
});
|
||||
|
||||
actions.querySelector('#language-cancel').addEventListener('click', () => navigate('settings-view'));
|
||||
|
||||
screen.append(card, actions);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'login-camera-view', title: 'Войти по камере', showAppChrome: false };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const frame = document.createElement('div');
|
||||
frame.className = 'camera-shell';
|
||||
frame.innerHTML = `
|
||||
<video class="camera-video" autoplay playsinline muted></video>
|
||||
<div class="camera-frame"></div>
|
||||
<div class="camera-hint">Наведите QR-код в рамку</div>
|
||||
`;
|
||||
|
||||
const video = frame.querySelector('video');
|
||||
let stream = null;
|
||||
|
||||
const stopCamera = () => {
|
||||
if (stream) {
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
stream = null;
|
||||
}
|
||||
};
|
||||
|
||||
if (navigator.mediaDevices?.getUserMedia) {
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ video: { facingMode: 'environment' }, audio: false })
|
||||
.then((nextStream) => {
|
||||
stream = nextStream;
|
||||
video.srcObject = nextStream;
|
||||
})
|
||||
.catch(() => {
|
||||
frame.insertAdjacentHTML('beforeend', '<div class="camera-error">Не удалось открыть камеру. Проверьте разрешения браузера.</div>');
|
||||
});
|
||||
} else {
|
||||
frame.insertAdjacentHTML('beforeend', '<div class="camera-error">Камера не поддерживается в этом браузере.</div>');
|
||||
}
|
||||
|
||||
const backButton = document.createElement('button');
|
||||
backButton.className = 'ghost-btn';
|
||||
backButton.type = 'button';
|
||||
backButton.textContent = 'Назад';
|
||||
backButton.addEventListener('click', () => {
|
||||
stopCamera();
|
||||
navigate('login-view');
|
||||
});
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Войти по камере',
|
||||
leftAction: {
|
||||
label: '←',
|
||||
onClick: () => {
|
||||
stopCamera();
|
||||
navigate('login-view');
|
||||
},
|
||||
},
|
||||
}),
|
||||
frame,
|
||||
backButton,
|
||||
);
|
||||
|
||||
screen.cleanup = stopCamera;
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'login-password-view', title: 'Войти по логину', showAppChrome: false };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const form = document.createElement('div');
|
||||
form.className = 'card stack';
|
||||
|
||||
const loginInput = document.createElement('input');
|
||||
loginInput.className = 'input';
|
||||
loginInput.type = 'text';
|
||||
loginInput.value = state.loginDraft.login;
|
||||
loginInput.placeholder = 'Введите логин';
|
||||
|
||||
const passwordInput = document.createElement('input');
|
||||
passwordInput.className = 'input';
|
||||
passwordInput.type = 'password';
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
form.innerHTML = `
|
||||
<label class="stack"><span class="field-label">Логин</span></label>
|
||||
<label class="stack"><span class="field-label">Пароль</span></label>
|
||||
`;
|
||||
form.children[0].append(loginInput);
|
||||
form.children[1].append(passwordInput);
|
||||
form.append(advanced);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-footer-actions';
|
||||
|
||||
const backButton = document.createElement('button');
|
||||
backButton.className = 'ghost-btn';
|
||||
backButton.type = 'button';
|
||||
backButton.textContent = 'Назад';
|
||||
backButton.addEventListener('click', () => navigate('login-view'));
|
||||
|
||||
const enterButton = document.createElement('button');
|
||||
enterButton.className = 'primary-btn';
|
||||
enterButton.type = 'button';
|
||||
enterButton.textContent = 'Войти';
|
||||
enterButton.addEventListener('click', () => {
|
||||
state.loginDraft.login = loginInput.value;
|
||||
state.loginDraft.password = passwordInput.value;
|
||||
navigate('key-storage-view');
|
||||
});
|
||||
|
||||
actions.append(backButton, enterButton);
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Войти по логину',
|
||||
leftAction: { label: '←', onClick: () => navigate('login-view') },
|
||||
}),
|
||||
form,
|
||||
actions,
|
||||
);
|
||||
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'login-view', title: 'Войти', showAppChrome: false };
|
||||
|
||||
function createQrCode() {
|
||||
const svgNS = 'http://www.w3.org/2000/svg';
|
||||
const svg = document.createElementNS(svgNS, 'svg');
|
||||
svg.setAttribute('viewBox', '0 0 100 100');
|
||||
svg.classList.add('qr-code');
|
||||
|
||||
const cells = [
|
||||
[6, 6, 22, 22], [72, 6, 22, 22], [6, 72, 22, 22], [14, 14, 6, 6], [80, 14, 6, 6], [14, 80, 6, 6],
|
||||
[38, 12, 8, 8], [52, 12, 8, 8], [38, 26, 8, 8], [52, 26, 8, 8], [32, 40, 10, 10], [48, 40, 10, 10],
|
||||
[64, 40, 10, 10], [40, 56, 8, 8], [56, 56, 8, 8], [72, 56, 8, 8], [32, 72, 8, 8], [48, 72, 8, 8],
|
||||
[64, 72, 8, 8], [48, 86, 8, 8],
|
||||
];
|
||||
|
||||
cells.forEach(([x, y, width, height]) => {
|
||||
const rect = document.createElementNS(svgNS, 'rect');
|
||||
rect.setAttribute('x', x);
|
||||
rect.setAttribute('y', y);
|
||||
rect.setAttribute('width', width);
|
||||
rect.setAttribute('height', height);
|
||||
rect.setAttribute('rx', '2');
|
||||
svg.append(rect);
|
||||
});
|
||||
|
||||
return svg;
|
||||
}
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const qrCard = document.createElement('div');
|
||||
qrCard.className = 'card stack qr-card';
|
||||
qrCard.append(createQrCode());
|
||||
|
||||
const cameraButton = document.createElement('button');
|
||||
cameraButton.className = 'primary-btn';
|
||||
cameraButton.type = 'button';
|
||||
cameraButton.textContent = 'Войти по камере';
|
||||
cameraButton.addEventListener('click', () => navigate('login-camera-view'));
|
||||
|
||||
const loginButton = document.createElement('button');
|
||||
loginButton.className = 'ghost-btn';
|
||||
loginButton.type = 'button';
|
||||
loginButton.textContent = 'Войти по логину';
|
||||
loginButton.addEventListener('click', () => navigate('login-password-view'));
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-actions';
|
||||
actions.append(cameraButton, loginButton);
|
||||
|
||||
const backButton = document.createElement('button');
|
||||
backButton.className = 'ghost-btn';
|
||||
backButton.type = 'button';
|
||||
backButton.textContent = 'Назад';
|
||||
backButton.addEventListener('click', () => navigate('start-view'));
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Войти',
|
||||
leftAction: { label: '←', onClick: () => navigate('start-view') },
|
||||
}),
|
||||
qrCard,
|
||||
actions,
|
||||
backButton,
|
||||
);
|
||||
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { directMessages } from '../mock-data.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'messages-list', title: 'Личные сообщения' };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Личные сообщения',
|
||||
rightActions: [{ label: '+', onClick: () => navigate('contact-search-view') }],
|
||||
}),
|
||||
);
|
||||
|
||||
const list = document.createElement('div');
|
||||
list.className = 'stack';
|
||||
|
||||
directMessages.forEach((item) => {
|
||||
const row = document.createElement('article');
|
||||
row.className = 'list-item';
|
||||
row.innerHTML = `
|
||||
<div class="avatar">${item.initials}</div>
|
||||
<div>
|
||||
<div class="row" style="justify-content:flex-start; gap:8px;">
|
||||
<strong>${item.name}</strong>
|
||||
</div>
|
||||
<p class="meta-muted" style="margin-top:4px;">${item.lastMessage}</p>
|
||||
</div>
|
||||
<div style="display:grid; justify-items:end; gap:6px;">
|
||||
<span class="meta-muted">${item.time}</span>
|
||||
${item.unread ? `<span class="unread">${item.unread}</span>` : '<span></span>'}
|
||||
</div>
|
||||
`;
|
||||
row.addEventListener('click', () => navigate(`chat-view/${item.id}`));
|
||||
list.append(row);
|
||||
});
|
||||
|
||||
screen.append(list);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { networkGraph } from '../mock-data.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'network-view', title: 'Связи' };
|
||||
|
||||
function toPoint(v) {
|
||||
return `${v.x}%`;
|
||||
}
|
||||
|
||||
function showHelpModal() {
|
||||
const root = document.getElementById('modal-root');
|
||||
root.innerHTML = `
|
||||
<div class="modal" id="network-help-modal">
|
||||
<div class="modal-card stack">
|
||||
<h3 style="font-size:18px;">Справка по схеме связей</h3>
|
||||
<p class="meta-muted">В центре находишься ты.</p>
|
||||
<p class="meta-muted">Рядом показаны друзья первого уровня.</p>
|
||||
<p class="meta-muted">Далее могут существовать друзья второго уровня.</p>
|
||||
<p class="meta-muted">При одном нажатии на узел можно показать его связи.</p>
|
||||
<p class="meta-muted">При двойном нажатии узел может переместиться в центр.</p>
|
||||
<p class="meta-muted">При долгом удержании может открываться меню действий.</p>
|
||||
<p class="meta-muted">Логика схемы строится на одном запросе связей пользователя, дальше дерево достраивается на его основе.</p>
|
||||
<button class="primary-btn" id="close-network-help">Понятно</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
root.querySelector('#close-network-help').addEventListener('click', () => {
|
||||
root.innerHTML = '';
|
||||
});
|
||||
}
|
||||
|
||||
export function render() {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const header = renderHeader({
|
||||
title: 'Связи',
|
||||
rightActions: [{ label: 'Справка', onClick: showHelpModal }],
|
||||
});
|
||||
|
||||
const board = document.createElement('div');
|
||||
board.className = 'network-board';
|
||||
|
||||
const lines = networkGraph.peers
|
||||
.map(
|
||||
(peer) =>
|
||||
`<line x1="${toPoint(networkGraph.center)}" y1="${networkGraph.center.y}%" x2="${peer.x}%" y2="${peer.y}%" stroke="rgba(125,170,255,0.55)" stroke-width="1.5"/>`
|
||||
)
|
||||
.join('');
|
||||
|
||||
board.innerHTML = `<svg class="network-svg" viewBox="0 0 100 100" preserveAspectRatio="none">${lines}</svg>`;
|
||||
|
||||
const centerNode = document.createElement('div');
|
||||
centerNode.className = 'node center';
|
||||
centerNode.style.left = `${networkGraph.center.x}%`;
|
||||
centerNode.style.top = `${networkGraph.center.y}%`;
|
||||
centerNode.innerHTML = `<div class="node-dot">${networkGraph.center.initials}</div><div class="node-label">${networkGraph.center.name}</div>`;
|
||||
|
||||
board.append(centerNode);
|
||||
|
||||
networkGraph.peers.forEach((peer) => {
|
||||
const node = document.createElement('div');
|
||||
node.className = 'node';
|
||||
node.style.left = `${peer.x}%`;
|
||||
node.style.top = `${peer.y}%`;
|
||||
node.innerHTML = `<div class="node-dot">${peer.initials}</div><div class="node-label">${peer.name}</div>`;
|
||||
board.append(node);
|
||||
});
|
||||
|
||||
const note = document.createElement('p');
|
||||
note.className = 'meta-muted';
|
||||
note.textContent = 'Схема статичная для демо, архитектура подготовлена под дальнейшую интерактивность.';
|
||||
|
||||
screen.append(header, board, note);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { notifications } from '../mock-data.js?v=20260327192619';
|
||||
import { state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'notifications-view', title: 'Уведомления' };
|
||||
|
||||
function renderList(container) {
|
||||
const active = state.notificationsTab;
|
||||
const items = notifications[active] || [];
|
||||
container.innerHTML = '';
|
||||
|
||||
items.forEach((item) => {
|
||||
const card = document.createElement('article');
|
||||
card.className = 'card stack';
|
||||
card.innerHTML = `<strong>${item.title}</strong><p class="meta-muted">${item.text}</p><p class="meta-muted">${item.time}</p>`;
|
||||
container.append(card);
|
||||
});
|
||||
}
|
||||
|
||||
export function render() {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(renderHeader({ title: 'Уведомления' }));
|
||||
|
||||
const tabs = document.createElement('div');
|
||||
tabs.className = 'tabs';
|
||||
tabs.innerHTML = `
|
||||
<button class="tab-btn ${state.notificationsTab === 'replies' ? 'active' : ''}" data-tab="replies">Ответы</button>
|
||||
<button class="tab-btn ${state.notificationsTab === 'events' ? 'active' : ''}" data-tab="events">События</button>
|
||||
`;
|
||||
|
||||
const list = document.createElement('div');
|
||||
list.className = 'stack';
|
||||
renderList(list);
|
||||
|
||||
tabs.querySelectorAll('.tab-btn').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
state.notificationsTab = btn.dataset.tab;
|
||||
tabs.querySelectorAll('.tab-btn').forEach((node) => node.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
renderList(list);
|
||||
});
|
||||
});
|
||||
|
||||
screen.append(tabs, list);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { profile } from '../mock-data.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'profile-view', title: 'Профиль' };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const badgeHelp = {
|
||||
official: {
|
||||
title: 'Официальный аккаунт',
|
||||
text: 'Эта настройка включает или отключает отметку официального аккаунта в профиле. Используйте её, когда нужно показать или скрыть подтверждённый статус.',
|
||||
},
|
||||
shine: {
|
||||
title: 'Сияющий',
|
||||
text: 'Этот переключатель включает или отключает режим «Сияющий». Он управляет отображением дополнительного визуального акцента для профиля.',
|
||||
},
|
||||
};
|
||||
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Профиль',
|
||||
rightActions: [
|
||||
{ label: 'Кошелёк', onClick: () => navigate('wallet-view') },
|
||||
{ label: 'Настройки', onClick: () => navigate('settings-view') },
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
card.innerHTML = `
|
||||
<div class="row">
|
||||
<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>
|
||||
<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>
|
||||
`;
|
||||
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'profile-help-modal';
|
||||
modal.hidden = true;
|
||||
modal.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="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>
|
||||
<button class="icon-btn profile-help-close" type="button" aria-label="Закрыть">✕</button>
|
||||
</div>
|
||||
<p class="profile-help-text"></p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const titleEl = modal.querySelector('#profile-help-title');
|
||||
const textEl = modal.querySelector('.profile-help-text');
|
||||
const dialogEl = modal.querySelector('.profile-help-dialog');
|
||||
|
||||
function closeModal() {
|
||||
modal.hidden = true;
|
||||
}
|
||||
|
||||
function openModal(type) {
|
||||
const content = badgeHelp[type];
|
||||
if (!content) return;
|
||||
|
||||
titleEl.textContent = content.title;
|
||||
textEl.textContent = content.text;
|
||||
modal.hidden = false;
|
||||
dialogEl.focus();
|
||||
}
|
||||
|
||||
card.querySelectorAll('.profile-badge-trigger').forEach((button) => {
|
||||
button.addEventListener('click', () => openModal(button.dataset.badge));
|
||||
});
|
||||
|
||||
modal.addEventListener('click', (event) => {
|
||||
const target = event.target;
|
||||
if (target instanceof HTMLElement && (target.dataset.close === 'true' || target.classList.contains('profile-help-close'))) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
modal.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
screen.append(card, modal);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'register-view', title: 'Зарегистрироваться', showAppChrome: false };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const form = document.createElement('div');
|
||||
form.className = 'card stack';
|
||||
|
||||
const loginInput = document.createElement('input');
|
||||
loginInput.className = 'input';
|
||||
loginInput.type = 'text';
|
||||
loginInput.value = state.registrationDraft.login;
|
||||
loginInput.placeholder = 'Введите логин';
|
||||
|
||||
const passwordInput = document.createElement('input');
|
||||
passwordInput.className = 'input';
|
||||
passwordInput.type = 'password';
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
form.innerHTML = `
|
||||
<label class="stack"><span class="field-label">Логин</span></label>
|
||||
<label class="stack"><span class="field-label">Пароль</span></label>
|
||||
`;
|
||||
form.children[0].append(loginInput);
|
||||
form.children[1].append(passwordInput);
|
||||
form.append(advanced);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-footer-actions';
|
||||
|
||||
const backButton = document.createElement('button');
|
||||
backButton.className = 'ghost-btn';
|
||||
backButton.type = 'button';
|
||||
backButton.textContent = 'Назад';
|
||||
backButton.addEventListener('click', () => navigate('start-view'));
|
||||
|
||||
const nextButton = document.createElement('button');
|
||||
nextButton.className = 'primary-btn';
|
||||
nextButton.type = 'button';
|
||||
nextButton.textContent = 'Далее';
|
||||
nextButton.addEventListener('click', () => {
|
||||
state.registrationDraft.login = loginInput.value;
|
||||
state.registrationDraft.password = passwordInput.value;
|
||||
navigate('registration-payment-view');
|
||||
});
|
||||
|
||||
actions.append(backButton, nextButton);
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Зарегистрироваться',
|
||||
leftAction: { label: '←', onClick: () => navigate('start-view') },
|
||||
}),
|
||||
form,
|
||||
actions,
|
||||
);
|
||||
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { authorizeSession, state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'registration-keys-view', title: 'Сохранение ключей', showAppChrome: false };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const normalizedLogin = (state.registrationDraft.login || '').trim();
|
||||
const displayLogin = normalizedLogin || '@new.user';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
|
||||
const title = document.createElement('p');
|
||||
title.className = 'auth-copy';
|
||||
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;
|
||||
});
|
||||
|
||||
const rootRow = document.createElement('label');
|
||||
rootRow.className = 'checkbox-row';
|
||||
rootRow.append(rootToggle, document.createTextNode('root key'));
|
||||
|
||||
const blockchainRow = document.createElement('label');
|
||||
blockchainRow.className = 'checkbox-row';
|
||||
blockchainRow.append(blockchainToggle, document.createTextNode('blockchain key'));
|
||||
|
||||
const deviceRow = document.createElement('label');
|
||||
deviceRow.className = 'checkbox-row';
|
||||
deviceRow.append(deviceToggle, document.createTextNode('device key'));
|
||||
|
||||
card.append(title, question, rootRow, deviceRow, blockchainRow);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-footer-actions';
|
||||
|
||||
const cancelButton = document.createElement('button');
|
||||
cancelButton.className = 'ghost-btn';
|
||||
cancelButton.type = 'button';
|
||||
cancelButton.textContent = 'Отмена';
|
||||
cancelButton.addEventListener('click', () => navigate('start-view'));
|
||||
|
||||
const okButton = document.createElement('button');
|
||||
okButton.className = 'primary-btn';
|
||||
okButton.type = 'button';
|
||||
okButton.textContent = 'OK';
|
||||
okButton.addEventListener('click', () => {
|
||||
authorizeSession();
|
||||
navigate('profile-view');
|
||||
});
|
||||
|
||||
actions.append(cancelButton, okButton);
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Сохранение ключей',
|
||||
leftAction: { label: '←', onClick: () => navigate('registration-payment-view') },
|
||||
}),
|
||||
card,
|
||||
actions,
|
||||
);
|
||||
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { refreshRegistrationBalance, state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'registration-payment-view', title: 'Оплата регистрации', showAppChrome: false };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
|
||||
const walletValue = document.createElement('input');
|
||||
walletValue.className = 'input';
|
||||
walletValue.type = 'text';
|
||||
walletValue.value = state.registrationPayment.walletAddress;
|
||||
walletValue.addEventListener('input', () => {
|
||||
state.registrationPayment.walletAddress = walletValue.value;
|
||||
});
|
||||
|
||||
const walletRow = document.createElement('div');
|
||||
walletRow.className = 'inline-input-row';
|
||||
|
||||
const copyButton = document.createElement('button');
|
||||
copyButton.className = 'ghost-btn';
|
||||
copyButton.type = 'button';
|
||||
copyButton.textContent = 'Скопировать номер';
|
||||
copyButton.addEventListener('click', async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(walletValue.value);
|
||||
copyButton.textContent = 'Скопировано';
|
||||
window.setTimeout(() => {
|
||||
copyButton.textContent = 'Скопировать номер';
|
||||
}, 1500);
|
||||
} catch {
|
||||
window.alert('Не удалось скопировать номер кошелька.');
|
||||
}
|
||||
});
|
||||
|
||||
walletRow.append(walletValue, copyButton);
|
||||
|
||||
const balanceRow = document.createElement('div');
|
||||
balanceRow.className = 'row wrap-row';
|
||||
|
||||
const balanceValue = document.createElement('strong');
|
||||
balanceValue.textContent = `${state.registrationPayment.balanceSOL} SOL`;
|
||||
|
||||
const refreshButton = document.createElement('button');
|
||||
refreshButton.className = 'square-btn';
|
||||
refreshButton.type = 'button';
|
||||
refreshButton.textContent = '↻';
|
||||
refreshButton.title = 'Обновить';
|
||||
refreshButton.addEventListener('click', () => {
|
||||
balanceValue.textContent = `${refreshRegistrationBalance()} SOL`;
|
||||
});
|
||||
|
||||
balanceRow.append(balanceValue, refreshButton);
|
||||
|
||||
const topupButton = document.createElement('button');
|
||||
topupButton.className = 'ghost-btn';
|
||||
topupButton.type = 'button';
|
||||
topupButton.textContent = 'Пополнить счет';
|
||||
topupButton.addEventListener('click', () => navigate('topup-view'));
|
||||
|
||||
const submitButton = document.createElement('button');
|
||||
submitButton.className = 'primary-btn';
|
||||
submitButton.type = 'button';
|
||||
submitButton.textContent = 'Зарегистрироваться';
|
||||
submitButton.addEventListener('click', () => {
|
||||
navigate('registration-keys-view');
|
||||
});
|
||||
|
||||
card.innerHTML = `
|
||||
<p class="auth-copy">Для регистрации в Solana нужно заплатить 0,01 SOL (примерно 1 доллар).</p>
|
||||
<label class="stack"><span class="field-label">Номер кошелька</span></label>
|
||||
<div class="stack">
|
||||
<span class="field-label">Баланс</span>
|
||||
</div>
|
||||
`;
|
||||
card.children[1].append(walletRow);
|
||||
card.children[2].append(balanceRow);
|
||||
card.append(topupButton, submitButton);
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Оплата регистрации',
|
||||
leftAction: { label: '←', onClick: () => navigate('register-view') },
|
||||
}),
|
||||
card,
|
||||
);
|
||||
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { checkServerAvailability, saveEntrySettings, state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'server-settings-view', title: 'Настройки серверов' };
|
||||
|
||||
const SERVER_FIELDS = [
|
||||
{ key: 'solanaServer', label: 'Адрес Solana сервера' },
|
||||
{ key: 'shineServer', label: 'Адрес сервера Сияние' },
|
||||
{ key: 'arweaveServer', label: 'Адрес сервера Arweave' },
|
||||
];
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const draft = {
|
||||
language: state.entrySettings.language,
|
||||
solanaServer: state.entrySettings.solanaServer,
|
||||
shineServer: state.entrySettings.shineServer,
|
||||
arweaveServer: state.entrySettings.arweaveServer,
|
||||
statuses: { ...state.entrySettings.statuses },
|
||||
};
|
||||
|
||||
const timers = new Map();
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.className = 'card stack';
|
||||
|
||||
SERVER_FIELDS.forEach((field) => {
|
||||
const block = document.createElement('div');
|
||||
block.className = 'stack';
|
||||
|
||||
const title = document.createElement('label');
|
||||
title.className = 'field-label';
|
||||
title.textContent = field.label;
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.className = 'input';
|
||||
input.type = 'text';
|
||||
input.value = draft[field.key];
|
||||
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'row wrap-row';
|
||||
|
||||
const checkButton = document.createElement('button');
|
||||
checkButton.className = 'ghost-btn server-check-btn';
|
||||
checkButton.type = 'button';
|
||||
checkButton.textContent = 'Проверить';
|
||||
|
||||
const status = document.createElement('span');
|
||||
status.className = 'status-line';
|
||||
|
||||
const applyStatus = (value) => {
|
||||
draft.statuses[field.key] = value;
|
||||
checkButton.classList.remove('is-available', 'is-unavailable');
|
||||
status.classList.remove('is-available', 'is-unavailable');
|
||||
|
||||
if (value === 'available') {
|
||||
status.textContent = 'Доступен';
|
||||
checkButton.classList.add('is-available');
|
||||
status.classList.add('is-available');
|
||||
} else if (value === 'unavailable') {
|
||||
status.textContent = 'Недоступен';
|
||||
checkButton.classList.add('is-unavailable');
|
||||
status.classList.add('is-unavailable');
|
||||
} else {
|
||||
status.textContent = 'Статус не проверен';
|
||||
}
|
||||
};
|
||||
|
||||
const runCheck = () => {
|
||||
draft[field.key] = input.value.trim();
|
||||
applyStatus(checkServerAvailability(input.value));
|
||||
};
|
||||
|
||||
applyStatus(draft.statuses[field.key]);
|
||||
|
||||
checkButton.addEventListener('click', runCheck);
|
||||
input.addEventListener('input', () => {
|
||||
draft[field.key] = input.value;
|
||||
applyStatus('idle');
|
||||
window.clearTimeout(timers.get(field.key));
|
||||
timers.set(field.key, window.setTimeout(runCheck, 3000));
|
||||
});
|
||||
input.addEventListener('blur', runCheck);
|
||||
input.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
runCheck();
|
||||
}
|
||||
});
|
||||
|
||||
controls.append(checkButton, status);
|
||||
block.append(title, input, controls);
|
||||
body.append(block);
|
||||
});
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-footer-actions';
|
||||
|
||||
const cancelButton = document.createElement('button');
|
||||
cancelButton.className = 'ghost-btn';
|
||||
cancelButton.type = 'button';
|
||||
cancelButton.textContent = 'Отмена';
|
||||
cancelButton.addEventListener('click', () => navigate('settings-view'));
|
||||
|
||||
const saveButton = document.createElement('button');
|
||||
saveButton.className = 'primary-btn';
|
||||
saveButton.type = 'button';
|
||||
saveButton.textContent = 'Сохранить';
|
||||
saveButton.addEventListener('click', () => {
|
||||
saveEntrySettings(draft);
|
||||
navigate('settings-view');
|
||||
});
|
||||
|
||||
actions.append(cancelButton, saveButton);
|
||||
|
||||
const help = document.createElement('button');
|
||||
help.className = 'help-fab';
|
||||
help.type = 'button';
|
||||
help.textContent = '?';
|
||||
help.addEventListener('click', () => {
|
||||
window.alert(
|
||||
'Текст для разработчиков: после ввода адреса любого сервера автопроверка запускается по кнопке "Проверить", после перехода в другое поле или если подождать больше 3 секунд. Зелёный статус означает доступность, красный — недоступность.',
|
||||
);
|
||||
});
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Настройки серверов',
|
||||
leftAction: { label: '←', onClick: () => navigate('settings-view') },
|
||||
}),
|
||||
body,
|
||||
actions,
|
||||
help,
|
||||
);
|
||||
|
||||
screen.cleanup = () => {
|
||||
timers.forEach((timerId) => window.clearTimeout(timerId));
|
||||
};
|
||||
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'settings-view', title: 'Настройки' };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Настройки',
|
||||
leftAction: { label: '←', onClick: () => navigate('profile-view') },
|
||||
}),
|
||||
);
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
card.innerHTML = `
|
||||
<button class="text-btn" type="button" id="settings-device">Устройства</button>
|
||||
<button class="text-btn" type="button" id="settings-servers">Настройки серверов</button>
|
||||
<button class="text-btn" type="button" id="settings-language">Язык / Language</button>
|
||||
`;
|
||||
|
||||
card.querySelector('#settings-device').addEventListener('click', () => navigate('device-view'));
|
||||
card.querySelector('#settings-servers').addEventListener('click', () => navigate('server-settings-view'));
|
||||
card.querySelector('#settings-language').addEventListener('click', () => navigate('language-view'));
|
||||
|
||||
screen.append(card);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'show-keys-view', title: 'Показать ключи' };
|
||||
|
||||
function randomKey(length = 44) {
|
||||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz123456789';
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i += 1) {
|
||||
result += chars[Math.floor(Math.random() * chars.length)];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const keys = {
|
||||
root: randomKey(),
|
||||
blockchain: randomKey(),
|
||||
device: randomKey(),
|
||||
};
|
||||
|
||||
const visible = {
|
||||
root: false,
|
||||
blockchain: false,
|
||||
device: false,
|
||||
};
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Показать ключи',
|
||||
leftAction: { label: '←', onClick: () => navigate('device-view') },
|
||||
}),
|
||||
);
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
|
||||
const renderField = (id, label) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'key-card stack';
|
||||
row.innerHTML = `
|
||||
<div class="row">
|
||||
<span class="field-label">${label}</span>
|
||||
<button class="icon-btn small-btn" type="button" data-toggle="${id}">Показать</button>
|
||||
</div>
|
||||
<div class="key-value" data-value="${id}">*****</div>
|
||||
`;
|
||||
return row;
|
||||
};
|
||||
|
||||
card.append(renderField('root', 'root key'), renderField('blockchain', 'blockchain key'), renderField('device', 'device key'));
|
||||
|
||||
const updateField = (id) => {
|
||||
const valueEl = card.querySelector(`[data-value="${id}"]`);
|
||||
const btnEl = card.querySelector(`[data-toggle="${id}"]`);
|
||||
valueEl.textContent = visible[id] ? keys[id] : '*****';
|
||||
btnEl.textContent = visible[id] ? 'Скрыть' : 'Показать';
|
||||
};
|
||||
|
||||
card.querySelectorAll('[data-toggle]').forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const { toggle } = button.dataset;
|
||||
visible[toggle] = !visible[toggle];
|
||||
updateField(toggle);
|
||||
});
|
||||
});
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-footer-actions';
|
||||
actions.innerHTML = `
|
||||
<button class="primary-btn" type="button" id="save-keys">Сохранить новые</button>
|
||||
<button class="ghost-btn" type="button" id="cancel-keys">Отмена</button>
|
||||
`;
|
||||
|
||||
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-keys-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;
|
||||
};
|
||||
|
||||
actions.querySelector('#save-keys').addEventListener('click', openModal);
|
||||
actions.querySelector('#cancel-keys').addEventListener('click', () => navigate('device-view'));
|
||||
|
||||
confirmModal.querySelector('#confirm-keys-ok').addEventListener('click', () => {
|
||||
keys.root = randomKey();
|
||||
keys.blockchain = randomKey();
|
||||
keys.device = randomKey();
|
||||
updateField('root');
|
||||
updateField('blockchain');
|
||||
updateField('device');
|
||||
closeModal();
|
||||
});
|
||||
|
||||
confirmModal.addEventListener('click', (event) => {
|
||||
const target = event.target;
|
||||
if (target instanceof HTMLElement && target.dataset.close === 'true') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
confirmModal.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
screen.append(card, actions, confirmModal);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { clearStartHint, state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'start-view', title: 'Старт', showAppChrome: false };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'auth-screen stack';
|
||||
|
||||
const logo = document.createElement('img');
|
||||
logo.className = 'auth-logo';
|
||||
logo.src = './img/logo.jpg';
|
||||
logo.alt = 'Логотип Сияние';
|
||||
|
||||
const title = document.createElement('h1');
|
||||
title.className = 'auth-brand';
|
||||
title.textContent = 'Сияние';
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-actions';
|
||||
|
||||
const loginButton = document.createElement('button');
|
||||
loginButton.className = 'primary-btn';
|
||||
loginButton.type = 'button';
|
||||
loginButton.textContent = 'Войти';
|
||||
loginButton.addEventListener('click', () => navigate('login-view'));
|
||||
|
||||
const registerButton = document.createElement('button');
|
||||
registerButton.className = 'ghost-btn';
|
||||
registerButton.type = 'button';
|
||||
registerButton.textContent = 'Зарегистрироваться';
|
||||
registerButton.addEventListener('click', () => navigate('register-view'));
|
||||
|
||||
const settingsButton = document.createElement('button');
|
||||
settingsButton.className = 'ghost-btn';
|
||||
settingsButton.type = 'button';
|
||||
settingsButton.textContent = 'Настройки';
|
||||
settingsButton.addEventListener('click', () => navigate('entry-settings-view'));
|
||||
|
||||
actions.append(loginButton, registerButton, settingsButton);
|
||||
|
||||
screen.append(logo, title);
|
||||
|
||||
if (state.startHint) {
|
||||
const notice = document.createElement('div');
|
||||
notice.className = 'card auth-status-card';
|
||||
notice.textContent = state.startHint;
|
||||
screen.append(notice);
|
||||
clearStartHint();
|
||||
}
|
||||
|
||||
screen.append(actions);
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { state } from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'topup-view', title: 'Пополнение счета', showAppChrome: false };
|
||||
|
||||
const BUY_LINK = 'https://www.moonpay.com/buy/sol';
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
|
||||
const walletValue = document.createElement('input');
|
||||
walletValue.className = 'input';
|
||||
walletValue.type = 'text';
|
||||
walletValue.value = state.registrationPayment.walletAddress;
|
||||
walletValue.readOnly = true;
|
||||
walletValue.style.fontSize = '13px';
|
||||
|
||||
const copyButton = document.createElement('button');
|
||||
copyButton.className = 'ghost-btn';
|
||||
copyButton.type = 'button';
|
||||
copyButton.textContent = 'Скопировать';
|
||||
copyButton.addEventListener('click', async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(walletValue.value);
|
||||
copyButton.textContent = 'Скопировано';
|
||||
window.setTimeout(() => {
|
||||
copyButton.textContent = 'Скопировать';
|
||||
}, 1500);
|
||||
} catch {
|
||||
window.alert('Не удалось скопировать номер кошелька.');
|
||||
}
|
||||
});
|
||||
|
||||
const walletRow = document.createElement('div');
|
||||
walletRow.className = 'inline-input-row';
|
||||
walletRow.append(walletValue, copyButton);
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
card.innerHTML = `
|
||||
<p class="auth-copy">Для пополнения счета скопируйте номер кошелька.</p>
|
||||
<div class="stack" style="gap:6px;">
|
||||
<p class="meta-muted">1. Пополните через любое свое приложение, используя этот кошелек в сети Solana.</p>
|
||||
<p class="meta-muted">2. Либо откройте страницу для покупки SOL.</p>
|
||||
<p class="meta-muted">3. Либо используйте кнопку «Тестовое пополнение» (работает в тестовой Solana).</p>
|
||||
</div>
|
||||
<a class="link-card" href="${BUY_LINK}" target="_blank" rel="noreferrer">Открыть страницу покупки SOL</a>
|
||||
<div class="card stack" style="padding:12px; max-width:320px;">
|
||||
<div class="field-label" style="margin-bottom:6px;">Кошелёк для пополнения</div>
|
||||
</div>
|
||||
`;
|
||||
card.children[3].append(walletRow);
|
||||
|
||||
const testButton = document.createElement('button');
|
||||
testButton.className = 'ghost-btn';
|
||||
testButton.type = 'button';
|
||||
testButton.textContent = 'Тестовое пополнение';
|
||||
testButton.addEventListener('click', () => {
|
||||
state.registrationPayment.balanceSOL = '0.0250';
|
||||
window.alert('Тестовое пополнение выполнено. Баланс обновлён.');
|
||||
});
|
||||
|
||||
const backButton = document.createElement('button');
|
||||
backButton.className = 'primary-btn';
|
||||
backButton.type = 'button';
|
||||
backButton.textContent = 'Назад';
|
||||
backButton.addEventListener('click', () => navigate('registration-payment-view'));
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'auth-footer-actions';
|
||||
actions.append(testButton, backButton);
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Пополнение счета',
|
||||
leftAction: { label: '←', onClick: () => navigate('registration-payment-view') },
|
||||
}),
|
||||
card,
|
||||
actions,
|
||||
);
|
||||
|
||||
return screen;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { wallet } from '../mock-data.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'wallet-view', title: 'Кошелёк' };
|
||||
|
||||
export function render({ navigate }) {
|
||||
const screen = document.createElement('section');
|
||||
screen.className = 'stack';
|
||||
let statusText = 'Данные демонстрационные';
|
||||
|
||||
const status = document.createElement('p');
|
||||
status.className = 'meta-muted';
|
||||
|
||||
const updateStatus = (text) => {
|
||||
statusText = text;
|
||||
status.textContent = statusText;
|
||||
};
|
||||
|
||||
screen.append(
|
||||
renderHeader({
|
||||
title: 'Кошелёк',
|
||||
leftAction: { label: '←', onClick: () => navigate('profile-view') },
|
||||
})
|
||||
);
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card stack';
|
||||
card.innerHTML = `
|
||||
<div>
|
||||
<p class="meta-muted">Баланс</p>
|
||||
<h2 style="font-size:30px;">${wallet.balanceSOL} SOL</h2>
|
||||
<p class="meta-muted">Обновлено: ${wallet.updatedAt}</p>
|
||||
</div>
|
||||
<div class="card" style="padding:10px;">
|
||||
<p class="meta-muted" style="margin-bottom:6px;">Публичный адрес</p>
|
||||
<p style="font-size:13px; line-height:1.4; word-break:break-all;">${wallet.publicAddress}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'stack';
|
||||
actions.innerHTML = `
|
||||
<div class="row">
|
||||
<button class="text-btn" id="copy-address">Копировать адрес</button>
|
||||
<button class="ghost-btn" id="refresh-balance">Обновить баланс</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="primary-btn" id="send-sol" style="width:100%;">Перевести</button>
|
||||
<button class="primary-btn" id="topup-sol" style="width:100%;">Пополнить</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
actions.querySelector('#copy-address').addEventListener('click', async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(wallet.publicAddress);
|
||||
updateStatus('Адрес скопирован в буфер обмена');
|
||||
} catch {
|
||||
updateStatus('Не удалось скопировать в этом браузере');
|
||||
}
|
||||
});
|
||||
|
||||
actions.querySelector('#refresh-balance').addEventListener('click', () => {
|
||||
updateStatus(`Баланс обновлен: ${wallet.balanceSOL} SOL`);
|
||||
});
|
||||
|
||||
actions.querySelector('#send-sol').addEventListener('click', () => {
|
||||
updateStatus('Демо-функция: перевод будет добавлен позже');
|
||||
});
|
||||
|
||||
actions.querySelector('#topup-sol').addEventListener('click', () => {
|
||||
updateStatus('Демо-функция: пополнение будет добавлено позже');
|
||||
});
|
||||
|
||||
updateStatus(statusText);
|
||||
|
||||
screen.append(card, actions, status);
|
||||
return screen;
|
||||
}
|
||||
Reference in New Issue
Block a user