Making login screen a bit clearer

app/static/css/style.css

@@ -607,6 +607,44 @@ textarea:focus {
   margin-bottom: 0.75rem;
 }
 
+.local-login-panel {
+  margin-top: 1.25rem;
+  border-top: 1px solid var(--border);
+  padding-top: 1rem;
+}
+
+.local-login-panel summary {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 0.875rem;
+  user-select: none;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.local-login-panel summary::-webkit-details-marker { display: none; }
+
+.local-login-panel summary::before {
+  content: '›';
+  font-size: 1.1em;
+  transition: transform 0.15s;
+  display: inline-block;
+}
+
+.local-login-panel[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.local-login-panel summary:hover {
+  color: var(--text);
+}
+
+.local-login-panel form {
+  margin-top: 1rem;
+}
+
 /* ─── Light theme ────────────────────────────────────────────────────────── */
 @media (prefers-color-scheme: light) {
   :root {

app/templates/login.html

@@ -2,31 +2,51 @@
 {% block title %}Sign in · {{ app_name }}{% endblock %}
 {% block body %}
 <div class="auth-shell">
-  <form class="card auth-card" method="post" action="/login">
+  <div class="card auth-card">
     <h1>{{ app_name }}</h1>
     <p class="muted">Sign in to continue</p>
-    {% if error %}<div class="alert">{{ error }}</div>{% endif %}
-    <label>Email
-      <input type="email" name="email" value="{{ email or '' }}" required autofocus>
-    </label>
-    <label>Password
-      <input type="password" name="password" required>
-    </label>
-    <button type="submit" class="btn btn-primary">Sign in</button>
-  </form>
 
-  {% if ldap_enabled %}
-  <form class="card auth-card" method="post" action="/login/ldap">
-    <h2>Sign in with LDAP</h2>
-    <p class="muted">Use your directory username and password</p>
-    <label>Username
-      <input type="text" name="username" value="{{ username or '' }}" required>
-    </label>
-    <label>Password
-      <input type="password" name="password" required>
-    </label>
-    <button type="submit" class="btn btn-primary">Sign in with LDAP</button>
-  </form>
-  {% endif %}
+    {% if ldap_enabled %}
+
+      <form method="post" action="/login/ldap">
+        {% if ldap_error %}<div class="alert">{{ ldap_error }}</div>{% endif %}
+        <label>Username
+          <input type="text" name="username" value="{{ username or '' }}" required autofocus>
+        </label>
+        <label>Password
+          <input type="password" name="password" required>
+        </label>
+        <button type="submit" class="btn btn-primary">Sign in</button>
+      </form>
+
+      <details class="local-login-panel" {% if local_error %}open{% endif %}>
+        <summary>Use a local account instead</summary>
+        <form method="post" action="/login">
+          {% if local_error %}<div class="alert">{{ local_error }}</div>{% endif %}
+          <label>Email
+            <input type="email" name="email" value="{{ email or '' }}" required>
+          </label>
+          <label>Password
+            <input type="password" name="password" required>
+          </label>
+          <button type="submit" class="btn btn-primary">Sign in with local account</button>
+        </form>
+      </details>
+
+    {% else %}
+
+      <form method="post" action="/login">
+        {% if local_error %}<div class="alert">{{ local_error }}</div>{% endif %}
+        <label>Email
+          <input type="email" name="email" value="{{ email or '' }}" required autofocus>
+        </label>
+        <label>Password
+          <input type="password" name="password" required>
+        </label>
+        <button type="submit" class="btn btn-primary">Sign in</button>
+      </form>
+
+    {% endif %}
+  </div>
 </div>
 {% endblock %}

app/web/pages.py

@@ -50,12 +50,11 @@ async def login_submit(
 ):
     user = await user_crud.authenticate(db, email, password)
     if user is None:
-        # Re-render the form with an error (HTMX swaps the form partial).
         return templates.TemplateResponse(
             request,
             "login.html",
             {
-                "error": "Incorrect email or password",
+                "local_error": "Incorrect email or password",
                 "email": email,
                 "ldap_enabled": settings.ldap_enabled,
             },
@@ -82,7 +81,7 @@ async def login_ldap_submit(
             request,
             "login.html",
             {
-                "error": "LDAP sign-in failed",
+                "ldap_error": "Incorrect username or password",
                 "username": username,
                 "ldap_enabled": True,
             },