Merge pull request #321 from dunglas/feat/debug-authorization

feat: add support for the Authorization header in the UI
dunglas · Jun 8, 2020 · 002982b · 002982b
2 parents cb0f717 + 177677c
commit 002982b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/public/app.js b/public/app.js
@@ -79,13 +79,13 @@ foo`;
         if (hubUrl) settingsForm.hubUrl.value = new URL(hubUrl, topic.value);
 
         const subscribeTopics = subscribeForm.topics;
-        if (!subscribeTopics.value) subscribeTopics.value = topic.value;
+        if (subscribeTopics.value === "https://example.com/my-private-topic")
+          subscribeTopics.value = topic.value;
 
         // Set publish default values
         const publishTopics = publishForm.topics;
-        if (!publishTopics.value) {
+        if (publishTopics.value === "https://example.com/my-private-topic")
           publishTopics.value = topic.value;
-        }
 
         return response.text();
       })
@@ -99,11 +99,6 @@ foo`;
   subscribeForm.onsubmit = function (e) {
     e.preventDefault();
 
-    if (settingsForm.authorization.value === "header") {
-      alert("EventSource do not support setting HTTP headers.");
-      return;
-    }
-
     eventSource && eventSource.close();
     updates.innerText = "No updates pushed yet.";
 
@@ -118,7 +113,15 @@ foo`;
       u.searchParams.append("Last-Event-ID", lastEventId.value);
 
     let ol = null;
-    eventSource = new EventSource(u);
+    if (settingsForm.authorization.value === "header") {
+      eventSource = new EventSourcePolyfill(u, {
+        headers: {
+          Authorization: `Bearer ${settingsForm.jwt.value}`,
+        },
+      });
+    } else {
+      eventSource = new EventSource(u);
+    }
     eventSource.onmessage = function (e) {
       if (!ol) {
         ol = document.createElement("ol");

diff --git a/public/index.html b/public/index.html
@@ -43,11 +43,11 @@ <h2 class="title">Settings</h2>
 
                         <div class="control">
                             <label class="radio">
-                                <input type="radio" name="authorization" value="cookie" checked>
+                                <input type="radio" name="authorization" value="cookie">
                                 <code>mercureAuthorization</code> cookie
                             </label>
                             <label class="radio">
-                                <input type="radio" name="authorization" value="header">
+                                <input type="radio" name="authorization" value="header" checked>
                                 <code>Authorization</code> HTTP Header
                             </label>
                         </div>
@@ -119,7 +119,7 @@ <h2 class="title">Subscribe</h2>
                         <div class="field">
                             <label class="label" for="subscribeTopics">Topics to get updates for*</label>
                             <div class="control">
-                                <textarea class="textarea" name="topics" id="subscribeTopics" required></textarea>
+                                <textarea class="textarea" name="topics" id="subscribeTopics" required>https://example.com/my-private-topic</textarea>
                             </div>
 
                             <div class="help">
@@ -162,7 +162,7 @@ <h2 class="title">Publish</h2>
                     <div class="field">
                         <label class="label" for="publishTopics">Topics*</label>
                         <div class="control">
-                            <textarea class="textarea" name="topics" id="publishTopics" required></textarea>
+                            <textarea class="textarea" name="topics" id="publishTopics" required>https://example.com/my-private-topic</textarea>
                         </div>
 
                         <p class="help">
@@ -211,6 +211,8 @@ <h2 class="title">Publish</h2>
         </div>
     </div>
 
+    <!-- Only necessary to use the Authorization header with EventSource (discouraged in a browser) -->
+    <script src="https://cdn.jsdelivr.net/npm/event-source-polyfill@1"></script>
     <script src="app.js"></script>
 </body>