Migrate management templates to bootstrap 5

flaskbb/templates/_macros/form.html

@@ -148,3 +148,17 @@
 
 </div>
 {%- endmacro -%}
+
+
+{% macro action_confirm(id, url, title, icon='', btn='btn btn-icon', icon_only=True) %}
+<form class="d-inline" id="{{ id }}" method="post" action="{{ url }}">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+    <button type="button" class="{{ btn }}" data-bs-toggle="modal" data-bs-target="#confirmModal">
+        {% if icon_only %}
+        <span class="{{ icon }}" data-bs-toggle="tooltip" title="{{ title }}"></span>
+        {% else %}
+        <span class="{{ icon }}"></span> {{ title }}
+        {% endif %}
+    </button>
+</form>
+{% endmacro %}

flaskbb/templates/management/banned_users.html

@@ -1,10 +1,6 @@
 {% set page_title = _("Banned Users") %}
-{% set active = "management.users" %}
 
 {% extends theme("management/management_layout.html") %}
-{%- from theme("_macros/pagination.html") import render_pagination %}
-{%- from theme("_macros/navigation.html") import navlink with context %}
-{%- from theme("_macros/form.html") import render_input_field %}
 
 {% block breadcrumb %}
 <ol class="breadcrumb flaskbb-breadcrumb">
@@ -15,10 +11,14 @@
 {% endblock %}
 
 {% block management_content %}
+{%- from theme('_macros/pagination.html') import render_pagination -%}
+{%- from theme('_macros/navigation.html') import navlink with context -%}
+{%- from theme('_macros/form.html') import render_input_field -%}
+
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
         <ul class="nav">
-            {{ navlink('management.users', _("Manage Users")) }}
+            {{ navlink('management.users', _('Manage Users')) }}
             {{ navlink('management.banned_users', _('Banned Users')) }}
 
             {% if current_user|is_admin %}
@@ -31,17 +31,16 @@
 <div class="col-md-9 settings-col with-left-border">
     <div class="card settings">
         <div class="card-header settings-header">
-
-            <span class="fa fa-user-times"></span> {% trans %}Banned Users{% endtrans %}
-
-            <div class="pull-right action-buttons">
-                <div class="btn-group pull-right">
-                    <button type="button" class="btn btn-default btn-xs" onclick="return window.app.show_management_search()">
-                        <span class="fa fa-search"></span> {% trans %}Search{% endtrans %}
+            <div class="row">
+                <div class="col-auto me-auto">
+                    <span class="far fa-user"></span> {% trans %}Banned Users{% endtrans %}
+                </div>
+                <div class="col-auto">
+                    <button type="button" class="btn btn-white btn-xs" onclick="return window.app.show_management_search()">
+                        <span class="fas fa-search"></span> {% trans %}Search{% endtrans %}
                     </button>
                 </div>
             </div>
-
         </div>
         <div class="card-body settings-body">
 
@@ -49,70 +48,78 @@
                 <form class="search-form" role="form" method="post">
                     {{ search_form.hidden_tag() }}
                     <div class="input-group">
-                        {{ render_input_field(search_form.search_query) }}
-                        <span class="input-group-btn">
-                            <button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>
-                        </span>
+                        {{ render_input_field(search_form.search_query, class="form-control") }}
+                        <button class="btn btn-white" type="button"><span class="fas fa-search"></span></button>
                     </div>
                 </form>
             </div>
 
             <div class="settings-content">
                 <div class="settings-meta row">
