habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: migrate more forms

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-05-11 12:05:30 +02:00
parent 4d11d82c6e
commit ff9ff18c11
9 changed files with 100 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/pages/policies/BoundPoliciesList.ts
View File

@ -88,7 +88,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
<span slot="header">
${t`Update Group`}
</span>
<ak-group-form slot="form" .group=${item.groupObj}>
<ak-group-form slot="form" .instancePk=${item.groupObj?.pk}>
</ak-group-form>
<button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit Group`}
@ -128,7 +128,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
<span slot="header">
${t`Update Binding`}
</span>
<ak-policy-binding-form slot="form" .binding=${item} targetPk=${ifDefined(this.target)} ?policyOnly=${this.policyOnly}>
<ak-policy-binding-form slot="form" .instancePk=${item.pk} targetPk=${ifDefined(this.target)} ?policyOnly=${this.policyOnly}>
</ak-policy-binding-form>
<button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit Binding`}

65
web/src/pages/policies/PolicyBindingForm.ts
View File

@ -3,41 +3,38 @@ import { t } from "@lingui/macro";
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";
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";
import { ModelForm } from "../../elements/forms/ModelForm";
enum target {
policy, group, user
}
@customElement("ak-policy-binding-form")
export class PolicyBindingForm extends Form<PolicyBinding> {
export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
@property({attribute: false})
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;
}
loadInstance(pk: string): Promise<PolicyBinding> {
return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsRead({
policyBindingUuid: pk
}).then(binding => {
if (binding?.policyObj) {
this.policyGroupUser = target.policy;
}
if (binding?.groupObj) {
this.policyGroupUser = target.group;
}
if (binding?.userObj) {
this.policyGroupUser = target.user;
}
return binding;
});
}
get binding(): PolicyBinding | undefined {
return this._binding;
}
_binding?: PolicyBinding;
@property()
targetPk?: string;
@ -48,7 +45,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
policyOnly = false;
getSuccessMessage(): string {
if (this.binding) {
if (this.instance) {
return t`Successfully updated binding.`;
} else {
return t`Successfully created binding.`;
@ -64,9 +61,9 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
}
send = (data: PolicyBinding): Promise<PolicyBinding> => {
if (this.binding) {
if (this.instance) {
return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsUpdate({
policyBindingUuid: this.binding.pk || "",
policyBindingUuid: this.instance.pk || "",
data: data
});
} else {
@ -81,7 +78,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
${groupBy<Policy>(policies, (p => p.verboseName || "")).map(([group, policies]) => {
return html`<optgroup label=${group}>
${policies.map(p => {
const selected = (this.binding?.policy === p.pk);
const selected = (this.instance?.policy === p.pk);
return html`<option ?selected=${selected} value=${ifDefined(p.pk)}>${p.name}</option>`;
})}
</optgroup>`;
@ -90,8 +87,8 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
}
getOrder(): Promise<number> {
if (this.binding) {
return Promise.resolve(this.binding.order);
if (this.instance) {
return Promise.resolve(this.instance.order);
}
return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsList({
target: this.targetPk || "",
@ -154,7 +151,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
name="policy"
?hidden=${this.policyGroupUser !== target.policy}>
<select class="pf-c-form-control">
<option value="" ?selected=${this.binding?.policy === undefined}>---------</option>
<option value="" ?selected=${this.instance?.policy === undefined}>---------</option>
${until(new PoliciesApi(DEFAULT_CONFIG).policiesAllList({
ordering: "pk"
}).then(policies => {
@ -167,12 +164,12 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
name="group"
?hidden=${this.policyGroupUser !== target.group}>
<select class="pf-c-form-control">
<option value="" ?selected=${this.binding?.group === undefined}>---------</option>
<option value="" ?selected=${this.instance?.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>`;
return html`<option value=${ifDefined(group.pk)} ?selected=${group.pk === this.instance?.group}>${group.name}</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
</select>
@ -182,22 +179,22 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
name="user"
?hidden=${this.policyGroupUser !== target.user}>
<select class="pf-c-form-control">
<option value="" ?selected=${this.binding?.user === undefined}>---------</option>
<option value="" ?selected=${this.instance?.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>`;
return html`<option value=${ifDefined(user.pk)} ?selected=${user.pk === this.instance?.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.instance?.target || this.targetPk)}>
<ak-form-element-horizontal name="enabled">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.binding?.enabled, true)}>
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.enabled, true)}>
<label class="pf-c-check__label">
${t`Enabled`}
</label>
@ -213,7 +210,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
label=${t`Timeout`}
?required=${true}
name="timeout">
<input type="number" value="${first(this.binding?.timeout, 30)}" class="pf-c-form-control" required>
<input type="number" value="${first(this.instance?.timeout, 30)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
</form>`;
}

2
web/src/pages/policies/PolicyListPage.ts
View File

@ -82,7 +82,7 @@ export class PolicyListPage extends TablePage<Policy> {
<ak-proxy-form
slot="form"
.args=${{
"policyUUID": item.pk
"instancePk": item.pk
}}
type=${ifDefined(item.component)}>
</ak-proxy-form>

33
web/src/pages/policies/dummy/DummyPolicyForm.ts
View File

@ -1,30 +1,25 @@
import { DummyPolicy, PoliciesApi } from "authentik-api";
import { t } from "@lingui/macro";
import { customElement, property } from "lit-element";
import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup";
import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-policy-dummy-form")
export class DummyPolicyForm extends Form<DummyPolicy> {
export class DummyPolicyForm extends ModelForm<DummyPolicy, string> {
set policyUUID(value: string) {
new PoliciesApi(DEFAULT_CONFIG).policiesDummyRead({
policyUuid: value,
}).then(policy => {
this.policy = policy;
loadInstance(pk: string): Promise<DummyPolicy> {
return new PoliciesApi(DEFAULT_CONFIG).policiesDummyRead({
policyUuid: pk,
});
}
@property({attribute: false})
policy?: DummyPolicy;
getSuccessMessage(): string {
if (this.policy) {
if (this.instance) {
return t`Successfully updated policy.`;
} else {
return t`Successfully created policy.`;
@ -32,9 +27,9 @@ export class DummyPolicyForm extends Form<DummyPolicy> {
}
send = (data: DummyPolicy): Promise<DummyPolicy> => {
if (this.policy) {
if (this.instance) {
return new PoliciesApi(DEFAULT_CONFIG).policiesDummyUpdate({
policyUuid: this.policy.pk || "",
policyUuid: this.instance.pk || "",
data: data
});
} else {
@ -53,11 +48,11 @@ export class DummyPolicyForm extends Form<DummyPolicy> {
label=${t`Name`}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.policy?.name || "")}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="executionLogging">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.policy?.executionLogging, false)}>
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.executionLogging, false)}>
<label class="pf-c-check__label">
${t`Execution logging`}
</label>
@ -73,7 +68,7 @@ export class DummyPolicyForm extends Form<DummyPolicy> {
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="result">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.policy?.result, false)}>
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.result, false)}>
<label class="pf-c-check__label">
${t`Pass policy?`}
</label>
@ -83,14 +78,14 @@ export class DummyPolicyForm extends Form<DummyPolicy> {
label=${t`Wait (min)`}
?required=${true}
name="waitMin">
<input type="number" value="${first(this.policy?.waitMin, 1)}" class="pf-c-form-control" required>
<input type="number" value="${first(this.instance?.waitMin, 1)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`The policy takes a random time to execute. This controls the minimum time it will take.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Wait (max)`}
?required=${true}
name="waitMax">
<input type="number" value="${first(this.policy?.waitMax, 5)}" class="pf-c-form-control" required>
<input type="number" value="${first(this.instance?.waitMax, 5)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
</div>
</ak-form-group>