{# Extends the base layout template #} {% extends "base.html" %} {# --- Page Title Block --- #} {% block title %}{{ super() }} - Login{% endblock %} {# --- Head Scripts Block --- #} {% block head_scripts %} {# Standard utils for showStatusMessage and sendServerActionRequest #} {# New auth.js for handleLoginAttempt #} {% endblock %} {# --- Main Content Block --- #} {% block content %} {# Wrapper for login form styling and centering (defined in forms.css) #}
{# 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 --- #}
{# Validation errors will be handled by auth.js and displayed, potentially in #status-message-area or #query-param-messages #}
{# --- Password Field --- #}
{# Validation errors will be handled by auth.js #}
{# --- Submit Button --- #} {# Use form-actions and login-actions classes for layout/styling #}
{# --- 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 #}
{# --- End .login-wrapper --- #} {% endblock %} {# --- Optional Body Scripts Block --- #} {% block body_scripts %} {% endblock %}