From a7b78cfed44d4ddfe6dd45c848741d33812dddcb Mon Sep 17 00:00:00 2001
From: Cay <cay@joksch.ch>
Date: Fri, 20 Feb 2026 16:30:01 +0000
Subject: [PATCH] =?UTF-8?q?=C3=A4nderung=20der=20Registerseite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 views/register.ejs | 511 +++++++++++++++++++++++++++++++++------------
 1 file changed, 375 insertions(+), 136 deletions(-)

diff --git a/views/register.ejs b/views/register.ejs
index 54bb9aa..985b1b6 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -1,174 +1,413 @@
 <%- include('partials/header') %>
 
+<style>
+
+/* =========================
+   LAYOUT
+========================= */
+
+.step { display: none; }
+.step.active { display: block; }
+
+.container-form {
+    max-width: 700px;
+    margin: auto;
+}
+
+.progress {
+    height: 10px;
+    margin-bottom: 30px;
+}
+
+.step-nav {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+.step-nav span.active {
+    font-weight: bold;
+    color: #3b3be3;
+}
+
+/* Mobile */
+@media(max-width:768px){
+    h4{font-size:18px;}
+    button{width:100%;}
+}
+
+</style>
+
+
+<div class="container-form">
+
 <% if (typeof error !== 'undefined') { %>
 <div class="alert alert-danger">
     ⚠️ <%= error %>
 </div>
 <% } %>
 
-<h2 class="text-center mb-4">Mitglied werden</h2>
+<h3 class="text-center mb-4">Mitglied werden</h3>
 
-<form method="POST" action="/register/create" class="row g-3">
 
-    <!-- ================= -->
-    <!-- PERSÖNLICHE DATEN -->
-    <!-- ================= -->
-    <h4>Persönliche Daten</h4>
-
-    <div class="col-md-6">
-        <input name="vorname" class="form-control" placeholder="Vorname" required>
+<!-- Fortschritt -->
+<div class="progress">
+    <div id="progressBar"
+         class="progress-bar bg-primary"
+         style="width:33%">
     </div>
+</div>
 
-    <div class="col-md-6">
-        <input name="nachname" class="form-control" placeholder="Nachname" required>
-    </div>
 
-    <!-- ================= -->
-    <!-- ADRESSE -->
-    <!-- ================= -->
-    <h4 class="mt-4">Adresse</h4>
+<!-- Navigation -->
+<div class="step-nav text-center mb-3">
+    <span id="nav1" class="active">Daten</span>
+    <span id="nav2">Bank</span>
+    <span id="nav3">Prüfen</span>
+</div>
 
-    <div class="col-md-6">
-        <input name="strasse" class="form-control" placeholder="Straße" required>
-    </div>
 
-    <div class="col-md-2">
-        <input name="hausnummer" class="form-control" placeholder="Nr." required>
-    </div>
+<form method="POST" action="/register/create" id="registerForm">
 
-    <div class="col-md-2">
-        <input name="plz" class="form-control" placeholder="PLZ" required>
-    </div>
 
-    <div class="col-md-4">
-        <input name="ort" class="form-control" placeholder="Ort" required>
-    </div>
+<!-- ========================= -->
+<!-- STEP 1 -->
+<!-- ========================= -->
+<div class="step active" id="step1">
 
-    <div class="col-md-4">
-        <input name="land" class="form-control" placeholder="Land" value="Deutschland">
-    </div>
+<h4>Mitgliedsdaten</h4>
 
-    <!-- ================= -->
-    <!-- KONTAKT -->
-    <!-- ================= -->
-    <h4 class="mt-4">Kontakt</h4>
+<div class="row g-3">
 
-    <div class="col-md-4">
-        <input name="mobil" class="form-control" placeholder="Mobilnummer" required>
-    </div>
+<input name="vorname" class="form-control" placeholder="Vorname" required>
 
-    <div class="col-md-4">
-        <input name="telefon" class="form-control" placeholder="Telefon">
-    </div>
+<input name="nachname" class="form-control" placeholder="Nachname" required>
 
-    <div class="col-md-4">
-        <input type="email" name="email" class="form-control" placeholder="E-Mail" required>
-    </div>
+<input name="mobil" class="form-control" placeholder="Mobilnummer" required>
 
-    <!-- ================= -->
-    <!-- VERTRAG -->
-    <!-- ================= -->
-    <h4 class="mt-4">Vertrag</h4>
+<input type="email" name="email" class="form-control" placeholder="E-Mail" required>
 
-    <div class="col-md-12">
-        <select name="vertragsvariante" class="form-select" required>
-            <option value="">Bitte Vertrag auswählen</option>
-            <% vertragsarten.forEach(v => { %>
-                <option value="<%= v.id %>"
-                    <%= selectedVertrag == v.id ? 'selected' : '' %>>
-                    <%= v.name %> – <%= v.betrag.toFixed(2) %> € / Monat
-                </option>
-            <% }) %>
-        </select>
-    </div>
 
-    <div class="col-md-12">
-        <input class="form-control bg-light" disabled
-               placeholder="Vertragsnummer wird automatisch vergeben">
-    </div>
+<h5 class="mt-3">Adresse</h5>
 
-    <!-- ================= -->
-    <!-- SEPA -->
-    <!-- ================= -->
-    <h4 class="mt-4">SEPA-Lastschrift</h4>
+<input name="strasse" class="form-control" placeholder="Straße" required>
 
-    <div class="col-md-6">
-        <input name="kontoinhaber" class="form-control"
-               placeholder="Kontoinhaber" required>
-    </div>
+<input name="hausnummer" class="form-control" placeholder="Nr." required>
 
-    <div class="col-md-6">
-        <input name="mandatsreferenz" class="form-control"
-               placeholder="Mandatsreferenz" required>
-    </div>
+<input name="plz" class="form-control" placeholder="PLZ" required>
 
-    <div class="col-md-6">
-        <input name="iban" class="form-control"
-               placeholder="IBAN" required>
-    </div>
+<input name="ort" class="form-control" placeholder="Ort" required>
 
-    <div class="col-md-6">
-        <input name="bic" class="form-control"
-               placeholder="BIC" required>
-    </div>
+<input name="land" class="form-control" value="Deutschland">
 
-    <!-- ✅ EINZIGE SEPA-ZUSTIMMUNG -->
-    <div class="col-md-12 form-check mt-2">
-        <input
-            type="checkbox"
-            class="form-check-input"
-            id="agreeSepa"
-            name="agreeSepa"
-            required>
-        <label class="form-check-label" for="agreeSepa">
-            Ich erteile ein SEPA-Lastschriftmandat und stimme der Abbuchung zu.
-        </label>
-    </div>
+</div>
 
-    <!-- ================= -->
-    <!-- RECHTLICHES -->
-    <!-- ================= -->
-    <hr class="my-4">
-    <h5>Rechtliches</h5>
 
-    <div class="form-check mb-2">
-        <input class="form-check-input"
-               type="checkbox"
-               id="agreeConsent"
-               name="agreeConsent"
-               required>
-        <label class="form-check-label" for="agreeConsent">
-            Ich habe die
-            <a href="/documents/Einverstaendniserklaerung.pdf" target="_blank">
-                Einverständniserklärung
-            </a>
-            gelesen.
-        </label> 
-    </div>
+<button type="button"
+        class="btn btn-primary mt-4"
+        onclick="nextStep(2)">
+        Weiter →
+</button>
 
-    <div class="form-check mb-3">
-        <input class="form-check-input"
-               type="checkbox"
-               id="agreeAgb"
-               name="agreeAgb"
-               required>
-        <label class="form-check-label" for="agreeAgb">
-            Ich akzeptiere die 
-            <a href="https://plusfit24.de/wp-content/uploads/2022/11/AG_PlusFit24.pdf" target="_blank">
-                AGB
-            </a>.
-        </label>
-    </div>
+</div>
+
+
+
+<!-- ========================= -->
+<!-- STEP 2 -->
+<!-- ========================= -->
+<div class="step" id="step2">
+
+<h4>Bankdaten</h4>
+
+<div class="row g-3">
+
+<input name="kontoinhaber" class="form-control" placeholder="Kontoinhaber" required>
+
+<input name="mandatsreferenz" class="form-control" placeholder="Mandatsreferenz" required>
+
+<input name="iban" class="form-control" placeholder="IBAN" required>
+
+<input name="bic" class="form-control" placeholder="BIC" required>
+
+
+<div class="form-check mt-2">
+    <input class="form-check-input" type="checkbox" name="agreeSepa" required>
+    <label class="form-check-label">
+        SEPA-Mandat erteilen
+    </label>
+</div>
+
+</div>
+
+
+<div class="d-flex justify-content-between mt-4">
+
+<button type="button"
+        class="btn btn-secondary"
+        onclick="nextStep(1)">
+        ← Zurück
+</button>
+
+<button type="button"
+        class="btn btn-primary"
+        onclick="nextStep(3)">
+        Weiter →
+</button>
+
+</div>
+
+</div>
+
+
+
+<!-- ========================= -->
+<!-- STEP 3 -->
+<!-- ========================= -->
+<div class="step" id="step3">
+
+<h4>Zusammenfassung</h4>
+
+<div class="card p-3 mb-3 bg-light">
+
+<div id="summaryBox"></div>
+
+</div>
+
+
+<h5>Vertrag</h5>
+
+<select name="vertragsvariante"
+        class="form-select mb-3"
+        required>
+
+<option value="">Bitte wählen</option>
+
+<% vertragsarten.forEach(v => { %>
+
+<option value="<%= v.id %>">
+<%= v.name %> – <%= v.betrag.toFixed(2) %> €
+</option>
+
+<% }) %>
+
+</select>
+
+
+<h5>Rechtliches</h5>
+
+<div class="form-check mb-2">
+
+<input class="form-check-input"
+       type="checkbox"
+       name="agreeConsent"
+       required>
+
+<label class="form-check-label">
+Einverständnis gelesen
+</label>
+
+</div>
+
+
+<div class="form-check mb-3">
+
+<input class="form-check-input"
+       type="checkbox"
+       name="agreeAgb"
+       required>
+
+<label class="form-check-label">
+AGB akzeptiert
+</label>
+
+</div>
+
+
+<div class="d-flex justify-content-between mt-4">
+
+<button type="button"
+        class="btn btn-secondary"
+        onclick="nextStep(2)">
+        ← Zurück
+</button>
+
+<button type="submit"
+        class="btn btn-success btn-lg">
+        Abschließen
+</button>
+
+</div>
+
+</div>
 
-    <!-- ================= -->
-    <!-- ABSCHICKEN -->
-    <!-- ================= -->
-    <div class="col-12 mt-4">
-        <button type="submit" class="btn btn-success btn-lg w-100">
-            💳 Kostenpflichtig verbindlich abschließen
-        </button>
-    </div>
 
 </form>
+</div>
 
-<%- include('partials/footer') %>
+
+
+<script>
+
+/* ============================
+   STEPS
+============================ */
+
+let currentStep = 1;
+
+
+function nextStep(step){
+
+    if(!validateStep(currentStep)) return;
+
+    saveForm();
+
+    currentStep = step;
+
+    document.querySelectorAll('.step')
+    .forEach(s => s.classList.remove('active'));
+
+    document.getElementById('step'+step)
+    .classList.add('active');
+
+    updateNav();
+    updateProgress();
+
+    if(step === 3){
+        buildSummary();
+    }
+}
+
+
+/* ============================
+   VALIDIERUNG
+============================ */
+
+function validateStep(step){
+
+    const container =
+    document.getElementById('step'+step);
+
+    const fields =
+    container.querySelectorAll('input,select');
+
+    for(let field of fields){
+
+        if(!field.checkValidity()){
+            field.reportValidity();
+            return false;
+        }
+    }
+
+    return true;
+}
+
+
+/* ============================
+   PROGRESS
+============================ */
+
+function updateProgress(){
+
+    const percent = currentStep * 33;
+
+    document.getElementById('progressBar')
+    .style.width = percent + '%';
+}
+
+
+/* ============================
+   NAV
+============================ */
+
+function updateNav(){
+
+    document.querySelectorAll('.step-nav span')
+    .forEach(n => n.classList.remove('active'));
+
+    document.getElementById('nav'+currentStep)
+    .classList.add('active');
+}
+
+
+/* ============================
+   AUTO SAVE
+============================ */
+
+const form = document.getElementById('registerForm');
+
+form.addEventListener('input', saveForm);
+
+function saveForm(){
+
+    const data = {};
+
+    new FormData(form).forEach((v,k)=>{
+        data[k]=v;
+    });
+
+    localStorage.setItem('registerData',
+        JSON.stringify(data));
+}
+
+
+function loadForm(){
+
+    const data =
+    JSON.parse(localStorage.getItem('registerData'));
+
+    if(!data) return;
+
+    Object.keys(data).forEach(key=>{
+
+        const field =
+        form.elements[key];
+
+        if(field){
+            field.value = data[key];
+        }
+    });
+}
+
+loadForm();
+
+
+/* ============================
+   SUMMARY
+============================ */
+
+function buildSummary(){
+
+    const data =
+    JSON.parse(localStorage.getItem('registerData'));
+
+    if(!data) return;
+
+    let html = `
+    <b>Name:</b> ${data.vorname} ${data.nachname}<br>
+    <b>Email:</b> ${data.email}<br>
+    <b>Mobil:</b> ${data.mobil}<br>
+    <b>Adresse:</b>
+    ${data.strasse} ${data.hausnummer},
+    ${data.plz} ${data.ort}<br>
+
+    <b>IBAN:</b> ${data.iban}<br>
+    `;
+
+    document.getElementById('summaryBox').innerHTML = html;
+}
+
+
+/* ============================
+   CLEAR AFTER SUBMIT
+============================ */
+
+form.addEventListener('submit',()=>{
+    localStorage.removeItem('registerData');
+});
+
+</script>
+
+
+<%- include('partials/footer') %>
\ No newline at end of file