jozamudi
7e6db5a41c
login.html/app.js now resolve fetch targets relative to the page's directory (BASE), so the app works served at / or under a path prefix (https://host/ani/) as long as the proxy strips the prefix.
52 lines
2.1 KiB
HTML
52 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ani-web — log in</title>
|
|
<style>
|
|
:root { --bg:#0e0f13; --card:#171821; --bd:#262833; --fg:#e8e9f0; --acc:#f97316; }
|
|
body { margin:0; height:100vh; display:grid; place-items:center; background:var(--bg);
|
|
color:var(--fg); font:15px/1.5 system-ui,sans-serif; }
|
|
form { background:var(--card); border:1px solid var(--bd); border-radius:10px;
|
|
padding:2rem; width:280px; }
|
|
h1 { font-size:1.1rem; margin:0 0 1rem; color:var(--acc); }
|
|
input { width:100%; box-sizing:border-box; padding:.55rem .8rem; border-radius:8px;
|
|
border:1px solid var(--bd); background:var(--bg); color:var(--fg); margin-bottom:.6rem; }
|
|
button { width:100%; margin-top:.4rem; padding:.55rem; border:0; border-radius:8px;
|
|
background:var(--acc); color:#000; font-weight:600; cursor:pointer; }
|
|
.err { color:#f87171; font-size:.85rem; margin:.6rem 0 0; min-height:1.2em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form onsubmit="return false">
|
|
<h1>ani-web</h1>
|
|
<input id="user" placeholder="username" autocomplete="username">
|
|
<input type="password" id="pw" placeholder="password" autocomplete="current-password">
|
|
<button id="go">log in</button>
|
|
<p class="err" id="err"></p>
|
|
</form>
|
|
<script>
|
|
// base = this page's directory, so the app works at / or behind a
|
|
// prefixing reverse proxy (e.g. https://host/ani/)
|
|
const BASE = (() => {
|
|
const p = location.pathname;
|
|
return p.endsWith("/") ? p : p.slice(0, p.lastIndexOf("/") + 1);
|
|
})();
|
|
const $ = id => document.getElementById(id);
|
|
const next = new URLSearchParams(location.search).get("next");
|
|
$("go").onclick = async () => {
|
|
$("err").textContent = "";
|
|
const r = await fetch(BASE + "login", {method: "POST",
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify({username: $("user").value, password: $("pw").value})});
|
|
if (r.ok) {
|
|
location.href = next ? BASE + next.replace(/^\/+/, "") : BASE;
|
|
} else {
|
|
$("err").textContent = (await r.json().catch(() => ({}))).detail || "login failed";
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|