From 49b8a0f7dceaa5eeda33a405ad421a568ed932ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Allard?= <miro.allard@pm.me>
Date: Sat, 19 Oct 2024 13:39:40 +0200
Subject: [PATCH] Auth: refresh visuals

---
 web/auth.html | 288 +++++++++++++++++++++++++++++---------------------
 1 file changed, 170 insertions(+), 118 deletions(-)
diff --git a/web/auth.html b/web/auth.html
index 566100df..a98ced0c 100644
--- a/web/auth.html
+++ b/web/auth.html
@@ -1,140 +1,192 @@
 <!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;
+
+<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>
+    *,
+    *::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";
+      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 {
-        margin-top: 10px;
+      &:focus {
+        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 {
-        background-color: #e1e1e1;
-        border-bottom: #cacaca 1px solid;
+      .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;
       }
+    }
+    }
 
-      h1 {
-        margin: 0;
-        margin: 0 auto;
-        max-width: 800px;
-        padding: 8px;
-        font-size: 28px;
-        font-weight: normal;
-      }
+    .flow {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+    }
 
-      form {
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 10px;
-      }
+    .flow>* {
+      margin-block: 0;
+    }
 
-      input {
-        font-size: 18px;
-      }
+    .flow>*+* {
+      margin-block-start: var(--space, 1rem);
+    }
+  </style>
+</head>
 
-      form > div {
-        margin-bottom: 5px;
-      }
-
-      .error-message {
-        color: red;
-      }
-    </style>
-  </head>
-
-  <body>
-    <header>
+<body>
+  <div class="center">
+    <div class="flow floating-island">
       <h1>
         Login to <img src="/.client/logo.png" style="height: 1ch" />
         SilverBullet
       </h1>
-    </header>
-    <form action="/.auth" method="POST" id="login">
-      <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>
-        <input type="checkbox" name="rememberMe" id="rememberMe" />
-        <label for="rememberMe">Remember me</label>
-      </div>
-      <div>
-        <input type="submit" value="Login" />
-      </div>
+      <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 style="--space: 1.8rem">
+          <button>Login</button>
+        </div>
+      </form>
       <footer>
         <a href="https://silverbullet.md">What is SilverBullet?</a>
       </footer>
-    </form>
+    </div>
+  </div>
 
-    <script>
-      const params = new URLSearchParams(window.location.search);
+  <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 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);
+    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>
+      document.getElementById("login").appendChild(input);
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
