From 10a495c13c0d8bba58df05a6e643410b0e0afb28 Mon Sep 17 00:00:00 2001
From: Alwin <alwin@morz.de>
Date: Wed, 25 Mar 2026 07:40:28 +0000
Subject: [PATCH] feat(ui): Login-Seite neu gestaltet

---
 .../internal/httpapi/manage/templates.go      | 120 ++++++------------
 1 file changed, 41 insertions(+), 79 deletions(-)
diff --git a/server/backend/internal/httpapi/manage/templates.go b/server/backend/internal/httpapi/manage/templates.go
index f694bc3..3ec51c4 100644
--- a/server/backend/internal/httpapi/manage/templates.go
+++ b/server/backend/internal/httpapi/manage/templates.go
@@ -1,100 +1,62 @@
 package manage
 
 const loginTmpl = `<!DOCTYPE html>
-<html lang="de" data-theme="light">
+<html lang="de">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="color-scheme" content="light">
-  <title>Anmelden – morz infoboard</title>
+  <title>Anmelden – MORZ Infoboard</title>
   <link rel="stylesheet" href="/static/bulma.min.css">
   <style>
-    body { background: #f5f5f5; min-height: 100vh; display: flex; flex-direction: column; }
-    .login-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
+    :root { --morz-red:#E30613; --morz-red-dark:#B8000F; --nav-bg:#1A1A2E; --bg:#F7F8FA; --surface:#FFFFFF; --shadow-sm:0 1px 4px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.12); --radius:8px; --radius-btn:6px; }
+    body { background:var(--bg); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
+    .login-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-md); width:100%; max-width:400px; padding:2.5rem 2rem; border-top:4px solid var(--morz-red); }
+    .login-title { font-size:1.5rem; font-weight:800; text-align:center; margin-bottom:2rem; letter-spacing:-.02em; }
+    .login-title .accent { color:var(--morz-red); }
+    .field label { font-weight:600; font-size:.875rem; margin-bottom:.35rem; display:block; color:#374151; }
+    .input:focus { border-color:var(--morz-red); box-shadow:0 0 0 3px rgba(227,6,19,.15); outline:none; }
+    .btn-login { background:var(--morz-red); color:#fff; border:none; border-radius:var(--radius-btn); width:100%; padding:.75rem; font-weight:700; font-size:1rem; cursor:pointer; transition:background .15s; margin-top:1.5rem; }
+    .btn-login:hover { background:var(--morz-red-dark); }
+    .error-banner { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:6px; padding:.75rem 1rem; font-size:.875rem; margin-bottom:1.25rem; }
+    .pw-wrap { position:relative; }
+    .pw-toggle { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#9ca3af; padding:0; line-height:1; }
+    .pw-toggle:hover { color:#374151; }
   </style>
 </head>
 <body>
-<nav class="navbar is-dark">
-  <div class="navbar-brand">
-    <span class="navbar-item"><strong>morz infoboard</strong></span>
-  </div>
-</nav>
+<div class="login-card">
+  <div class="login-title"><span class="accent">MORZ</span> Infoboard</div>
 
-<div class="login-wrapper">
-  <div class="columns is-centered" style="width:100%">
-    <div class="column is-narrow" style="min-width:340px;max-width:420px">
-      <div class="box">
-        <h1 class="title is-4 has-text-centered mb-5">Anmelden</h1>
+  {{if .Error}}
+  <div class="error-banner" role="alert">{{.Error}}</div>
+  {{end}}
 
-        {{if .Error}}
-        <div class="notification is-danger is-light" role="alert">
-          <button class="delete" onclick="this.parentElement.remove()"></button>
-          {{.Error}}
-        </div>
-        {{end}}
+  <form method="POST" action="/login">
+    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
+    {{if .Next}}<input type="hidden" name="next" value="{{.Next}}">{{end}}
 
-        <form method="POST" action="/login">
-          <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
-          {{if .Next}}
-          <input type="hidden" name="next" value="{{.Next}}">
-          {{end}}
+    <div class="field" style="margin-bottom:1rem">
+      <label for="username">Benutzername</label>
+      <input class="input" type="text" id="username" name="username"
+             autocomplete="username" autofocus required
+             style="border-radius:6px">
+    </div>
 
-          <div class="field">
-            <label class="label" for="username">Benutzername</label>
-            <div class="control has-icons-left">
-              <input class="input" type="text" id="username" name="username"
-                     autocomplete="username" autofocus required>
-              <span class="icon is-small is-left">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
-                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                     stroke-linejoin="round">
-                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-                  <circle cx="12" cy="7" r="4"/>
-                </svg>
-              </span>
-            </div>
-          </div>
-
-          <div class="field">
-            <label class="label" for="password">Passwort</label>
-            <div class="control has-icons-left has-icons-right">
-              <input class="input" type="password" id="password" name="password"
-                     autocomplete="current-password" required>
-              <span class="icon is-small is-left">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
-                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                     stroke-linejoin="round">
-                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-                  <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-                </svg>
-              </span>
-              <span class="icon is-small is-right" style="pointer-events:all;cursor:pointer" onclick="togglePw('password',this)" title="Passwort anzeigen/verbergen" aria-label="Passwort anzeigen/verbergen">
-                <svg id="eye-login" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
-                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-                  <circle cx="12" cy="12" r="3"/>
-                </svg>
-              </span>
-            </div>
-          </div>
-
-          <div class="field mt-5">
-            <div class="control">
-              <button class="button is-dark is-fullwidth" type="submit">Anmelden</button>
-            </div>
-          </div>
-        </form>
+    <div class="field">
+      <label for="password">Passwort</label>
+      <div class="pw-wrap">
+        <input class="input" type="password" id="password" name="password"
+               autocomplete="current-password" required
+               style="border-radius:6px;padding-right:2.5rem">
+        <button type="button" class="pw-toggle" onclick="var i=document.getElementById('password');i.type=i.type==='password'?'text':'password'" aria-label="Passwort anzeigen">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+        </button>
       </div>
     </div>
-  </div>
+
+    <button class="btn-login" type="submit">Anmelden</button>
+  </form>
 </div>
-<script>
-function togglePw(fieldId, iconWrap) {
-  var inp = document.getElementById(fieldId);
-  if (!inp) return;
-  inp.type = (inp.type === 'password') ? 'text' : 'password';
-}
-</script>
 </body>
 </html>`
 
