plainleaf/client/auth.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta
            content="width=device-width, initial-scale=1, maximum-scale=1"
            name="viewport"
        />
        <base href="{{.HostPrefix}}/" />
        <link href="favicon.png" rel="icon" type="image/x-icon" />
        <title>Login to {{.SpaceName}}</title>
        <style>
            *,
            *::before,
            *::after {
                box-sizing: border-box;
            }

            * {
                padding: 0;
                margin: 0;
            }

            html {
                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";
                --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;
                --top-color: #66a3bb;
                --bottom-color: #0b3a69;
                background: linear-gradient(
                    var(--top-color),
                    var(--bottom-color)
                );
            }

            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
                    );
                }

                &:focus {
                    outline: 2px solid var(--primary-button-color);
                    outline-offset: -3px;
                }
            }

            .floating-island {
                padding: 3em;
                border-radius: 8px;
                box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 20px;
                background-color: white;
                border: var(--modal-border-color) 1px solid;
            }

            .error-message {
                color: red;
            }

            .center {
                height: 100vh;
                display: grid;
                place-items: center;
            }

            .flow {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }

            .flow > * {
                margin-block: 0;
            }

            .flow > * + * {
                margin-block-start: var(--space, 1rem);
            }

            /* Add styles for checkbox alignment */
            .checkbox-wrapper {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                flex-direction: row;
            }

            .checkbox-wrapper input[type="checkbox"] {
                margin: 0;
            }
        </style>
    </head>

    <body>
        <div class="center">
            <div class="flow floating-island">
                <h1>
                    Login to <img src=".client/logo.png" style="height: 1ch" />
                    {{.SpaceName}}
                </h1>
                <form action=".auth" class="flow" id="login" method="POST">
                    <div class="error-message"></div>
                    <div>
                        <label for="username">Username</label>
                        <input
                            autocapitalize="off"
                            autocomplete="off"
                            autocorrect="off"
                            autofocus
                            id="username"
                            name="username"
                            type="text"
                        />
                    </div>
                    <div>
                        <label for="password">Password</label>
                        <input id="password" name="password" type="password" />
                    </div>
                    <div class="checkbox-wrapper">
                        <input
                            id="rememberMe"
                            name="rememberMe"
                            type="checkbox"
                        />
                        <label for="rememberMe">Remember me</label>
                    </div>
                    <div style="--space: 1.8rem">
                        <button>Login</button>
                    </div>
                </form>
                <footer>
                    <a href="https://silverbullet.md">What is SilverBullet?</a>
                </footer>
            </div>
        </div>

        <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";
            } else if (error === "2") {
                document.querySelector(".error-message").innerText =
                    "Too many invalid logins. Try again later";
            }

            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>