web: start migrating: groups form

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

web/src/pages/groups/GroupForm.ts

@@ -0,0 +1,49 @@
+import { CoreApi, Group } from "authentik-api";
+import { gettext } from "django";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { Form } from "../../elements/forms/Form";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "@polymer/paper-input/paper-input";
+import "@polymer/iron-form/iron-form";
+import '@polymer/paper-checkbox/paper-checkbox.js';
+
+@customElement("ak-group-form")
+export class GroupForm extends Form<Group> {
+
+    @property({attribute: false})
+    group?: Group;
+
+    send = (data: Group): Promise<Group> => {
+        if (this.group) {
+            return new CoreApi(DEFAULT_CONFIG).coreGroupsUpdate({
+                groupUuid: this.group.pk || "",
+                data: data
+            });
+        } else {
+            return new CoreApi(DEFAULT_CONFIG).coreGroupsCreate({
+                data: data
+            });
+        }
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+                <paper-input
+                    name="name"
+                    ?alwaysFloatLabel=${true}
+                    label="${gettext("Name")}"
+                    value=${ifDefined(this.group?.name)}>
+                </paper-input>
+                <paper-checkbox
+                    name="isSuperuser"
+                    ?alwaysFloatLabel=${true}
+                    ?checked=${this.group?.isSuperuser || false}>
+                    ${gettext("Is superuser")}
+                </paper-checkbox>
+                <p class="pf-c-form__helper-text">${gettext("Users added to this group will be superusers.")}</p>
+            </form>`;
+    }
+
+}

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")}