From 6bdcbfbf0e9201bf2ea35511e57ef1abd0c61c23 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 21 Nov 2020 16:16:34 +0100
Subject: [PATCH] admin: update lists to use modal button

---
 .../certificatekeypair/list.html              | 36 ++++++++++---
 .../templates/administration/flow/list.html   | 48 ++++++++++++++---
 .../templates/administration/group/list.html  | 33 +++++++++---
 .../administration/outpost/list.html          | 31 +++++++++--
 .../outpost_service_connection/list.html      | 47 ++++++++++++-----
 .../templates/administration/policy/list.html | 52 +++++++++++++------
 .../templates/administration/policy/test.html | 21 --------
 .../administration/policy_binding/list.html   | 34 +++++++++---
 .../administration/property_mapping/list.html | 49 +++++++++++------
 .../administration/provider/list.html         | 47 ++++++++++++-----
 .../templates/administration/source/list.html | 47 ++++++++++++-----
 .../templates/administration/stage/list.html  | 50 ++++++++++++------
 .../administration/stage_binding/list.html    | 32 ++++++++++--
 .../administration/stage_invitation/list.html | 25 +++++++--
 .../administration/stage_prompt/list.html     | 26 ++++++++--
 .../templates/administration/token/list.html  |  7 ++-
 .../templates/administration/user/list.html   | 38 ++++++++++++--
 17 files changed, 462 insertions(+), 161 deletions(-)

diff --git a/passbook/admin/templates/administration/certificatekeypair/list.html b/passbook/admin/templates/administration/certificatekeypair/list.html
index ec93338ef..9ffa6378e 100644
--- a/passbook/admin/templates/administration/certificatekeypair/list.html
+++ b/passbook/admin/templates/administration/certificatekeypair/list.html
@@ -20,7 +20,15 @@
             <div class="pf-c-toolbar__content">
                 {% include 'partials/toolbar_search.html' %}
                 <div class="pf-c-toolbar__bulk-select">
