1
0
silverbullet/web/auth.html
2023-12-11 12:11:56 +01:00

122 lines
3.1 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">
<input type="hidden" name="csrf" value="" />
<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="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 === "1") {
document.querySelector('.error-message').innerText = "Invalid username or password";
} else if (error === "2") {
document.querySelector('.error-message').innerText = "Invalid CSRF token";
}
// Generate CSRF token
const csrf = generateCSRFToken();
// Inject CSRF token in form
document.querySelector('input[name="csrf"]').value = csrf;
function generateRandomString(length) {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
function generateCSRFToken() {
// Generate random strings
const randomPart1 = generateRandomString(16);
const randomPart2 = generateRandomString(16);
// Create a timestamp for uniqueness
const timestamp = new Date().getTime();
// Combine random strings and timestamp
const csrfToken = randomPart1 + timestamp + randomPart2;
// Set cookie
document.cookie = `csrf_token=${csrfToken}; SameSite=Lax; Secure`;
return csrfToken;
}
</script>
</body>
</html>