From 1b6bd5b997b49dc9c740da5e3edbf54907a9c969 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 22 Nov 2020 21:43:36 +0100
Subject: [PATCH] outposts: update modal to pb-modal-button

---
 .../templates/outposts/deployment_modal.html  | 76 +++++++++----------
 .../providers/oauth2/setup_url_modal.html     |  1 +
 .../providers/saml/admin_metadata_modal.html  |  2 +-
 3 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/passbook/outposts/templates/outposts/deployment_modal.html b/passbook/outposts/templates/outposts/deployment_modal.html
index f18b2a7bc..37399823d 100644
--- a/passbook/outposts/templates/outposts/deployment_modal.html
+++ b/passbook/outposts/templates/outposts/deployment_modal.html
@@ -1,44 +1,40 @@
 {% load i18n %}
-{% load static %}
-<button class="pf-c-button pf-m-tertiary" data-target="modal" data-modal="saml-{{ provider.pk }}">{% trans 'View Deployment Info' %}</button>
 
-<div class="pf-c-backdrop" id="saml-{{ provider.pk }}" hidden>
-    <div class="pf-l-bullseye">
-        <div class="pf-c-modal-box pf-m-lg" role="dialog">
-            <button data-modal-close class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
-                <i class="fas fa-times" aria-hidden="true"></i>
-            </button>
-            <div class="pf-c-modal-box__header">
-                <h1 class="pf-c-title pf-m-2xl" id="modal-title">{% trans 'Outpost Deployment Info' %}</h1>
-            </div>
-            <div class="pf-c-modal-box__body" id="modal-description">
-                <p><a href="https://passbook.beryju.org/docs/outposts/outposts/#deploy">{% trans 'View deployment documentation' %}</a></p>
-                <form class="pf-c-form">
-                    <div class="pf-c-form__group">
-                        <label class="pf-c-form__label" for="help-text-simple-form-name">
-                            <span class="pf-c-form__label-text">PASSBOOK_HOST</span>
-                        </label>
-                        <input class="pf-c-form-control" readonly type="text" value="{{ full_url }}" />
-                    </div>
-                    <div class="pf-c-form__group">
-                        <label class="pf-c-form__label" for="help-text-simple-form-name">
-                            <span class="pf-c-form__label-text">PASSBOOK_TOKEN</span>
-                        </label>
-                        {# TODO: Only load key on modal open #}
-                        <input class="pf-c-form-control" data-pb-fetch-key="key" data-pb-fetch-fill="{% url 'passbook_api:token-view-key' identifier=outpost.token_identifier %}" readonly type="text" value="" />
-                    </div>
-                    <h3>{% trans 'If your passbook Instance is using a self-signed certificate, set this value.' %}</h3>
-                    <div class="pf-c-form__group">
-                        <label class="pf-c-form__label" for="help-text-simple-form-name">
-                            <span class="pf-c-form__label-text">PASSBOOK_INSECURE</span>
-                        </label>
-                        <input class="pf-c-form-control" readonly type="text" value="true" />
-                    </div>
-                </form>
-            </div>
-            <footer class="pf-c-modal-box__footer pf-m-align-left">
-                <button data-modal-close class="pf-c-button pf-m-primary" type="button">{% trans 'Close' %}</button>
-            </footer>
+<pb-modal-button>
+    <button slot="trigger" class="pf-c-button pf-m-tertiary">
+        {% trans 'View Deployment Info' %}
+    </button>
+    <div slot="modal">
+        <div class="pf-c-modal-box__header">
+            <h1 class="pf-c-title pf-m-2xl" id="modal-title">{% trans 'Outpost Deployment Info' %}</h1>
         </div>
+        <div class="pf-c-modal-box__body" id="modal-description">
+            <p><a href="https://passbook.beryju.org/docs/outposts/outposts/#deploy">{% trans 'View deployment documentation' %}</a></p>
+            <form class="pf-c-form">
+                <div class="pf-c-form__group">
+                    <label class="pf-c-form__label" for="help-text-simple-form-name">
+                        <span class="pf-c-form__label-text">PASSBOOK_HOST</span>
+                    </label>
+                    <input class="pf-c-form-control" readonly type="text" value="{{ full_url }}" />
+                </div>
+                <div class="pf-c-form__group">
+                    <label class="pf-c-form__label" for="help-text-simple-form-name">
+                        <span class="pf-c-form__label-text">PASSBOOK_TOKEN</span>
+                    </label>
+                    {# TODO: Only load key on modal open #}
+                    <input class="pf-c-form-control" data-pb-fetch-key="key" data-pb-fetch-fill="{% url 'passbook_api:token-view-key' identifier=outpost.token_identifier %}" readonly type="text" value="" />
+                </div>
+                <h3>{% trans 'If your passbook Instance is using a self-signed certificate, set this value.' %}</h3>
+                <div class="pf-c-form__group">
+                    <label class="pf-c-form__label" for="help-text-simple-form-name">
+                        <span class="pf-c-form__label-text">PASSBOOK_INSECURE</span>
+                    </label>
+                    <input class="pf-c-form-control" readonly type="text" value="true" />
+                </div>
+            </form>
+        </div>
+        <footer class="pf-c-modal-box__footer pf-m-align-left">
+            <a class="pf-c-button pf-m-primary">{% trans 'Close' %}</a>
+        </footer>
     </div>
-</div>
+</pb-modal-button>
diff --git a/passbook/providers/oauth2/templates/providers/oauth2/setup_url_modal.html b/passbook/providers/oauth2/templates/providers/oauth2/setup_url_modal.html
index 911b61e62..b69f47ae4 100644
--- a/passbook/providers/oauth2/templates/providers/oauth2/setup_url_modal.html
+++ b/passbook/providers/oauth2/templates/providers/oauth2/setup_url_modal.html
@@ -1,4 +1,5 @@
 {% load i18n %}
+
 <pb-modal-button>
     <button slot="trigger" class="pf-c-button pf-m-tertiary">
         {% trans 'View Setup URLs' %}
diff --git a/passbook/providers/saml/templates/providers/saml/admin_metadata_modal.html b/passbook/providers/saml/templates/providers/saml/admin_metadata_modal.html
index e535dd14e..2ca2290b8 100644
--- a/passbook/providers/saml/templates/providers/saml/admin_metadata_modal.html
+++ b/passbook/providers/saml/templates/providers/saml/admin_metadata_modal.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-{% load static %}
+
 <pb-modal-button>
     <button slot="trigger" class="pf-c-button pf-m-tertiary">
         {% trans 'View Metadata' %}