timetracking/httpdocs/assets/scripts/registration.js

// assets/scripts/registration.js

import { esc, createTranslator } from './utils.js';

const t = createTranslator('Register');

document.addEventListener('DOMContentLoaded', () => {
  const form         = document.getElementById('register-form');
  const companyInput = document.getElementById('companyName');
  const slugPreview  = document.getElementById('slug-preview');
  const submitBtn    = document.getElementById('submit-btn');
  const errorBox     = document.getElementById('register-errors');
  const appDomain    = window.Register?.appDomain ?? '';

  // ── Slug-Vorschau ─────────────────────────────────────────────────────────

  let debounceTimer = null;
  companyInput?.addEventListener('input', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(async () => {
      const value = companyInput.value.trim();
      if (!value) { slugPreview.textContent = ''; return; }

      try {
        const res  = await fetch('/api/register/preview-slug', {
          method:  'POST',
          headers: { 'Content-Type': 'application/json' },
          body:    JSON.stringify({ companyName: value }),
        });
        const data = await res.json();
        slugPreview.textContent = data.slug ? data.slug + '.' + appDomain : '–';
      } catch {
        slugPreview.textContent = '';
      }
    }, 350);
  });

  // ── Formular absenden ─────────────────────────────────────────────────────

  form?.addEventListener('submit', async (e) => {
    e.preventDefault();
    errorBox.innerHTML = '';
    submitBtn.disabled = true;
    submitBtn.textContent = t('sending');

    const payload = {
      companyName:    document.getElementById('companyName').value,
      email:          document.getElementById('email').value,
      firstName:      document.getElementById('firstName').value,
      lastName:       document.getElementById('lastName').value,
      password:       document.getElementById('password').value,
      passwordRepeat: document.getElementById('passwordRepeat').value,
    };

    try {
      const res  = await fetch('/api/register', {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify(payload),
      });
      const data = await res.json();

      if (res.ok) {
        const text = t('successText').replace('%email%', `<strong>${esc(payload.email)}</strong>`);
        document.querySelector('.register-page').innerHTML = `
          <div class="register-success">
            <div class="register-success__icon">✓</div>
            <h2 class="register-success__title">${t('successTitle')}</h2>
            <p class="register-success__text">${text}</p>
            <p class="register-success__hint">${t('successHint')}</p>
          </div>
        `;
      } else {
        (data.errors ?? [t('errorUnknown')]).forEach(msg => {
          const p = document.createElement('p');
          p.textContent = msg;
          errorBox.appendChild(p);
        });
        submitBtn.disabled = false;
        submitBtn.textContent = t('btnSubmit');
      }
    } catch {
      errorBox.innerHTML = `<p>${esc(t('errorConnection'))}</p>`;
      submitBtn.disabled = false;
      submitBtn.textContent = t('btnSubmit');
    }
  });
});