37 lines
2.1 KiB
HTML
37 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Traefik Hub — Login</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0d1117;color:#c9d1d9;display:flex;align-items:center;justify-content:center;min-height:100vh}
|
|
.login-card{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:40px;width:380px;box-shadow:0 8px 32px rgba(0,0,0,.4)}
|
|
h1{font-size:24px;margin-bottom:8px;color:#58a6ff;display:flex;align-items:center;gap:10px}
|
|
h1 svg{width:28px;height:28px}
|
|
p.sub{color:#8b949e;font-size:13px;margin-bottom:24px}
|
|
label{display:block;font-size:13px;color:#8b949e;margin-bottom:4px}
|
|
input{width:100%;padding:10px 12px;background:#0d1117;border:1px solid #30363d;border-radius:6px;color:#c9d1d9;font-size:14px;margin-bottom:16px;outline:none}
|
|
input:focus{border-color:#58a6ff}
|
|
button{width:100%;padding:12px;background:#238636;border:none;border-radius:6px;color:#fff;font-size:14px;font-weight:600;cursor:pointer}
|
|
button:hover{background:#2ea043}
|
|
.error{color:#f85149;font-size:13px;margin-bottom:12px;display:none}
|
|
</style></head><body>
|
|
<div class="login-card">
|
|
<h1><svg viewBox="0 0 24 24" fill="none" stroke="#58a6ff" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> Traefik Hub</h1>
|
|
<p class="sub">Infrastructure Management Dashboard</p>
|
|
<div class="error" id="err">Invalid credentials</div>
|
|
<label>Username</label>
|
|
<input id="user" type="text" autofocus>
|
|
<label>Password</label>
|
|
<input id="pass" type="password">
|
|
<button onclick="login()">Sign In</button>
|
|
</div>
|
|
<script>
|
|
async function login(){
|
|
const r=await fetch("/api/login",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({user:document.getElementById("user").value,pass:document.getElementById("pass").value})});
|
|
if(r.ok){location.reload()}else{document.getElementById("err").style.display="block"}
|
|
}
|
|
document.getElementById("pass").addEventListener("keydown",e=>{if(e.key==="Enter")login()});
|
|
</script>
|
|
</body></html>
|