dogfather-universe/assets/js/forms.js

/* =====================================================================
   forms.js — Validierung + Versand für die Bewerbungsformulare
   (Creator: bewerben-creator.html, Scout: bewerben-scout.html,
   Modi: bewerben-modi.html, Kooperation: bewerben-kooperation.html)

   Jede Bewerbungsart hat ihre eigene Seite (kein Tab-System mehr) —
   Hintergrundbild und Farbwelt sitzen wie überall sonst auf der Website
   fest im HTML jeder Seite selbst.

   Versand-Logik:
   1) Bewerbung wird per POST an `${API_BASE_URL}/submit` an den
      Cloudflare-Worker gesendet und landet im code-geschützten Postfach
      (postfach.html).
   2) Schlägt der Versand fehl (z.B. offline): Fallback auf einen
      vorausgefüllten "mailto:"-Link.
   ===================================================================== */

const API_BASE_URL = "https://dogfather-universe-postfach.dogfather1608.workers.dev";

const CONTACT_EMAIL = "[email protected]"; // TODO: echte Kontakt-E-Mail eintragen

const FORM_TYPES = {
  "form-creator": "creator",
  "form-scout": "scout",
  "form-modi": "modi",
  "form-kooperation": "kooperation",
};

function validateField(field) {
  const wrapper = field.closest(".field");
  if (!wrapper) return true;
  let valid = field.checkValidity();

  if (valid && field.type === "email" && field.value) {
    valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field.value);
  }

  wrapper.classList.toggle("has-error", !valid);
  return valid;
}

function buildMailto(subjectLabel, data) {
  const lines = [...data.entries()].map(([k, v]) => `${k}: ${v}`).join("\n");
  return `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(
    "Bewerbung: " + subjectLabel
  )}&body=${encodeURIComponent(lines)}`;
}

async function submitToWorker(type, data) {
  if (!API_BASE_URL) return false;
  const payload = { type, data: Object.fromEntries(data.entries()) };
  try {
    const res = await fetch(`${API_BASE_URL}/submit`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    if (!res.ok) return false;
    const json = await res.json();
    return !!json.ok;
  } catch {
    return false; // z.B. offline oder Worker nicht erreichbar -> Fallback greift
  }
}

function setupForm(formId, subjectLabel) {
  const form = document.getElementById(formId);
  if (!form) return;

  const status = form.querySelector(".form-status");
  const type = FORM_TYPES[formId];

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const fields = [...form.querySelectorAll("input[required], select[required], textarea[required], input[type=email]")];
    const allValid = fields.map(validateField).every(Boolean);

    if (!allValid) {
      if (status) {
        status.textContent = "Bitte prüfe die markierten Felder — es fehlt noch etwas.";
        status.className = "form-status show error";
      }
      return;
    }

    const data = new FormData(form);
    const submitBtn = form.querySelector('button[type="submit"]');
    if (submitBtn) submitBtn.disabled = true;

    const delivered = await submitToWorker(type, data);

    if (status) {
      if (delivered) {
        status.innerHTML = `Danke, das sieht super aus! 🩵 Deine Bewerbung ist sicher im Postfach von Team Dogi angekommen.`;
        status.className = "form-status show success";
      } else {
        const mailto = buildMailto(subjectLabel, data);
        status.innerHTML = `Danke, das sieht super aus! 🩵 Solange noch kein automatischer Versand eingerichtet ist:
          <a href="${mailto}" class="btn btn-outline" style="margin-top:.6rem;">E-Mail jetzt senden</a>`;
        status.className = "form-status show success";
      }
    }
    if (submitBtn) submitBtn.disabled = false;
    form.reset();
  });

  form.querySelectorAll("input, select, textarea").forEach((field) => {
    field.addEventListener("blur", () => validateField(field));
  });
}

document.addEventListener("DOMContentLoaded", () => {
  setupForm("form-creator", "Creator");
  setupForm("form-scout", "Scout");
  setupForm("form-modi", "Modi");
  setupForm("form-kooperation", "Kooperation");
});