Initial commit

Assisted-by: GLM 5.3

internal/web/templates/login.html

@@ -0,0 +1,76 @@
+{{define "title"}}{{ tr "Sign in" }} · {{ tr "Volumen admin" }}{{end}}
+{{define "login_content"}}
+  <div class="login__card">
+    <h1 class="login__title">{{ tr "Sign in" }}</h1>
+    <p class="login__pitch">{{ tr "Welcome back. Sign in to manage your posts." }}</p>
+
+    {{if .Error}}
+      <div class="status status--error" role="alert"
+           {{if .RetryAfter}}id="login-lockout"{{end}}>
+        <svg aria-hidden="true"><use href="/admin/assets/graphis.svg#alert-circle"></use></svg>
+        <div>
+          <span class="lockout-msg">{{ .Error }}</span>
+          {{if .RetryAfter}}<span class="lockout-count" id="lockout-countdown" data-seconds="{{ .RetryAfter }}"></span>{{end}}
+        </div>
+      </div>
+    {{end}}
+
+    <form method="post" action="/admin/login" class="stack">
+      <input type="hidden" name="_csrf" value="{{ .CSRFToken }}">
+      <div class="field">
+        <label class="field__label" for="username">{{ tr "Username" }}</label>
+        <input id="username" class="control" type="text" name="username"
+               autocomplete="username" required autofocus>
+      </div>
+      <div class="field">
+        <label class="field__label" for="password">{{ tr "Password" }}</label>
+        <div class="pw">
+          <input id="password" class="control" type="password" name="password"
+                 autocomplete="current-password" required>
+          <button type="button" class="pw__toggle" id="pw-toggle" aria-label="{{ tr "Show password" }}">
+            <svg aria-hidden="true"><use href="/admin/assets/graphis.svg#eye"></use></svg>
+          </button>
+        </div>
+      </div>
+      <button type="submit" class="btn btn--primary login__submit">
+        {{ tr "Sign in" }}
+        <svg aria-hidden="true"><use href="/admin/assets/graphis.svg#arrow-right"></use></svg>
+      </button>
+    </form>
+  </div>
+
+  <script nonce="{{ .CSPNonce }}">
+    (() => {
+      const btn = document.getElementById("pw-toggle");
+      const input = document.getElementById("password");
+      btn.addEventListener("click", () => {
+        const show = input.type === "password";
+        input.type = show ? "text" : "password";
+        btn.setAttribute("aria-label", window.__(show ? "Hide password" : "Show password"));
+      });
+
+      /* The lockout counts down to the minute, and the form waits with
+         it: an honest disabled state, not a submit that fails. */
+      const countdown = document.getElementById("lockout-countdown");
+      if (!countdown) return;
+      let seconds = Number.parseInt(countdown.dataset.seconds || "0", 10);
+      const form = document.querySelector("form[action='/admin/login']");
+      if (form) {
+        form.querySelectorAll("input, button").forEach((el) => { el.disabled = true; });
+      }
+      const tick = () => {
+        if (seconds <= 0) {
+          countdown.textContent = window.__("login.retry");
+          if (form) {
+            form.querySelectorAll("input, button").forEach((el) => { el.disabled = false; });
+          }
+          return;
+        }
+        countdown.textContent = window.__("login.unlock").replace("{}", String(seconds));
+        seconds -= 1;
+        setTimeout(tick, 1000);
+      };
+      tick();
+    })();
+  </script>
+{{end}}