<!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"> <input type="hidden" name="refer" 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 refer = params.get('refer'); if (refer) { document.querySelector('input[name="refer"]').value = refer; } if (params.get('error')) { document.querySelector('.error-message').innerText = "Invalid username or password"; } </script> </body> </html>