From 74d240dfd4ee507dfb04ac2a41442d4f69911960 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 2 Mar 2021 20:37:23 +0100
Subject: [PATCH] admin: use spinner-button for modal forms

---
 authentik/admin/templates/generic/form.html          |  4 +++-
 authentik/core/templates/base/page.html              | 12 ------------
 authentik/core/templates/error/generic.html          |  2 +-
 .../stages/password/user-settings-card.html          |  4 ----
 web/src/elements/buttons/SpinnerButton.ts            |  6 +++---
 5 files changed, 7 insertions(+), 21 deletions(-)
 delete mode 100644 authentik/core/templates/base/page.html

diff --git a/authentik/admin/templates/generic/form.html b/authentik/admin/templates/generic/form.html
index d7208c69f..20b78908f 100644
--- a/authentik/admin/templates/generic/form.html
+++ b/authentik/admin/templates/generic/form.html
@@ -27,7 +27,9 @@
     </div>
 </section>
 <footer class="pf-c-modal-box__footer">
-    <input class="pf-c-button pf-m-primary" type="submit" form="main-form" value="{% block action %}{% endblock %}" />
+    <ak-spinner-button form="main-form">
+        {% block action %}{% endblock %}
+    </ak-spinner-button>&nbsp;
     <a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a>
 </footer>
 {% endblock %}
diff --git a/authentik/core/templates/base/page.html b/authentik/core/templates/base/page.html
deleted file mode 100644
index fa10451ce..000000000
--- a/authentik/core/templates/base/page.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% extends "base/skeleton.html" %}
-
-{% load i18n %}
-
-{% block body %}
-<ak-message-container></ak-message-container>
-<div class="pf-c-page">
-    <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">{% trans 'Skip to content' %}</a>
-    {% block page_content %}
-    {% endblock %}
-</div>
-{% endblock %}
diff --git a/authentik/core/templates/error/generic.html b/authentik/core/templates/error/generic.html
index 17ba3a5a2..ca1d53de5 100644
--- a/authentik/core/templates/error/generic.html
+++ b/authentik/core/templates/error/generic.html
@@ -1,4 +1,4 @@
-{% extends 'base/page.html' %}
+{% extends 'base/skeleton.html' %}
 
 {% load i18n %}
 {% load authentik_utils %}
diff --git a/authentik/stages/password/templates/stages/password/user-settings-card.html b/authentik/stages/password/templates/stages/password/user-settings-card.html
index 48fbfc72a..1011c45a9 100644
--- a/authentik/stages/password/templates/stages/password/user-settings-card.html
+++ b/authentik/stages/password/templates/stages/password/user-settings-card.html
@@ -1,9 +1,6 @@
-{% extends "base/page.html" %}
-
 {% load i18n %}
 {% load authentik_utils %}
 
-{% block body %}
 <div class="pf-c-card">
     <div class="pf-c-card__header pf-c-title pf-m-md">
         {% trans 'Reset your password' %}
@@ -14,4 +11,3 @@
         </a>
     </div>
 </div>
-{% endblock %}
diff --git a/web/src/elements/buttons/SpinnerButton.ts b/web/src/elements/buttons/SpinnerButton.ts
index 5213e3e75..dc61ab503 100644
--- a/web/src/elements/buttons/SpinnerButton.ts
+++ b/web/src/elements/buttons/SpinnerButton.ts
@@ -59,9 +59,9 @@ export class SpinnerButton extends LitElement {
             return;
         }
         if (this.form) {
-            // Because safari we can't just extend HTMLButtonElement, hence I have to implement
-            // these attributes by myself here, sigh...
-            document.querySelector<HTMLFormElement>(`#${this.form}`)?.submit();
+            // Since the form= attribute is only used within a modal button,
+            // we can assume the form is always two levels up
+            this.parentElement?.parentElement?.querySelector < HTMLFormElement>(`#${this.form}`)?.dispatchEvent(new Event("submit"));
         }
         this.setLoading();
     }