web/admin: rework policybindingform

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

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;

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<PolicyBinding> {
@@ -117,7 +118,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
             html`${item.timeout}`,
             html`
             ${this.getObjectEditButton(item)}
-            <ak-forms-modal>
+            <ak-forms-modal size=${PFSize.Medium}>
                 <span slot="submit">
                     ${t`Update`}
                 </span>

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<PolicyBinding> {
 
     @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<PolicyBinding> {
         }
     }
 
+    static get styles(): CSSResult[] {
+        return super.styles.concat(PFToggleGroup, PFContent, css`
+            .pf-c-toggle-group {
+                justify-content: center;
+            }
+        `);
+    }
+
     async customValidate(form: PolicyBinding): Promise<PolicyBinding> {
         return form;
     }
@@ -71,49 +105,82 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
         });
     }
 
-
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
-            <ak-form-element-horizontal
+            <div class="pf-c-card pf-m-selectable pf-m-selected">
-                label=${t`Policy`}
+                <div class="pf-c-card__body">
-                name="policy">
+                    <div class="pf-c-toggle-group">
-                <select class="pf-c-form-control">
+                        <div class="pf-c-toggle-group__item">
-                    <option value="" ?selected=${this.binding?.policy === undefined}>---------</option>
+                            <button class="pf-c-toggle-group__button ${this.policyGroupUser === target.policy ? "pf-m-selected": ""}" type="button" @click=${() => {
-                    ${until(new PoliciesApi(DEFAULT_CONFIG).policiesAllList({
+                                this.policyGroupUser = target.policy;
-                        ordering: "pk"
+                            }}>
-                    }).then(policies => {
+                                <span class="pf-c-toggle-group__text">${t`Policy`}</span>
-                        return this.groupPolicies(policies.results);
+                            </button>
-                    }), html`<option>${t`Loading...`}</option>`)}
+                        </div>
-                </select>
+                        <div class="pf-c-divider pf-m-vertical" role="separator"></div>
-            </ak-form-element-horizontal>
+                        <div class="pf-c-toggle-group__item">
-            <ak-form-element-horizontal
+                            <button class="pf-c-toggle-group__button ${this.policyGroupUser === target.group ? "pf-m-selected" : ""}" type="button" @click=${() => {
-                label=${t`Group`}
+                                this.policyGroupUser = target.group;
-                name="group">
+                            }}>
-                <select class="pf-c-form-control">
+                                <span class="pf-c-toggle-group__text">${t`Group`}</span>
-                    <option value="" ?selected=${this.binding?.group === undefined}>---------</option>
+                            </button>
-                    ${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({
+                        </div>
-                        ordering: "pk"
+                        <div class="pf-c-divider pf-m-vertical" role="separator"></div>
-                    }).then(groups => {
+                        <div class="pf-c-toggle-group__item">
-                        return groups.results.map(group => {
+                            <button class="pf-c-toggle-group__button ${this.policyGroupUser === target.user ? "pf-m-selected" : ""}" type="button" @click=${() => {
-                            return html`<option value=${ifDefined(group.pk)} ?selected=${group.pk === this.binding?.group}>${group.name}</option>`;
+                                this.policyGroupUser = target.user;
-                        });
+                            }}>
-                    }), html`<option>${t`Loading...`}</option>`)}
+                                <span class="pf-c-toggle-group__text">${t`User`}</span>
-                </select>
+                            </button>
-            </ak-form-element-horizontal>
+                        </div>
-            <ak-form-element-horizontal
+                    </div>
-                label=${t`User`}
+                </div>
-                name="user">
+                <div class="pf-c-card__footer">
-                <select class="pf-c-form-control">
+                    <ak-form-element-horizontal
-                    <option value="" ?selected=${this.binding?.user === undefined}>---------</option>
+                        label=${t`Policy`}
-                    ${until(new CoreApi(DEFAULT_CONFIG).coreUsersList({
+                        name="policy"
-                        ordering: "pk"
+                        ?hidden=${this.policyGroupUser !== target.policy}>
-                    }).then(users => {
+                        <select class="pf-c-form-control">
-                        return users.results.map(user => {
+                            <option value="" ?selected=${this.binding?.policy === undefined}>---------</option>
-                            return html`<option value=${ifDefined(user.pk)} ?selected=${user.pk === this.binding?.user}>${user.name}</option>`;
+                            ${until(new PoliciesApi(DEFAULT_CONFIG).policiesAllList({
-                        });
+                                ordering: "pk"
-                    }), html`<option>${t`Loading...`}</option>`)}
+                            }).then(policies => {
-                </select>
+                                return this.groupPolicies(policies.results);
-            </ak-form-element-horizontal>
+                            }), html`<option>${t`Loading...`}</option>`)}
+                        </select>
+                    </ak-form-element-horizontal>
+                    <ak-form-element-horizontal
+                        label=${t`Group`}
+                        name="group"
+                        ?hidden=${this.policyGroupUser !== target.group}>
+                        <select class="pf-c-form-control">
+                            <option value="" ?selected=${this.binding?.group === undefined}>---------</option>
+                            ${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({
+                                ordering: "pk"
+                            }).then(groups => {
+                                return groups.results.map(group => {
+                                    return html`<option value=${ifDefined(group.pk)} ?selected=${group.pk === this.binding?.group}>${group.name}</option>`;
+                                });
+                            }), html`<option>${t`Loading...`}</option>`)}
+                        </select>
+                    </ak-form-element-horizontal>
+                    <ak-form-element-horizontal
+                        label=${t`User`}
+                        name="user"
+                        ?hidden=${this.policyGroupUser !== target.user}>
+                        <select class="pf-c-form-control">
+                            <option value="" ?selected=${this.binding?.user === undefined}>---------</option>
+                            ${until(new CoreApi(DEFAULT_CONFIG).coreUsersList({
+                                ordering: "pk"
+                            }).then(users => {
+                                return users.results.map(user => {
+                                    return html`<option value=${ifDefined(user.pk)} ?selected=${user.pk === this.binding?.user}>${user.name}</option>`;
+                                });
+                            }), html`<option>${t`Loading...`}</option>`)}
+                        </select>
+                    </ak-form-element-horizontal>
+                </div>
+            </div>
             <input required name="target" type="hidden" value=${ifDefined(this.binding?.target || this.targetPk)}>
             <ak-form-element-horizontal name="enabled">
                 <div class="pf-c-check">