web/admin: rework policybindingform
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
parent
e06d729fe5
commit
1a0a62975c
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
label=${t`Policy`}
|
||||
name="policy">
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.binding?.policy === undefined}>---------</option>
|
||||
${until(new PoliciesApi(DEFAULT_CONFIG).policiesAllList({
|
||||
ordering: "pk"
|
||||
}).then(policies => {
|
||||
return this.groupPolicies(policies.results);
|
||||
}), html`<option>${t`Loading...`}</option>`)}
|
||||
</select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Group`}
|
||||
name="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">
|
||||
<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 class="pf-c-card pf-m-selectable pf-m-selected">
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-c-toggle-group">
|
||||
<div class="pf-c-toggle-group__item">
|
||||
<button class="pf-c-toggle-group__button ${this.policyGroupUser === target.policy ? "pf-m-selected": ""}" type="button" @click=${() => {
|
||||
this.policyGroupUser = target.policy;
|
||||
}}>
|
||||
<span class="pf-c-toggle-group__text">${t`Policy`}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pf-c-divider pf-m-vertical" role="separator"></div>
|
||||
<div class="pf-c-toggle-group__item">
|
||||
<button class="pf-c-toggle-group__button ${this.policyGroupUser === target.group ? "pf-m-selected" : ""}" type="button" @click=${() => {
|
||||
this.policyGroupUser = target.group;
|
||||
}}>
|
||||
<span class="pf-c-toggle-group__text">${t`Group`}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pf-c-divider pf-m-vertical" role="separator"></div>
|
||||
<div class="pf-c-toggle-group__item">
|
||||
<button class="pf-c-toggle-group__button ${this.policyGroupUser === target.user ? "pf-m-selected" : ""}" type="button" @click=${() => {
|
||||
this.policyGroupUser = target.user;
|
||||
}}>
|
||||
<span class="pf-c-toggle-group__text">${t`User`}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Policy`}
|
||||
name="policy"
|
||||
?hidden=${this.policyGroupUser !== target.policy}>
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.binding?.policy === undefined}>---------</option>
|
||||
${until(new PoliciesApi(DEFAULT_CONFIG).policiesAllList({
|
||||
ordering: "pk"
|
||||
}).then(policies => {
|
||||
return this.groupPolicies(policies.results);
|
||||
}), 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">
|
||||
|
|
|
|||
Reference in New Issue