silverbullet/web/auth.html

134 lines
2.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link rel="icon" type="image/x-icon" href="/favicon.png" />
<title>Login to SilverBullet</title>
<style>
html,
body {
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
border: 0;
margin: 0;
}
footer {
margin-top: 10px;
}
header {
background-color: #e1e1e1;
border-bottom: #cacaca 1px solid;
}
h1 {
margin: 0;
margin: 0 auto;
max-width: 800px;
padding: 8px;
font-size: 28px;
font-weight: normal;
}
form {
max-width: 800px;
margin: 0 auto;
padding: 10px;
}
input {
font-size: 18px;
}
form > div {
margin-bottom: 5px;
}
.error-message {
color: red;
}
</style>
</head>
<body>
<header>
<h1>
Login to <img src="/.client/logo.png" style="height: 1ch" />
SilverBullet
</h1>
</header>
<form action="/.auth" method="POST" id="login">
<div class="error-message"></div>
<div>
<input
type="text"
name="username"
id="username"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
autofocus
placeholder="Username"
/>
</div>
<div>
<input
type="password"
name="password"
id="password"
placeholder="Password"
/>
</div>
<div>
<input type="checkbox" name="rememberMe" id="rememberMe" />
<label>Remember me</label>
</div>
<div>
<input type="submit" value="Login" />
</div>
<footer>
<a href="https://silverbullet.md">What is SilverBullet?</a>
</footer>
</form>
<script>
const params = new URLSearchParams(window.location.search);
const error = params.get("error");
if (error === "0") {
document.querySelector(".error-message").innerText =
"The sent data was invalid";
} else if (error === "1") {
document.querySelector(".error-message").innerText =
"Invalid username or password";
}
const from = params.get("from");
if (from) {
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "from");
input.setAttribute("value", from);
document.getElementById("login").appendChild(input);
}
</script>
</body>
</html>