Handle authorization problems when saving article with JS

assets/script.js

@@ -20,6 +20,38 @@ function isEdited(form) {
     return false;
 }
 
+function loginDialog(loginUrl) {
+    const loginDialogHtml = "<div class=popup><p>Your changes could not be saved</p><p>Log in and try again</p><div><button>Never mind</button> <a href='' target=login>Open login page</a></div></div>";
+
+    const dialog = document.createElement("div");
+    dialog.className = "modal-block";
+    dialog.innerHTML = loginDialogHtml;
+
+    const loginLink = dialog.querySelector("a");
+    const dismiss = dialog.querySelector("button");
+
+    loginLink.setAttribute("href", loginUrl);
+
+    document.body.appendChild(dialog);
+    loginLink.focus();
+
+    function remove() {
+        document.body.removeChild(dialog);
+    }
+
+    return new Promise((resolve, reject) => {
+        loginLink.addEventListener("click", () => {
+            remove();
+            resolve();
+        });
+
+        dismiss.addEventListener("click", () => {
+            remove();
+            resolve();
+        });
+    });
+}
+
 let hasBeenOpen = false;
 function openEditor() {
     const container = document.querySelector(".container");
@@ -53,6 +85,7 @@ function openEditor() {
 
         const body = queryArgsFromForm(form);
         textarea.disabled = true;
+        // TODO Disable other interaction as well: title editor, cancel and OK buttons
 
         fetch(
             form.getAttribute("action"),
@@ -65,10 +98,17 @@ function openEditor() {
                 credentials: "same-origin",
             }
         ).then(response => {
+            if ((response.status === 401) && (response.headers.has("location"))) {
+                return loginDialog(response.headers.get("location"))
+                    .then(() => {
+                        textarea.disabled = false;
+                    });
+            }
+
             if (!response.ok) throw new Error("Unexpected status code (" + response.status + ")");
 
-            return response.json();
-        }).then(result => {
+            return response.json()
+                .then(result => {
                     // Update url-bar, page title and footer
                     window.history.replaceState(null, result.title, result.slug == "" ? "." : result.slug);
                     document.querySelector("title").textContent = result.title;
@@ -98,6 +138,7 @@ function openEditor() {
                         alert("Your edit came into conflict with another change and has not been saved.\n" +
                             "Please resolve the merge conflict and save again.");
                     }
+                });
         }).catch(err => {
             textarea.disabled = false;
             console.error(err);

assets/style.css

@@ -431,6 +431,29 @@ input[type="search"] {
     background: #ceb;
 }
 
+.modal-block {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+}
+
+.popup {
+    position: fixed;
+
+    width: 300px;
+    left: calc(50% - 150px);
+
+    height: 150px;
+    top: calc(50% - 75px);
+
+    text-align: center;
+    background: #eee;
+    box-shadow: 2px 2px 8px rgba(0,0,0, 0.25);
+}
+
 @media print {
     @page {
         margin: 25mm;