From 798f8ca87a234d768c6588c4e638b88b34a101db Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Sun, 26 Apr 2026 18:53:35 +0200
Subject: [PATCH] feat(login): field-specific validation errors instead of
 generic message

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/pages/login.js   | 18 +++++++++++++++++-
 public/styles/login.css | 10 ++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/public/pages/login.js b/public/pages/login.js
index 8950593..9f72f54 100644
--- a/public/pages/login.js
+++ b/public/pages/login.js
@@ -79,8 +79,17 @@ export async function render(container) {
     const username = form.username.value.trim();
     const password = form.password.value;
 
+    const usernameInput = form.querySelector('#username');
+    const passwordInput = form.querySelector('#password');
+    const usernameGroup = usernameInput.closest('.form-group');
+    const passwordGroup = passwordInput.closest('.form-group');
+
+    usernameGroup.classList.toggle('form-group--error', !username);
+    passwordGroup.classList.toggle('form-group--error', !password);
+
     if (!username || !password) {
-      showError(errorEl, t('common.allFieldsRequired'));
+      if (!username) usernameInput.focus();
+      else passwordInput.focus();
       return;
     }
 
@@ -107,6 +116,13 @@ export async function render(container) {
       spinner.remove();
     }
   });
+
+  form.querySelector('#username').addEventListener('input', () => {
+    form.querySelector('#username').closest('.form-group').classList.remove('form-group--error');
+  });
+  form.querySelector('#password').addEventListener('input', () => {
+    form.querySelector('#password').closest('.form-group').classList.remove('form-group--error');
+  });
 }
 
 function showError(el, message) {
diff --git a/public/styles/login.css b/public/styles/login.css
index 13775ae..2f2c91d 100644
--- a/public/styles/login.css
+++ b/public/styles/login.css
@@ -68,6 +68,16 @@
   opacity: 0.6;
 }
 
+/* Feld-Fehler-Zustand */
+.form-group--error .input {
+  border-color: var(--color-danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 20%, transparent);
+}
+
+.form-group--error .label {
+  color: var(--color-danger);
+}
+
 .login-spinner {
   width: 16px;
   height: 16px;