From 1a0a62975c985762084b2040d989bac47199a3b6 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Sun, 4 Apr 2021 22:56:28 +0200 Subject: [PATCH] web/admin: rework policybindingform Signed-off-by: Jens Langhammer --- web/src/authentik.css | 5 +- web/src/pages/policies/BoundPoliciesList.ts | 3 +- web/src/pages/policies/PolicyBindingForm.ts | 153 ++++++++++++++------ 3 files changed, 116 insertions(+), 45 deletions(-) diff --git a/web/src/authentik.css b/web/src/authentik.css index 1b4b9defc..e90262bb3 100644 --- a/web/src/authentik.css +++ b/web/src/authentik.css @@ -1,3 +1,7 @@ +:root { + --ak-accent: #fd4b2d; +} + html { --pf-c-nav__link--PaddingTop: 0.5rem; --pf-c-nav__link--PaddingRight: 0.5rem; @@ -88,7 +92,6 @@ body { @media (prefers-color-scheme: dark) { :root { - --ak-accent: #fd4b2d; --ak-dark-foreground: #fafafa; --ak-dark-foreground-darker: #bebebe; --ak-dark-foreground-link: #5a5cb9; diff --git a/web/src/pages/policies/BoundPoliciesList.ts b/web/src/pages/policies/BoundPoliciesList.ts index e173cb134..dbb4fc1bb 100644 --- a/web/src/pages/policies/BoundPoliciesList.ts +++ b/web/src/pages/policies/BoundPoliciesList.ts @@ -18,6 +18,7 @@ import "../groups/GroupForm"; import "../users/UserForm"; import "./PolicyBindingForm"; import { ifDefined } from "lit-html/directives/if-defined"; +import { PFSize } from "../../elements/Spinner"; @customElement("ak-bound-policies-list") export class BoundPoliciesList extends Table { @@ -117,7 +118,7 @@ export class BoundPoliciesList extends Table { html`${item.timeout}`, html` ${this.getObjectEditButton(item)} - + ${t`Update`} diff --git a/web/src/pages/policies/PolicyBindingForm.ts b/web/src/pages/policies/PolicyBindingForm.ts index 02af65c50..626ba46e5 100644 --- a/web/src/pages/policies/PolicyBindingForm.ts +++ b/web/src/pages/policies/PolicyBindingForm.ts @@ -1,6 +1,6 @@ import { CoreApi, PoliciesApi, Policy, PolicyBinding } from "authentik-api"; import { t } from "@lingui/macro"; -import { customElement, property } from "lit-element"; +import { css, CSSResult, customElement, property } from "lit-element"; import { html, TemplateResult } from "lit-html"; import { DEFAULT_CONFIG } from "../../api/Config"; import { Form } from "../../elements/forms/Form"; @@ -8,16 +8,42 @@ import { until } from "lit-html/directives/until"; import { ifDefined } from "lit-html/directives/if-defined"; import { first, groupBy } from "../../utils"; import "../../elements/forms/HorizontalFormElement"; +import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css"; +import PFContent from "@patternfly/patternfly/components/Content/content.css"; + +enum target { + policy, group, user +}; @customElement("ak-policy-binding-form") export class PolicyBindingForm extends Form { @property({attribute: false}) - binding?: PolicyBinding; + set binding(value: PolicyBinding | undefined) { + this._binding = value; + if (value?.policyObj) { + this.policyGroupUser = target.policy; + } + if (value?.groupObj) { + this.policyGroupUser = target.group; + } + if (value?.userObj) { + this.policyGroupUser = target.user; + } + } + + get binding(): PolicyBinding | undefined { + return this._binding; + } + + _binding?: PolicyBinding; @property() targetPk?: string; + @property() + policyGroupUser?: target; + getSuccessMessage(): string { if (this.binding) { return t`Successfully updated binding.`; @@ -26,6 +52,14 @@ export class PolicyBindingForm extends Form { } } + static get styles(): CSSResult[] { + return super.styles.concat(PFToggleGroup, PFContent, css` + .pf-c-toggle-group { + justify-content: center; + } + `); + } + async customValidate(form: PolicyBinding): Promise { return form; } @@ -71,49 +105,82 @@ export class PolicyBindingForm extends Form { }); } - renderForm(): TemplateResult { return html`
- - - - - - - - - +
+
+
+
+ +
+ +
+ +
+ +
+ +
+
+
+ +