SHA256
Restore registration step flow and create new session on login
This commit is contained in:
ai5590
@@ -1,6 +1,11 @@
|
||||
import { renderHeader } from '../components/header.js?v=20260327192619';
|
||||
import { deviceSessions } from '../mock-data.js?v=20260327192619';
|
||||
import { terminateCurrentSession } from '../state.js?v=20260327192619';
|
||||
import {
|
||||
refreshSessions,
|
||||
setAuthError,
|
||||
setAuthInfo,
|
||||
state,
|
||||
terminateCurrentSession,
|
||||
} from '../state.js?v=20260327192619';
|
||||
|
||||
export const pageMeta = { id: 'device-view', title: 'Устройства' };
|
||||
|
||||
@@ -28,111 +33,92 @@ export function render({ navigate }) {
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'card stack';
|
||||
actions.innerHTML = `
|
||||
<button class="primary-btn" type="button" id="connect-device-btn">Подключить устройство</button>
|
||||
<button class="primary-btn" type="button" id="reload-sessions-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 buildList = () => {
|
||||
sessionsBlock.innerHTML = '';
|
||||
const sessions = state.sessions || [];
|
||||
const current = sessions.find((s) => s.sessionId === state.session.sessionId) || sessions[0];
|
||||
const others = sessions.filter((s) => s.sessionId !== current?.sessionId);
|
||||
|
||||
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>
|
||||
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 || 'unknown client'}</strong>
|
||||
<span class="meta-muted">${session.geo || 'unknown'}</span>
|
||||
</div>
|
||||
<span class="meta-muted">${formatSessionTime(session.lastAuthenticatedAtMs || Date.now())}</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;
|
||||
};
|
||||
${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));
|
||||
if (!current) {
|
||||
const empty = document.createElement('p');
|
||||
empty.className = 'meta-muted';
|
||||
empty.textContent = 'Активные сессии не найдены.';
|
||||
sessionsBlock.append(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
const endCurrentSessionBtn = document.createElement('button');
|
||||
endCurrentSessionBtn.className = 'text-btn';
|
||||
endCurrentSessionBtn.type = 'button';
|
||||
endCurrentSessionBtn.textContent = 'Завершить текущую сессию';
|
||||
currentMenu.append(endCurrentSessionBtn);
|
||||
const currentMenu = document.createElement('div');
|
||||
currentMenu.className = 'stack';
|
||||
currentMenu.innerHTML = '<p class="meta-muted">Текущий сеанс</p>';
|
||||
currentMenu.append(createSessionItem(current, true));
|
||||
|
||||
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 endCurrentSessionBtn = document.createElement('button');
|
||||
endCurrentSessionBtn.className = 'text-btn';
|
||||
endCurrentSessionBtn.type = 'button';
|
||||
endCurrentSessionBtn.textContent = 'Завершить текущую сессию';
|
||||
endCurrentSessionBtn.addEventListener('click', () => {
|
||||
terminateCurrentSession();
|
||||
navigate('start-view');
|
||||
});
|
||||
}
|
||||
currentMenu.append(endCurrentSessionBtn);
|
||||
|
||||
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 othersMenu = document.createElement('div');
|
||||
othersMenu.className = 'stack';
|
||||
othersMenu.innerHTML = '<p class="meta-muted">Остальные активные сеансы</p>';
|
||||
|
||||
const openModal = () => {
|
||||
confirmModal.hidden = false;
|
||||
confirmModal.querySelector('.modal-dialog').focus();
|
||||
if (others.length === 0) {
|
||||
const empty = document.createElement('p');
|
||||
empty.className = 'meta-muted';
|
||||
empty.textContent = 'Других активных сеансов нет.';
|
||||
othersMenu.append(empty);
|
||||
} else {
|
||||
others.forEach((session) => {
|
||||
othersMenu.append(createSessionItem(session, false));
|
||||
});
|
||||
}
|
||||
|
||||
sessionsBlock.append(currentMenu, othersMenu);
|
||||
};
|
||||
|
||||
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();
|
||||
actions.querySelector('#reload-sessions-btn').addEventListener('click', async () => {
|
||||
try {
|
||||
await refreshSessions();
|
||||
buildList();
|
||||
setAuthInfo('Список сессий обновлён.');
|
||||
} catch (error) {
|
||||
setAuthError(error.message);
|
||||
window.alert(error.message);
|
||||
}
|
||||
});
|
||||
|
||||
confirmModal.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
sessionsBlock.append(currentMenu, othersMenu);
|
||||
screen.append(actions, sessionsBlock, confirmModal);
|
||||
buildList();
|
||||
screen.append(actions, sessionsBlock);
|
||||
return screen;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user