plainleaf/web/auth.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <base href="{{HOST_URL_PREFIX}}/" />
  <link rel="icon" type="image/x-icon" href="favicon.png" />
  <title>Login to SilverBullet</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" />
        SilverBullet
      </h1>
      <form action=".auth" method="POST" id="login" class="flow">
        <div class="error-message"></div>
        <div>
          <label for="username">
            Username
          </label>
          <input type="text" name="username" id="username" autocomplete="off" autocorrect="off" autocapitalize="off"
            autofocus />
        </div>
        <div>
          <label for="password">
            Password
          </label>
          <input type="password" name="password" id="password" />
        </div>
        <div class="checkbox-wrapper">
          <input type="checkbox" name="rememberMe" id="rememberMe" />
          <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);
    }

    // Fetch the app name from the manifest file
    fetch('.client/manifest.json')
      .then(response => {
        if (!response.ok) {
          throw new Error('Failed to load manifest');
        }
        return response.json();
      })
      .then(manifest => {
        const appName = manifest.name || 'SilverBullet';
        // Update the title
        document.title = `Login to ${appName}`;
        // Update the header text
        const header = document.querySelector('h1');
        if (header) {
          header.innerHTML = `Login to <img src=".client/logo.png" style="height: 1ch" /> ${appName}`;
        }
      })
      .catch(error => {
        console.error('Error fetching manifest:', error);
      });
  </script>
</body>

</html>