Prepare the forms for htmx

.github/workflows/tests.yaml

@@ -172,6 +172,7 @@ jobs:
           curl -fsSL --retry 30 --retry-delay 1 --retry-connrefused -o /dev/null http://localhost:4000/en/
           curl -fsSL -o /dev/null http://localhost:4000/fr/
           curl -fsSL -o /dev/null http://localhost:4000/static/vendor/blades/pico.min.css
+          curl -fsSL -o /dev/null http://localhost:4000/static/vendor/htmx/htmx.min.js
 
   docker:
     name: docker build
@@ -204,7 +205,7 @@ jobs:
             exit 1
           }
 
-          for path in / /fr/ /static/vendor/blades/pico.min.css; do
+          for path in / /fr/ /static/vendor/blades/pico.min.css /static/vendor/htmx/htmx.min.js; do
             curl -fsSL -o /dev/null "http://localhost:4000$path" || {
               echo "App failed to respond on $path"
               docker logs test-app

package.json

@@ -2,9 +2,10 @@
   "name": "auth-playground",
   "private": true,
   "scripts": {
-    "vendor": "rm -rf src/auth_playground/static/vendor && mkdir -p src/auth_playground/static/vendor/blades && cp node_modules/@anyblades/blades/css/pico.min.css src/auth_playground/static/vendor/blades/"
+    "vendor": "rm -rf src/auth_playground/static/vendor && mkdir -p src/auth_playground/static/vendor/blades src/auth_playground/static/vendor/htmx && cp node_modules/@anyblades/blades/css/pico.min.css src/auth_playground/static/vendor/blades/ && cp node_modules/htmx.org/dist/htmx.min.js src/auth_playground/static/vendor/htmx/"
   },
   "dependencies": {
-    "@anyblades/blades": "3.1.1"
+    "@anyblades/blades": "3.1.1",
+    "htmx.org": "4.0.1"
   }
 }

pyproject.toml

@@ -21,6 +21,7 @@ dependencies = [
     "flask-babel>=4.0.0",
     "flask-session>=0.8.0",
     "flask-wtf>=1.2.1",
+    "flask-wtforms-htmx>=0.1.0",
     "python-dotenv>=1.0.0",
     "requests>=2.32.5",
     "wtforms>=3.3",

src/auth_playground/forms.py

@@ -6,7 +6,7 @@
 from flask import current_app
 from flask import g
 from flask_babel import lazy_gettext as _
-from flask_wtf import FlaskForm
+from flask_wtforms_htmx import HtmxFlaskForm
 from markupsafe import Markup
 from wtforms import ButtonField
 from wtforms import HiddenField
@@ -19,7 +19,6 @@
 from wtforms import TextAreaField
 from wtforms import ValidationError
 from wtforms.csrf.core import CSRFTokenField
-from wtforms.fields.choices import SelectFieldBase
 from wtforms.meta import clean_key
 from wtforms.validators import DataRequired
 from wtforms.validators import Length
@@ -33,21 +32,21 @@
     CSRFTokenField,
     SubmitField,
     ButtonField,
-    SelectFieldBase._Option,
 )
 
 
-class BaseForm(FlaskForm):
+class BaseForm(HtmxFlaskForm):
     """Form whose fields are rendered through the _field.html template.
 
-    Hidden fields, buttons and choice options are rendered bare. A field can declare
+    Hidden fields and buttons are rendered bare. A field can declare
     ``render_kw={"group_with": "<button name>"}`` to render that button
     next to its input.
     """
 
     class Meta:
-        def render_field(self, field, render_kw):
-            render_kw = {**(field.render_kw or {}), **render_kw}
+        htmx_inline_validation = False
+
+        def field_wrapper(self, field, render_kw):
             group_with = render_kw.pop("group_with", None)
             render_kw = {clean_key(key): value for key, value in render_kw.items()}
             if isinstance(field, BARE_FIELDS):

src/auth_playground/templates/layout.html

@@ -7,6 +7,7 @@
         <title>{% block title %}{{ config.NAME }}{% endblock %} - Auth Playground</title>
         <link rel="stylesheet" href="{{ url_for('static', filename='vendor/blades/pico.min.css') }}">
         <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
+        <script src="{{ url_for('static', filename='vendor/htmx/htmx.min.js') }}" defer></script>
         {% block extra_css %}{% endblock %}
     </head>