From 33516ef8101530e931fd6cbff3977b55ae1af7a5 Mon Sep 17 00:00:00 2001
From: charludo <github@charlotteharludo.com>
Date: Mon, 5 Feb 2024 15:08:10 +0100
Subject: [PATCH] Update page link before submitting page form

---
 integreat_cms/cms/templates/pages/page_form.html      |  5 ++++-
 integreat_cms/static/src/js/forms/update-permalink.ts | 11 +++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/integreat_cms/cms/templates/pages/page_form.html b/integreat_cms/cms/templates/pages/page_form.html
index 80e55b5d43..2988fd4427 100644
--- a/integreat_cms/cms/templates/pages/page_form.html
+++ b/integreat_cms/cms/templates/pages/page_form.html
@@ -55,7 +55,10 @@ <h1 class="heading">
                         <button name="status" value="{{ DRAFT }}" class="btn btn-outline">
                             {% translate "Save as draft" %}
                         </button>
-                        <button name="status" value="{{ PUBLIC }}" class="btn whitespace-nowrap">
+                        <button name="status"
+                                id="update-or-publish-button"
+                                value="{{ PUBLIC }}"
+                                class="btn whitespace-nowrap">
                             {% if page_translation_form.instance.status == PUBLIC %}
                                 {% translate "Update" %}
                             {% else %}
diff --git a/integreat_cms/static/src/js/forms/update-permalink.ts b/integreat_cms/static/src/js/forms/update-permalink.ts
index cd5772e50a..bb70c68a20 100644
--- a/integreat_cms/static/src/js/forms/update-permalink.ts
+++ b/integreat_cms/static/src/js/forms/update-permalink.ts
@@ -44,12 +44,23 @@ window.addEventListener("load", () => {
         (document.querySelector('[for="id_title"]') as HTMLElement)?.dataset?.slugifyUrl
     ) {
         document.getElementById("id_title").addEventListener("focusout", ({ target }) => {
+            const submitButton = document.querySelector("#update-or-publish-button") as HTMLButtonElement;
+            let submitButtonClicked = false;
+            const submissionPrevention = (e: Event) => {
+                submitButtonClicked = true;
+                e.preventDefault();
+            };
+            submitButton.addEventListener("click", submissionPrevention);
             const currentTitle = (target as HTMLInputElement).value;
             const url = (document.querySelector('[for="id_title"]') as HTMLElement).dataset.slugifyUrl;
             slugify(url, { title: currentTitle }).then((response) => {
                 /* on success write response to both slug field and permalink */
                 slugField.value = response.unique_slug;
                 updatePermalink(response.unique_slug);
+                submitButton.removeEventListener("click", submissionPrevention);
+                if (submitButtonClicked) {
+                    submitButton.click();
+                }
             });
         });
     }