feat: improved layout, removed htmx-boost for simplicity

templates/_partials/_loading_indicator.html.twig

@@ -0,0 +1,4 @@
+<div class="invisible fixed top-0 left-0 inset-0 z-10 bg-white/90 flex items-center justify-center"
+        {{ stimulus_target('loading', 'indicator') }}>
+    {% include '_partials/_spinner.html.twig' with { 'class': 'w-8 h-8'} %}
+</div>

templates/booking/edit.html.twig

@@ -232,11 +232,11 @@
     </div>
     <div class="flex justify-between">
         <a href="{{ path('app_bookings') }}"
-           class="button bg-button">
+           class="button bg-button" {{ stimulus_action('loading', 'toggle') }}>
             zurück
         </a>
         <button type="submit"
-                class="button bg-button bg-button--secondary">
+                class="button bg-button bg-button--secondary" {{ stimulus_action('loading', 'toggle') }}>
             Aktualisieren
         </button>
     </div>

templates/booking/index.html.twig

@@ -64,16 +64,19 @@
                     <div class="flex md:flex-col space-x-2 md:space-x-0 md:space-y-1">
                         {% if booking.editable %}
                             <a href="{{ path('app_booking_edit', { 'id': booking.id }) }}"
+                               {{ stimulus_action('loading', 'toggle') }}
                                class="button bg-button bg-button--secondary button--small">
                                 bearbeiten
                             </a>
                         {% endif %}
                         <a href="{{ path('app_booking_confirmation', { 'id': booking.id }) }}"
-                           class="button bg-button button--small">
+                           class="button bg-button button--small"
+                           target="_blank" {{ stimulus_action('loading', 'toggle') }}>
                             Bestätigung
                         </a>
                         <a href="{{ path('app_booking_documents', { 'id': booking.id }) }}"
-                           class="button bg-button button--small">
+                           class="button bg-button button--small"
+                           target="_blank" {{ stimulus_action('loading', 'toggle') }}>
                             Reisedokumente
                         </a>
                     </div>

templates/index/index.html.twig

@@ -1,7 +0,0 @@
-{% extends 'base.html.twig' %}
-
-{% block body %}
-    <div hx-get="{{ path('app_login') }}"
-         hx-trigger="load"
-         hx-swap="outerHTML"></div>
-{% endblock %}

templates/layout.html.twig

@@ -1,23 +1,19 @@
-<div class="my-16"
-     id="myep"
-     hx-boost="true"
-     hx-indicator="#loading-indicator">
-    <div class="fixed inset-x-0 top-0 z-20 flex items-center justify-between pb-4">
-        {% if is_granted('ROLE_USER') %}
-            <nav class="w-full bg-zinc-200 flex items-center mb-8 relative">
-                <div class="flex-1 block text-2xl px-4">My E&amp;P</div>
-                <div class="bg-zinc-200">
-                    {{ knp_menu_render(knp_menu_get('main')) }}
-                </div>
-            </nav>
-        {% endif %}
-    </div>
-    <div id="content">
+{% extends 'base.html.twig' %}
+
+{% block body %}
+    <div class="{{ html_classes('pb-8', { 'pt-16': is_granted('ROLE_USER') }) }}" {{ stimulus_controller('loading', [], { 'hidden': 'invisible' }) }}>
+        <div class="fixed inset-x-0 top-0 z-20 flex items-center justify-between pb-4">
+            {% if is_granted('ROLE_USER') %}
+                <nav class="w-full bg-zinc-200 flex items-center mb-8 relative">
+                    <div class="flex-1 block text-2xl px-4">My E&amp;P</div>
+                    <div class="bg-zinc-200">
+                        {{ knp_menu_render(knp_menu_get('main')) }}
+                    </div>
+                </nav>
+            {% endif %}
+        </div>
         {% block content %}{% endblock %}
+        {% include '_partials/_flashes.html.twig' %}
+        {% include '_partials/_loading_indicator.html.twig' %}
     </div>
-    <div class="htmx-indicator fixed top-0 left-0 inset-0 z-10 bg-white/90 flex items-center justify-center"
-         id="loading-indicator">
-        {% include '_partials/_spinner.html.twig' with { 'class': 'w-8 h-8'} %}
-    </div>
-    {% include '_partials/_flashes.html.twig' %}
-</div>
+{% endblock %}

templates/personal_data/index.html.twig

@@ -6,7 +6,7 @@
             <h2 class="text-2xl font-semibold pb-4">
                 Persönliche Daten
             </h2>
-            {{ form_start(personalDataForm) }}
+            {{ form_start(personalDataForm, { 'attr': { 'data-action': 'loading#toggle' } }) }}
             <div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
                 {{ form_row(personalDataForm.firstName) }}
                 {{ form_row(personalDataForm.name) }}
@@ -41,7 +41,7 @@
             {{ form_end(personalDataForm) }}
         </div>
         <div>
-            <div>
+            <div id="newsletter">
                 <h2 class="text-2xl font-semibold pb-4">
                     Newsletter
                 </h2>
@@ -50,15 +50,14 @@
                     angemeldet.
                 </p>
                 <button type="button"
