{# Page Heading (Optional, header in base.html might suffice) #}

Login

{# Flash messages area (Included from base.html - displays above this block) #} {# Server-side flash messages (e.g., 'Invalid credentials') appear here via query params #} {# Login Form #} {# Form submission is handled by js/auth.js -> handleLoginAttempt #} {# The action attribute can be set to the FastAPI token endpoint as a fallback or for clarity #}

{# --- Username Field --- #}

Username {# Validation errors will be handled by auth.js and displayed, potentially in #status-message-area or #query-param-messages #}

{# --- Password Field --- #}

Password {# Validation errors will be handled by auth.js #}

{# --- Submit Button --- #} {# Use form-actions and login-actions classes for layout/styling #}

Log In

{# --- End Login Form --- #} {# A dedicated area for login errors, targeted by auth.js #} {# This is different from the general #query-param-messages in base.html #}