67 lines
3.5 KiB
Twig
67 lines
3.5 KiB
Twig
{#
|
|
The shared "are you sure?" modal, ported from myep/myep-team's htmx_confirmation_modal.html.twig.
|
|
|
|
It replaces both native confirmation mechanisms this app used before: htmx's `hx-confirm`
|
|
(a window.confirm, unstyleable and invisible to the page) and `onsubmit="return confirm(...)"`
|
|
on the list forms. Both are gone; neither may come back.
|
|
|
|
The flow is the sibling one: a route serves GET (render this) and POST (do the thing), the
|
|
opener is a plain `hx-get` button appending to <body>, and the confirm button posts back to
|
|
the *same* URI -- so the query string that brought the user here, `?return=` included, is
|
|
carried over for free.
|
|
|
|
The CSRF token lives here rather than on the opener, which is why the lists no longer carry
|
|
hidden token fields at all.
|
|
|
|
Blocks: title, content, button_attribute (replace the hx-* defaults), button_confirm,
|
|
button_cancel. Callers must pass `csrf_token_id`.
|
|
#}
|
|
<div id="htmx-confirmation-modal"
|
|
class="fixed inset-0 w-full h-full z-50"
|
|
{{ stimulus_controller('modal') }}
|
|
{{ stimulus_action('modal', 'close', 'modal-close@window') }}>
|
|
<div class="absolute inset-0 w-full h-full bg-black/70" {{ stimulus_action('modal', 'close', 'click') }}></div>
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 w-full max-w-xl">
|
|
<div class="relative bg-white py-8 rounded-md">
|
|
<div class="flex justify-between pb-4 px-8">
|
|
<div class="flex items-center gap-2">
|
|
{{ ux_icon('lucide:triangle-alert', { class: 'w-7 h-7 shrink-0 text-amber-500' }) }}
|
|
<div class="text-2xl font-bold">
|
|
{% block title %}Bist du sicher?{% endblock %}
|
|
</div>
|
|
</div>
|
|
<button type="button"
|
|
class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10"
|
|
{{ stimulus_action('modal', 'close') }}>
|
|
{{ ux_icon('lucide:x', { class: 'w-8 h-8' }) }}
|
|
</button>
|
|
</div>
|
|
<div class="px-8">
|
|
{% block content %}{% endblock %}
|
|
|
|
<div class="flex justify-end gap-2 pt-6">
|
|
<button type="button" class="button button--neutral" {{ stimulus_action('modal', 'close') }}>
|
|
{% block button_cancel %}Abbrechen{% endblock %}
|
|
</button>
|
|
{#
|
|
Targets itself with outerHTML, so a response consisting only of
|
|
out-of-band blocks leaves nothing to swap in and this modal disappears --
|
|
the same mechanism the booking modal uses. A response that instead sets
|
|
HX-Redirect navigates away and the swap never happens.
|
|
#}
|
|
<button type="button"
|
|
class="button button--warning"
|
|
hx-target="#htmx-confirmation-modal"
|
|
hx-swap="outerHTML"
|
|
{% block button_attribute %}
|
|
hx-post="{{ app.request.uri }}"
|
|
hx-vals="{{ { _token: csrf_token(csrf_token_id) }|json_encode|e('html_attr') }}"
|
|
{% endblock %}>
|
|
{% block button_confirm %}Ja{% endblock %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|