admin: use spinner-button for modal forms

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 %}

authentik/core/templates/base/page.html

@@ -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 %}

authentik/core/templates/error/generic.html

@@ -1,4 +1,4 @@
-{% extends 'base/page.html' %}
+{% extends 'base/skeleton.html' %}
 
 {% load i18n %}
 {% load authentik_utils %}

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 %}

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();
     }