From d3a96ac7aa3a8e770e6c004da9958daad36a0f1a Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 4 Oct 2020 00:29:18 +0200
Subject: [PATCH] outposts: load token async

---
 .../outposts/templates/outposts/deployment_modal.html |  2 +-
 passbook/static/static/passbook/passbook.js           | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/passbook/outposts/templates/outposts/deployment_modal.html b/passbook/outposts/templates/outposts/deployment_modal.html
index 831068233..7ebbf6171 100644
--- a/passbook/outposts/templates/outposts/deployment_modal.html
+++ b/passbook/outposts/templates/outposts/deployment_modal.html
@@ -24,7 +24,7 @@
                         <label class="pf-c-form__label" for="help-text-simple-form-name">
                             <span class="pf-c-form__label-text">PASSBOOK_TOKEN</span>
                         </label>
-                        <input class="pf-c-form-control" readonly type="text" value="{{ outpost.token.token_uuid.hex }}" />
+                        <input class="pf-c-form-control" data-pb-fetch-key="pk" data-pb-fetch-fill="{% url 'passbook_api:token-detail' 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">
diff --git a/passbook/static/static/passbook/passbook.js b/passbook/static/static/passbook/passbook.js
index 948b2ca6e..1b9c65b5e 100644
--- a/passbook/static/static/passbook/passbook.js
+++ b/passbook/static/static/passbook/passbook.js
@@ -7,6 +7,7 @@ document.querySelectorAll("button.pf-c-dropdown__toggle").forEach((b) => {
     });
 });
 
+// Search clearing
 document.querySelectorAll("input[type=search]").forEach((si) => {
     si.addEventListener("search", (e) => {
         if (si.value === "") {
@@ -15,6 +16,16 @@ document.querySelectorAll("input[type=search]").forEach((si) => {
     });
 });
 
+// Fetch from data-attributes
+document.querySelectorAll("[data-pb-fetch-fill]").forEach((el) => {
+    const url = el.dataset.pbFetchFill;
+    const key = el.dataset.pbFetchKey;
+    fetch(url).then(r => r.json()).then(r => {
+        el.textContent = r[key];
+        el.value = r[key];
+    });
+});
+
 // Modal
 document.querySelectorAll("[data-target='modal']").forEach((m) => {
     m.addEventListener("click", (e) => {