web: start migrating: groups form

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/pages/groups/GroupListPage.ts

@@ -11,6 +11,8 @@ import { PAGE_SIZE } from "../../constants";
 import { CoreApi, Group } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import "../../elements/forms/ModalForm";
+import "./GroupForm";
 
 @customElement("ak-group-list")
 export class GroupListPage extends TablePage<Group> {
@@ -56,12 +58,19 @@ export class GroupListPage extends TablePage<Group> {
             html`${item.users.keys.length}`,
             html`${item.isSuperuser ? "Yes" : "No"}`,
             html`
-            <ak-modal-button href="${AdminURLManager.groups(`${item.pk}/update/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+            <ak-forms-modal>
+                <span slot="submit">
+                    ${gettext("Update")}
+                </span>
+                <span slot="header">
+                    ${gettext("Update Group")}
+                </span>
+                <ak-group-form slot="form" .group=${item}>
+                </ak-group-form>
+                <button slot="trigger" class="pf-c-button pf-m-primary">
                     ${gettext("Edit")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
+                </button>
+            </ak-forms-modal>
             <ak-forms-delete
                 .obj=${item}
                 objectLabel=${gettext("Group")}