plainleaf/client/html/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="{{ host_prefix | safe }}/" />
        <link rel="icon" type="image/png" href=".client/favicon-96x96.png" sizes="96x96" />
        <link rel="icon" type="image/svg+xml" href=".client/favicon.svg" />
        <link rel="shortcut icon" href=".client/favicon.ico" />
        <title>Login to {{ space_name }}</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;
            }

            .password-field {
                display: flex;
                gap: 0.5rem;
                align-items: center;
            }

            .password-field input {
                flex: 1;
            }
        </style>
    </head>

    <body>
        <div class="center">
            <div class="flow floating-island">
                <h1>
                    Login to <img src=".client/logo.png" style="height: 1ch" />
                    {{ space_name }}
                </h1>
                <form 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>
                        <div class="password-field">
                            <input id="password" name="password" type="password" />
                            <button id="togglePassword" type="button">Show</button>
                        </div>
                    </div>
                    <div class="checkbox-wrapper">
                        <input
                            id="rememberMe"
                            name="rememberMe"
                            type="checkbox"
                        />
                        <label for="rememberMe">Remember me ({{ remember_me_days }} days)</label>
                    </div>
                    <div class="checkbox-wrapper">
                        <input
                            id="clientEncryption"
                            name="clientEncryption"
                            type="checkbox"
                        />
                        <label for="clientEncryption">Enable client encryption (e.g. when using a public computer)</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 workerURL = new URL("service_worker.js", document.baseURI);
console.log("Registering service worker");
navigator.serviceWorker.register(workerURL, {
  type: "module",
  scope: workerURL.pathname.substring(0, workerURL.pathname.lastIndexOf("/") + 1),
}).then(() => {
  console.log("Service worker registered");
});

const passwordInput = document.getElementById("password");
const togglePasswordButton = document.getElementById("togglePassword");

togglePasswordButton.addEventListener("click", () => {
  const showPassword = passwordInput.type === "password";
  passwordInput.type = showPassword ? "text" : "password";
  togglePasswordButton.textContent = showPassword ? "Hide" : "Show";
});

document.getElementById("login").addEventListener("submit", (e) => {
  const enableEncryption = document.getElementById('clientEncryption').checked;
  const params = new URLSearchParams();
  const rememberMe = document.getElementById('rememberMe').checked;
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  params.append('username', username);
  params.append('password', password);
  if (rememberMe) {
    params.append('rememberMe', 'true');
  }
  fetch('.auth', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    credentials:'include',
    body: params.toString(),
  })
  .then(async(response) => {
    const body = await response.json();
    if(body.status === "error") {
      document.querySelector(".error-message").innerText =
          body.error;
    } else {
      if(enableEncryption) {
        localStorage.setItem('enableEncryption', "true");
      } else {
        localStorage.removeItem('enableEncryption');
      }
      if(enableEncryption) {
        const salt = base64Decode("{{ encryption_salt }}");
        const key = await deriveKey(`${username}:${password}`, salt);
        // Encode password to ArrayBuffer
        if(navigator.serviceWorker?.controller) {
          navigator.serviceWorker.controller.postMessage({
            type: "set-encryption-key",
            key,
          });
        } else {
          alert("Something is not right, service worker not active");
          return;
        }
      }
      location.href = body.redirect;
    }
  })
  e.preventDefault();
});
const params = new URLSearchParams(window.location.search);
const from = params.get("from");
if(localStorage.getItem("enableEncryption")) {
  document.getElementById("clientEncryption").checked = true;
}
if (from) {
    var input = document.createElement("input");
    input.setAttribute("type", "hidden");
    input.setAttribute("name", "from");
    input.setAttribute("value", from);

    document.getElementById("login").appendChild(input);
}

async function deriveKey(phrase, salt) {
  // Encode password to ArrayBuffer
  const phraseBytes = new TextEncoder().encode(phrase);

  // Import password as a CryptoKey
  const baseKey = await crypto.subtle.importKey(
    "raw",
    phraseBytes,
    { name: "PBKDF2" },
    false,
    ["deriveBits", "deriveKey"],
  );

  // Derive CTR key
  const ctrKey = await crypto.subtle.deriveKey(
    {
      name: "PBKDF2",
      salt: salt,
      iterations: 100000,
      hash: "SHA-256",
    },
    baseKey,
    {
      name: "AES-CTR",
      length: 256,
    },
    true, // extractable
    ["encrypt", "decrypt"],
  );

  // Export
  const key = await crypto.subtle.exportKey("raw", ctrKey);
  // Base64 encode
  return base64Encode(new Uint8Array(key));
}

function base64Encode(buffer) {
  let binary = "";
  const len = buffer.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(buffer[i]);
  }
  return btoa(binary);
}

function base64Decode(s) {
  const binString = atob(s);
  const len = binString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binString.charCodeAt(i);
  }
  return bytes;
}
</script>
    </body>
</html>