-                    <a href="{% url 'passbook_admin:certificatekeypair-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                    <pb-modal-button href="{% url 'passbook_admin:certificatekeypair-create' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                            {% trans 'Create' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -31,7 +39,6 @@
                     <th role="columnheader" scope="col">{% trans 'Name' %}</th>
                     <th role="columnheader" scope="col">{% trans 'Private Key available' %}</th>
                     <th role="columnheader" scope="col">{% trans 'Fingerprint' %}</th>
-                    <th role="columnheader" scope="col">{% trans 'Provider Type' %}</th>
                     <th role="cell"></th>
                 </tr>
             </thead>
@@ -53,13 +60,21 @@
                         </span>
                     </td>
                     <td role="cell">
-                        <span>
-                            {{ kp.fingerprint }}
-                        </span>
+                        <code>{{ kp.fingerprint }}</code>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:certificatekeypair-update' pk=kp.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:certificatekeypair-delete' pk=kp.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:certificatekeypair-update' pk=kp.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:certificatekeypair-delete' pk=kp.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -87,7 +102,12 @@
                     {% trans 'Currently no certificates exist. Click the button below to create one.' %}
                 {% endif %}
                 </div>
-                <a href="{% url 'passbook_admin:certificatekeypair-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                <pb-modal-button href="{% url 'passbook_admin:certificatekeypair-create' %}">
+                    <button slot="trigger" class="pf-c-button pf-m-primary">
+                        {% trans 'Create' %}
+                    </button>
+                    <div slot="modal"></div>
+                </pb-modal-button>
             </div>
         </div>
         {% endif %}
diff --git a/passbook/admin/templates/administration/flow/list.html b/passbook/admin/templates/administration/flow/list.html
index 8d72955af..f309209d5 100644
--- a/passbook/admin/templates/administration/flow/list.html
+++ b/passbook/admin/templates/administration/flow/list.html
@@ -20,8 +20,21 @@
             <div class="pf-c-toolbar__content">
                 {% include 'partials/toolbar_search.html' %}
                 <div class="pf-c-toolbar__bulk-select">
-                    <a href="{% url 'passbook_admin:flow-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
-                    <a href="{% url 'passbook_admin:flow-import' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-secondary" type="button">{% trans 'Import' %}</a>
+                    <pb-modal-button href="{% url 'passbook_admin:flow-create' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                            {% trans 'Create' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <pb-modal-button href="{% url 'passbook_admin:flow-import' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-secondary">
+                            {% trans 'Import' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -41,7 +54,7 @@
                 <tr role="row">
                     <th role="columnheader">
                         <div>
-                            <div>{{ flow.slug }}</div>
+                            <div><code>{{ flow.slug }}</code></div>
                             <small>{{ flow.name }}</small>
                         </div>
                     </th>
@@ -61,8 +74,19 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:flow-update' pk=flow.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:flow-delete' pk=flow.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:flow-update' pk=flow.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:flow-delete' pk=flow.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        {# TODO: Fix execute link being modified #}
                         <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:flow-execute' pk=flow.pk %}?next={{ request.get_full_path }}">{% trans 'Execute' %}</a>
                         <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:flow-export' pk=flow.pk %}?next={{ request.get_full_path }}">{% trans 'Export' %}</a>
                     </td>
@@ -92,8 +116,18 @@
                     {% trans 'Currently no flows exist. Click the button below to create one.' %}
                 {% endif %}
                 </div>
-                <a href="{% url 'passbook_admin:flow-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
-                <a href="{% url 'passbook_admin:flow-import' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Import' %}</a>
+                <pb-modal-button href="{% url 'passbook_admin:flow-create' %}">
+                    <button slot="trigger" class="pf-c-button pf-m-primary">
+                        {% trans 'Create' %}
+                    </button>
+                    <div slot="modal"></div>
+                </pb-modal-button>
+                <pb-modal-button href="{% url 'passbook_admin:flow-import' %}">
+                    <button slot="trigger" class="pf-c-button pf-m-secondary">
+                        {% trans 'Import' %}
+                    </button>
+                    <div slot="modal"></div>
+                </pb-modal-button>
             </div>
         </div>
         {% endif %}
diff --git a/passbook/admin/templates/administration/group/list.html b/passbook/admin/templates/administration/group/list.html
index 893391b82..65b44231e 100644
--- a/passbook/admin/templates/administration/group/list.html
+++ b/passbook/admin/templates/administration/group/list.html
@@ -1,7 +1,6 @@
 {% extends "administration/base.html" %}
 
 {% load i18n %}
-{% load passbook_utils %}
 
 {% block content %}
 <section class="pf-c-page__main-section pf-m-light">
@@ -21,8 +20,15 @@
             <div class="pf-c-toolbar__content">
                 {% include 'partials/toolbar_search.html' %}
                 <div class="pf-c-toolbar__bulk-select">
-                    <a href="{% url 'passbook_admin:group-create' %}?back={{ request.get_full_path }}"
-                        class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                    <pb-modal-button href="{% url 'passbook_admin:group-create' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                            {% trans 'Create' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -55,8 +61,18 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:group-update' pk=group.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:group-delete' pk=group.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:group-update' pk=group.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:group-delete' pk=group.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -84,7 +100,12 @@
                     {% trans 'Currently no group exist. Click the button below to create one.' %}
                 {% endif %}
                 </div>
-                <a href="{% url 'passbook_admin:group-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                <pb-modal-button href="{% url 'passbook_admin:group-create' %}">
+                    <button slot="trigger" class="pf-c-button pf-m-primary">
+                        {% trans 'Create' %}
+                    </button>
+                    <div slot="modal"></div>
+                </pb-modal-button>
             </div>
         </div>
         {% endif %}
diff --git a/passbook/admin/templates/administration/outpost/list.html b/passbook/admin/templates/administration/outpost/list.html
index e4c8efbd1..62c7e3afc 100644
--- a/passbook/admin/templates/administration/outpost/list.html
+++ b/passbook/admin/templates/administration/outpost/list.html
@@ -22,7 +22,15 @@
             <div class="pf-c-toolbar__content">
                 {% include 'partials/toolbar_search.html' %}
                 <div class="pf-c-toolbar__bulk-select">
-                    <a href="{% url 'passbook_admin:outpost-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                    <pb-modal-button href="{% url 'passbook_admin:outpost-create' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                            {% trans 'Create' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -84,8 +92,18 @@
                     {% endif %}
                     {% endwith %}
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:outpost-update' pk=outpost.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:outpost-delete' pk=outpost.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:outpost-update' pk=outpost.pk' %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:outpost-delete' pk=outpost.pk' %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                         {% get_htmls outpost as htmls %}
                         {% for html in htmls %}
                         {{ html|safe }}
@@ -117,7 +135,12 @@
                     {% trans 'Currently no outposts exist. Click the button below to create one.' %}
                 {% endif %}
                 </div>
-                <a href="{% url 'passbook_admin:outpost-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                <pb-modal-button href="{% url 'passbook_admin:outpost-create' %}">
+                    <button slot="trigger" class="pf-c-button pf-m-primary">
+                        {% trans 'Create' %}
+                    </button>
+                    <div slot="modal"></div>
+                </pb-modal-button>
             </div>
         </div>
         {% endif %}
diff --git a/passbook/admin/templates/administration/outpost_service_connection/list.html b/passbook/admin/templates/administration/outpost_service_connection/list.html
index 1cd293dcc..9752c683c 100644
--- a/passbook/admin/templates/administration/outpost_service_connection/list.html
+++ b/passbook/admin/templates/administration/outpost_service_connection/list.html
@@ -30,16 +30,22 @@
                         <ul class="pf-c-dropdown__menu" hidden>
                             {% for type, name in types.items %}
                             <li>
-                                <a class="pf-c-dropdown__menu-item" href="{% url 'passbook_admin:outpost-service-connection-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                    {{ name|verbose_name }}<br>
-                                    <small>
-                                        {{ name|doc }}
-                                    </small>
-                                </a>
+                                <pb-modal-button href="{% url 'passbook_admin:outpost-service-connection-create' %}?type={{ type }}">
+                                    <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                        {{ name|verbose_name }}<br>
+                                        <small>
+                                            {{ name|doc }}
+                                        </small>
+                                    </button>
+                                    <div slot="modal"></div>
+                                </pb-modal-button>
                             </li>
                             {% endfor %}
                         </ul>
                     </pb-dropdown>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -80,8 +86,18 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:outpost-service-connection-update' pk=sc.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:outpost-service-connection-delete' pk=sc.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:outpost-service-connection-update' pk=sc.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:outpost-service-connection-delete' pk=sc.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -117,12 +133,15 @@
                     <ul class="pf-c-dropdown__menu" hidden>
                         {% for type, name in types.items %}
                         <li>
-                            <a class="pf-c-dropdown__menu-item" href="{% url 'passbook_admin:outpost-service-connection-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                {{ name|verbose_name }}<br>
-                                <small>
-                                    {{ name|doc }}
-                                </small>
-                            </a>
+                            <pb-modal-button href="{% url 'passbook_admin:outpost-service-connection-create' %}?type={{ type }}">
+                                <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                    {{ name|verbose_name }}<br>
+                                    <small>
+                                        {{ name|doc }}
+                                    </small>
+                                </button>
+                                <div slot="modal"></div>
+                            </pb-modal-button>
                         </li>
                         {% endfor %}
                     </ul>
diff --git a/passbook/admin/templates/administration/policy/list.html b/passbook/admin/templates/administration/policy/list.html
index 5bd443a0d..b5361e659 100644
--- a/passbook/admin/templates/administration/policy/list.html
+++ b/passbook/admin/templates/administration/policy/list.html
@@ -28,12 +28,15 @@
                         <ul class="pf-c-dropdown__menu" hidden>
                             {% for type, name in types.items %}
                             <li>
-                                <a class="pf-c-dropdown__menu-item" href="{% url 'passbook_admin:policy-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                    {{ name|verbose_name }}<br>
-                                    <small>
-                                        {{ name|doc }}
-                                    </small>
-                                </a>
+                                <pb-modal-button href="{% url 'passbook_admin:policy-create' %}?type={{ type }}">
+                                    <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                        {{ name|verbose_name }}<br>
+                                        <small>
+                                            {{ name|doc }}
+                                        </small>
+                                    </button>
+                                    <div slot="modal"></div>
+                                </pb-modal-button>
                             </li>
                             {% endfor %}
                         </ul>
@@ -71,9 +74,24 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:policy-update' pk=policy.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-tertiary" href="{% url 'passbook_admin:policy-test' pk=policy.pk %}?back={{ request.get_full_path }}">{% trans 'Test' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:policy-delete' pk=policy.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:policy-update' pk=policy.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:policy-test' pk=policy.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-tertiary">
+                                {% trans 'Test' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:policy-delete' pk=policy.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -109,13 +127,15 @@
                     <ul class="pf-c-dropdown__menu" hidden>
                         {% for type, name in types.items %}
                         <li>
-                            <a class="pf-c-dropdown__menu-item"
-                                href="{% url 'passbook_admin:policy-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                {{ name|verbose_name }}<br>
-                                <small>
-                                    {{ name|doc }}
-                                </small>
-                            </a>
+                            <pb-modal-button href="{% url 'passbook_admin:policy-create' %}?type={{ type }}">
+                                <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                    {{ name|verbose_name }}<br>
+                                    <small>
+                                        {{ name|doc }}
+                                    </small>
+                                </button>
+                                <div slot="modal"></div>
+                            </pb-modal-button>
                         </li>
                         {% endfor %}
                     </ul>
diff --git a/passbook/admin/templates/administration/policy/test.html b/passbook/admin/templates/administration/policy/test.html
index 0c8e21169..ae4ebf84c 100644
--- a/passbook/admin/templates/administration/policy/test.html
+++ b/passbook/admin/templates/administration/policy/test.html
@@ -9,24 +9,3 @@
 {% block action %}
 {% trans 'Test' %}
 {% endblock %}
-
-{% block beneath_form %}
-<div class="pf-c-form__group pf-m-action" style="display: none;" id="loading">
-    <div class="pf-c-form__horizontal-group">
-        <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
-            <span class="pf-c-spinner__clipper"></span>
-            <span class="pf-c-spinner__lead-ball"></span>
-            <span class="pf-c-spinner__tail-ball"></span>
-        </span>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-{{ block.super }}
-<script>
-document.querySelector("form").addEventListener("submit", (e) => {
-    document.getElementById("loading").removeAttribute("style");
-});
-</script>
-{% endblock %}
diff --git a/passbook/admin/templates/administration/policy_binding/list.html b/passbook/admin/templates/administration/policy_binding/list.html
index 0e852e6bf..332a4d3c7 100644
--- a/passbook/admin/templates/administration/policy_binding/list.html
+++ b/passbook/admin/templates/administration/policy_binding/list.html
@@ -19,8 +19,15 @@
         <div class="pf-c-toolbar">
             <div class="pf-c-toolbar__content">
                 <div class="pf-c-toolbar__bulk-select">
-                    <a href="{% url 'passbook_admin:policy-binding-create' %}?back={{ request.get_full_path }}"
-                        class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                    <pb-modal-button href="{% url 'passbook_admin:policy-binding-create' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                            {% trans 'Create' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -66,9 +73,19 @@
                         <th role="cell">
                             <div>{{ binding.timeout }}</div>
                         </th>
-                        <td class="pb-table-action" role="cell">
-                            <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:policy-binding-update' pk=binding.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                            <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:policy-binding-delete' pk=binding.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <td>
+                            <pb-modal-button href="{% url 'passbook_admin:policy-binding-update' pk=binding.pk %}">
+                                <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                    {% trans 'Edit' %}
+                                </button>
+                                <div slot="modal"></div>
+                            </pb-modal-button>
+                            <pb-modal-button href="{% url 'passbook_admin:policy-binding-delete' pk=binding.pk %}">
+                                <button slot="trigger" class="pf-c-button pf-m-danger">
+                                    {% trans 'Delete' %}
+                                </button>
+                                <div slot="modal"></div>
+                            </pb-modal-button>
                         </td>
                     </tr>
                     {% endfor %}
@@ -88,7 +105,12 @@
                 <div class="pf-c-empty-state__body">
                     {% trans 'Currently no policy bindings exist. Click the button below to create one.' %}
                 </div>
-                <a href="{% url 'passbook_admin:policy-binding-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                <pb-modal-button href="{% url 'passbook_admin:policy-binding-create' %}">
+                    <button slot="trigger" class="pf-c-button pf-m-primary">
+                        {% trans 'Create' %}
+                    </button>
+                    <div slot="modal"></div>
+                </pb-modal-button>
             </div>
         </div>
         {% endif %}
diff --git a/passbook/admin/templates/administration/property_mapping/list.html b/passbook/admin/templates/administration/property_mapping/list.html
index cd720c592..bc281eb2e 100644
--- a/passbook/admin/templates/administration/property_mapping/list.html
+++ b/passbook/admin/templates/administration/property_mapping/list.html
@@ -29,17 +29,22 @@
                         <ul class="pf-c-dropdown__menu" hidden>
                             {% for type, name in types.items %}
                             <li>
-                                <a class="pf-c-dropdown__menu-item"
-                                    href="{% url 'passbook_admin:property-mapping-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                    {{ name|verbose_name }}<br>
-                                    <small>
-                                        {{ name|doc }}
-                                    </small>
-                                </a>
+                                <pb-modal-button href="{% url 'passbook_admin:property-mapping-create' %}?type={{ type }}">
+                                    <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                        {{ name|verbose_name }}<br>
+                                        <small>
+                                            {{ name|doc }}
+                                        </small>
+                                    </button>
+                                    <div slot="modal"></div>
+                                </pb-modal-button>
                             </li>
                             {% endfor %}
                         </ul>
                     </pb-dropdown>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -66,8 +71,18 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:property-mapping-update' pk=property_mapping.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:property-mapping-delete' pk=property_mapping.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:property-mapping-update' pk=property_mapping.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:property-mapping-delete' pk=property_mapping.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -103,13 +118,15 @@
                     <ul class="pf-c-dropdown__menu" hidden>
                         {% for type, name in types.items %}
                         <li>
-                            <a class="pf-c-dropdown__menu-item"
-                                href="{% url 'passbook_admin:property-mapping-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                {{ name|verbose_name }}<br>
-                                <small>
-                                    {{ name|doc }}
-                                </small>
-                            </a>
+                            <pb-modal-button href="{% url 'passbook_admin:property-mapping-create' %}?type={{ type }}">
+                                <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                    {{ name|verbose_name }}<br>
+                                    <small>
+                                        {{ name|doc }}
+                                    </small>
+                                </button>
+                                <div slot="modal"></div>
+                            </pb-modal-button>
                         </li>
                         {% endfor %}
                     </ul>
diff --git a/passbook/admin/templates/administration/provider/list.html b/passbook/admin/templates/administration/provider/list.html
index 363ddef29..c7a99d1da 100644
--- a/passbook/admin/templates/administration/provider/list.html
+++ b/passbook/admin/templates/administration/provider/list.html
@@ -30,16 +30,22 @@
                         <ul class="pf-c-dropdown__menu" hidden>
                             {% for type, name in types.items %}
                             <li>
-                                <a class="pf-c-dropdown__menu-item" href="{% url 'passbook_admin:provider-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                    {{ name|verbose_name }}<br>
-                                    <small>
-                                        {{ name|doc }}
-                                    </small>
-                                </a>
+                                <pb-modal-button href="{% url 'passbook_admin:provider-create' %}?type={{ type }}">
+                                    <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                        {{ name|verbose_name }}<br>
+                                        <small>
+                                            {{ name|doc }}
+                                        </small>
+                                    </button>
+                                    <div slot="modal"></div>
+                                </pb-modal-button>
                             </li>
                             {% endfor %}
                         </ul>
                     </pb-dropdown>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -77,8 +83,18 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:provider-update' pk=provider.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:provider-delete' pk=provider.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:provider-update' pk=provider.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:provider-delete' pk=provider.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                         {% get_links provider as links %}
                         {% for name, href in links.items %}
                             <a class="pf-c-button pf-m-tertiary" href="{{ href }}?back={{ request.get_full_path }}">{% trans name %}</a>
@@ -122,12 +138,15 @@
                     <ul class="pf-c-dropdown__menu" hidden>
                         {% for type, name in types.items %}
                         <li>
-                            <a class="pf-c-dropdown__menu-item" href="{% url 'passbook_admin:provider-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                {{ name|verbose_name }}<br>
-                                <small>
-                                    {{ name|doc }}
-                                </small>
-                            </a>
+                            <pb-modal-button href="{% url 'passbook_admin:provider-create' %}?type={{ type }}">
+                                <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                    {{ name|verbose_name }}<br>
+                                    <small>
+                                        {{ name|doc }}
+                                    </small>
+                                </button>
+                                <div slot="modal"></div>
+                            </pb-modal-button>
                         </li>
                         {% endfor %}
                     </ul>
diff --git a/passbook/admin/templates/administration/source/list.html b/passbook/admin/templates/administration/source/list.html
index af87da48f..38ee8a78d 100644
--- a/passbook/admin/templates/administration/source/list.html
+++ b/passbook/admin/templates/administration/source/list.html
@@ -30,16 +30,22 @@
                         <ul class="pf-c-dropdown__menu" hidden>
                             {% for type, name in types.items %}
                             <li>
-                                <a class="pf-c-dropdown__menu-item" href="{% url 'passbook_admin:source-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                    {{ name|verbose_name }}<br>
-                                    <small>
-                                        {{ name|doc }}
-                                    </small>
-                                </a>
+                                <pb-modal-button href="{% url 'passbook_admin:source-create' %}?type={{ type }}">
+                                    <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                        {{ name|verbose_name }}<br>
+                                        <small>
+                                            {{ name|doc }}
+                                        </small>
+                                    </button>
+                                    <div slot="modal"></div>
+                                </pb-modal-button>
                             </li>
                             {% endfor %}
                         </ul>
                     </pb-dropdown>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -75,8 +81,18 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:source-update' pk=source.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:source-delete' pk=source.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:source-update' pk=source.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:source-delete' pk=source.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                         {% get_links source as links %}
                         {% for name, href in links %}
                             <a class="pf-c-button pf-m-tertiary" href="{{ href }}?back={{ request.get_full_path }}">{% trans name %}</a>
@@ -116,12 +132,15 @@
                     <ul class="pf-c-dropdown__menu" hidden>
                         {% for type, name in types.items %}
                         <li>
-                            <a class="pf-c-dropdown__menu-item" href="{% url 'passbook_admin:source-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                {{ name|verbose_name }}<br>
-                                <small>
-                                    {{ name|doc }}
-                                </small>
-                            </a>
+                            <pb-modal-button href="{% url 'passbook_admin:source-create' %}?type={{ type }}">
+                                <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                    {{ name|verbose_name }}<br>
+                                    <small>
+                                        {{ name|doc }}
+                                    </small>
+                                </button>
+                                <div slot="modal"></div>
+                            </pb-modal-button>
                         </li>
                         {% endfor %}
                     </ul>
diff --git a/passbook/admin/templates/administration/stage/list.html b/passbook/admin/templates/administration/stage/list.html
index 2bea8be3a..abf9c36f6 100644
--- a/passbook/admin/templates/administration/stage/list.html
+++ b/passbook/admin/templates/administration/stage/list.html
@@ -29,16 +29,22 @@
                         <ul class="pf-c-dropdown__menu" hidden>
                             {% for type, name in types.items %}
                             <li>
-                                <a class="pf-c-dropdown__menu-item" href="{% url 'passbook_admin:stage-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                    {{ name|verbose_name }}<br>
-                                    <small>
-                                        {{ name|doc }}
-                                    </small>
-                                </a>
+                                <pb-modal-button href="{% url 'passbook_admin:stage-create' %}?type={{ type }}">
+                                    <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                        {{ name|verbose_name }}<br>
+                                        <small>
+                                            {{ name|doc }}
+                                        </small>
+                                    </button>
+                                    <div slot="modal"></div>
+                                </pb-modal-button>
                             </li>
                             {% endfor %}
                         </ul>
                     </pb-dropdown>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -63,15 +69,25 @@
                     <td role="cell">
                         <ul>
                             {% for flow in stage.flow_set.all %}
-                            <li><a href="{% url 'passbook_admin:flow-update' pk=flow.pk %}">{{ flow.slug }}</a></li>
+                            <li>{{ flow.slug }}<</li>
                             {% empty %}
                             <li>-</li>
                             {% endfor %}
                         </ul>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:stage-update' pk=stage.stage_uuid %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:stage-delete' pk=stage.stage_uuid %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:stage-update' pk=stage.stage_uuid %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:stage-delete' pk=stage.stage_uuid %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                         {% get_links stage as links %}
                         {% for name, href in links.items %}
                         <a class="pf-c-button pf-m-tertiary" href="{{ href }}?back={{ request.get_full_path }}">{% trans name %}</a>
@@ -111,13 +127,15 @@
                     <ul class="pf-c-dropdown__menu" hidden>
                         {% for type, name in types.items %}
                         <li>
-                            <a class="pf-c-dropdown__menu-item"
-                                href="{% url 'passbook_admin:stage-create' %}?type={{ type }}&back={{ request.get_full_path }}">
-                                {{ name|verbose_name }}<br>
-                                <small>
-                                    {{ name|doc }}
-                                </small>
-                            </a>
+                            <pb-modal-button href="{% url 'passbook_admin:stage-create' %}?type={{ type }}">
+                                <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                    {{ name|verbose_name }}<br>
+                                    <small>
+                                        {{ name|doc }}
+                                    </small>
+                                </button>
+                                <div slot="modal"></div>
+                            </pb-modal-button>
                         </li>
                         {% endfor %}
                     </ul>
diff --git a/passbook/admin/templates/administration/stage_binding/list.html b/passbook/admin/templates/administration/stage_binding/list.html
index 2f2c058e0..1fa1c777c 100644
--- a/passbook/admin/templates/administration/stage_binding/list.html
+++ b/passbook/admin/templates/administration/stage_binding/list.html
@@ -19,8 +19,15 @@
         <div class="pf-c-toolbar">
             <div class="pf-c-toolbar__content">
                 <div class="pf-c-toolbar__bulk-select">
-                    <a href="{% url 'passbook_admin:stage-binding-create' %}?back={{ request.get_full_path }}"
-                        class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                    <pb-modal-button href="{% url 'passbook_admin:stage-binding-create' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                            {% trans 'Create' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -73,8 +80,18 @@
                             </div>
                         </td>
                         <td>
-                            <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:stage-binding-update' pk=binding.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                            <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:stage-binding-delete' pk=binding.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                            <pb-modal-button href="{% url 'passbook_admin:stage-binding-update' pk=binding.pk %}">
+                                <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                    {% trans 'Update' %}
+                                </button>
+                                <div slot="modal"></div>
+                            </pb-modal-button>
+                            <pb-modal-button href="{% url 'passbook_admin:stage-binding-delete' pk=binding.pk %}">
+                                <button slot="trigger" class="pf-c-button pf-m-danger">
+                                    {% trans 'Delete' %}
+                                </button>
+                                <div slot="modal"></div>
+                            </pb-modal-button>
                         </td>
                     </tr>
                     {% endfor %}
@@ -94,7 +111,12 @@
                 <div class="pf-c-empty-state__body">
                     {% trans 'Currently no flow-stage bindings exist. Click the button below to create one.' %}
                 </div>
-                <a href="{% url 'passbook_admin:certificatekeypair-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                <pb-modal-button href="{% url 'passbook_admin:stage-binding-create' %}">
+                    <button slot="trigger" class="pf-c-button pf-m-primary">
+                        {% trans 'Create' %}
+                    </button>
+                    <div slot="modal"></div>
+                </pb-modal-button>
             </div>
         </div>
         {% endif %}
diff --git a/passbook/admin/templates/administration/stage_invitation/list.html b/passbook/admin/templates/administration/stage_invitation/list.html
index 1e420f597..752fb81fc 100644
--- a/passbook/admin/templates/administration/stage_invitation/list.html
+++ b/passbook/admin/templates/administration/stage_invitation/list.html
@@ -21,8 +21,15 @@
             <div class="pf-c-toolbar__content">
                 {% include 'partials/toolbar_search.html' %}
                 <div class="pf-c-toolbar__bulk-select">
-                    <a href="{% url 'passbook_admin:stage-invitation-create' %}?back={{ request.get_full_path }}"
-                        class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                    <pb-modal-button href="{% url 'passbook_admin:stage-invitation-create' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                            {% trans 'Create' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -49,7 +56,12 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:stage-invitation-delete' pk=invitation.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:stage-invitation-delete' pk=invitation.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                     </td>
                 </tr>
                 {% endfor %}
@@ -77,7 +89,12 @@
                     {% trans 'Currently no invitations exist. Click the button below to create one.' %}
                 {% endif %}
                 </div>
-                <a href="{% url 'passbook_admin:stage-invitation-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                <pb-modal-button href="{% url 'passbook_admin:stage-invitation-create' %}">
+                    <button slot="trigger" class="pf-c-button pf-m-primary">
+                        {% trans 'Create' %}
+                    </button>
+                    <div slot="modal"></div>
+                </pb-modal-button>
             </div>
         </div>
         {% endif %}
diff --git a/passbook/admin/templates/administration/stage_prompt/list.html b/passbook/admin/templates/administration/stage_prompt/list.html
index ca5ff289f..332f2af0d 100644
--- a/passbook/admin/templates/administration/stage_prompt/list.html
+++ b/passbook/admin/templates/administration/stage_prompt/list.html
@@ -21,7 +21,15 @@
             <div class="pf-c-toolbar__content">
                 {% include 'partials/toolbar_search.html' %}
                 <div class="pf-c-toolbar__bulk-select">
-                    <a href="{% url 'passbook_admin:stage-prompt-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                    <pb-modal-button href="{% url 'passbook_admin:stage-prompt-create' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                            {% trans 'Create' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -63,15 +71,25 @@
                     <td role="cell">
                         <ul>
                             {% for flow in prompt.flow_set.all %}
-                            <li><a href="{% url 'passbook_admin:flow-update' pk=flow.pk %}">{{ flow.slug }}</a></li>
+                            <li>{{ flow.slug }}</li>
                             {% empty %}
                             <li>-</li>
                             {% endfor %}
                         </ul>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:stage-prompt-update' pk=prompt.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:stage-prompt-delete' pk=prompt.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:stage-prompt-update' pk=prompt.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Update' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:stage-prompt-delete' pk=prompt.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                         {% get_links prompt as links %}
                         {% for name, href in links.items %}
                         <a class="pf-c-button pf-m-tertiary" href="{{ href }}?back={{ request.get_full_path }}">{% trans name %}</a>
diff --git a/passbook/admin/templates/administration/token/list.html b/passbook/admin/templates/administration/token/list.html
index e2a43e4d5..a24cd3567 100644
--- a/passbook/admin/templates/administration/token/list.html
+++ b/passbook/admin/templates/administration/token/list.html
@@ -58,7 +58,12 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:token-delete' pk=token.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:token-delete' pk=token.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                     </td>
                 </tr>
                 {% endfor %}
diff --git a/passbook/admin/templates/administration/user/list.html b/passbook/admin/templates/administration/user/list.html
index 7868b95b9..45ae6745f 100644
--- a/passbook/admin/templates/administration/user/list.html
+++ b/passbook/admin/templates/administration/user/list.html
@@ -19,7 +19,15 @@
             <div class="pf-c-toolbar__content">
                 {% include 'partials/toolbar_search.html' %}
                 <div class="pf-c-toolbar__bulk-select">
-                    <a href="{% url 'passbook_admin:user-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                    <pb-modal-button href="{% url 'passbook_admin:user-create' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                            {% trans 'Create' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -53,11 +61,26 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:user-update' pk=user.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:user-update' pk=user.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Update' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                         {% if user.is_active %}
-                        <a class="pf-c-button pf-m-warning" href="{% url 'passbook_admin:user-disable' pk=user.pk %}?back={{ request.get_full_path }}">{% trans 'Disable' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:user-disable' pk=user.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-warning">
+                                {% trans 'Disable' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                         {% else %}
-                        <a class="pf-c-button pf-m-primary" href="{% url 'passbook_admin:user-enable' pk=user.pk %}?back={{ request.get_full_path }}">{% trans 'Enable' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:user-delete' pk=user.pk %}">
+                            <button slot="trigger" class="pf-c-button pf-m-primary">
+                                {% trans 'Enable' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                         {% endif %}
                         <a class="pf-c-button pf-m-tertiary" href="{% url 'passbook_admin:user-password-reset' pk=user.pk %}?back={{ request.get_full_path }}">{% trans 'Reset Password' %}</a>
                         <a class="pf-c-button pf-m-tertiary" href="{% url 'passbook_core:impersonate-init' user_id=user.pk %}">{% trans 'Impersonate' %}</a>
@@ -88,7 +111,12 @@
                     {% trans 'Currently no users exist. How did you even get here.' %}
                 {% endif %}
                 </div>
-                <a href="{% url 'passbook_admin:user-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                <pb-modal-button href="{% url 'passbook_admin:user-create' %}">
+                    <button slot="trigger" class="pf-c-button pf-m-primary">
+                        {% trans 'Create' %}
+                    </button>
+                    <div slot="modal"></div>
+                </pb-modal-button>
             </div>
         </div>
         {% endif %}