timetracking/httpdocs/assets/scripts/registration.js

// assets/scripts/registration.js

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_APP_DOMAIN ?? '';

    // ── Slug-Vorschau ─────────────────────────────────────────────────────────
    let debounce = null;
    companyInput?.addEventListener('input', () => {
        clearTimeout(debounce);
        debounce = 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 = 'Wird gesendet …';

        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) {
                document.querySelector('.register-page').innerHTML = `
                    <div class="register-success">
                        <div class="register-success__icon">✓</div>
                        <h2 class="register-success__title">Fast geschafft!</h2>
                        <p class="register-success__text">
                            Wir haben eine Bestätigungs-E-Mail an
                            <strong>${payload.email}</strong> geschickt.
                        </p>
                        <p class="register-success__hint">
                            Bitte klicke auf den Link in der E-Mail um dein Konto zu aktivieren.
                            Der Link ist 24 Stunden gültig.
                        </p>
                    </div>
                `;
            } else {
                (data.errors ?? ['Unbekannter Fehler.']).forEach(msg => {
                    const p = document.createElement('p');
                    p.textContent = msg;
                    errorBox.appendChild(p);
                });
                submitBtn.disabled = false;
                submitBtn.textContent = 'Konto erstellen';
            }
        } catch {
            errorBox.innerHTML = '<p>Verbindungsfehler. Bitte versuche es erneut.</p>';
            submitBtn.disabled = false;
            submitBtn.textContent = 'Konto erstellen';
        }
    });
});