diff --git a/pygitweb/src/pygitweb/auth_test.py b/pygitweb/src/pygitweb/auth_test.py
index 7fc0e76..f0c0820 100644
--- a/pygitweb/src/pygitweb/auth_test.py
+++ b/pygitweb/src/pygitweb/auth_test.py
@@ -144,6 +144,27 @@ def test_users_me_with_bearer(client: TestClient, local_auth_config: AuthConfig)
assert r.json()["username"] == "admin"
+def test_login_page_is_a_centered_card(client: TestClient, local_auth_config: AuthConfig) -> None:
+ with patch.object(settings, "AUTH", True):
+ page = client.get("/login")
+ failed = client.post(
+ "/login",
+ data={"username": "admin", "password": "wrong", "next": "/"},
+ )
+ assert page.status_code == 200
+ assert 'class="page page-center"' in page.text
+ assert 'class="theme-dark-auto"' in page.text
+ assert 'height="120"' in page.text
+ assert "Login to your account" in page.text
+ assert 'class="btn btn-primary w-100"' in page.text
+ assert "navbar-vertical" not in page.text
+ assert "I forgot password" not in page.text
+ assert "Remember me" not in page.text
+ assert failed.status_code == 200
+ assert "Incorrect username or password." in failed.text
+ assert 'class="page page-center"' in failed.text
+
+
def test_login_form_sets_cookie_and_users_me(client: TestClient, local_auth_config: AuthConfig) -> None:
with patch.object(settings, "AUTH", True):
r = client.post(
diff --git a/pygitweb/src/pygitweb/static/login.js b/pygitweb/src/pygitweb/static/login.js
new file mode 100644
index 0000000..deae98e
--- /dev/null
+++ b/pygitweb/src/pygitweb/static/login.js
@@ -0,0 +1,19 @@
+(function () {
+ document.querySelectorAll("[data-password-toggle]").forEach(function (button) {
+ var id = button.getAttribute("data-password-toggle");
+ var input = id ? document.getElementById(id) : null;
+ if (!input) return;
+ var showIcon = button.querySelector(".icon-toggle-show");
+ var hideIcon = button.querySelector(".icon-toggle-hide");
+ button.addEventListener("click", function () {
+ var visible = input.type === "text";
+ input.type = visible ? "password" : "text";
+ var label = visible ? "Show password" : "Hide password";
+ button.setAttribute("aria-pressed", visible ? "false" : "true");
+ button.setAttribute("aria-label", label);
+ button.setAttribute("title", label);
+ if (showIcon) showIcon.classList.toggle("d-none", !visible);
+ if (hideIcon) hideIcon.classList.toggle("d-none", visible);
+ });
+ });
+})();
diff --git a/pygitweb/src/pygitweb/static/main.css b/pygitweb/src/pygitweb/static/main.css
index e329a74..c43cfb6 100644
--- a/pygitweb/src/pygitweb/static/main.css
+++ b/pygitweb/src/pygitweb/static/main.css
@@ -416,6 +416,116 @@ radio-picker {
}
}
+body:has(.page.page-center) {
+ border: 0;
+ background-color: var(--tblr-body-bg);
+ color: var(--tblr-body-color);
+ font-family: var(--tblr-font-sans-serif);
+ font-size: var(--tblr-body-font-size);
+ line-height: var(--tblr-body-line-height);
+}
+
+.page.page-center {
+ min-height: 100vh;
+
+ .navbar-brand-image {
+ height: 7.5rem;
+ width: auto;
+ }
+
+ h1,
+ h2,
+ h3 {
+ margin: 0;
+ color: inherit;
+ font-weight: var(--tblr-font-weight-bold);
+ }
+
+ p {
+ color: inherit;
+ }
+
+ a:not(.btn) {
+ color: var(--tblr-link-color, var(--tblr-primary));
+
+ &:hover,
+ &:visited {
+ color: var(--tblr-link-hover-color, var(--tblr-primary));
+ }
+ }
+
+ .card,
+ .card .card-body {
+ background-color: var(--tblr-bg-surface, var(--tblr-card-bg));
+ border-color: var(--tblr-border-color);
+ color: inherit;
+ }
+
+ .form-label {
+ color: var(--tblr-body-color);
+ }
+
+ .form-control {
+ background-color: var(--tblr-bg-forms);
+ border-color: var(--tblr-border-color);
+ color: var(--tblr-body-color);
+
+ &::placeholder {
+ color: var(--tblr-secondary);
+ }
+
+ &:focus {
+ background-color: var(--tblr-bg-forms);
+ border-color: var(--tblr-primary);
+ color: var(--tblr-body-color);
+ }
+ }
+
+ .form-footer {
+ border-top-color: transparent;
+ }
+
+ .btn-primary {
+ background-color: var(--tblr-primary);
+ border-color: var(--tblr-primary);
+ color: var(--tblr-light);
+
+ &:hover {
+ background-color: color-mix(in srgb, var(--tblr-primary) 88%, black);
+ border-color: color-mix(in srgb, var(--tblr-primary) 88%, black);
+ color: var(--tblr-light);
+ }
+ }
+
+ code {
+ background-color: var(--tblr-bg-surface-secondary, var(--tblr-gray-100));
+ border-color: var(--tblr-border-color);
+ color: inherit;
+ }
+
+ .link-secondary {
+ color: var(--tblr-secondary-text) !important;
+
+ &:hover,
+ &:focus {
+ color: var(--tblr-body-color) !important;
+ }
+ }
+
+ .hr-text {
+ color: var(--tblr-muted);
+
+ &::before,
+ &::after {
+ background-color: var(--tblr-border-color);
+ }
+ }
+
+ .text-secondary {
+ color: var(--tblr-secondary-text) !important;
+ }
+}
+
/* Fluid vertical layout: fixed sidebar + main content offset */
.page {
.navbar-vertical.position-fixed {
diff --git a/pygitweb/src/pygitweb/static_tests/test_login.py b/pygitweb/src/pygitweb/static_tests/test_login.py
new file mode 100644
index 0000000..0c4c412
--- /dev/null
+++ b/pygitweb/src/pygitweb/static_tests/test_login.py
@@ -0,0 +1,36 @@
+from __future__ import annotations
+
+from pygitweb.static_tests.js_runtime import JsPage
+
+_FORM = (
+ ''
+ '"
+)
+
+
+def test_password_toggle_reveals_and_hides(js: JsPage) -> None:
+ js.set_html(_FORM)
+ js.load("login.js")
+ js.click("[data-password-toggle]")
+ assert js.prop("#login_password", "type") == "text"
+ assert js.attr("[data-password-toggle]", "aria-pressed") == "true"
+ assert js.attr("[data-password-toggle]", "aria-label") == "Hide password"
+ assert "d-none" in js.classes(".icon-toggle-show")
+ assert "d-none" not in js.classes(".icon-toggle-hide")
+ js.click("[data-password-toggle]")
+ assert js.prop("#login_password", "type") == "password"
+ assert js.attr("[data-password-toggle]", "aria-pressed") == "false"
+ assert js.attr("[data-password-toggle]", "title") == "Show password"
+ assert "d-none" not in js.classes(".icon-toggle-show")
+ assert "d-none" in js.classes(".icon-toggle-hide")
+
+
+def test_password_toggle_ignores_a_missing_field(js: JsPage) -> None:
+ js.set_html('')
+ js.load("login.js")
+ js.click("[data-password-toggle]")
+ assert js.attr("[data-password-toggle]", "aria-pressed") is None
diff --git a/pygitweb/src/pygitweb/templates/base.html b/pygitweb/src/pygitweb/templates/base.html
index bf720fd..f902054 100644
--- a/pygitweb/src/pygitweb/templates/base.html
+++ b/pygitweb/src/pygitweb/templates/base.html
@@ -9,7 +9,8 @@
{% block head %}{% endblock %}
-
+
+{% block body %}
+{% endblock %}
{% block scripts %}{% endblock %}