az/morz-infoboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): Login-Seite neu gestaltet

Browse source
This commit is contained in:
Alwin 2026-03-25 07:40:28 +00:00
parent e1506d5d2c
commit 10a495c13c
1 changed files with 41 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
server/backend/internal/httpapi/manage/templates.go
View file

@ -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>`