2026-07-01 15:17:25 +00:00
|
|
|
|
const loginContainer = document.getElementById('login-container');
|
|
|
|
|
|
const mainSection = document.getElementById('hidden-until-login');
|
|
|
|
|
|
const userPic = document.getElementById('user-pic');
|
|
|
|
|
|
const userName = document.getElementById('user-name');
|
|
|
|
|
|
const logoutBtn = document.getElementById('logout');
|
|
|
|
|
|
const messageInput = document.getElementById('message');
|
|
|
|
|
|
const sendBtn = document.getElementById('send');
|
|
|
|
|
|
const statusEl = document.getElementById('status');
|
|
|
|
|
|
|
2026-07-01 15:53:07 +00:00
|
|
|
|
const token = location.pathname.split('/').filter(Boolean).pop();
|
|
|
|
|
|
const socket = io({ query: { role: 'sender', token } });
|
2026-07-01 15:17:25 +00:00
|
|
|
|
|
|
|
|
|
|
function showLoggedIn(user) {
|
|
|
|
|
|
loginContainer.style.display = 'none';
|
|
|
|
|
|
mainSection.style.display = 'block';
|
|
|
|
|
|
userPic.src = user.picture || '';
|
|
|
|
|
|
userName.textContent = user.name || user.email;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function showLoggedOut() {
|
|
|
|
|
|
loginContainer.style.display = 'block';
|
|
|
|
|
|
mainSection.style.display = 'none';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function handleCredentialResponse(response) {
|
|
|
|
|
|
const res = await fetch('/auth/google', {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
|
|
|
body: JSON.stringify({ credential: response.credential }),
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
if (res.ok) {
|
|
|
|
|
|
const { user } = await res.json();
|
|
|
|
|
|
showLoggedIn(user);
|
|
|
|
|
|
// The socket connected before login with no session cookie; reconnect so
|
|
|
|
|
|
// its handshake picks up the freshly-issued, now-authenticated cookie.
|
|
|
|
|
|
socket.disconnect();
|
|
|
|
|
|
socket.connect();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
statusEl.textContent = 'Не удалось войти, попробуйте ещё раз';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function init() {
|
|
|
|
|
|
const configRes = await fetch('/config');
|
|
|
|
|
|
const { googleClientId } = await configRes.json();
|
|
|
|
|
|
|
|
|
|
|
|
google.accounts.id.initialize({
|
|
|
|
|
|
client_id: googleClientId,
|
|
|
|
|
|
callback: handleCredentialResponse,
|
|
|
|
|
|
});
|
|
|
|
|
|
google.accounts.id.renderButton(loginContainer, { theme: 'outline', size: 'large' });
|
|
|
|
|
|
|
|
|
|
|
|
const meRes = await fetch('/me');
|
|
|
|
|
|
const { user } = await meRes.json();
|
|
|
|
|
|
if (user) {
|
|
|
|
|
|
showLoggedIn(user);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
showLoggedOut();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
sendBtn.addEventListener('click', () => {
|
|
|
|
|
|
const text = messageInput.value.trim();
|
|
|
|
|
|
if (!text) return;
|
2026-07-01 15:53:07 +00:00
|
|
|
|
socket.emit('send_message', { token, text });
|
2026-07-01 15:17:25 +00:00
|
|
|
|
messageInput.value = '';
|
|
|
|
|
|
statusEl.textContent = 'Отправлено';
|
|
|
|
|
|
setTimeout(() => { statusEl.textContent = ''; }, 1500);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
messageInput.addEventListener('keydown', (e) => {
|
|
|
|
|
|
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
|
|
|
|
|
|
sendBtn.click();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
socket.on('send_error', (msg) => {
|
|
|
|
|
|
statusEl.textContent = 'Ошибка: ' + msg;
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
logoutBtn.addEventListener('click', async () => {
|
|
|
|
|
|
await fetch('/auth/logout', { method: 'POST' });
|
|
|
|
|
|
showLoggedOut();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
init();
|