-                    <div class="col-md-1 col-sm-1 col-xs-1 meta-item"><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></div>
-                    <div class="col-md-2 col-sm-2 col-xs-3 meta-item">{% trans %}Username{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-3 meta-item">{% trans %}Posts{% endtrans %}</div>
-                    <div class="col-md-3 col-sm-3 hidden-xs meta-item">{% trans %}Date registered{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-3 meta-item">{% trans %}Group{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-2">
-                    {% if current_user|can_ban_user %}
-                        <div class="btn-group">
-                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
-                                <span class="fa fa-fw fa-cog"></span> {% trans %}Actions{% endtrans %}
-                            </button>
-                            <ul class="dropdown-menu slidedown">
+                    <div class="col-md-1 col-sm-1 col-1 meta-item"><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></div>
+                    <div class="col-md-2 col-sm-2 col-3 meta-item">{% trans %}Username{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-2 col-3 meta-item">{% trans %}Posts{% endtrans %}</div>
+                    <div class="col-md-3 col-sm-3 d-none d-sm-block meta-item">{% trans %}Date registered{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-2 col-3 meta-item">{% trans %}Group{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-2 col-2">
+                        <div class="dropdown">
+                            <a class="dropdown-toggle text-dark text-decoration-none fw-bold" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
+                                <span class="fa fa-fw fa-cog"></span>
+                                {% trans %}Actions{% endtrans %}
+                            </a>
+
+                            <ul class="dropdown-menu">
                                 <li>
-                                    <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}')">
-                                        <span class="fa fa-fw fa-flag text-success"></span> {% trans %}Unban selected Users{% endtrans %}
+                                    <button class="dropdown-item btn btn-sm" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}')">
+                                        <span class="fas fa-fw fa-flag text-success"></span>
+                                        {% trans %}Unban selected Users{% endtrans %}
                                     </button>
                                 </li>
                             </ul>
                         </div>
-                    {% endif %}
                     </div>
                 </div>
             {% for user in users.items %}
-                <div class="row settings-row hover clearfix">
-                    <div class="col-md-1 col-sm-1 col-xs-1"><input type="checkbox" name="rowid" class="action-checkbox" value="{{ user.id }}" title="Select User"/></div>
-                    <div class="col-md-2 col-sm-2 col-xs-3"><a href="{{ user.url }}">{{ user.username }}</a></div>
-                    <div class="col-md-2 col-sm-2 col-xs-3">{{ user.post_count }}</div>
-                    <div class="col-md-3 col-sm-3 hidden-xs">{{ user.date_joined|format_date }}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-3">{{ user.primary_group.name }}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-2">
+                <div class="row settings-row hover">
+                    <div class="col-md-1 col-sm-1 col-1"><input type="checkbox" name="rowid" class="action-checkbox" value="{{ user.id }}" title="Select User"/></div>
+                    <div class="col-md-2 col-sm-2 col-3"><a href="{{ user.url }}">{{ user.username }}</a></div>
+                    <div class="col-md-2 col-sm-2 col-3">{{ user.post_count }}</div>
+                    <div class="col-md-3 col-sm-3 d-none d-sm-block">{{ user.date_joined|format_date }}</div>
+                    <div class="col-md-2 col-sm-2 col-3">{{ user.primary_group.name }}</div>
+                    <div class="col-2">
+                    {% if current_user|can_edit_user and not user|is_admin or current_user|is_admin %}
+                        <a href="{{ url_for('management.edit_user', user_id = user.id) }}" class="btn btn-icon">
+                            <span class="fas fa-edit text-primary" data-bs-toggle="tooltip" title="{% trans %}Edit{% endtrans %}"></span>
+                        </a>
+                    {% endif %}
+
                     {% if current_user|can_ban_user and user.permissions['banned'] %}
-                        <form class="inline-form" id="ban-{{user.id}}" method="post" action="{{ url_for('management.unban_user', user_id = user.id) }}">
+                        <form class="d-inline" id="ban-{{user.id}}" method="post" action="{{ url_for('management.unban_user', user_id = user.id) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
-                            <button class="btn btn-icon" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Unban{% endtrans %}">
-                                <span class="fa fa-flag text-success"></span>
+                            <button type="button" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#confirmModal">
+                                <span class="fas fa-flag text-success" data-bs-toggle="tooltip" title="{% trans %}Unban{% endtrans %}"></span>
                             </button>
                         </form>
                     {% endif %}
+
                     </div>
                 </div>
             {% else %}
-                <div class="row settings-row clearfix">
-                    <div class="col-md-12 col-sm-12 col-xs-12">{% trans %}No users found matching your search criteria.{% endtrans %}</div>
+                <div class="row settings-row">
+                    <div class="col-12">{% trans %}No banned users found matching your search criteria.{% endtrans %}</div>
                 </div>
             {% endfor %}
 
             </div> <!-- end settings content -->
         </div>
-        <div class="card-footer settings-footer">
+
+        <div class="card-footer settings-footer p-2">
             {{ render_pagination(users, url_for('management.banned_users')) }}
         </div>
     </div>
 </div>
+{% include theme('_partials/confirm_dialog.html') %}
 {% endblock %}
 
 {% block scripts %}

flaskbb/templates/management/category_form.html

@@ -31,19 +31,14 @@
             <span class="fa fa-comments-o"></span> {{ title }}
         </div>
         <div class="card-body settings-body">
-            <div class="settings-content">
-                <form class="settings-form" role="form" method="post">
-                    <div class="col-md-12 col-sm-12 col-xs-12">
-                        {{ form.hidden_tag() }}
-                        {{ render_field(form.title) }}
-                        {{ render_field(form.description, div_class="col-sm-10", class="flaskbb-editor", style="display:none") }}
-
-                        {{ render_field(form.position) }}
-                        {{ render_field(form.submit) }}
-                    </div>
-
-                </form>
-            </div>
+            <form class="row p-2" role="form" method="post">
+                {{ form.hidden_tag() }}
+                {{ render_field(form.title) }}
+                {{ render_field(form.description, div_class="col-sm-10", class="flaskbb-editor", style="display:none") }}
+
+                {{ render_field(form.position) }}
+                {{ render_field(form.submit) }}
+            </form>
         </div>
     </div>
 </div>

flaskbb/templates/management/forum_form.html

@@ -32,23 +32,19 @@
             <span class="fa fa-comment-o"></span> {{ title }}
         </div>
         <div class="card-body settings-body">
-            <div class="settings-content">
-                <form class="settings-form" role="form" method="post">
-                    <div class="col-md-12 col-sm-12 col-xs-12">
-                        {{ form.hidden_tag() }}
-                        {{ render_field(form.title) }}
-                        {{ render_field(form.description, div_class="col-sm-10", class="flaskbb-editor", style="display:none") }}
-                        {{ render_field(form.category) }}
-                        {{ render_field(form.position) }}
-                        {{ render_field(form.external) }}
-                        {{ render_field(form.moderators) }}
-                        {{ render_field(form.show_moderators) }}
-                        {{ render_field(form.locked) }}
-                        {{ render_field(form.groups) }}
-                        {{ render_field(form.submit) }}
-                    </div>
-                </form>
-            </div>
+            <form class="row p-2" role="form" method="post">
+                {{ form.hidden_tag() }}
+                {{ render_field(form.title) }}
+                {{ render_field(form.description, div_class="col-sm-10", class="flaskbb-editor", style="display:none") }}
+                {{ render_field(form.category) }}
+                {{ render_field(form.position) }}
+                {{ render_field(form.external) }}
+                {{ render_field(form.moderators) }}
+                {{ render_field(form.show_moderators) }}
+                {{ render_field(form.locked) }}
+                {{ render_field(form.groups) }}
+                {{ render_field(form.submit) }}
+            </form>
         </div>
     </div>
 </div>

flaskbb/templates/management/forums.html

@@ -13,6 +13,7 @@
 {% block management_content %}
 {%- from theme('_macros/pagination.html') import render_pagination -%}
 {%- from theme('_macros/navigation.html') import navlink with context -%}
+{%- from theme('_macros/form.html') import action_confirm -%}
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
@@ -35,46 +36,50 @@
                 <div class="card category">
                     <div class="card-header category-header">
                         <div class="row">
-                            <div class="col-md-12">
-                                <div class="pull-left">
-                                    <a href="{{ category.url }}"><strong>{{ category.title }}</strong></a>
-                                </div>
-                                <div class="pull-right">
-                                    <a class="btn btn-xs btn-default" href="{{ url_for('management.add_forum', category_id=category.id) }}">
-                                        <span class="fa fa-plus"></span> {% trans %}Add Forum{% endtrans %}
-                                    </a>
-                                    <a class="btn btn-xs btn-success" href="{{ url_for('management.edit_category', category_id = category.id) }}">
-                                        <span class="fa fa-pencil"></span> {% trans %}Edit Category{% endtrans %}
-                                    </a>
-                                    <form class="inline-form" method="post" action="{{ url_for('management.delete_category', category_id=category.id) }}">
-                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-xs btn-danger" name="confirmDialog">
-                                            <span class="fa fa-trash"></span> {% trans %}Delete Category{% endtrans %}
-                                        </button>
-                                    </form>
-                                </div>
+                            <div class="col-auto me-auto">
+                                <a href="{{ category.url }}"><strong>{{ category.title }}</strong></a>
+                            </div>
+
+                            <div class="col-auto">
+                                <a class="btn btn-sm btn-outline-dark" href="{{ url_for('management.add_forum', category_id=category.id) }}">
+                                    <span class="fas fa-plus"></span> {% trans %}Add Forum{% endtrans %}
+                                </a>
+                                <a class="btn btn-sm btn-outline-success" href="{{ url_for('management.edit_category', category_id = category.id) }}">
+                                    <span class="fas fa-edit"></span> {% trans %}Edit Category{% endtrans %}
+                                </a>
+
+                                {{
+                                    action_confirm(
+                                        url=url_for('management.delete_category', category_id=category.id),
+                                        title=_("Delete Category"),
+                                        icon="far fa-trash-alt",
+                                        btn="btn btn-sm btn-outline-danger",
+                                        icon_only=False
+                                    )
+                                }}
+
                             </div>
                         </div>
                     </div>
 
                     <div class="card-body category-body">
-                        <div class="category-meta">
-                            <div class="col-md-5 col-sm-5 col-xs-8 forum-name">{% trans %}Forum{% endtrans %}</div>
-                            <div class="col-md-2 col-sm-2 hidden-xs forum-stats">{% trans %}Topics / Posts{% endtrans %}</div>
-                            <div class="col-md-5 col-sm-5 col-xs-4 forum-last-post"></div>
+                        <div class="category-meta row m-0 ps-0">
+                            <div class="col-md-5 col-sm-5 col-8 forum-name">{% trans %}Forum{% endtrans %}</div>
+                            <div class="col-md-2 col-sm-2 d-none d-sm-block forum-stats">{% trans %}Topics / Posts{% endtrans %}</div>
+                            <div class="col-md-5 col-sm-5 col-4 forum-last-post"></div>
                         </div>
                         {% for forum in category.forums %}
                         <div class="row category-row hover">
 
                             {% if forum.external %}
-                            <div class="col-md-5 col-sm-5 col-xs-8 forum-info">
+                            <div class="col-md-5 col-sm-5 col-8 forum-info ps-2">
                                 <div class="row">
                                     <!-- Icon -->
-                                    <div class="col-md-1 col-sm-2 col-xs-2 forum-status">
-                                        <span class="fa fa-external-link forum-external"></span>
+                                    <div class="col-md-1 col-sm-2 col-2 forum-status">
+                                        <span class="fas fa-external-link forum-external"></span>
                                     </div>
 
-                                    <div class="col-md-11 col-sm-10 col-xs-10">
+                                    <div class="col-md-11 col-sm-10 col-10">
                                         <!-- Forum Name -->
                                         <div class="forum-name">
                                             <span class="forum-link">{% trans %}Link to{% endtrans %}:</span> <a href="{{ forum.url }}">{{ forum.title }}</a>
@@ -89,79 +94,85 @@
                             </div> <!-- end forum-info -->
 
                             <!-- Post Count -->
-                            <div class="col-md-2 col-sm-2 hidden-xs forum-posts">
+                            <div class="col-md-2 col-sm-2 d-none d-sm-block forum-posts">
                                 - -
                             </div>
 
                             <!-- Forum Actions -->
-                            <div class="col-md-5 col-sm-5 col-xs-4 forum-last-post">
-                                <div class="forum-actions pull-right">
+                            <div class="col-md-5 col-sm-5 col-4 forum-last-post">
+                                <div class="forum-actions float-end">
                                     <a class="btn btn-sm btn-success" href="{{ url_for('management.edit_forum', forum_id = forum.id) }}">
-                                        <span class="fa fa-pencil"></span> {% trans %}Edit Link{% endtrans %}
+                                        <span class="fas fa-edit"></span> {% trans %}Edit Link{% endtrans %}
                                     </a>
 
-                                    <form class="inline-form" method="post" action="{{ url_for('management.delete_forum', forum_id=forum.id) }}">
-                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-sm btn-danger" name="confirmDialog">
-                                            <span class="fa fa-trash"></span> {% trans %}Delete Link{% endtrans %}
-                                        </button>
-                                    </form>
+                                    {{
+                                        action_confirm(
+                                            url=url_for('management.delete_forum', forum_id=forum.id),
+                                            title=_("Delete Link"),
+                                            icon="far fa-trash-alt",
+                                            btn="btn btn-sm btn-danger",
+                                            icon_only=False
+                                        )
+                                    }}
+
                                 </div>
                             </div>
                             {% else %}
-                            <div class="col-md-5 col-sm-5 col-xs-8 forum-info">
-                                <div class="row">
-                                    <!-- Icon -->
-                                    <div class="col-md-1 col-sm-2 col-xs-2 forum-status">
-                                        {% if forum.locked %}
-                                            <span class="fa fa-lock forum-locked"></span>
-                                        {% else %}
-                                            <span class="fa fa-comments-o forum-read"></span>
-                                        {% endif %}
-                                    </div>
+                            <div class="col-md-5 col-sm-5 col-8 forum-info ps-2">
+
+                                <!-- Icon -->
+                                <div class="forum-status">
+                                    {% if forum.locked %}
+                                        <span class="fas fa-lock forum-locked"></span>
+                                    {% else %}
+                                        <span class="far fa-comments forum-read"></span>
+                                    {% endif %}
+                                </div>
 
-                                    <div class="col-md-11 col-sm-10 col-xs-10">
-                                        <!-- Forum Name -->
-                                        <div class="forum-name">
-                                            <a href="{{ forum.url }}">{{ forum.title }}</a>
-                                        </div>
+                                <!-- Forum Name -->
+                                <div class="forum-name">
+                                    <a href="{{ forum.url }}">{{ forum.title }}</a>
+                                </div>
 
-                                        <!-- Forum Description -->
-                                        <div class="forum-description">
-                                            {{ forum.description|nonpost_markup }}
-                                        </div>
+                                <!-- Forum Description -->
+                                <div class="forum-description">
+                                    {{ forum.description|nonpost_markup }}
+                                </div>
 
-                                        <!-- Forum Moderators -->
-                                        {% if forum.show_moderators %}
-                                        <div class="forum-moderators">
-                                            {% trans %}Moderators{% endtrans %}:
-                                            {% for moderator in forum.moderators %}
-                                            <a href="{{ url_for('user.profile', username=moderator.username) }}">{{ moderator.username }}</a>{% if not loop.last %}, {% endif %}
-                                            {% endfor %}
-                                        </div>
-                                        {% endif %}
-                                    </div>
+                                <!-- Forum Moderators -->
+                                {% if forum.show_moderators %}
+                                <div class="forum-moderators">
+                                    {% trans %}Moderators{% endtrans %}:
+                                    {% for moderator in forum.moderators %}
+                                    <a href="{{ url_for('user.profile', username=moderator.username) }}">{{ moderator.username }}</a>{% if not loop.last %}, {% endif %}
+                                    {% endfor %}
                                 </div>
+                                {% endif %}
+
                             </div> <!-- end forum-info -->
 
                             <!-- Post Count -->
-                            <div class="col-md-2 col-sm-2 hidden-xs forum-topics">
+                            <div class="col-md-2 col-sm-2 d-none d-sm-block forum-topics">
                                 {{ forum.topic_count }} / {{ forum.post_count }}
                             </div>
 
                             <!-- Forum Actions -->
-                            <div class="col-md-5 col-sm-5 col-xs-4 forum-last-post">
-                                <div class="forum-actions pull-right">
+                            <div class="col-md-5 col-sm-5 col-4 forum-last-post">
+                                <div class="forum-actions float-end">
                                     <a class="btn btn-sm btn-primary" href="{{ url_for('management.edit_forum', forum_id = forum.id) }}">
-                                        <span class="fa fa-pencil"></span> {% trans %}Edit Forum{% endtrans %}
+                                        <span class="fas fa-edit"></span> {% trans %}Edit Forum{% endtrans %}
                                     </a>
 
-                                    <form class="inline-form" method="post" action="{{ url_for('management.delete_forum', forum_id=forum.id) }}">
-                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                                        <button class="btn btn-sm btn-danger" name="confirmDialog">
-                                            <span class="fa fa-trash"></span> {% trans %}Delete Forum{% endtrans %}
-                                        </button>
-                                    </form>
+                                    {{
+                                        action_confirm(
+                                            url=url_for('management.delete_forum', forum_id=forum.id),
+                                            title=_("Delete Forum"),
+                                            icon="far fa-trash-alt",
+                                            btn="btn btn-sm btn-danger",
+                                            icon_only=False
+                                        )
+                                    }}
+
                                 </div>
                             </div>
 

flaskbb/templates/management/group_form.html

@@ -31,36 +31,31 @@
             <span class="fa fa-user-plus"></span> {{ title }}
         </div>
         <div class="card-body settings-body">
-            <div class="settings-content">
-                <form class="settings-form" role="form" method="post">
-                    <div class="col-12">
-                        {{ form.hidden_tag() }}
-                        {{ render_field(form.name) }}
-
-                        {{ render_field(form.description, div_class="col-sm-10", class="flaskbb-editor", style="display:none") }}
-                        {{ render_field(form.admin) }}
-                        {{ render_field(form.super_mod) }}
-
-                        {{ render_field(form.mod) }}
-                        {{ render_field(form.banned) }}
-                        {{ render_field(form.guest) }}
-
-                        {{ render_field(form.mod_edituser) }}
-                        {{ render_field(form.mod_banuser) }}
-
-                        {{ render_field(form.editpost) }}
-                        {{ render_field(form.deletepost) }}
-                        {{ render_field(form.deletetopic) }}
-                        {{ render_field(form.posttopic) }}
-                        {{ render_field(form.postreply) }}
-                        {{ render_field(form.makehidden) }}
-                        {{ render_field(form.viewhidden) }}
-
-                        {{ render_field(form.submit) }}
-                    </div>
-
-                </form>
-            </div>
+            <form class="row p-2" role="form" method="post">
+                {{ form.hidden_tag() }}
+                {{ render_field(form.name) }}
+
+                {{ render_field(form.description, div_class="col-sm-10 mb-3", class="flaskbb-editor", style="display:none") }}
+                {{ render_field(form.admin) }}
+                {{ render_field(form.super_mod) }}
+
+                {{ render_field(form.mod) }}
+                {{ render_field(form.banned) }}
+                {{ render_field(form.guest) }}
+
+                {{ render_field(form.mod_edituser) }}
+                {{ render_field(form.mod_banuser) }}
+
+                {{ render_field(form.editpost) }}
+                {{ render_field(form.deletepost) }}
+                {{ render_field(form.deletetopic) }}
+                {{ render_field(form.posttopic) }}
+                {{ render_field(form.postreply) }}
+                {{ render_field(form.makehidden) }}
+                {{ render_field(form.viewhidden) }}
+
+                {{ render_field(form.submit) }}
+            </form>
         </div>
     </div>
 </div>

flaskbb/templates/management/groups.html

@@ -13,6 +13,7 @@
 {% block management_content %}
 {%- from theme('_macros/pagination.html') import render_pagination -%}
 {%- from theme('_macros/navigation.html') import navlink with context -%}
+{%- from theme('_macros/form.html') import action_confirm -%}
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
@@ -31,18 +32,20 @@
         <div class="card-body settings-body">
             <div class="settings-content">
                 <div class="settings-meta row">
-                    <div class="col-md-1 col-sm-1 col-xs-1 meta-item"><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></div>
-                    <div class="col-md-4 col-sm-4 col-xs-5 meta-item">{% trans %}Group Name{% endtrans %}</div>
-                    <div class="col-md-5 col-sm-5 hidden-xs meta-item">{% trans %}Description{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-5">
-                        <div class="btn-group">
-                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
-                                <span class="fa fa-fw fa-cog"></span> {% trans %}Actions{% endtrans %}
-                            </button>
-                            <ul class="dropdown-menu slidedown">
+                    <div class="col-md-1 col-sm-1 col-1 meta-item"><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></div>
+                    <div class="col-md-4 col-sm-4 col-5 meta-item">{% trans %}Group Name{% endtrans %}</div>
+                    <div class="col-md-5 col-sm-5 d-none d-sm-block meta-item">{% trans %}Description{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-2 col-5">
+                        <div class="dropdown">
+                            <a class="dropdown-toggle text-dark text-decoration-none fw-bold" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
+                                <span class="fa fa-fw fa-cog"></span>
+                                {% trans %}Actions{% endtrans %}
+                            </a>
+                            <ul class="dropdown-menu">
                                 <li>
-                                    <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.delete_group') }}')">
-                                        <span class="fa fa-fw fa-trash text-danger"></span> {% trans %}Delete selected Groups{% endtrans %}
+                                    <button class="dropdown-item btn btn-sm" onclick="return bulk_actions.execute('{{ url_for('management.delete_group') }}')">
+                                        <span class="far fa-fw fa-trash-alt text-danger"></span>
+                                        {% trans %}Delete selected Groups{% endtrans %}
                                     </button>
                                 </li>
                             </ul>
@@ -51,28 +54,30 @@
                 </div>
 
             {% for group in groups.items %}
-                <div class="row settings-row hover clearfix">
-                    <div class="col-md-1 col-sm-1 col-xs-1"><input type="checkbox" name="rowid" class="action-checkbox" value="{{ group.id }}" title="Select Group"/></div>
-                    <div class="col-md-4 col-sm-4 col-xs-5">{{ group.name }}</div>
-                    <div class="col-md-5 col-sm-5 hidden-xs">{{ group.description }}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-5">
+                <div class="row settings-row hover">
+                    <div class="col-md-1 col-sm-1 col-1"><input type="checkbox" name="rowid" class="action-checkbox" value="{{ group.id }}" title="Select Group"/></div>
+                    <div class="col-md-4 col-sm-4 col-5">{{ group.name }}</div>
+                    <div class="col-md-5 col-sm-5 d-none d-sm-block">{{ group.description }}</div>
+                    <div class="col-md-2 col-sm-2 col-5">
                         <a href="{{ url_for('management.edit_group', group_id = group.id) }}" class="btn btn-icon">
-                            <span class="fa fa-pencil text-primary" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit{% endtrans %}"></span>
+                            <span class="fas fa-edit text-primary" data-bs-toggle="tooltip" title="{% trans %}Edit{% endtrans %}"></span>
                         </a>
                         {# only display "Delete" if group is not part of the standard groups. #}
                         {% if group.id > 6 %}
-                        <form class="inline-form" id="delete-{{group.id}}" method="post" action="{{ url_for('management.delete_group', group_id=group.id) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-icon" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete{% endtrans %}">
-                                <span class="fa fa-trash text-danger"></span>
-                            </button>
-                        </form>
+                            {{
+                                action_confirm(
+                                    id="delete-" ~ group.id,
+                                    url=url_for('management.delete_group', group_id=group.id),
+                                    title=_("Delete"),
+                                    icon="far fa-trash-alt text-danger"
+                                )
+                            }}
                         {% endif %}
                     </div>
                 </div>
             {% else %}
-                <div class="row settings-row clearfix">
-                    <div class="col-md-12 col-sm-12 col-xs-12">{% trans %}No groups found.{% endtrans %}</div>
+                <div class="row settings-row">
+                    <div class="col-12">{% trans %}No groups found.{% endtrans %}</div>
                 </div>
             {% endfor %}
             </div>

flaskbb/templates/management/plugins.html

@@ -12,6 +12,7 @@
 
 {% block management_content %}
 {%- from theme('_macros/navigation.html') import navlink with context -%}
+{%- from theme('_macros/form.html') import action_confirm -%}
 
 <div class="col-md-12 settings-col">
     <div class="card settings">
@@ -22,14 +23,14 @@
             <div class="settings-content">
                 <div class="settings-meta">
                     <div class="row settings-row">
-                        <div class="col-md-4 col-sm-4 col-xs-4 meta-item">{% trans %}Plugin{% endtrans %}</div>
-                        <div class="col-md-4 col-sm-4 col-xs-4 meta-item">{% trans %}Information{% endtrans %}</div>
-                        <div class="col-md-4 col-sm-4 col-xs-4 meta-item">{% trans %}Manage{% endtrans %}</div>
+                        <div class="col-md-4 col-sm-4 col-4 meta-item">{% trans %}Plugin{% endtrans %}</div>
+                        <div class="col-md-4 col-sm-4 col-4 meta-item">{% trans %}Information{% endtrans %}</div>
+                        <div class="col-md-4 col-sm-4 col-4 meta-item">{% trans %}Manage{% endtrans %}</div>
                     </div>
                 </div>
                 {% for plugin in plugins %}
                 <div class="row settings-row hover with-border-bottom">
-                    <div class="col-md-4 col-sm-4 col-xs-4">
+                    <div class="col-md-4 col-sm-4 col-4">
                     {{ plugin.name.title() }}
                     (
                     {%- if plugin.info.get('home_page') -%}
@@ -40,40 +41,49 @@
                     )
 
                     </div>
-                    <div class="col-md-4 col-sm-4 col-xs-4">
+                    <div class="col-md-4 col-sm-4 col-4">
                         <div class="plugin-version">{% trans %}Version{% endtrans %}: {{ plugin.info.get('version') }}</div>
                         <div class="plugin-description">{{ plugin.info.get('summary') }}</div>
                         <div class="plugin-author">{% trans %}by{% endtrans %} {{ plugin.info.get('author') }}</div>
                     </div>
-                    <div class="col-md-4 col-sm-4 col-xs-4">
+                    <div class="col-md-4 col-sm-4 col-4">
                         {% if not plugin.enabled %}
-                        <form class="inline-form" method="post" action="{{ url_for('management.enable_plugin', name=plugin.name) }}">
+                        <form class="d-inline" method="post" action="{{ url_for('management.enable_plugin', name=plugin.name) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                             <button class="btn btn-success">{% trans %}Enable{% endtrans %}</button>
                         </form>
                         {% else %}
-                        <form class="inline-form" method="post" action="{{ url_for('management.disable_plugin', name=plugin.name) }}">
+                        <form class="d-inline" method="post" action="{{ url_for('management.disable_plugin', name=plugin.name) }}">
                             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                             <button class="btn btn-warning">{% trans %}Disable{% endtrans %}</button>
                         </form>
                         {% endif %}
 
                         {% if plugin.is_installable and not plugin.is_installed %}
-                        <form class="inline-form" method="post" action="{{ url_for('management.install_plugin', name=plugin.name) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-info" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="Creates the settings for the plugin">
-                                {% trans %}Install{% endtrans %}
-                            </button>
-                        </form>
+
+                            {{
+                                action_confirm(
+                                    id="plugin-inst-" ~ plugin.name,
+                                    url=url_for('management.install_plugin', name=plugin.name),
+                                    title=_("Install"),
+                                    btn="btn btn-info",
+                                    icon_only=False
+                                )
+                            }}
+
                         {% elif plugin.is_installable and plugin.is_installed %}
-                        <form class="inline-form" method="post" action="{{ url_for('management.uninstall_plugin', name=plugin.name) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-danger" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="Removes the settings">
-                                {% trans %}Uninstall{% endtrans %}
-                            </button>
-                        </form>
 
-                        <a class="btn btn-info" href="{{ url_for('management.settings', plugin=plugin.name) }}">Settings</a>
+                            {{
+                                action_confirm(
+                                    id="plugin-uninst-" ~ plugin.name,
+                                    url=url_for('management.uninstall_plugin', name=plugin.name),
+                                    title=_("Uninstall"),
+                                    btn="btn btn-danger",
+                                    icon_only=False
+                                )
+                            }}
+
+                        <a class="btn btn-outline-dark" href="{{ url_for('management.settings', plugin=plugin.name) }}">Settings</a>
                         {% endif %}
                     </div>
                 </div>

flaskbb/templates/management/reports.html

@@ -14,6 +14,7 @@
 {% block management_content %}
 {%- from theme('_macros/pagination.html') import render_pagination -%}
 {%- from theme('_macros/navigation.html') import navlink with context -%}
+{%- from theme('_macros/form.html') import action_confirm -%}
 
 
 <div class="col-3 settings-col">
@@ -32,26 +33,30 @@
         <div class="card-body settings-body">
             <div class="settings-content">
                 <div class="settings-meta row">
-                    <div class="col-md-1 col-sm-1 col-xs-1 meta-item"><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></div>
-                    <div class="col-md-1 col-sm-2 col-xs-2 meta-item">{% trans %}Poster{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-3 col-xs-3 meta-item">{% trans %}Topic{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-4 col-xs-3 meta-item">{% trans %}Reason{% endtrans %}</div>
-                    <div class="col-md-2 hidden-sm hidden-xs meta-item">{% trans %}Reporter{% endtrans %}</div>
-                    <div class="col-md-2 hidden-sm hidden-xs meta-item">{% trans %}Reported{% endtrans %}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-2">
-                        <div class="btn-group">
-                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
-                                <span class="fa fa-fw fa-cog"></span> {% trans %}Actions{% endtrans %}
-                            </button>
-                            <ul class="dropdown-menu slidedown">
+                    <div class="col-md-1 col-sm-1 col-1 meta-item"><input type="checkbox" name="rowtoggle" class="action-checkall" title="Select All"/></div>
+                    <div class="col-md-1 col-sm-2 col-2 meta-item">{% trans %}Poster{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-3 col-3 meta-item">{% trans %}Topic{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-4 col-3 meta-item">{% trans %}Reason{% endtrans %}</div>
+                    <div class="col-md-2 d-none d-sm-block meta-item">{% trans %}Reporter{% endtrans %}</div>
+                    <div class="col-md-2 d-none d-sm-block meta-item">{% trans %}Reported{% endtrans %}</div>
+                    <div class="col-md-2 col-sm-2 col-2">
+                        <div class="dropdown">
+                            <a class="dropdown-toggle text-dark text-decoration-none fw-bold" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
+                                <span class="fa fa-fw fa-cog"></span>
+                                {% trans %}Actions{% endtrans %}
+                            </a>
+
+                            <ul class="dropdown-menu">
                                 <li>
-                                    <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.report_markread') }}')">
-                                        <span class="fa fa-fw fa-flag-o text-primary"></span> {% trans %}Mark as Read{% endtrans %}
+                                    <button class="dropdown-item btn btn-sm" onclick="return bulk_actions.execute('{{ url_for('management.report_markread') }}')">
+                                        <span class="fa fa-fw fa-flag-o text-primary"></span>
+                                        {% trans %}Mark as Read{% endtrans %}
                                     </button>
                                 </li>
                                 <li>
-                                    <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.delete_report') }}')">
-                                        <span class="fa fa-fw fa-trash text-danger"></span> {% trans %}Delete selected reports{% endtrans %}
+                                    <button class="dropdown-item btn btn-sm" onclick="return bulk_actions.execute('{{ url_for('management.delete_report') }}')">
+                                        <span class="fa fa-fw fa-trash text-danger"></span>
+                                        {% trans %}Delete selected reports{% endtrans %}
                                     </button>
                                 </li>
                             </ul>
@@ -59,34 +64,39 @@
                     </div>
                 </div>
             {% for report in reports.items %}
-                <div class="row settings-row hover clearfix">
-                    <div class="col-md-1 col-sm-1 col-xs-1"><input type="checkbox" name="rowid" class="action-checkbox" value="{{ report.id }}" title="Select Report"/></div>
-                    <div class="col-md-1 col-sm-2 col-xs-2"><a href="{{ report.post.user.url }}">{{ report.post.user.username }}</a></div>
-                    <div class="col-md-2 col-sm-3 col-xs-3"><a href="{{ report.post.url }}" target="_blank">{{ report.post.topic.title }}</a></div>
-                    <div class="col-md-2 col-sm-4 col-xs-3">{{ report.reason }}</div>
-                    <div class="col-md-2 hidden-sm hidden-xs">{{ report.reporter.username }}</div>
-                    <div class="col-md-2 hidden-sm hidden-xs">{{ report.reported|time_since }}</div>
-                    <div class="col-md-2 col-sm-2 col-xs-2">
+                <div class="row settings-row hover">
+                    <div class="col-md-1 col-sm-1 col-1"><input type="checkbox" name="rowid" class="action-checkbox" value="{{ report.id }}" title="Select Report"/></div>
+                    <div class="col-md-1 col-sm-2 col-2"><a href="{{ report.post.user.url }}">{{ report.post.user.username }}</a></div>
+                    <div class="col-md-2 col-sm-3 col-3"><a href="{{ report.post.url }}" target="_blank">{{ report.post.topic.title }}</a></div>
+                    <div class="col-md-2 col-sm-4 col-3">{{ report.reason }}</div>
+                    <div class="col-md-2 d-none d-sm-block">{{ report.reporter.username }}</div>
+                    <div class="col-md-2 d-none d-sm-block">{{ report.reported|time_since }}</div>
+                    <div class="col-md-2 col-sm-2 col-2">
                         {% if not report.zapped %}
-                        <form class="inline-form" id="read-{{report.id}}" method="post" action="{{ url_for('management.report_markread', report_id=report.id) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                            <button class="btn btn-icon" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Mark as Read{% endtrans %}">
-                                <span class="fa fa-flag-o text-primary"></span>
-                            </button>
-                        </form>
+                            <!-- Mark as Read -->
+                            {{
+                                action_confirm(
+                                    id="read-" ~ report.id,
+                                    url=url_for('management.report_markread', report_id=report.id),
+                                    title=_("Mark as Read"),
+                                    icon="fa fa-flag-o text-primary"
+                                )
+                            }}
                         {% endif %}
-                        <form class="inline-form" id="delete-{{report.id}}" method="post" action="{{ url_for('management.delete_report', report_id=report.id) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-
-                            <button class="btn btn-icon" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete{% endtrans %}">
-                                <span class="fa fa-trash text-danger"></span>
-                            </button>
-                        </form>
+                            <!-- Delete -->
+                            {{
+                                action_confirm(
+                                    id="delete-" ~ report.id,
+                                    url=url_for('management.delete_report', report_id=report.id),
+                                    title=_("Delete"),
+                                    icon="fa fa-trash text-danger"
+                                )
+                            }}
                     </div>
                 </div>
             {% else %}
-                <div class="row settings-row clearfix">
-                    <div class="col-md-12 col-sm-12 col-xs-12">{% trans %}No reports.{% endtrans %}</div>
+                <div class="row settings-row">
+                    <div class="col-12">{% trans %}No reports.{% endtrans %}</div>
                 </div>
             {% endfor %}
             </div>

flaskbb/templates/management/user_form.html

@@ -36,31 +36,29 @@
             <span class="fa fa-user-plus"></span> {{ title }}
         </div>
         <div class="card-body settings-body">
-            <div class="settings-content">
-                <form class="form-horizontal settings-form" role="form" method="post">
-                    {{ form.hidden_tag() }}
+            <form class="row p-3" role="form" method="post">
+                {{ form.hidden_tag() }}
 
-                    {{ run_hook('flaskbb_tpl_form_user_details_before', form=form) }}
+                {{ run_hook('flaskbb_tpl_form_user_details_before', form=form) }}
 
-                    {{ horizontal_field(form.username) }}
-                    {{ horizontal_field(form.email) }}
-                    {{ horizontal_field(form.password) }}
-                    {{ horizontal_field(form.birthday, div_class="row col-5", class="form-select", surrounded_div="col-4") }}
-                    {{ horizontal_field(form.gender) }}
-                    {{ horizontal_field(form.location) }}
-                    {{ horizontal_field(form.website) }}
-                    {{ horizontal_field(form.avatar) }}
-                    {{ horizontal_field(form.primary_group) }}
-                    {{ horizontal_field(form.secondary_groups) }}
-                    {{ horizontal_field(form.activated) }}
-                    {{ horizontal_field(form.signature, div_class="col-sm-8", class="flaskbb-editor", style="display:none") }}
-                    {{ horizontal_field(form.notes, div_class="col-sm-8", class="flaskbb-editor", style="display:none") }}
+                {{ horizontal_field(form.username) }}
+                {{ horizontal_field(form.email) }}
+                {{ horizontal_field(form.password) }}
+                {{ horizontal_field(form.birthday, div_class="row col-5", class="form-select", surrounded_div="col-4") }}
+                {{ horizontal_field(form.gender) }}
+                {{ horizontal_field(form.location) }}
+                {{ horizontal_field(form.website) }}
+                {{ horizontal_field(form.avatar) }}
+                {{ horizontal_field(form.primary_group) }}
+                {{ horizontal_field(form.secondary_groups) }}
+                {{ horizontal_field(form.activated, div_class="offset-3 col-4") }}
+                {{ horizontal_field(form.signature, div_class="col-sm-8", class="flaskbb-editor", style="display:none") }}
+                {{ horizontal_field(form.notes, div_class="col-sm-8", class="flaskbb-editor", style="display:none") }}
 
-                    {{ run_hook('flaskbb_tpl_form_user_details_after', form=form) }}
+                {{ run_hook('flaskbb_tpl_form_user_details_after', form=form) }}
 
-                    {{ horizontal_field(form.submit, div_class="offset-3 col-4") }}
-                </form>
-            </div>
+                {{ horizontal_field(form.submit, div_class="offset-3 col-4") }}
+            </form>
         </div>
     </div>
 </div>

flaskbb/templates/management/users.html

@@ -13,7 +13,7 @@
 {% block management_content %}
 {%- from theme('_macros/pagination.html') import render_pagination -%}
 {%- from theme('_macros/navigation.html') import navlink with context -%}
-{%- from theme('_macros/form.html') import render_input_field -%}
+{%- from theme('_macros/form.html') import render_input_field, action_confirm -%}
 
 <div class="col-md-3 settings-col">
     <div class="nav-sidebar">
@@ -62,33 +62,35 @@
                     <div class="col-md-3 col-sm-3 d-none d-sm-block meta-item">{% trans %}Date registered{% endtrans %}</div>
                     <div class="col-md-2 col-sm-2 col-3 meta-item">{% trans %}Group{% endtrans %}</div>
                     <div class="col-md-2 col-sm-2 col-2">
-
-  <div class="dropdown">
-    <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
-        <span class="fa fa-fw fa-cog"></span> {% trans %}Actions{% endtrans %}
-    </a>
-    <ul class="dropdown-menu">
-      <li><a class="dropdown-item" href="#">Action</a></li>
-    <li>
-        <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.ban_user') }}')">
-            <span class="far fa-fw fa-flag text-warning"></span> {% trans %}Ban selected Users{% endtrans %}
-        </button>
-    </li>
-
-    <li>
-        <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}')">
-            <span class="far fa-fw fa-flag text-success"></span> {% trans %}Unban selected Users{% endtrans %}
-        </button>
-    </li>
-
-    <li>
-        <button class="btn btn-link" onclick="return bulk_actions.execute('{{ url_for('management.delete_user') }}')">
-            <span class="far fa-fw fa-trash text-danger"></span> {% trans %}Delete selected Users{% endtrans %}
-        </button>
-    </li>
-    </ul>
-  </div>
-
+                        <div class="dropdown">
+                            <a class="dropdown-toggle text-dark text-decoration-none fw-bold" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
+                                <span class="fa fa-fw fa-cog"></span>
+                                {% trans %}Actions{% endtrans %}
+                            </a>
+
+                            <ul class="dropdown-menu">
+                                <li>
+                                    <button class="dropdown-item btn btn-sm" onclick="return bulk_actions.execute('{{ url_for('management.ban_user') }}')">
+                                    <span class="fas fa-fw fa-flag text-warning"></span>
+                                    {% trans %}Ban selected Users{% endtrans %}
+                                    </button>
+                                </li>
+
+                                <li>
+                                    <button class="dropdown-item btn btn-sm" onclick="return bulk_actions.execute('{{ url_for('management.unban_user') }}')">
+                                        <span class="fas fa-fw fa-flag text-success"></span>
+                                        {% trans %}Unban selected Users{% endtrans %}
+                                    </button>
+                                </li>
+
+                                <li>
+                                    <button class="dropdown-item btn btn-sm" onclick="return bulk_actions.execute('{{ url_for('management.delete_user') }}')">
+                                        <span class="far fa-fw fa-trash-alt text-danger"></span>
+                                        {% trans %}Delete selected Users{% endtrans %}
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
             {% for user in users.items %}
@@ -101,38 +103,41 @@
                     <div class="col-2">
                     {% if current_user|can_edit_user and not user|is_admin or current_user|is_admin %}
                         <a href="{{ url_for('management.edit_user', user_id = user.id) }}" class="btn btn-icon">
-                            <span class="fa fa-edit text-primary" data-toggle="tooltip" data-placement="top" title="{% trans %}Edit{% endtrans %}"></span>
+                            <span class="fas fa-edit text-primary" data-bs-toggle="tooltip" title="{% trans %}Edit{% endtrans %}"></span>
                         </a>
                     {% endif %}
 
                     {% if current_user|can_ban_user and not user.permissions['banned'] %}
-                        <form class="d-inline" id="ban-{{user.id}}" method="post" action="{{ url_for('management.ban_user', user_id = user.id) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-
-                            <button class="btn btn-icon" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Ban{% endtrans %}">
-                                <span class="fas fa-flag text-warning"></span>
-                            </button>
-                        </form>
+                        {{
+                            action_confirm(
+                                id="ban-" ~ user.id,
+                                url=url_for('management.ban_user', user_id=user.id),
+                                title=_("Ban"),
+                                icon="fas fa-flag text-warning"
+                            )
+                        }}
                     {% endif %}
 
                     {% if current_user|can_ban_user and user.permissions['banned'] %}
-                        <form class="d-inline" id="ban-{{user.id}}" method="post" action="{{ url_for('management.unban_user', user_id = user.id) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-
-                            <button class="btn btn-icon" name="confirmDialog">
-                                <span class="fas fa-flag text-success" data-toggle="tooltip" data-placement="top" title="{% trans %}Unban{% endtrans %}"></span>
-                            </button>
-                        </form>
+                        {{
+                            action_confirm(
+                                id="ban-" ~ user.id,
+                                url=url_for('management.unban_user', user_id=user.id),
+                                title=_("Unban"),
+                                icon="fas fa-flag text-success"
+                            )
+                        }}
                     {% endif %}
 
                     {% if current_user|is_admin %}
-                        <form class="d-inline" id="delete-{{user.id}}" method="post" action="{{ url_for('management.delete_user', user_id = user.id) }}">
-                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-
-                            <button class="btn btn-icon" name="confirmDialog" data-toggle="tooltip" data-placement="top" title="{% trans %}Delete{% endtrans %}">
-                                <span class="far fa-trash-alt text-danger"></span>
-                            </button>
-                        </form>
+                        {{
+                            action_confirm(
+                                id="delete-" ~ user.id,
+                                url=url_for('management.delete_user', user_id=user.id),
+                                title=_("Delete"),
+                                icon="far fa-trash-alt text-danger"
+                            )
+                        }}
                     {% endif %}
                     </div>
                 </div>

flaskbb/themes/aurora/src/app/confirm_modal.js

@@ -2,11 +2,18 @@ import { Modal } from "bootstrap";
 
 var confirmModalElement = document.getElementById("confirmModal");
 if (confirmModalElement) {
-    // PS: Don't forget to use "type=button" for buttons:
-    // https://stackoverflow.com/a/3315016
-    // otherwise you gotta hijack the click event and add a preventDefault()
+    // Usage:
+    // <button type="button" class="btn btn-icon" data-bs-toggle="modal" data-bs-target="#confirmModal">
+    //     <span class="far fa-trash-alt text-danger" data-bs-toggle="tooltip" title="{% trans %}Delete{% endtrans %}"></span>
+    // </button>
+    // PS: Don't forget to use "type=button" for buttons - otherwise you'll submit the form before the modal pops up
+    //     or you gotta hijack the click event and add a preventDefault() to the form
 
     confirmModalElement.addEventListener("show.bs.modal", function(event) {
+        if(event.relatedTarget == undefined || event.relatedTarget.dataset.bsTarget !== "#confirmModal") {
+            return
+        }
+
         // Get the instance of this modal
         let confirmModal = Modal.getInstance(confirmModalElement);