änderung der Registerseite
This commit is contained in:
parent
779a660988
commit
a7b78cfed4
@ -1,174 +1,413 @@
|
|||||||
<%- include('partials/header') %>
|
<%- 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') { %>
|
<% if (typeof error !== 'undefined') { %>
|
||||||
<div class="alert alert-danger">
|
<div class="alert alert-danger">
|
||||||
⚠️ <%= error %>
|
⚠️ <%= error %>
|
||||||
</div>
|
</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">
|
|
||||||
|
|
||||||
<!-- ================= -->
|
<!-- Fortschritt -->
|
||||||
<!-- PERSÖNLICHE DATEN -->
|
<div class="progress">
|
||||||
<!-- ================= -->
|
<div id="progressBar"
|
||||||
<h4>Persönliche Daten</h4>
|
class="progress-bar bg-primary"
|
||||||
|
style="width:33%">
|
||||||
<div class="col-md-6">
|
|
||||||
<input name="vorname" class="form-control" placeholder="Vorname" required>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6">
|
|
||||||
<input name="nachname" class="form-control" placeholder="Nachname" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ================= -->
|
<!-- Navigation -->
|
||||||
<!-- ADRESSE -->
|
<div class="step-nav text-center mb-3">
|
||||||
<!-- ================= -->
|
<span id="nav1" class="active">Daten</span>
|
||||||
<h4 class="mt-4">Adresse</h4>
|
<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">
|
<form method="POST" action="/register/create" id="registerForm">
|
||||||
<input name="hausnummer" class="form-control" placeholder="Nr." required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
<!-- STEP 1 -->
|
||||||
</div>
|
<!-- ========================= -->
|
||||||
|
<div class="step active" id="step1">
|
||||||
|
|
||||||
<div class="col-md-4">
|
<h4>Mitgliedsdaten</h4>
|
||||||
<input name="land" class="form-control" placeholder="Land" value="Deutschland">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ================= -->
|
<div class="row g-3">
|
||||||
<!-- KONTAKT -->
|
|
||||||
<!-- ================= -->
|
|
||||||
<h4 class="mt-4">Kontakt</h4>
|
|
||||||
|
|
||||||
<div class="col-md-4">
|
<input name="vorname" class="form-control" placeholder="Vorname" required>
|
||||||
<input name="mobil" class="form-control" placeholder="Mobilnummer" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4">
|
<input name="nachname" class="form-control" placeholder="Nachname" required>
|
||||||
<input name="telefon" class="form-control" placeholder="Telefon">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4">
|
<input name="mobil" class="form-control" placeholder="Mobilnummer" required>
|
||||||
<input type="email" name="email" class="form-control" placeholder="E-Mail" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ================= -->
|
<input type="email" name="email" class="form-control" placeholder="E-Mail" required>
|
||||||
<!-- VERTRAG -->
|
|
||||||
<!-- ================= -->
|
|
||||||
<h4 class="mt-4">Vertrag</h4>
|
|
||||||
|
|
||||||
<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">
|
<h5 class="mt-3">Adresse</h5>
|
||||||
<input class="form-control bg-light" disabled
|
|
||||||
placeholder="Vertragsnummer wird automatisch vergeben">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ================= -->
|
<input name="strasse" class="form-control" placeholder="Straße" required>
|
||||||
<!-- SEPA -->
|
|
||||||
<!-- ================= -->
|
|
||||||
<h4 class="mt-4">SEPA-Lastschrift</h4>
|
|
||||||
|
|
||||||
<div class="col-md-6">
|
<input name="hausnummer" class="form-control" placeholder="Nr." required>
|
||||||
<input name="kontoinhaber" class="form-control"
|
|
||||||
placeholder="Kontoinhaber" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6">
|
<input name="plz" class="form-control" placeholder="PLZ" required>
|
||||||
<input name="mandatsreferenz" class="form-control"
|
|
||||||
placeholder="Mandatsreferenz" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6">
|
<input name="ort" class="form-control" placeholder="Ort" required>
|
||||||
<input name="iban" class="form-control"
|
|
||||||
placeholder="IBAN" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6">
|
<input name="land" class="form-control" value="Deutschland">
|
||||||
<input name="bic" class="form-control"
|
|
||||||
placeholder="BIC" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ✅ EINZIGE SEPA-ZUSTIMMUNG -->
|
</div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- ================= -->
|
|
||||||
<!-- RECHTLICHES -->
|
|
||||||
<!-- ================= -->
|
|
||||||
<hr class="my-4">
|
|
||||||
<h5>Rechtliches</h5>
|
|
||||||
|
|
||||||
<div class="form-check mb-2">
|
<button type="button"
|
||||||
<input class="form-check-input"
|
class="btn btn-primary mt-4"
|
||||||
type="checkbox"
|
onclick="nextStep(2)">
|
||||||
id="agreeConsent"
|
Weiter →
|
||||||
name="agreeConsent"
|
</button>
|
||||||
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>
|
|
||||||
|
|
||||||
<div class="form-check mb-3">
|
</div>
|
||||||
<input class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id="agreeAgb"
|
|
||||||
name="agreeAgb"
|
<!-- ========================= -->
|
||||||
required>
|
<!-- STEP 2 -->
|
||||||
<label class="form-check-label" for="agreeAgb">
|
<!-- ========================= -->
|
||||||
Ich akzeptiere die
|
<div class="step" id="step2">
|
||||||
<a href="https://plusfit24.de/wp-content/uploads/2022/11/AG_PlusFit24.pdf" target="_blank">
|
|
||||||
AGB
|
<h4>Bankdaten</h4>
|
||||||
</a>.
|
|
||||||
</label>
|
<div class="row g-3">
|
||||||
</div>
|
|
||||||
|
<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>
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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') %>
|
<%- include('partials/footer') %>
|
||||||
Loading…
Reference in New Issue
Block a user