Anpassungen event-create + Fehlermeldungen in login und signup

css/event_create.css

@@ -310,32 +310,31 @@ textarea:focus {
   align-items: center;
 }
 
-.error-message {
-  margin: 0;
-  text-align: center; 
-  width: 100%;
-
-}
-
 .progress-wrap {
-  width: min(100%, var(--content-width));
+  flex: 1;
-  margin: 0 auto;
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  align-self: center;
+  min-height: 2.75rem;
 }
 
 .progress-label {
-  flex-shrink: 0;
+  position: absolute;
+  top: -1.1rem;
+  left: 50%;
+  transform: translateX(-50%);
   font-size: 1rem;
   font-weight: 400;
   color: var(--black);
   white-space: nowrap;
+  text-align: center;
 }
 
 .progress {
   flex: 1;
-  height: 0.3rem;
+  width: 100%;
+  height: 0.45rem;
   background: var(--olive-light);
   border-radius: var(--radius-sm);
   overflow: hidden;
@@ -360,9 +359,16 @@ textarea:focus {
 }
 
 .flow-actions-right {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: var(--space-4);
+  justify-content: flex-end;
+}
+
+.error-message--callout {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 1.25rem);
 }
 
 .button--ghost:hover {
@@ -454,6 +460,26 @@ textarea:focus-visible {
     align-items: stretch;
   }
 
+  .error-message--callout {
+    position: static;
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: var(--space-2);
+  }
+
+  .progress-wrap {
+    min-height: auto;
+  }
+
+  .progress-label {
+    position: static;
+    transform: none;
+  }
+
+  .error-message--callout::after {
+    display: none;
+  }
+
   .event-flow-header {
     justify-content: flex-start;
   }

css/login_signup.css

@@ -68,6 +68,10 @@ h1 {
     margin-bottom: var(--space-4);
 }
 
+.form-group.has-error {
+    margin-bottom: var(--space-2);
+}
+
 label {
     display: block;
     margin-bottom: var(--space-1);
@@ -138,9 +142,10 @@ button[type="submit"]:active {
 
 /* --- Hints & errors --- */
 
-.error-message {
+.error-message--field-callout {
-    margin-top: 5px;
     display: none;
+    margin-top: 0.65rem;
+    margin-left: auto;
 }
 
 .form-group.has-error input {
@@ -148,7 +153,7 @@ button[type="submit"]:active {
     box-shadow: 0 0 5px rgba(212, 75, 36, 0.3);
 }
 
-.form-group.has-error .error-message {
+.form-group.has-error .error-message--field-callout {
     display: block;
 }
 
@@ -272,6 +277,16 @@ button[type="submit"]:active {
     .image-section {
         min-height: 300px;
     }
+
+    .error-message--field-callout {
+        margin-top: var(--space-1);
+        max-width: 100%;
+        white-space: normal;
+    }
+
+    .error-message--field-callout::after {
+        display: none;
+    }
 }
 
 

css/stylesheet_global.css

@@ -175,8 +175,74 @@ label {
 }
 
 .error-message {
-  color: var(--error-text);
+  font-family: var(--font-main);
   font-size: 1rem;
+  line-height: 1.4;
+}
+
+.error-message--inline {
+  color: var(--error-text);
+}
+
+.error-message--field-callout {
+  display: none;
+  width: fit-content;
+  max-width: min(100%, 20rem);
+  padding: 0.35rem 0.8rem;
+  border-radius: var(--radius-md);
+  background: var(--error);
+  color: var(--white);
+  text-align: center;
+  font-size: 0.8125rem;
+  line-height: 1.2;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  position: relative;
+}
+
+.error-message--field-callout::after {
+  content: "";
+  position: absolute;
+  top: -0.35rem;
+  right: 1.6rem;
+  width: 0.8rem;
+  height: 0.8rem;
+  background: inherit;
+  border-top-left-radius: 0.2rem;
+  transform: rotate(45deg);
+}
+
+.error-message--callout {
+  display: none;
+  width: max-content;
+  max-width: 15rem;
+  padding: 0.7rem 1.15rem;
+  border-radius: 1rem;
+  background: var(--error);
+  color: #ffffff;
+  text-align: center;
+  font-size: 0.95rem;
+  line-height: 1.25;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  box-shadow: var(--shadow-interaction);
+  z-index: 1;
+}
+
+.error-message--callout:not(:empty) {
+  display: block;
+}
+
+.error-message--callout::after {
+  content: "";
+  position: absolute;
+  right: 2.1rem;
+  bottom: -0.55rem;
+  width: 1.1rem;
+  height: 1.1rem;
+  background: inherit;
+  border-bottom-right-radius: 0.25rem;
+  transform: rotate(45deg);
 }
 
 /* Margins */

event_create.html

@@ -240,7 +240,7 @@
 
               <div class="form-field">
                 <label for="eventTime">Uhrzeit</label>
-                <input type="time" id="eventTime" name="eventTime" required />
+                <input type="time" id="eventTime" name="eventTime" value="00:00" required />
               </div>
             </div>
           </div>
@@ -379,9 +379,6 @@
 
 
 <div class="flow-footer layout-narrow" id="flowFooter" hidden>
-
-  <p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
-
   <div class="flow-actions">
     <button type="button" id="backButton" class="button-secondary">
       Zurück
@@ -396,14 +393,17 @@
       </div>
     </div>
 
+    <div class="flow-actions-right">
+      <p
+        id="errorMessage"
+        class="error-message error-message--callout"
+        role="alert"
+        aria-live="assertive"
+      ></p>
       <button type="button" id="nextButton" class="button-primary">
         Weiter
       </button>
     </div>
-
-      <div class="flow-actions-right">
-      <p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
-
   </div>
 </div>
 

js/event_create.js

@@ -23,6 +23,7 @@ const CURRENT_USER_KEY = "socialCookingCurrentUser";
 // =============================
 let currentStep = 0;
 const lastStep = steps.length - 1;
+let reviewReturnStep = null;
 
 // Text für den Weiter-Button je nach Schritt
 const nextLabels = {
@@ -151,10 +152,14 @@ function showStep(index, pushHistory = true) {
  */
 function updateFlowVisibility(stepIndex) {
   const isIntroStep = stepIndex === 0;
+  const isReviewReturnMode = reviewReturnStep === lastStep && stepIndex < lastStep;
 
   flowFooter.hidden = isIntroStep;
   backButton.hidden = isIntroStep;
-  nextButton.textContent = nextLabels[stepIndex];
+  backButton.textContent = "Zurück";
+  nextButton.textContent = isReviewReturnMode
+    ? "Zurück zur Übersicht"
+    : nextLabels[stepIndex];
 }
 
 
@@ -567,6 +572,10 @@ function validateRequiredFields(fields) {
  * Wenn der User im ersten Formularschritt ist, geht es zurück zum Intro.
  */
 function handleBackClick() {
+  if (reviewReturnStep === lastStep && currentStep < lastStep) {
+    reviewReturnStep = null;
+  }
+
   if (currentStep > 1) {
     showStep(currentStep - 1);
   } else {
@@ -582,6 +591,12 @@ function handleBackClick() {
 function handleNextClick() {
   if (!validateCurrentStep()) return;
 
+  if (reviewReturnStep === lastStep && currentStep < lastStep) {
+    showStep(lastStep);
+    reviewReturnStep = null;
+    return;
+  }
+
   if (currentStep < lastStep) {
     showStep(currentStep + 1);
   } else {
@@ -701,6 +716,8 @@ function registerReviewEditHandlers() {
       const stepIndex = Number(item.dataset.editStep);
       const fieldName = item.dataset.editField;
 
+      // Öffnet einen Schritt aus der Übersicht und springt danach direkt zurück zu Schritt 7.
+      reviewReturnStep = lastStep;
       showStep(stepIndex);
       focusFieldByName(fieldName);
     };

js/login.js

@@ -51,52 +51,58 @@ function createFallbackUser(email, passwort) {
 function validateForm(event) {
     event.preventDefault();
 
-    let isValid = true;
+    // Wir zeigen bewusst immer nur den ersten Fehler im Formular an.
-
+    // So bleibt der Ablauf ruhig und führt den Nutzer Feld für Feld.
-    // Email-Validierung
     const emailValue = emailInput.value.trim();
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     const emailGroup = emailInput.parentElement;
+    const passwortGroup = passwortInput.parentElement;
+
+    emailGroup.classList.remove('has-error');
+    passwortGroup.classList.remove('has-error');
 
     if (!emailValue) {
         emailGroup.classList.add('has-error');
         emailError.textContent = 'Bitte gib deine E-Mail Adresse ein.';
-        isValid = false;
+        emailInput.focus();
-    } else if (!emailRegex.test(emailValue)) {
+        return;
+    }
+
+    if (!emailRegex.test(emailValue)) {
         emailGroup.classList.add('has-error');
         emailError.textContent = 'Bitte gib eine gültige E-Mail Adresse ein.';
-        isValid = false;
+        emailInput.focus();
-    } else {
+        return;
-        emailGroup.classList.remove('has-error');
     }
 
     // Passwort-Validierung
     const passwortValue = passwortInput.value;
-    const passwortGroup = passwortInput.parentElement;
 
     if (!passwortValue) {
         passwortGroup.classList.add('has-error');
         passwortError.textContent = 'Bitte gib dein Passwort ein.';
-        isValid = false;
+        passwortInput.focus();
-    } else if (passwortValue.length < 6) {
+        return;
+    }
+
+    if (passwortValue.length < 6) {
         passwortGroup.classList.add('has-error');
         passwortError.textContent = 'Dein Passwort ist zu kurz. Bitte überprüfe dein Passwort.';
-        isValid = false;
+        passwortInput.focus();
-    } else {
+        return;
-        passwortGroup.classList.remove('has-error');
     }
 
     // Wenn alle Validierungen bestanden, prüfen wir:
     // 1) gibt es den Benutzer schon?
     // 2) ist das Passwort korrekt?
     // Danach speichern wir die aktive Session.
-    if (isValid) {
     const users = getStoredUsers();
     const matchedUser = users.find(user => user.email?.toLowerCase() === emailValue.toLowerCase());
 
     if (matchedUser && matchedUser.passwort !== passwortValue) {
         passwortGroup.classList.add('has-error');
         passwortError.textContent = 'Das Passwort ist nicht korrekt.';
+        passwortInput.focus();
         return;
     }
 
@@ -113,7 +119,6 @@ function validateForm(event) {
     } else {
         window.location.href = 'event_overview.html';
     }
-    }
 }
 
 // Fehlerbehandlung bei Input-Änderung (entfernt Fehler wenn Benutzer korrigiert)

js/signup.js

@@ -53,68 +53,73 @@ function closeWelcomeModal() {
 function validateForm(event) {
     event.preventDefault();
 
-    let isValid = true;
+    // Wir zeigen pro Submit nur den ersten Fehler an.
-
+    // So bleibt der Formularfluss klar und ruhig.
-    // Vorname-Validierung
     const vornameValue = vornameInput.value.trim();
     const vornameGroup = vornameInput.parentElement;
+    const nachnameGroup = nachnameInput.parentElement;
+    const emailGroup = emailInput.parentElement;
+    const passwortGroup = passwortInput.parentElement;
+
+    vornameGroup.classList.remove('has-error');
+    nachnameGroup.classList.remove('has-error');
+    emailGroup.classList.remove('has-error');
+    passwortGroup.classList.remove('has-error');
 
     if (!vornameValue) {
         vornameGroup.classList.add('has-error');
-        isValid = false;
+        vornameInput.focus();
-    } else {
+        return;
-        vornameGroup.classList.remove('has-error');
     }
 
     // Nachname-Validierung
     const nachnameValue = nachnameInput.value.trim();
-    const nachnameGroup = nachnameInput.parentElement;
 
     if (!nachnameValue) {
         nachnameGroup.classList.add('has-error');
-        isValid = false;
+        nachnameInput.focus();
-    } else {
+        return;
-        nachnameGroup.classList.remove('has-error');
     }
 
     // Email-Validierung
     const emailValue = emailInput.value.trim();
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    const emailGroup = emailInput.parentElement;
 
     if (!emailValue) {
         emailGroup.classList.add('has-error');
         document.getElementById('emailError').textContent = 'Bitte gib deine E-Mail Adresse ein.';
-        isValid = false;
+        emailInput.focus();
-    } else if (!emailRegex.test(emailValue)) {
+        return;
+    }
+
+    if (!emailRegex.test(emailValue)) {
         emailGroup.classList.add('has-error');
         document.getElementById('emailError').textContent = 'Bitte gib eine gültige E-Mail Adresse ein.';
-        isValid = false;
+        emailInput.focus();
-    } else {
+        return;
-        emailGroup.classList.remove('has-error');
     }
 
     // Passwort-Validierung
     const passwortValue = passwortInput.value;
-    const passwortGroup = passwortInput.parentElement;
 
     if (!passwortValue) {
         passwortGroup.classList.add('has-error');
         document.getElementById('passwortError').textContent = 'Bitte gib ein Passwort ein.';
-        isValid = false;
+        passwortInput.focus();
-    } else if (passwortValue.length < 8) {
+        return;
+    }
+
+    if (passwortValue.length < 8) {
         passwortGroup.classList.add('has-error');
         document.getElementById('passwortError').textContent = 'Dein Passwort muss mindestens 8 Zeichen lang sein.';
-        isValid = false;
+        passwortInput.focus();
-    } else {
+        return;
-        passwortGroup.classList.remove('has-error');
     }
 
     // Wenn alles gültig ist:
     // 1) auf doppelte E-Mail prüfen
     // 2) neuen Benutzer speichern
     // 3) als aktuellen Benutzer einloggen
-    if (isValid) {
     const existingUsers = getStoredUsers();
     const emailLower = emailValue.toLowerCase();
     const emailAlreadyUsed = existingUsers.some(user => user.email?.toLowerCase() === emailLower);
@@ -122,6 +127,7 @@ function validateForm(event) {
     if (emailAlreadyUsed) {
         emailGroup.classList.add('has-error');
         document.getElementById('emailError').textContent = 'Diese E-Mail ist bereits registriert. Bitte nutze den Login.';
+        emailInput.focus();
         return;
     }
 
@@ -140,7 +146,6 @@ function validateForm(event) {
 
     openWelcomeModal();
     // Weiterleitung erfolgt beim Klick auf "Weiter zu den Events".
-    }
 }
 
 // Fehlerbehandlung bei Input-Änderung (entfernt Fehler wenn Benutzer korrigiert)

login.html

@@ -35,17 +35,17 @@
         <div class="form-section">
             <h1>Login</h1>
 
-            <form id="loginForm">
+            <form id="loginForm" novalidate>
                 <div class="form-group">
                     <label for="email">E-Mail</label>
                     <input type="email" id="email" name="email" required placeholder="deine.email@example.com">
-                    <div class="error-message" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div>
+                    <div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div>
                 </div>
 
                 <div class="form-group">
                     <label for="passwort">Passwort</label>
                     <input type="password" id="passwort" name="passwort" required placeholder="Gib dein Passwort ein">
-                    <div class="error-message" id="passwortError">Bitte gib dein Passwort ein.</div>
+                    <div class="error-message error-message--field-callout" id="passwortError">Bitte gib dein Passwort ein.</div>
                 </div>
 
                 <button type="submit" class="button-primary">Login</button>

signup.html

@@ -39,29 +39,29 @@
                 <strong>Hinweis:</strong> Sichtbar auf der Plattform ist nur dein Vorname. Erst einer Anmeldung zum Event ist der Nachname für die Teilnehmenden sichtbar.
             </div>
 
-            <form id="signupForm">
+            <form id="signupForm" novalidate>
                 <div class="form-group">
                     <label for="vorname">Vorname *</label>
                     <input type="text" id="vorname" name="vorname" required placeholder="Dein Vorname">
-                    <div class="error-message" id="vornameError">Bitte gib deinen Vornamen ein.</div>
+                    <div class="error-message error-message--field-callout" id="vornameError">Bitte gib deinen Vornamen ein.</div>
                 </div>
 
                 <div class="form-group">
                     <label for="nachname">Nachname *</label>
                     <input type="text" id="nachname" name="nachname" required placeholder="Dein Nachname">
-                    <div class="error-message" id="nachnameError">Bitte gib deinen Nachnamen ein.</div>
+                    <div class="error-message error-message--field-callout" id="nachnameError">Bitte gib deinen Nachnamen ein.</div>
                 </div>
 
                 <div class="form-group">
                     <label for="email">E-Mail *</label>
                     <input type="email" id="email" name="email" required placeholder="deine.email@example.com">
-                    <div class="error-message" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div>
+                    <div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div>
                 </div>
 
                 <div class="form-group">
                     <label for="passwort">Passwort *</label>
                     <input type="password" id="passwort" name="passwort" required placeholder="Mindestens 8 Zeichen">
-                    <div class="error-message" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
+                    <div class="error-message error-message--field-callout" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
                 </div>
 
                 <button type="submit" class="button-primary">Konto erstellen</button>