Login/Register are primitive

[EthanCloin]

Summary

Current flow leaves the page and does a full refresh after credentials form is submitted. If user was not authorized, they see an ugly JSON on the route instead of any rendered HTML

Instead, I want the password input field to be returned as a fragment? with updated css showing non-acceptance.

Tasks

• [x] Research HTMX fragments/sections to see how a smart person would handle this
• [x] Login Page respect invalid password
• [x] Login Page respect invalid username
• [x] Register Page respect existing username
• [x] Register Page require a password
• [x] Disable login/register button if username or password field empty

[EthanCloin]

Research

HTMX Fragment Essay

Seems like the recommended strategy here is to have a Jinja 'block' that can be replaced by a call to a different route as in this example:

from fastapi import FastAPI
from fastapi.requests import Request
from jinja2_fragments.fastapi import Jinja2Blocks

app = FastAPI()

templates = Jinja2Blocks(directory="path/to/templates")

@app.get("/full_page")
async def full_page(request: Request):
    return templates.TemplateResponse(
        "page.html.jinja2",
        {"request": request, "magic_number": 42}
    )

@app.get("/only_content")
async def only_content(request: Request):
    return templates.TemplateResponse(
        "page.html.jinja2",
        {"request": request, "magic_number": 42},
        block_name="content"
    )

In my case, I can focus on just the Password input element. Whenever the form is submitted and determined to have invalid credentials, update the CSS on my Password input.

[EthanCloin]

I super overcomplicated that i don't need htmx at all, just using jinja conditionals i can change the css on my password input field

[EthanCloin]

i should've made a branch for these changes and squashed every commit and made a PR. but i didn't. sorry bout it