web/admin: migrate more forms
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
@ -6,15 +6,19 @@ 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 { ModelForm } from "../../elements/forms/ModelForm";
|
||||
|
||||
@customElement("ak-flow-form")
|
||||
export class FlowForm extends Form<Flow> {
|
||||
export class FlowForm extends ModelForm<Flow, string> {
|
||||
|
||||
@property({attribute: false})
|
||||
flow?: Flow;
|
||||
loadInstance(pk: string): Promise<Flow> {
|
||||
return new FlowsApi(DEFAULT_CONFIG).flowsInstancesRead({
|
||||
slug: pk,
|
||||
});
|
||||
}
|
||||
|
||||
getSuccessMessage(): string {
|
||||
if (this.flow) {
|
||||
if (this.instance) {
|
||||
return t`Successfully updated flow.`;
|
||||
} else {
|
||||
return t`Successfully created flow.`;
|
||||
@ -23,9 +27,9 @@ export class FlowForm extends Form<Flow> {
|
||||
|
||||
send = (data: Flow): Promise<void | Flow> => {
|
||||
let writeOp: Promise<Flow>;
|
||||
if (this.flow) {
|
||||
if (this.instance) {
|
||||
writeOp = new FlowsApi(DEFAULT_CONFIG).flowsInstancesUpdate({
|
||||
slug: this.flow.slug,
|
||||
slug: this.instance.slug,
|
||||
data: data
|
||||
});
|
||||
} else {
|
||||
@ -47,25 +51,25 @@ export class FlowForm extends Form<Flow> {
|
||||
|
||||
renderDesignations(): TemplateResult {
|
||||
return html`
|
||||
<option value=${FlowDesignationEnum.Authentication} ?selected=${this.flow?.designation === FlowDesignationEnum.Authentication}>
|
||||
<option value=${FlowDesignationEnum.Authentication} ?selected=${this.instance?.designation === FlowDesignationEnum.Authentication}>
|
||||
${t`Authentication`}
|
||||
</option>
|
||||
<option value=${FlowDesignationEnum.Authorization} ?selected=${this.flow?.designation === FlowDesignationEnum.Authorization}>
|
||||
<option value=${FlowDesignationEnum.Authorization} ?selected=${this.instance?.designation === FlowDesignationEnum.Authorization}>
|
||||
${t`Authorization`}
|
||||
</option>
|
||||
<option value=${FlowDesignationEnum.Enrollment} ?selected=${this.flow?.designation === FlowDesignationEnum.Enrollment}>
|
||||
<option value=${FlowDesignationEnum.Enrollment} ?selected=${this.instance?.designation === FlowDesignationEnum.Enrollment}>
|
||||
${t`Enrollment`}
|
||||
</option>
|
||||
<option value=${FlowDesignationEnum.Invalidation} ?selected=${this.flow?.designation === FlowDesignationEnum.Invalidation}>
|
||||
<option value=${FlowDesignationEnum.Invalidation} ?selected=${this.instance?.designation === FlowDesignationEnum.Invalidation}>
|
||||
${t`Invalidation`}
|
||||
</option>
|
||||
<option value=${FlowDesignationEnum.Recovery} ?selected=${this.flow?.designation === FlowDesignationEnum.Recovery}>
|
||||
<option value=${FlowDesignationEnum.Recovery} ?selected=${this.instance?.designation === FlowDesignationEnum.Recovery}>
|
||||
${t`Recovery`}
|
||||
</option>
|
||||
<option value=${FlowDesignationEnum.StageConfiguration} ?selected=${this.flow?.designation === FlowDesignationEnum.StageConfiguration}>
|
||||
<option value=${FlowDesignationEnum.StageConfiguration} ?selected=${this.instance?.designation === FlowDesignationEnum.StageConfiguration}>
|
||||
${t`Stage Configuration`}
|
||||
</option>
|
||||
<option value=${FlowDesignationEnum.Unenrollment} ?selected=${this.flow?.designation === FlowDesignationEnum.Unenrollment}>
|
||||
<option value=${FlowDesignationEnum.Unenrollment} ?selected=${this.instance?.designation === FlowDesignationEnum.Unenrollment}>
|
||||
${t`Unenrollment`}
|
||||
</option>
|
||||
`;
|
||||
@ -77,20 +81,20 @@ export class FlowForm extends Form<Flow> {
|
||||
label=${t`Name`}
|
||||
?required=${true}
|
||||
name="name">
|
||||
<input type="text" value="${ifDefined(this.flow?.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
|
||||
label=${t`Title`}
|
||||
?required=${true}
|
||||
name="title">
|
||||
<input type="text" value="${ifDefined(this.flow?.title)}" class="pf-c-form-control" required>
|
||||
<input type="text" value="${ifDefined(this.instance?.title)}" class="pf-c-form-control" required>
|
||||
<p class="pf-c-form__helper-text">${t`Shown as the Title in Flow pages.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Slug`}
|
||||
?required=${true}
|
||||
name="slug">
|
||||
<input type="text" value="${ifDefined(this.flow?.slug)}" class="pf-c-form-control" required>
|
||||
<input type="text" value="${ifDefined(this.instance?.slug)}" class="pf-c-form-control" required>
|
||||
<p class="pf-c-form__helper-text">${t`Visible in the URL.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
@ -98,10 +102,10 @@ export class FlowForm extends Form<Flow> {
|
||||
?required=${true}
|
||||
name="policyEngineMode">
|
||||
<select class="pf-c-form-control">
|
||||
<option value=${FlowPolicyEngineModeEnum.Any} ?selected=${this.flow?.policyEngineMode === FlowPolicyEngineModeEnum.Any}>
|
||||
<option value=${FlowPolicyEngineModeEnum.Any} ?selected=${this.instance?.policyEngineMode === FlowPolicyEngineModeEnum.Any}>
|
||||
${t`ANY, any policy must match to grant access.`}
|
||||
</option>
|
||||
<option value=${FlowPolicyEngineModeEnum.All} ?selected=${this.flow?.policyEngineMode === FlowPolicyEngineModeEnum.All}>
|
||||
<option value=${FlowPolicyEngineModeEnum.All} ?selected=${this.instance?.policyEngineMode === FlowPolicyEngineModeEnum.All}>
|
||||
${t`ALL, all policies must match to grant access.`}
|
||||
</option>
|
||||
</select>
|
||||
@ -111,7 +115,7 @@ export class FlowForm extends Form<Flow> {
|
||||
?required=${true}
|
||||
name="designation">
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.flow?.designation === undefined}>---------</option>
|
||||
<option value="" ?selected=${this.instance?.designation === undefined}>---------</option>
|
||||
${this.renderDesignations()}
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">${t`Decides what this Flow is used for. For example, the Authentication flow is redirect to when an un-authenticated user visits authentik.`}</p>
|
||||
@ -119,7 +123,7 @@ export class FlowForm extends Form<Flow> {
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Background`}
|
||||
name="background">
|
||||
<input type="file" value="${ifDefined(this.flow?.background)}" class="pf-c-form-control">
|
||||
<input type="file" value="${ifDefined(this.instance?.background)}" class="pf-c-form-control">
|
||||
<p class="pf-c-form__helper-text">${t`Background shown during execution.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
</form>`;
|
||||
|
||||
Reference in New Issue
Block a user