web/admin: rework policybindingform

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-04 22:56:28 +02:00
parent e06d729fe5
commit 1a0a62975c
3 changed files with 116 additions and 45 deletions

View file

@ -1,3 +1,7 @@
:root {
--ak-accent: #fd4b2d;
}
html { html {
--pf-c-nav__link--PaddingTop: 0.5rem; --pf-c-nav__link--PaddingTop: 0.5rem;
--pf-c-nav__link--PaddingRight: 0.5rem; --pf-c-nav__link--PaddingRight: 0.5rem;
@ -88,7 +92,6 @@ body {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--ak-accent: #fd4b2d;
--ak-dark-foreground: #fafafa; --ak-dark-foreground: #fafafa;
--ak-dark-foreground-darker: #bebebe; --ak-dark-foreground-darker: #bebebe;
--ak-dark-foreground-link: #5a5cb9; --ak-dark-foreground-link: #5a5cb9;

View file

@ -18,6 +18,7 @@ import "../groups/GroupForm";
import "../users/UserForm"; import "../users/UserForm";
import "./PolicyBindingForm"; import "./PolicyBindingForm";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import { PFSize } from "../../elements/Spinner";
@customElement("ak-bound-policies-list") @customElement("ak-bound-policies-list")
export class BoundPoliciesList extends Table<PolicyBinding> { export class BoundPoliciesList extends Table<PolicyBinding> {
@ -117,7 +118,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
html`${item.timeout}`, html`${item.timeout}`,
html` html`
${this.getObjectEditButton(item)} ${this.getObjectEditButton(item)}
<ak-forms-modal> <ak-forms-modal size=${PFSize.Medium}>
<span slot="submit"> <span slot="submit">
${t`Update`} ${t`Update`}
</span> </span>

View file

@ -1,6 +1,6 @@
import { CoreApi, PoliciesApi, Policy, PolicyBinding } from "authentik-api"; import { CoreApi, PoliciesApi, Policy, PolicyBinding } from "authentik-api";
import { t } from "@lingui/macro"; 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 { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { Form } from "../../elements/forms/Form"; 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 { ifDefined } from "lit-html/directives/if-defined";
import { first, groupBy } from "../../utils"; import { first, groupBy } from "../../utils";
import "../../elements/forms/HorizontalFormElement"; 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") @customElement("ak-policy-binding-form")
export class PolicyBindingForm extends Form<PolicyBinding> { export class PolicyBindingForm extends Form<PolicyBinding> {
@property({attribute: false}) @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() @property()
targetPk?: string; targetPk?: string;
@property()
policyGroupUser?: target;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.binding) { if (this.binding) {
return t`Successfully updated 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> { async customValidate(form: PolicyBinding): Promise<PolicyBinding> {
return form; return form;
} }
@ -71,49 +105,82 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
}); });
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> 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)}> <input required name="target" type="hidden" value=${ifDefined(this.binding?.target || this.targetPk)}>
<ak-form-element-horizontal name="enabled"> <ak-form-element-horizontal name="enabled">
<div class="pf-c-check"> <div class="pf-c-check">