From 2e6a264f98c0456cf462857406d833009b5e103d Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Sat, 27 Mar 2021 23:38:53 +0100 Subject: [PATCH] web: migrate group forms Signed-off-by: Jens Langhammer --- web/package-lock.json | 159 ++++++++++++++++++++++++++ web/package.json | 4 + web/src/elements/forms/Form.ts | 11 +- web/src/pages/groups/GroupForm.ts | 38 +++++- web/src/pages/groups/GroupListPage.ts | 2 +- 5 files changed, 209 insertions(+), 5 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 9c5b8d550..f125fff3b 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -192,6 +192,25 @@ "@polymer/polymer": "^3.0.0" } }, + "@polymer/iron-dropdown": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-dropdown/-/iron-dropdown-3.0.1.tgz", + "integrity": "sha512-22yLhepfcKjuQMfFmRHi/9MPKTqkzgRrmWWW0P5uqK++xle53k2QBO5VYUAYiCN3ZcxIi9lEhZ9YWGeQj2JBig==", + "requires": { + "@polymer/iron-behaviors": "^3.0.0-pre.26", + "@polymer/iron-overlay-behavior": "^3.0.0-pre.27", + "@polymer/neon-animation": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-fit-behavior": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@polymer/iron-fit-behavior/-/iron-fit-behavior-3.1.0.tgz", + "integrity": "sha512-ABcgIYqrjhmUT8tiuolqeGttF/8pd3sEymUDrO1vXbZu4FWIvoLNndrMDFvs++AGd12Mjf5pYy84NJc6dB8Vig==", + "requires": { + "@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", @@ -217,6 +236,25 @@ "@polymer/polymer": "^3.0.0" } }, + "@polymer/iron-icon": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-icon/-/iron-icon-3.0.1.tgz", + "integrity": "sha512-QLPwirk+UPZNaLnMew9VludXA4CWUCenRewgEcGYwdzVgDPCDbXxy6vRJjmweZobMQv/oVLppT2JZtJFnPxX6g==", + "requires": { + "@polymer/iron-flex-layout": "^3.0.0-pre.26", + "@polymer/iron-meta": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-iconset-svg": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-iconset-svg/-/iron-iconset-svg-3.0.1.tgz", + "integrity": "sha512-XNwURbNHRw6u2fJe05O5fMYye6GSgDlDqCO+q6K1zAnKIrpgZwf2vTkBd5uCcZwsN0FyCB3mvNZx4jkh85dRDw==", + "requires": { + "@polymer/iron-meta": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, "@polymer/iron-input": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@polymer/iron-input/-/iron-input-3.0.1.tgz", @@ -227,6 +265,28 @@ "@polymer/polymer": "^3.0.0" } }, + "@polymer/iron-list": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@polymer/iron-list/-/iron-list-3.1.0.tgz", + "integrity": "sha512-Eiv6xd3h3oPmn8SXFntXVfC3ZnegH+KHAxiKLKcOASFSRY3mHnr2AdcnExUJ9ItoCMA5UzKaM/0U22eWzGERtA==", + "requires": { + "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", + "@polymer/iron-resizable-behavior": "^3.0.0-pre.26", + "@polymer/iron-scroll-target-behavior": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-menu-behavior": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@polymer/iron-menu-behavior/-/iron-menu-behavior-3.0.2.tgz", + "integrity": "sha512-8dpASkFNBIkxAJWsFLWIO1M7tKM0+wKs3PqdeF/dDdBciwoaaFgC2K1XCZFZnbe2t9/nJgemXxVugGZAWpYCGg==", + "requires": { + "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", + "@polymer/iron-flex-layout": "^3.0.0-pre.26", + "@polymer/iron-selector": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, "@polymer/iron-meta": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@polymer/iron-meta/-/iron-meta-3.0.1.tgz", @@ -235,6 +295,41 @@ "@polymer/polymer": "^3.0.0" } }, + "@polymer/iron-overlay-behavior": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@polymer/iron-overlay-behavior/-/iron-overlay-behavior-3.0.3.tgz", + "integrity": "sha512-Q/Fp0+uOQQ145ebZ7T8Cxl4m1tUKYjyymkjcL2rXUm+aDQGb1wA1M1LYxUF5YBqd+9lipE0PTIiYwA2ZL/sznA==", + "requires": { + "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", + "@polymer/iron-fit-behavior": "^3.0.0-pre.26", + "@polymer/iron-resizable-behavior": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-resizable-behavior": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-resizable-behavior/-/iron-resizable-behavior-3.0.1.tgz", + "integrity": "sha512-FyHxRxFspVoRaeZSWpT3y0C9awomb4tXXolIJcZ7RvXhMP632V5lez+ch5G5SwK0LpnAPkg35eB0LPMFv+YMMQ==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-scroll-target-behavior": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-scroll-target-behavior/-/iron-scroll-target-behavior-3.0.1.tgz", + "integrity": "sha512-xg1WanG25BIkQE8rhuReqY9zx1K5M7F+YAIYpswEp5eyDIaZ1Y3vUmVeQ3KG+hiSugzI1M752azXN7kvyhOBcQ==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/iron-selector": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/iron-selector/-/iron-selector-3.0.1.tgz", + "integrity": "sha512-sBVk2uas6prW0glUe2xEJJYlvxmYzM40Au9OKbfDK2Qekou/fLKcBRyIYI39kuI8zWRaip8f3CI8qXcUHnKb1A==", + "requires": { + "@polymer/polymer": "^3.0.0" + } + }, "@polymer/iron-validatable-behavior": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.1.tgz", @@ -244,6 +339,16 @@ "@polymer/polymer": "^3.0.0" } }, + "@polymer/neon-animation": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/neon-animation/-/neon-animation-3.0.1.tgz", + "integrity": "sha512-cDDc0llpVCe0ATbDS3clDthI54Bc8YwZIeTGGmBJleKOvbRTUC5+ssJmRL+VwVh+VM5FlnQlx760ppftY3uprg==", + "requires": { + "@polymer/iron-resizable-behavior": "^3.0.0-pre.26", + "@polymer/iron-selector": "^3.0.0-pre.26", + "@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", @@ -268,6 +373,24 @@ "@polymer/polymer": "^3.0.0" } }, + "@polymer/paper-dropdown-menu": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@polymer/paper-dropdown-menu/-/paper-dropdown-menu-3.2.0.tgz", + "integrity": "sha512-2ohwSHF+RLSK6kA0UkkMiMQF6EZcaEYWAA25kfisI6DWie7yozKrpQNsqvwfOEHU6DdDMIotrOtH1TM88YS8Zg==", + "requires": { + "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", + "@polymer/iron-form-element-behavior": "^3.0.0-pre.26", + "@polymer/iron-icon": "^3.0.0-pre.26", + "@polymer/iron-iconset-svg": "^3.0.0-pre.26", + "@polymer/iron-validatable-behavior": "^3.0.0-pre.26", + "@polymer/paper-behaviors": "^3.0.0-pre.27", + "@polymer/paper-input": "^3.1.0", + "@polymer/paper-menu-button": "^3.1.0", + "@polymer/paper-ripple": "^3.0.0-pre.26", + "@polymer/paper-styles": "^3.0.0-pre.26", + "@polymer/polymer": "^3.3.1" + } + }, "@polymer/paper-input": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@polymer/paper-input/-/paper-input-3.2.1.tgz", @@ -282,6 +405,42 @@ "@polymer/polymer": "^3.0.0" } }, + "@polymer/paper-item": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/paper-item/-/paper-item-3.0.1.tgz", + "integrity": "sha512-KTk2N+GsYiI/HuubL3sxebZ6tteQbBOAp4QVLAnbjSPmwl+mJSDWk+omuadesU0bpkCwaWVs3fHuQsmXxy4pkw==", + "requires": { + "@polymer/iron-behaviors": "^3.0.0-pre.26", + "@polymer/iron-flex-layout": "^3.0.0-pre.26", + "@polymer/paper-styles": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/paper-listbox": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@polymer/paper-listbox/-/paper-listbox-3.0.1.tgz", + "integrity": "sha512-vMLWFpYcggAPmEDBmK+96fFefacOG3GLB1EguTn8+ZkqI+328hNfw1MzHjH68rgCIIUtjmm+9qgB1Sy/MN0a/A==", + "requires": { + "@polymer/iron-behaviors": "^3.0.0-pre.26", + "@polymer/iron-menu-behavior": "^3.0.0-pre.26", + "@polymer/paper-styles": "^3.0.0-pre.26", + "@polymer/polymer": "^3.0.0" + } + }, + "@polymer/paper-menu-button": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@polymer/paper-menu-button/-/paper-menu-button-3.1.0.tgz", + "integrity": "sha512-q0G0/rvYD/FFmIBMGCQWjfXzRqwFw9+WHSYV4uOQzM1Ln8LMXSAd+2CENsbVwtMh6fmBePj15ZlU8SM2dt1WDQ==", + "requires": { + "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26", + "@polymer/iron-behaviors": "^3.0.0-pre.26", + "@polymer/iron-dropdown": "^3.0.0-pre.26", + "@polymer/iron-fit-behavior": "^3.1.0", + "@polymer/neon-animation": "^3.0.0-pre.26", + "@polymer/paper-styles": "^3.0.0-pre.26", + "@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", diff --git a/web/package.json b/web/package.json index ec0f39b67..40d4c5203 100644 --- a/web/package.json +++ b/web/package.json @@ -14,7 +14,10 @@ "@patternfly/patternfly": "^4.90.5", "@polymer/iron-form": "^3.0.1", "@polymer/paper-checkbox": "^3.1.0", + "@polymer/paper-dropdown-menu": "^3.2.0", "@polymer/paper-input": "^3.2.1", + "@polymer/paper-item": "^3.0.1", + "@polymer/paper-listbox": "^3.0.1", "@sentry/browser": "^6.2.3", "@sentry/tracing": "^6.2.3", "@types/chart.js": "^2.9.31", @@ -28,6 +31,7 @@ "flowchart.js": "^1.15.0", "lit-element": "^2.4.0", "lit-html": "^1.3.0", + "multiselect-combo-box": "^2.5.0-beta.3", "rapidoc": "^8.4.9", "rollup": "^2.42.4", "rollup-plugin-copy": "^3.4.0", diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts index a5cc50006..fd12a6785 100644 --- a/web/src/elements/forms/Form.ts +++ b/web/src/elements/forms/Form.ts @@ -2,13 +2,14 @@ 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 { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; +import { css, 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"; +import { MessageLevel } from "../messages/Message"; interface ErrorResponse { [key: string]: string[]; @@ -32,7 +33,11 @@ export class Form extends LitElement { send!: (data: T) => Promise; static get styles(): CSSResult[] { - return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal]; + return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal, css` + select[multiple] { + height: 15em; + } + `]; } submit(ev: Event): Promise | undefined { @@ -45,7 +50,7 @@ export class Form extends LitElement { const data = ironForm.serializeForm() as T; return this.send(data).then((r) => { showMessage({ - level_tag: "success", + level: MessageLevel.success, message: this.successMessage }); return r; diff --git a/web/src/pages/groups/GroupForm.ts b/web/src/pages/groups/GroupForm.ts index 6e2cb3678..6ad02c63f 100644 --- a/web/src/pages/groups/GroupForm.ts +++ b/web/src/pages/groups/GroupForm.ts @@ -7,7 +7,11 @@ 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'; +import '@polymer/paper-checkbox/paper-checkbox'; +import '@polymer/paper-dropdown-menu/paper-dropdown-menu'; +import '@polymer/paper-listbox/paper-listbox'; +import '@polymer/paper-item/paper-item'; +import { until } from "lit-html/directives/until"; @customElement("ak-group-form") export class GroupForm extends Form { @@ -43,6 +47,38 @@ export class GroupForm extends Form { ${gettext("Is superuser")}

${gettext("Users added to this group will be superusers.")}

+ + + ${gettext("No parent")} + ${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => { + return groups.results.map(group => { + return html`${group.name}`; + }) + }), html``)} + + +
+
+ +
+
+
+ +

${gettext("Hold control/command to select multiple items.")}

+
+
+
`; } diff --git a/web/src/pages/groups/GroupListPage.ts b/web/src/pages/groups/GroupListPage.ts index cdaee5797..c5183ba8e 100644 --- a/web/src/pages/groups/GroupListPage.ts +++ b/web/src/pages/groups/GroupListPage.ts @@ -55,7 +55,7 @@ export class GroupListPage extends TablePage { return [ html`${item.name}`, html`${item.parent || "-"}`, - html`${item.users.keys.length}`, + html`${item.users?.keys.length}`, html`${item.isSuperuser ? "Yes" : "No"}`, html`