aidar/SHiNE-server
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: улучшить создание канала и окно загрузки

Browse Source
This commit is contained in:
AidarKC
2026-08-07 15:15:56 +04:00
parent 3f402fbde7
commit 57a99b478a
4 changed files with 61 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shine-UI/js/pages/add-channel-view.js
+20 -13
View File
@@ -2,7 +2,6 @@ import { renderHeader } from '../components/header.js';
import { authService, state } from '../state.js';
import { toUserMessage } from '../services/ui-error-texts.js';
import {
channelNameErrorText,
normalizeChannelDisplayName,
validateChannelDisplayName,
} from '../services/channel-name-rules.js';
@@ -19,6 +18,7 @@ export const pageMeta = { id: 'add-channel-view', title: 'Создание ка
const CREATE_CHANNEL_FLASH_KEY = 'shine-channels-create-success';
const CHANNEL_TYPE_PUBLIC = 1;
const CHANNEL_LOGIN_HINT = 'Разрешены латинские буквы, цифры, _ и -. Длина: от 3 до 32 символов. Название не должно состоять только из цифр.';
const CHANNEL_LOGIN_DIGITS_ONLY_HINT = 'Имя канала не должно состоять только из цифр.';
function persistCreateSuccessFlash(message) {
try {
@@ -106,11 +106,11 @@ export function render({ navigate }) {
<label for="channel-name">Технический логин канала</label>
<input id="channel-name" class="input" maxlength="32" placeholder="Например: My-Channel_1" required />
<div class="meta-muted">${CHANNEL_LOGIN_HINT}</div>
<div class="meta-muted" id="channel-link-preview"></div>
<div class="meta-muted channel-create-login-hint">${CHANNEL_LOGIN_HINT}</div>
<div class="meta-muted channel-link-preview" id="channel-link-preview">&nbsp;</div>
<div id="channel-name-error" class="meta-muted inline-error"></div>
<label for="channel-title">Красивое имя (то, как канал будет виден пользователям)</label>
<label for="channel-title">Как канал будет виден пользователям</label>
<input id="channel-title" class="input" maxlength="50" placeholder="Например: Мой красивый канал" />
<div class="meta-muted" id="channel-title-counter">0 / 50 символов</div>
<div id="channel-title-error" class="meta-muted inline-error"></div>
@@ -149,25 +149,27 @@ export function render({ navigate }) {
let ownerBlockchainName = '';
let avatarAvailabilityLabel = '';
let avatarAvailabilityTxId = '';
let invalidChannelLoginTyped = false;
const renderAvatarStatus = (nameValue, titleValue) => {
renderAvatarPreview(avatarPreviewEl, selectedAvatar, titleValue || nameValue);
avatarRemoveBtn.hidden = !selectedAvatar?.ar;
if (!selectedAvatar?.ar) {
avatarStatusEl.innerHTML = '<p class="meta-muted">Аватар не установлен.</p>';
avatarStatusEl.innerHTML = '<p class="channel-avatar-status-text">Аватар канала не установлен.</p>';
return;
}
const txId = String(selectedAvatar.ar || '').trim();
const shortTxId = shortAvatarBlockchainAddress(txId);
const isPending = avatarAvailabilityLabel === 'pending' || avatarAvailabilityTxId !== txId;
avatarStatusEl.innerHTML = `<p class="channel-avatar-status-text">Адрес аватара в блокчейне Arweave ${shortTxId}${isPending ? ', ещё не обновился в блокчейне.' : '.'}</p>`;
avatarStatusEl.innerHTML = `
<p class="channel-avatar-status-text">Аватар канала</p>
<p class="channel-avatar-status-line">Адрес аватара в блокчейне Arweave <span class="channel-avatar-txid">${shortTxId}</span><span class="channel-avatar-status-pending">${isPending ? ', ещё не обновился в блокчейне.' : ''}</span></p>
`;
};
const renderChannelLinkPreview = (nameValue) => {
const normalizedChannelName = normalizeChannelDisplayName(nameValue);
if (!ownerBlockchainName || !normalizedChannelName) {
linkPreviewEl.textContent = 'Прямая ссылка появится после ввода технического имени канала.';
linkPreviewEl.innerHTML = '&nbsp;';
return;
}
const directUrl = buildAbsoluteChannelUrl({
@@ -213,9 +215,7 @@ export function render({ navigate }) {
const titleCheck = normalizeMetaText(titleEl.value, 50, 'Название');
const descriptionCheck = normalizeMetaText(descriptionEl.value, 250, 'Описание');
nameErrorEl.textContent = invalidChannelLoginTyped
? CHANNEL_LOGIN_HINT
: (nameCheck.ok ? '' : channelNameErrorText(nameCheck.code));
nameErrorEl.textContent = '';
titleErrorEl.textContent = titleCheck.error;
descriptionErrorEl.textContent = descriptionCheck.error;
@@ -238,8 +238,10 @@ export function render({ navigate }) {
nameEl.addEventListener('input', () => {
const raw = String(nameEl.value || '');
const sanitized = sanitizeChannelLoginInput(raw);
invalidChannelLoginTyped = raw !== sanitized;
if (raw !== sanitized) nameEl.value = sanitized;
if (raw !== sanitized) {
nameEl.value = sanitized;
window.alert(CHANNEL_LOGIN_HINT);
}
updateValidation();
});
titleEl.addEventListener('input', updateValidation);
@@ -285,6 +287,11 @@ export function render({ navigate }) {
}
const check = updateValidation();
if (check.name && /^[0-9]+$/.test(check.name)) {
window.alert(CHANNEL_LOGIN_DIGITS_ONLY_HINT);
nameEl.focus();
return;
}
if (!check.ok) return;
setBusy(true);