Обновить UI кошелька и регистрацию

This commit is contained in:
AidarKC
2026-06-24 13:48:07 +04:00
parent 684f3237cf
commit 77f5759d60
8 changed files with 275 additions and 172 deletions
+25 -50
View File
@@ -14,7 +14,7 @@ import {
PASSWORD_WORDS_COUNT,
} from '../services/password-words.js';
import { openRegistrationFaq } from './registration-faq-view.js';
import { defaultServerHttp, defaultServerLogin } from '../deploy-config.js';
import { defaultServerHttp } from '../deploy-config.js';
export const pageMeta = { id: 'register-view', title: 'Зарегистрироваться', showAppChrome: false };
@@ -125,9 +125,7 @@ export function render({ navigate }) {
serverNotice.className = 'card stack';
serverNotice.innerHTML = `
<p class="field-label">Первый сервер SHiNE</p>
<p class="meta-muted">Сейчас вашим первым и основным сервером будет серверный аккаунт <strong>${state.entrySettings.shineServerLogin || defaultServerLogin}</strong>.</p>
<p class="meta-muted">Текущий адрес этого сервера: <strong>${state.entrySettings.shineServerHttp || defaultServerHttp}</strong>.</p>
<p class="meta-muted">Это первый сервер, на который вам будут писать и звонить после регистрации. Позже его можно будет сменить, а в будущем использовать и несколько серверов сразу.</p>
<p class="meta-muted">При регистрации адресом вашего первого сервера будет: <strong>${state.entrySettings.shineServerHttp || defaultServerHttp}</strong>.</p>
`;
const faqCard = document.createElement('div');
@@ -351,10 +349,12 @@ export function render({ navigate }) {
state.registrationDraft.preGeneratedKeyBundle = null;
}
renderSecurityConfirmStage();
startGenerationStage();
});
function renderInputStage() {
serverNotice.style.display = '';
faqCard.style.display = '';
form.innerHTML = `
<label class="stack"><span class="field-label">Логин</span></label>
<label class="stack registration-password-single"><span class="field-label">Пароль</span></label>
@@ -363,19 +363,26 @@ export function render({ navigate }) {
passwordField = form.children[1];
loginField.append(loginInput);
passwordField.append(passwordInput);
form.append(passwordModeToggle, wordsSection, passwordLengthText, serverNotice, checkButton, statusText, faqCard, formError);
form.append(passwordModeToggle, passwordLengthText, wordsSection, statusText, checkButton, formError);
actions.innerHTML = '';
actions.append(backButton, nextButton);
updatePasswordModeVisibility();
syncDraftState();
}
function renderSecurityConfirmStage() {
async function startGenerationStage() {
serverNotice.style.display = 'none';
faqCard.style.display = 'none';
const runId = ++generationRunId;
form.innerHTML = '';
const info = document.createElement('p');
info.className = 'auth-copy';
info.textContent = 'Для повышения безопасности мы генерируем секрет из вашего логина и пароля с помощью Argon2id.';
const title = document.createElement('p');
title.className = 'auth-copy';
title.textContent = 'Для повышения безопасности мы генерируем секрет из вашего логина и пароля с помощью Argon2id.';
const subtitle = document.createElement('p');
subtitle.className = 'meta-muted';
subtitle.textContent = 'Процесс запускается сразу: из этого секрета будут вычислены recovery key, root key, blockchain key и client key.';
const details = document.createElement('p');
details.className = 'meta-muted';
@@ -383,45 +390,11 @@ export function render({ navigate }) {
const details2 = document.createElement('p');
details2.className = 'meta-muted';
details2.textContent = 'Из этого секрета строятся recovery key, root key, blockchain key и client key. Это может занять некоторое время.';
details2.textContent = 'Замедление нужно специально: оно усложняет подбор пароля и повышает цену атак на видеокартах и GPU.';
const details3 = document.createElement('p');
details3.className = 'meta-muted';
details3.textContent = 'Замедление нужно специально: оно усложняет подбор пароля и повышает цену атак на видеокартах и GPU.';
const details4 = document.createElement('p');
details4.className = 'meta-muted';
details4.textContent = `Длина вашего текущего пароля: ${getCurrentPassword().length} символов.`;
form.append(info, details, details2, details3, details4);
const back2 = document.createElement('button');
back2.className = 'ghost-btn';
back2.type = 'button';
back2.textContent = 'Назад';
back2.addEventListener('click', renderInputStage);
const ok = document.createElement('button');
ok.className = 'primary-btn';
ok.type = 'button';
ok.textContent = 'Окей';
ok.addEventListener('click', startGenerationStage);
actions.innerHTML = '';
actions.append(back2, ok);
}
async function startGenerationStage() {
const runId = ++generationRunId;
form.innerHTML = '';
const title = document.createElement('p');
title.className = 'auth-copy';
title.textContent = 'Генерация ключей...';
const subtitle = document.createElement('p');
subtitle.className = 'meta-muted';
subtitle.textContent = 'Генерируется секрет из вашего пароля, из которого будут вычислены все ключи.';
details3.textContent = `Длина вашего текущего пароля: ${getCurrentPassword().length} символов.`;
const progressWrap = document.createElement('div');
progressWrap.className = 'registration-progress';
@@ -438,7 +411,7 @@ export function render({ navigate }) {
genError.className = 'status-line is-unavailable';
genError.style.display = 'none';
form.append(title, subtitle, progressWrap, progressText, genError);
form.append(title, subtitle, details, details2, details3, progressWrap, progressText, genError);
const cancelBtn = document.createElement('button');
cancelBtn.className = 'ghost-btn';
@@ -446,7 +419,7 @@ export function render({ navigate }) {
cancelBtn.textContent = 'Отмена';
cancelBtn.addEventListener('click', () => {
generationRunId += 1;
renderSecurityConfirmStage();
renderInputStage();
});
actions.innerHTML = '';
actions.append(cancelBtn);
@@ -477,7 +450,7 @@ export function render({ navigate }) {
} catch (error) {
if (runId !== generationRunId) return;
if (String(error?.message || '') === 'DERIVE_CANCELLED') {
renderSecurityConfirmStage();
renderInputStage();
return;
}
genError.textContent = `Ошибка генерации ключей: ${error?.message || 'неизвестная ошибка'}`;
@@ -491,7 +464,7 @@ export function render({ navigate }) {
goBack.className = 'ghost-btn';
goBack.type = 'button';
goBack.textContent = 'Назад';
goBack.addEventListener('click', renderSecurityConfirmStage);
goBack.addEventListener('click', renderInputStage);
actions.innerHTML = '';
actions.append(goBack, retry);
}
@@ -505,6 +478,8 @@ export function render({ navigate }) {
leftAction: { label: '←', onClick: () => navigate('start-view') },
}),
form,
serverNotice,
faqCard,
actions,
);