feat(ui): Login-Seite neu gestaltet
This commit is contained in:
Alwin
parent
e1506d5d2c
commit
10a495c13c
1 changed files with 41 additions and 79 deletions
|
|
@ -1,100 +1,62 @@
|
||||||
package manage
|
package manage
|
||||||
|
|
||||||
const loginTmpl = `<!DOCTYPE html>
|
const loginTmpl = `<!DOCTYPE html>
|
||||||
<html lang="de" data-theme="light">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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">
|
<link rel="stylesheet" href="/static/bulma.min.css">
|
||||||
<style>
|
<style>
|
||||||
body { background: #f5f5f5; min-height: 100vh; display: flex; flex-direction: column; }
|
: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; }
|
||||||
.login-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar is-dark">
|
<div class="login-card">
|
||||||
<div class="navbar-brand">
|
<div class="login-title"><span class="accent">MORZ</span> Infoboard</div>
|
||||||
<span class="navbar-item"><strong>morz infoboard</strong></span>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<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}}
|
{{if .Error}}
|
||||||
<div class="notification is-danger is-light" role="alert">
|
<div class="error-banner" role="alert">{{.Error}}</div>
|
||||||
<button class="delete" onclick="this.parentElement.remove()"></button>
|
|
||||||
{{.Error}}
|
|
||||||
</div>
|
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
<form method="POST" action="/login">
|
<form method="POST" action="/login">
|
||||||
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
||||||
{{if .Next}}
|
{{if .Next}}<input type="hidden" name="next" value="{{.Next}}">{{end}}
|
||||||
<input type="hidden" name="next" value="{{.Next}}">
|
|
||||||
{{end}}
|
|
||||||
|
|
||||||
<div class="field">
|
<div class="field" style="margin-bottom:1rem">
|
||||||
<label class="label" for="username">Benutzername</label>
|
<label for="username">Benutzername</label>
|
||||||
<div class="control has-icons-left">
|
|
||||||
<input class="input" type="text" id="username" name="username"
|
<input class="input" type="text" id="username" name="username"
|
||||||
autocomplete="username" autofocus required>
|
autocomplete="username" autofocus required
|
||||||
<span class="icon is-small is-left">
|
style="border-radius:6px">
|
||||||
<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>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label" for="password">Passwort</label>
|
<label for="password">Passwort</label>
|
||||||
<div class="control has-icons-left has-icons-right">
|
<div class="pw-wrap">
|
||||||
<input class="input" type="password" id="password" name="password"
|
<input class="input" type="password" id="password" name="password"
|
||||||
autocomplete="current-password" required>
|
autocomplete="current-password" required
|
||||||
<span class="icon is-small is-left">
|
style="border-radius:6px;padding-right:2.5rem">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
<button type="button" class="pw-toggle" onclick="var i=document.getElementById('password');i.type=i.type==='password'?'text':'password'" aria-label="Passwort anzeigen">
|
||||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
<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>
|
||||||
stroke-linejoin="round">
|
</button>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<div class="field mt-5">
|
<button class="btn-login" type="submit">Anmelden</button>
|
||||||
<div class="control">
|
|
||||||
<button class="button is-dark is-fullwidth" type="submit">Anmelden</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<script>
|
|
||||||
function togglePw(fieldId, iconWrap) {
|
|
||||||
var inp = document.getElementById(fieldId);
|
|
||||||
if (!inp) return;
|
|
||||||
inp.type = (inp.type === 'password') ? 'text' : 'password';
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>`
|
</html>`
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue