web/admin: show policy binding form when creating policy in bound list

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-12-25 14:59:45 +01:00
parent ae13fc3b92
commit bfa0360764
No known key found for this signature in database
5 changed files with 65 additions and 26 deletions

View File

@ -199,6 +199,10 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
${t`Create Binding`}
</button>
</ak-forms-modal>
<ak-policy-wizard createText=${t`Create Policy`}></ak-policy-wizard> `;
<ak-policy-wizard
createText=${t`Create Policy`}
?showBindingPage=${true}
bindingTarget=${ifDefined(this.target)}
></ak-policy-wizard> `;
}
}

View File

@ -64,7 +64,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
policyOnly = false;
getSuccessMessage(): string {
if (this.instance) {
if (this.instance?.pk) {
return t`Successfully updated binding.`;
} else {
return t`Successfully created binding.`;
@ -84,9 +84,9 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
}
send = (data: PolicyBinding): Promise<PolicyBinding> => {
if (this.instance) {
if (this.instance?.pk) {
return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsUpdate({
policyBindingUuid: this.instance.pk || "",
policyBindingUuid: this.instance.pk,
policyBindingRequest: data,
});
} else {
@ -111,21 +111,18 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
`;
}
getOrder(): Promise<number> {
if (this.instance) {
return Promise.resolve(this.instance.order);
async getOrder(): Promise<number> {
if (this.instance?.pk) {
return this.instance.order;
}
return new PoliciesApi(DEFAULT_CONFIG)
.policiesBindingsList({
target: this.targetPk || "",
})
.then((bindings) => {
const orders = bindings.results.map((binding) => binding.order);
if (orders.length < 1) {
return 0;
}
return Math.max(...orders) + 1;
});
const bindings = await new PoliciesApi(DEFAULT_CONFIG).policiesBindingsList({
target: this.targetPk || "",
});
const orders = bindings.results.map((binding) => binding.order);
if (orders.length < 1) {
return 0;
}
return Math.max(...orders) + 1;
}
renderModeSelector(): TemplateResult {

View File

@ -1,3 +1,4 @@
import { PolicyBindingForm } from "@goauthentik/admin/policies/PolicyBindingForm";
import "@goauthentik/admin/policies/dummy/DummyPolicyForm";
import "@goauthentik/admin/policies/event_matcher/EventMatcherPolicyForm";
import "@goauthentik/admin/policies/expiry/ExpiryPolicyForm";
@ -9,6 +10,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/forms/ProxyForm";
import "@goauthentik/elements/wizard/FormWizardPage";
import { FormWizardPage } from "@goauthentik/elements/wizard/FormWizardPage";
import "@goauthentik/elements/wizard/Wizard";
import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
@ -24,7 +26,7 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { PoliciesApi, TypeCreate } from "@goauthentik/api";
import { PoliciesApi, Policy, PolicyBinding, TypeCreate } from "@goauthentik/api";
@customElement("ak-policy-wizard-initial")
export class InitialPolicyWizardPage extends WizardPage {
@ -46,10 +48,12 @@ export class InitialPolicyWizardPage extends WizardPage {
name="type"
id=${`${type.component}-${type.modelName}`}
@change=${() => {
this.host.steps = [
"initial",
const idx = this.host.steps.indexOf("initial") + 1;
this.host.steps.splice(
idx,
0,
`type-${type.component}-${type.modelName}`,
];
);
this.host.isValid = true;
}}
/>
@ -72,6 +76,12 @@ export class PolicyWizard extends AKElement {
@property()
createText = t`Create`;
@property({ type: Boolean })
showBindingPage = false;
@property()
bindingTarget?: string;
@property({ attribute: false })
policyTypes: TypeCreate[] = [];
@ -84,7 +94,7 @@ export class PolicyWizard extends AKElement {
render(): TemplateResult {
return html`
<ak-wizard
.steps=${["initial"]}
.steps=${this.showBindingPage ? ["initial", "create-binding"] : ["initial"]}
header=${t`New policy`}
description=${t`Create a new policy.`}
>
@ -100,6 +110,27 @@ export class PolicyWizard extends AKElement {
</ak-wizard-page-form>
`;
})}
${this.showBindingPage
? html`<ak-wizard-page-form
slot="create-binding"
.sidebarLabel=${() => t`Create Binding`}
.activePageCallback=${async (context: FormWizardPage) => {
const createSlot = context.host.steps[1];
const bindingForm =
context.querySelector<PolicyBindingForm>(
"ak-policy-binding-form",
);
if (!bindingForm) return;
bindingForm.instance = {
policy: (context.host.state[createSlot] as Policy).pk,
} as PolicyBinding;
}}
>
<ak-policy-binding-form
.targetPk=${this.bindingTarget}
></ak-policy-binding-form>
</ak-wizard-page-form>`
: html``}
<button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button>
</ak-wizard>
`;

View File

@ -11,9 +11,15 @@ import { customElement } from "lit/decorators.js";
*/
@customElement("ak-wizard-page-form")
export class FormWizardPage extends WizardPage {
activePageCallback: (context: FormWizardPage) => Promise<void> = async () => {
return Promise.resolve();
};
activeCallback = async () => {
this.host.isValid = true;
this.activePageCallback(this);
};
nextCallback = async () => {
const form = this.querySelector<Form<unknown>>("*");
if (!form) {
@ -24,7 +30,9 @@ export class FormWizardPage extends WizardPage {
return Promise.reject(t`Form didn't return a promise for submitting`);
}
return formPromise
.then(() => {
.then((data) => {
this.host.state[this.slot] = data;
this.host.canBack = false;
return true;
})
.catch(() => {

View File

@ -22,9 +22,8 @@ export class WizardPage extends AKElement {
return this.parentElement as Wizard;
}
activeCallback: () => Promise<void> = () => {
activeCallback: () => Promise<void> = async () => {
this.host.isValid = false;
return Promise.resolve();
};
nextCallback: () => Promise<boolean> = async () => {