KC-APP/client/web/app.js

const state = { token: null, kcId: null, socket: null };

const $ = (id) => document.getElementById(id);

function decodeJwtPayload(token) {
  try {
    const [, payload] = token.split('.');
    return JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
  } catch {
    return null;
  }
}

$('guest-form').addEventListener('submit', async (event) => {
  event.preventDefault();
  const inviteCode = $('invite-code').value;
  const firstName = $('first-name').value;
  const lastName = $('last-name').value;

  const res = await fetch('/api/auth/guest', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ inviteCode, firstName, lastName }),
  });

  if (!res.ok) {
    $('login-status').textContent = `Fehler: ${res.status}`;
    return;
  }

  const { accessToken } = await res.json();
  state.token = accessToken;
  state.kcId = decodeJwtPayload(accessToken)?.kcId ?? null;
  $('login-status').textContent = 'Angemeldet.';
  $('login-section').hidden = true;
  $('app-section').hidden = false;
});

$('submit-wahl').addEventListener('click', async () => {
  const wahlId = $('wahl-id').value;
  const prioritaeten = $('prioritaeten')
    .value.split(',')
    .map((s) => s.trim())
    .filter(Boolean);

  const res = await fetch(`/api/wahl/${wahlId}/teilnehmer`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${state.token}`,
    },
    body: JSON.stringify({ prioritaeten }),
  });
  $('wahl-status').textContent = res.ok ? 'Gespeichert.' : `Fehler: ${res.status}`;
});

$('load-files').addEventListener('click', async () => {
  if (!state.kcId) return;
  const res = await fetch(`/api/files/${state.kcId}`, {
    headers: { Authorization: `Bearer ${state.token}` },
  });
  const files = res.ok ? await res.json() : [];
  const list = $('file-list');
  list.innerHTML = '';
  for (const file of files) {
    const li = document.createElement('li');
    li.textContent = file.filename;
    list.appendChild(li);
  }
});

$('join-channel').addEventListener('click', () => {
  const channelId = $('channel-id').value;
  if (!channelId || !state.token) return;

  if (state.socket) state.socket.close();
  const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
  const socket = new WebSocket(`${protocol}://${location.host}/chat?token=${state.token}`);
  state.socket = socket;

  socket.addEventListener('open', () => {
    socket.send(JSON.stringify({ event: 'chat:join', data: { channelId } }));
  });

  socket.addEventListener('message', (event) => {
    const { event: name, data } = JSON.parse(event.data);
    if (name !== 'chat:message') return;
    const li = document.createElement('li');
    li.textContent = data.body;
    $('chat-log').appendChild(li);
  });
});