mingzailao
/
silverbullet
mirror of https://github.com/silverbulletmd/silverbullet.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Auth: refresh visuals

pull/1219/merge
Miró Allard 2024-10-19 13:39:40 +02:00 committed by Zef Hemel
parent 9dbf6a760f
commit 49b8a0f7dc
1 changed files with 170 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
web/auth.html
View File

@ -1,140 +1,192 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<meta <meta charset="utf-8" />
name="viewport" <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
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>
<link rel="icon" type="image/x-icon" href="/favicon.png" /> <style>
<title>Login to SilverBullet</title> *,
<style> *::before,
html, *::after {
body { box-sizing: border-box;
font-family: }
-apple-system,
BlinkMacSystemFont, * {
"Segoe UI", padding: 0;
Roboto, margin: 0;
"Helvetica Neue", }
Arial,
"Noto Sans", html {
sans-serif, font-family:
"Apple Color Emoji", -apple-system,
"Segoe UI Emoji", BlinkMacSystemFont,
"Segoe UI Symbol", "Segoe UI",
"Noto Color Emoji"; Roboto,
border: 0; "Helvetica Neue",
margin: 0; Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
background-color: #fefefe;
--primary-button-color: #eee;
--primary-button-background-color: #464cfc;
--primary-button-hover-background-color: color-mix(in srgb,
var(--primary-button-background-color),
black 35%);
--primary-button-border-color: transparent;
--modal-border-color: #6c6c6c;
}
header {
position: absolute;
padding: 1rem;
font-size: 1.2rem;
}
footer {
text-align: center;
}
h1 {
font-size: 1.5rem;
font-weight: normal;
}
input {
font-family: inherit;
font-size: inherit;
padding: 0.5em;
}
form>div {
display: flex;
flex-direction: column;
flex-grow: 1;
}
button {
background: var(--primary-button-background-color);
color: var(--primary-button-color);
box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.05);
border: 1px solid var(--border-color);
padding: 0.7em;
border-radius: 0.5em;
&:hover {
background-color: var(--primary-button-hover-background-color);
} }
footer { &:focus {
margin-top: 10px; outline: 2px solid var(--primary-button-color);
outline-offset: -3px;
}
}
.error-message {
color: red;
}
.center {
height: 100vh;
display: grid;
place-items: center;
}
@media (min-width: 28em) {
html {
--top-color: #66A3BB;
--bottom-color: #0B3A69;
background: linear-gradient(var(--top-color), var(--bottom-color));
} }
header { .floating-island {
background-color: #e1e1e1; padding: 3em;
border-bottom: #cacaca 1px solid; border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 20px;
background-color: white;
border: var(--modal-border-color) 1px solid;
} }
}
}
h1 { .flow {
margin: 0; display: flex;
margin: 0 auto; flex-direction: column;
max-width: 800px; justify-content: flex-start;
padding: 8px; }
font-size: 28px;
font-weight: normal;
}
form { .flow>* {
max-width: 800px; margin-block: 0;
margin: 0 auto; }
padding: 10px;
}
input { .flow>*+* {
font-size: 18px; margin-block-start: var(--space, 1rem);
} }
</style>
</head>
form > div { <body>
margin-bottom: 5px; <div class="center">
} <div class="flow floating-island">
.error-message {
color: red;
}
</style>
</head>
<body>
<header>
<h1> <h1>
Login to <img src="/.client/logo.png" style="height: 1ch" /> Login to <img src="/.client/logo.png" style="height: 1ch" />
SilverBullet SilverBullet
</h1> </h1>
</header> <form action="/.auth" method="POST" id="login" class="flow">
<form action="/.auth" method="POST" id="login"> <div class="error-message"></div>
<div class="error-message"></div> <div>
<div> <label for="username">
<label for="username"> Username
Username </label>
</label> <input type="text" name="username" id="username" autocomplete="off" autocorrect="off" autocapitalize="off"
<input autofocus />
type="text" </div>
name="username" <div>
id="username" <label for="password">
autocomplete="off" Password
autocorrect="off" </label>
autocapitalize="off" <input type="password" name="password" id="password" />
autofocus </div>
/> <div style="--space: 1.8rem">
</div> <button>Login</button>
<div> </div>
<label for="password"> </form>
Password
</label>
<input
type="password"
name="password"
id="password"
/>
</div>
<div>
<input type="checkbox" name="rememberMe" id="rememberMe" />
<label for="rememberMe">Remember me</label>
</div>
<div>
<input type="submit" value="Login" />
</div>
<footer> <footer>
<a href="https://silverbullet.md">What is SilverBullet?</a> <a href="https://silverbullet.md">What is SilverBullet?</a>
</footer> </footer>
</form> </div>
</div>
<script> <script>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const error = params.get("error"); const error = params.get("error");
if (error === "0") { if (error === "0") {
document.querySelector(".error-message").innerText = document.querySelector(".error-message").innerText =
"The sent data was invalid"; "The sent data was invalid";
} else if (error === "1") { } else if (error === "1") {
document.querySelector(".error-message").innerText = document.querySelector(".error-message").innerText =
"Invalid username or password"; "Invalid username or password";
} else if (error === "2") { } else if (error === "2") {
document.querySelector(".error-message").innerText = document.querySelector(".error-message").innerText =
"Too many invalid logins. Try again later"; "Too many invalid logins. Try again later";
} }
const from = params.get("from"); const from = params.get("from");
if (from) { if (from) {
var input = document.createElement("input"); var input = document.createElement("input");
input.setAttribute("type", "hidden"); input.setAttribute("type", "hidden");
input.setAttribute("name", "from"); input.setAttribute("name", "from");
input.setAttribute("value", from); input.setAttribute("value", from);
document.getElementById("login").appendChild(input); document.getElementById("login").appendChild(input);
} }
</script> </script>
</body> </body>
</html>
</html>