web: start migrating: groups form

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

web/package-lock.json

@@ -182,6 +182,16 @@
                 "@polymer/polymer": "^3.0.0"
             }
         },
+        "@polymer/iron-checked-element-behavior": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@polymer/iron-checked-element-behavior/-/iron-checked-element-behavior-3.0.1.tgz",
+            "integrity": "sha512-aDr0cbCNVq49q+pOqa6CZutFh+wWpwPMLpEth9swx+GkAj+gCURhuQkaUYhIo5f2egDbEioR1aeHMnPlU9dQZA==",
+            "requires": {
+                "@polymer/iron-form-element-behavior": "^3.0.0-pre.26",
+                "@polymer/iron-validatable-behavior": "^3.0.0-pre.26",
+                "@polymer/polymer": "^3.0.0"
+            }
+        },
         "@polymer/iron-flex-layout": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.1.tgz",
@@ -234,6 +244,30 @@
                 "@polymer/polymer": "^3.0.0"
             }
         },
+        "@polymer/paper-behaviors": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@polymer/paper-behaviors/-/paper-behaviors-3.0.1.tgz",
+            "integrity": "sha512-6knhj69fPJejv8qR0kCSUY+Q0XjaUf0OSnkjRjmTJPAwSrRYtgqE+l6P1FfA+py1X/cUjgne9EF5rMZAKJIg1g==",
+            "requires": {
+                "@polymer/iron-behaviors": "^3.0.0-pre.26",
+                "@polymer/iron-checked-element-behavior": "^3.0.0-pre.26",
+                "@polymer/paper-ripple": "^3.0.0-pre.26",
+                "@polymer/polymer": "^3.0.0"
+            }
+        },
+        "@polymer/paper-checkbox": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@polymer/paper-checkbox/-/paper-checkbox-3.1.0.tgz",
+            "integrity": "sha512-kXm6yDG1tT8if0XuJ2cc9NF+g8Ev4wG+rnf0a+Sx+O7J6fn1jcnBlYn72FlrfjVjDQZDBFmT6nynhD5PvFw8iQ==",
+            "requires": {
+                "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
+                "@polymer/iron-checked-element-behavior": "^3.0.0-pre.26",
+                "@polymer/paper-behaviors": "^3.0.0-pre.27",
+                "@polymer/paper-ripple": "^3.0.0-pre.26",
+                "@polymer/paper-styles": "^3.0.0-pre.26",
+                "@polymer/polymer": "^3.0.0"
+            }
+        },
         "@polymer/paper-input": {
             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/@polymer/paper-input/-/paper-input-3.2.1.tgz",
@@ -248,6 +282,15 @@
                 "@polymer/polymer": "^3.0.0"
             }
         },
+        "@polymer/paper-ripple": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@polymer/paper-ripple/-/paper-ripple-3.0.2.tgz",
+            "integrity": "sha512-DnLNvYIMsiayeICroYxx6Q6Hg1cUU8HN2sbutXazlemAlGqdq80qz3TIaVdbpbt/pvjcFGX2HtntMlPstCge8Q==",
+            "requires": {
+                "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
+                "@polymer/polymer": "^3.0.0"
+            }
+        },
         "@polymer/paper-styles": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.1.tgz",

web/package.json

@@ -13,6 +13,7 @@
         "@fortawesome/fontawesome-free": "^5.15.3",
         "@patternfly/patternfly": "^4.90.5",
         "@polymer/iron-form": "^3.0.1",
+        "@polymer/paper-checkbox": "^3.1.0",
         "@polymer/paper-input": "^3.2.1",
         "@sentry/browser": "^6.2.3",
         "@sentry/tracing": "^6.2.3",

web/src/authentik.css

@@ -103,8 +103,11 @@ body {
     }
 
     paper-input {
-        /* --paper-input-container-color: var(--ak-accent); */
+        /* --paper-input-container-input-color: var(--ak-dark-foreground); */
-        --paper-input-container-input-color: var(--ak-dark-foreground);
+        --primary-text-color: var(--ak-dark-foreground);
+    }
+    paper-checkbox {
+        --primary-text-color: var(--ak-dark-foreground);
     }
 
     /* Global page background colour */

web/src/elements/forms/Form.ts

@@ -2,40 +2,52 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/iron-form/iron-form";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { showMessage } from "../../elements/messages/MessageContainer";
-import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import AKGlobal from "../../authentik.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 
 export interface ErrorResponse {
     [key: string]: string[];
 }
 
 @customElement("ak-form")
-export class Form extends LitElement {
+export class Form<T> extends LitElement {
 
     @property()
     successMessage = "";
 
     @property()
-    send!: (data: Record<string, unknown>) => Promise<unknown>;
+    send!: (data: T) => Promise<T>;
 
-    submit(ev: Event): Promise<unknown> | undefined {
+    static get styles(): CSSResult[] {
+        return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal];
+    }
+
+    submit(ev: Event): Promise<T | ErrorResponse> | undefined {
         ev.preventDefault();
         const ironForm = this.shadowRoot?.querySelector("iron-form");
         if (!ironForm) {
+            console.warn("authentik/forms: failed to find iron-form");
             return;
         }
-        const data = ironForm.serializeForm();
+        const data = ironForm.serializeForm() as T;
-        return this.send(data).then(() => {
+        return this.send(data).then((r) => {
             showMessage({
                 level_tag: "success",
                 message: this.successMessage
             });
+            return r;
         }).catch((ex: Response) => {
             if (ex.status > 399 && ex.status < 500) {
                 return ex.json();
             }
             return ex;
-        }).then((errorMessage?: ErrorResponse) => {
+        }).then((errorMessage: ErrorResponse) => {
-            if (!errorMessage) return;
+            if (!errorMessage) return errorMessage;
             const elements: PaperInputElement[] = ironForm._getSubmittableElements();
             elements.forEach((element) => {
                 const elementName = element.name;
@@ -45,13 +57,18 @@ export class Form extends LitElement {
                     element.invalid = true;
                 }
             });
+            return errorMessage;
         });
     }
 
+    renderForm(): TemplateResult {
+        return html`<slot></slot>`;
+    }
+
     render(): TemplateResult {
         return html`<iron-form
             @iron-form-presubmit=${(ev: Event) => { this.submit(ev); }}>
-            <slot></slot>
+            ${this.renderForm()}
         </iron-form>`;
     }
 

web/src/elements/forms/ModalForm.ts

@@ -4,10 +4,10 @@ import { ModalButton } from "../buttons/ModalButton";
 import { Form } from "./Form";
 
 @customElement("ak-forms-modal")
-export class DeleteForm extends ModalButton {
+export class ModalForm extends ModalButton {
 
     confirm(): void {
-        this.querySelectorAll<Form>("ak-form").forEach(form => {
+        this.querySelectorAll<Form<unknown>>("ak-form").forEach(form => {
             const formPromise = form.submit(new Event("submit"));
             if (!formPromise) {
                 return;

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-forms-modal>
-                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+                <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>
+                </button>
-                <div slot="modal"></div>
+            </ak-forms-modal>
-            </ak-modal-button>
             <ak-forms-delete
                 .obj=${item}
                 objectLabel=${gettext("Group")}

web/src/pages/users/UserTokenList.ts

@@ -41,7 +41,7 @@ export class UserTokenList extends Table<Token> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href="-/user/tokens/create/">
+        <ak-modal-button href="/-/user/tokens/create/">
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>