-                        class="button bg-button bg-button--secondary"
+                        class="relative button bg-button bg-button--secondary"
                         hx-post="{{ path('app_personal_data_newsletter') }}"
-                        hx-target="#myep"
-                        hx-swap="outerHTML">
-                    {% if personalData.communication.newsletter %}
-                        jetzt abmelden
-                    {% else %}
-                        jetzt anmelden
-                    {% endif %}
+                        hx-target="#newsletter"
+                        hx-select="#newsletter"
+                        hx-indicator="#button-indicator"
+                        hx-swap="innerHTML">
+                    {% if personalData.communication.newsletter %}jetzt abmelden{% else %}jetzt anmelden{% endif %}
+                    <span class="htmx-indicator absolute top-0 left-0 inset-0 bg-secondary/80 flex items-center justify-center" id="button-indicator">{% include '_partials/_spinner.html.twig' with { 'class': 'w-6 h-6 text-white' } %}</span>
                 </button>
             </div>
         </div>

templates/registration/index.html.twig

@@ -4,24 +4,23 @@
     <h1 class="mb-4">
         Registrierung MyE&amp;P
     </h1>
-    {{ form_start(form) }}
+    {{ form_start(form, { 'attr': { 'data-action': 'loading#toggle' } }) }}
     <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 mb-4">
-        {{ form_row(form.firstName) }}
-        {{ form_row(form.name) }}
-        {{ form_row(form.email) }}
-        {{ form_row(form.gender) }}
+        <div>
+            {{ form_row(form.firstName) }}
+            {{ form_row(form.name) }}
+            {{ form_row(form.email) }}
+            {{ form_row(form.gender) }}
+        </div>
     </div>
     <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2">
         <button type="submit" class="button bg-button">
             registrieren
         </button>
-        <button type="button"
-                hx-get="{{ path('app_login') }}"
-                hx-target="#myep"
-                hx-swap="outerHTML"
-                class="button bg-button bg-button--secondary">
+        <a href="{{ path('app_login') }}"
+           class="button bg-button bg-button--secondary">
             zum Login
-        </button>
+        </a>
     </div>
     {{ form_rest(form) }}
     {{ form_end(form) }}

templates/reset_password/index.html.twig

@@ -1,24 +1,26 @@
-{{ form_start(form) }}
-{{ form_row(form.email) }}
-<div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 mt-4">
-    <button type="submit" class="button bg-button bg-button--secondary">
-        Passwort erneuern
-    </button>
-    <button type="button"
-            hx-get="{{ path('app_login') }}"
-            hx-target="#login-form"
-            hx-select="#login-form"
-            hx-swap="outerHTML"
-            class="button bg-button">
-        zum Login
-    </button>
-    <button type="button"
-            hx-get="{{ path('app_registration') }}"
-            hx-target="#myep"
-            hx-swap="outerHTML"
-            class="button bg-button">
-        registrieren
-    </button>
-</div>
-{{ form_rest(form) }}
-{{ form_end(form) }}
+{% extends 'layout.html.twig' %}
+
+{% block content %}
+    <h1 class="mb-4">
+        Passwort vergessen
+    </h1>
+    {{ form_start(form, { 'attr': { 'data-action': 'loading#toggle' } }) }}
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 mb-4">
+        {{ form_row(form.email) }}
+    </div>
+    <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 mt-4">
+        <button type="submit" class="button bg-button">
+            Passwort erneuern
+        </button>
+        <a href="{{ path('app_login') }}"
+           class="button bg-button bg-button--secondary">
+            zum Login
+        </a>
+        <a href="{{ path('app_registration') }}"
+           class="button bg-button bg-button--secondary">
+            registrieren
+        </a>
+    </div>
+    {{ form_rest(form) }}
+    {{ form_end(form) }}
+{% endblock %}

templates/security/login.html.twig

@@ -14,7 +14,7 @@
                     <span class="flex-1 text-sm">{{ error.messageKey|trans(error.messageData, 'security') }}</span>
                 </div>
             {% endif %}
-            <form action="{{ path('app_login') }}" method="post">
+            <form action="{{ path('app_login') }}" method="post" {{ stimulus_action('loading', 'toggle') }}>
                 <div class="mb-4">
                     <label for="username" class="mb-1 font-semibold">
                         E-Mail:
@@ -52,19 +52,14 @@
                     <button type="submit" class="button bg-button">
                         Login
                     </button>
-                    <button type="button"
-                            hx-get="{{ path('app_reset_password') }}"
-                            hx-target="#login-form"
-                            class="button bg-button bg-button--secondary">
+                    <a href="{{ path('app_reset_password') }}"
+                       class="button bg-button bg-button--secondary">
                         Passwort vergessen?
-                    </button>
-                    <button type="button"
-                            hx-get="{{ path('app_registration') }}"
-                            hx-target="#myep"
-                            hx-swap="outerHTML"
-                            class="button bg-button bg-button--secondary">
+                    </a>
+                    <a href="{{ path('app_registration') }}"
+                       class="button bg-button bg-button--secondary">
                         registrieren
-                    </button>
+                    </a>
                 </div>
                 <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
             </form>