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 11:55:25 +02:00
parent b4d750174f
commit 4d11d82c6e
10 changed files with 98 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/pages/crypto/CertificateKeyPairForm.ts
View File

@ -7,15 +7,19 @@ import { Form } from "../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/forms/HorizontalFormElement"; import "../../elements/forms/HorizontalFormElement";
import "../../elements/CodeMirror"; import "../../elements/CodeMirror";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-crypto-certificate-form") @customElement("ak-crypto-certificate-form")
export class CertificateKeyPairForm extends Form<CertificateKeyPair> { export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string> {
@property({attribute: false}) loadInstance(pk: string): Promise<CertificateKeyPair> {
keyPair?: CertificateKeyPair; return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsRead({
kpUuid: pk,
});
}
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.keyPair) { if (this.instance) {
return t`Successfully updated certificate-key pair.`; return t`Successfully updated certificate-key pair.`;
} else { } else {
return t`Successfully created certificate-key pair.`; return t`Successfully created certificate-key pair.`;
@ -23,9 +27,9 @@ export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
} }
send = (data: CertificateKeyPair): Promise<CertificateKeyPair> => { send = (data: CertificateKeyPair): Promise<CertificateKeyPair> => {
if (this.keyPair) { if (this.instance) {
return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsPartialUpdate({ return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsPartialUpdate({
kpUuid: this.keyPair.pk || "", kpUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -41,21 +45,21 @@ export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
label=${t`Name`} label=${t`Name`}
name="name" name="name"
?required=${true}> ?required=${true}>
<input type="text" value="${ifDefined(this.keyPair?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Certificate`} label=${t`Certificate`}
name="certificateData" name="certificateData"
?writeOnly=${this.keyPair !== undefined} ?writeOnly=${this.instance !== undefined}
?required=${true}> ?required=${true}>
<textarea class="pf-c-form-control" required>${ifDefined(this.keyPair?.certificateData)}</textarea> <textarea class="pf-c-form-control" required>${ifDefined(this.instance?.certificateData)}</textarea>
<p class="pf-c-form__helper-text">${t`PEM-encoded Certificate data.`}</p> <p class="pf-c-form__helper-text">${t`PEM-encoded Certificate data.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
name="keyData" name="keyData"
?writeOnly=${this.keyPair !== undefined} ?writeOnly=${this.instance !== undefined}
label=${t`Private Key`}> label=${t`Private Key`}>
<textarea class="pf-c-form-control" >${ifDefined(this.keyPair?.keyData)}</textarea> <textarea class="pf-c-form-control" >${ifDefined(this.instance?.keyData)}</textarea>
<p class="pf-c-form__helper-text">${t`Optional Private Key. If this is set, you can use this keypair for encryption.`}</p> <p class="pf-c-form__helper-text">${t`Optional Private Key. If this is set, you can use this keypair for encryption.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;

2
web/src/pages/crypto/CertificateKeyPairListPage.ts
View File

@ -70,7 +70,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
<span slot="header"> <span slot="header">
${t`Update Certificate-Key Pair`} ${t`Update Certificate-Key Pair`}
</span> </span>
<ak-crypto-certificate-form slot="form" .keyPair=${item}> <ak-crypto-certificate-form slot="form" .instancePk=${item.pk}>
</ak-crypto-certificate-form> </ak-crypto-certificate-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit`} ${t`Edit`}

30
web/src/pages/events/RuleForm.ts
View File

@ -7,15 +7,19 @@ import { Form } from "../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/forms/HorizontalFormElement"; import "../../elements/forms/HorizontalFormElement";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-event-rule-form") @customElement("ak-event-rule-form")
export class RuleForm extends Form<NotificationRule> { export class RuleForm extends ModelForm<NotificationRule, string> {
@property({attribute: false}) loadInstance(pk: string): Promise<NotificationRule> {
rule?: NotificationRule; return new EventsApi(DEFAULT_CONFIG).eventsRulesRead({
pbmUuid: pk,
});
}
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.rule) { if (this.instance) {
return t`Successfully updated rule.`; return t`Successfully updated rule.`;
} else { } else {
return t`Successfully created rule.`; return t`Successfully created rule.`;
@ -23,9 +27,9 @@ export class RuleForm extends Form<NotificationRule> {
} }
send = (data: NotificationRule): Promise<NotificationRule> => { send = (data: NotificationRule): Promise<NotificationRule> => {
if (this.rule) { if (this.instance) {
return new EventsApi(DEFAULT_CONFIG).eventsRulesUpdate({ return new EventsApi(DEFAULT_CONFIG).eventsRulesUpdate({
pbmUuid: this.rule.pk || "", pbmUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -37,13 +41,13 @@ export class RuleForm extends Form<NotificationRule> {
renderSeverity(): TemplateResult { renderSeverity(): TemplateResult {
return html` return html`
<option value=${NotificationRuleSeverityEnum.Alert} ?selected=${this.rule?.severity === NotificationRuleSeverityEnum.Alert}> <option value=${NotificationRuleSeverityEnum.Alert} ?selected=${this.instance?.severity === NotificationRuleSeverityEnum.Alert}>
${t`Alert`} ${t`Alert`}
</option> </option>
<option value=${NotificationRuleSeverityEnum.Warning} ?selected=${this.rule?.severity === NotificationRuleSeverityEnum.Warning}> <option value=${NotificationRuleSeverityEnum.Warning} ?selected=${this.instance?.severity === NotificationRuleSeverityEnum.Warning}>
${t`Warning`} ${t`Warning`}
</option> </option>
<option value=${NotificationRuleSeverityEnum.Notice} ?selected=${this.rule?.severity === NotificationRuleSeverityEnum.Notice}> <option value=${NotificationRuleSeverityEnum.Notice} ?selected=${this.instance?.severity === NotificationRuleSeverityEnum.Notice}>
${t`Notice`} ${t`Notice`}
</option> </option>
`; `;
@ -55,16 +59,16 @@ export class RuleForm extends Form<NotificationRule> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.rule?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Group`} label=${t`Group`}
name="group"> name="group">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.rule?.group === undefined}>---------</option> <option value="" ?selected=${this.instance?.group === undefined}>---------</option>
${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => { ${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => {
return groups.results.map(group => { return groups.results.map(group => {
return html`<option value=${ifDefined(group.pk)} ?selected=${this.rule?.group?.groupUuid === group.pk}>${group.name}</option>`; return html`<option value=${ifDefined(group.pk)} ?selected=${this.instance?.group?.groupUuid === group.pk}>${group.name}</option>`;
}); });
}), html`<option>${t`Loading...`}</option>`)} }), html`<option>${t`Loading...`}</option>`)}
</select> </select>
@ -76,7 +80,7 @@ export class RuleForm extends Form<NotificationRule> {
<select name="users" class="pf-c-form-control" multiple> <select name="users" class="pf-c-form-control" multiple>
${until(new EventsApi(DEFAULT_CONFIG).eventsTransportsList({}).then(transports => { ${until(new EventsApi(DEFAULT_CONFIG).eventsTransportsList({}).then(transports => {
return transports.results.map(transport => { return transports.results.map(transport => {
const selected = Array.from(this.rule?.transports || []).some(su => { const selected = Array.from(this.instance?.transports || []).some(su => {
return su.uuid == transport.pk; return su.uuid == transport.pk;
}); });
return html`<option value=${ifDefined(transport.pk)} ?selected=${selected}>${transport.name}</option>`; return html`<option value=${ifDefined(transport.pk)} ?selected=${selected}>${transport.name}</option>`;

2
web/src/pages/events/RuleListPage.ts
View File

@ -64,7 +64,7 @@ export class RuleListPage extends TablePage<NotificationRule> {
<span slot="header"> <span slot="header">
${t`Update Notification Rule`} ${t`Update Notification Rule`}
</span> </span>
<ak-event-rule-form slot="form" .rule=${item}> <ak-event-rule-form slot="form" .instancePk=${item.pk}>
</ak-event-rule-form> </ak-event-rule-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit`} ${t`Edit`}

32
web/src/pages/events/TransportForm.ts
View File

@ -7,18 +7,22 @@ import { Form } from "../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/forms/HorizontalFormElement"; import "../../elements/forms/HorizontalFormElement";
import { first } from "../../utils"; import { first } from "../../utils";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-event-transport-form") @customElement("ak-event-transport-form")
export class TransportForm extends Form<NotificationTransport> { export class TransportForm extends ModelForm<NotificationTransport, string> {
@property({attribute: false}) loadInstance(pk: string): Promise<NotificationTransport> {
transport?: NotificationTransport; return new EventsApi(DEFAULT_CONFIG).eventsTransportsRead({
uuid: pk,
});
}
@property({type: Boolean}) @property({type: Boolean})
showWebhook = false; showWebhook = false;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.transport) { if (this.instance) {
return t`Successfully updated transport.`; return t`Successfully updated transport.`;
} else { } else {
return t`Successfully created transport.`; return t`Successfully created transport.`;
@ -26,9 +30,9 @@ export class TransportForm extends Form<NotificationTransport> {
} }
send = (data: NotificationTransport): Promise<NotificationTransport> => { send = (data: NotificationTransport): Promise<NotificationTransport> => {
if (this.transport) { if (this.instance) {
return new EventsApi(DEFAULT_CONFIG).eventsTransportsUpdate({ return new EventsApi(DEFAULT_CONFIG).eventsTransportsUpdate({
uuid: this.transport.pk || "", uuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -40,21 +44,21 @@ export class TransportForm extends Form<NotificationTransport> {
renderTransportModes(): TemplateResult { renderTransportModes(): TemplateResult {
return html` return html`
<option value=${NotificationTransportModeEnum.Email} ?selected=${this.transport?.mode === NotificationTransportModeEnum.Email}> <option value=${NotificationTransportModeEnum.Email} ?selected=${this.instance?.mode === NotificationTransportModeEnum.Email}>
${t`Email`} ${t`Email`}
</option> </option>
<option value=${NotificationTransportModeEnum.Webhook} ?selected=${this.transport?.mode === NotificationTransportModeEnum.Webhook}> <option value=${NotificationTransportModeEnum.Webhook} ?selected=${this.instance?.mode === NotificationTransportModeEnum.Webhook}>
${t`Webhook (generic)`} ${t`Webhook (generic)`}
</option> </option>
<option value=${NotificationTransportModeEnum.WebhookSlack} ?selected=${this.transport?.mode === NotificationTransportModeEnum.WebhookSlack}> <option value=${NotificationTransportModeEnum.WebhookSlack} ?selected=${this.instance?.mode === NotificationTransportModeEnum.WebhookSlack}>
${t`Webhook (Slack/Discord)`} ${t`Webhook (Slack/Discord)`}
</option> </option>
`; `;
} }
firstUpdated(): void { firstUpdated(): void {
if (this.transport) { if (this.instance) {
this.onModeChange(this.transport.mode); this.onModeChange(this.instance.mode);
} }
} }
@ -72,7 +76,7 @@ export class TransportForm extends Form<NotificationTransport> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.transport?.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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Mode`} label=${t`Mode`}
@ -89,11 +93,11 @@ export class TransportForm extends Form<NotificationTransport> {
?hidden=${!this.showWebhook} ?hidden=${!this.showWebhook}
label=${t`Webhook URL`} label=${t`Webhook URL`}
name="webhookUrl"> name="webhookUrl">
<input type="text" value="${ifDefined(this.transport?.webhookUrl)}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.instance?.webhookUrl)}" class="pf-c-form-control">
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="sendOnce"> <ak-form-element-horizontal name="sendOnce">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.transport?.sendOnce, false)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.sendOnce, false)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Send once`} ${t`Send once`}
</label> </label>

2
web/src/pages/events/TransportListPage.ts
View File

@ -68,7 +68,7 @@ export class TransportListPage extends TablePage<NotificationTransport> {
<span slot="header"> <span slot="header">
${t`Update Notification Transport`} ${t`Update Notification Transport`}
</span> </span>
<ak-event-transport-form slot="form" .transport=${item}> <ak-event-transport-form slot="form" .instancePk=${item.pk}>
</ak-event-transport-form> </ak-event-transport-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit`} ${t`Edit`}

2
web/src/pages/flows/BoundStagesList.ts
View File

@ -73,7 +73,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
<span slot="header"> <span slot="header">
${t`Update Stage binding`} ${t`Update Stage binding`}
</span> </span>
<ak-stage-binding-form slot="form" .fsb=${item}> <ak-stage-binding-form slot="form" .instancePk=${item.pk}>
</ak-stage-binding-form> </ak-stage-binding-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit Binding`} ${t`Edit Binding`}

44
web/src/pages/flows/FlowForm.ts
View File

@ -6,15 +6,19 @@ import { DEFAULT_CONFIG } from "../../api/Config";
import { Form } from "../../elements/forms/Form"; import { Form } from "../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/forms/HorizontalFormElement"; import "../../elements/forms/HorizontalFormElement";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-flow-form") @customElement("ak-flow-form")
export class FlowForm extends Form<Flow> { export class FlowForm extends ModelForm<Flow, string> {
@property({attribute: false}) loadInstance(pk: string): Promise<Flow> {
flow?: Flow; return new FlowsApi(DEFAULT_CONFIG).flowsInstancesRead({
slug: pk,
});
}
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.flow) { if (this.instance) {
return t`Successfully updated flow.`; return t`Successfully updated flow.`;
} else { } else {
return t`Successfully created flow.`; return t`Successfully created flow.`;
@ -23,9 +27,9 @@ export class FlowForm extends Form<Flow> {
send = (data: Flow): Promise<void | Flow> => { send = (data: Flow): Promise<void | Flow> => {
let writeOp: Promise<Flow>; let writeOp: Promise<Flow>;
if (this.flow) { if (this.instance) {
writeOp = new FlowsApi(DEFAULT_CONFIG).flowsInstancesUpdate({ writeOp = new FlowsApi(DEFAULT_CONFIG).flowsInstancesUpdate({
slug: this.flow.slug, slug: this.instance.slug,
data: data data: data
}); });
} else { } else {
@ -47,25 +51,25 @@ export class FlowForm extends Form<Flow> {
renderDesignations(): TemplateResult { renderDesignations(): TemplateResult {
return html` return html`
<option value=${FlowDesignationEnum.Authentication} ?selected=${this.flow?.designation === FlowDesignationEnum.Authentication}> <option value=${FlowDesignationEnum.Authentication} ?selected=${this.instance?.designation === FlowDesignationEnum.Authentication}>
${t`Authentication`} ${t`Authentication`}
</option> </option>
<option value=${FlowDesignationEnum.Authorization} ?selected=${this.flow?.designation === FlowDesignationEnum.Authorization}> <option value=${FlowDesignationEnum.Authorization} ?selected=${this.instance?.designation === FlowDesignationEnum.Authorization}>
${t`Authorization`} ${t`Authorization`}
</option> </option>
<option value=${FlowDesignationEnum.Enrollment} ?selected=${this.flow?.designation === FlowDesignationEnum.Enrollment}> <option value=${FlowDesignationEnum.Enrollment} ?selected=${this.instance?.designation === FlowDesignationEnum.Enrollment}>
${t`Enrollment`} ${t`Enrollment`}
</option> </option>
<option value=${FlowDesignationEnum.Invalidation} ?selected=${this.flow?.designation === FlowDesignationEnum.Invalidation}> <option value=${FlowDesignationEnum.Invalidation} ?selected=${this.instance?.designation === FlowDesignationEnum.Invalidation}>
${t`Invalidation`} ${t`Invalidation`}
</option> </option>
<option value=${FlowDesignationEnum.Recovery} ?selected=${this.flow?.designation === FlowDesignationEnum.Recovery}> <option value=${FlowDesignationEnum.Recovery} ?selected=${this.instance?.designation === FlowDesignationEnum.Recovery}>
${t`Recovery`} ${t`Recovery`}
</option> </option>
<option value=${FlowDesignationEnum.StageConfiguration} ?selected=${this.flow?.designation === FlowDesignationEnum.StageConfiguration}> <option value=${FlowDesignationEnum.StageConfiguration} ?selected=${this.instance?.designation === FlowDesignationEnum.StageConfiguration}>
${t`Stage Configuration`} ${t`Stage Configuration`}
</option> </option>
<option value=${FlowDesignationEnum.Unenrollment} ?selected=${this.flow?.designation === FlowDesignationEnum.Unenrollment}> <option value=${FlowDesignationEnum.Unenrollment} ?selected=${this.instance?.designation === FlowDesignationEnum.Unenrollment}>
${t`Unenrollment`} ${t`Unenrollment`}
</option> </option>
`; `;
@ -77,20 +81,20 @@ export class FlowForm extends Form<Flow> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> 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>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Title`} label=${t`Title`}
?required=${true} ?required=${true}
name="title"> 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> <p class="pf-c-form__helper-text">${t`Shown as the Title in Flow pages.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Slug`} label=${t`Slug`}
?required=${true} ?required=${true}
name="slug"> 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> <p class="pf-c-form__helper-text">${t`Visible in the URL.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
@ -98,10 +102,10 @@ export class FlowForm extends Form<Flow> {
?required=${true} ?required=${true}
name="policyEngineMode"> name="policyEngineMode">
<select class="pf-c-form-control"> <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.`} ${t`ANY, any policy must match to grant access.`}
</option> </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.`} ${t`ALL, all policies must match to grant access.`}
</option> </option>
</select> </select>
@ -111,7 +115,7 @@ export class FlowForm extends Form<Flow> {
?required=${true} ?required=${true}
name="designation"> name="designation">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.flow?.designation === undefined}>---------</option> <option value="" ?selected=${this.instance?.designation === undefined}>---------</option>
${this.renderDesignations()} ${this.renderDesignations()}
</select> </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> <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 <ak-form-element-horizontal
label=${t`Background`} label=${t`Background`}
name="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> <p class="pf-c-form__helper-text">${t`Background shown during execution.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;

2
web/src/pages/flows/FlowListPage.ts
View File

@ -68,7 +68,7 @@ export class FlowListPage extends TablePage<Flow> {
<span slot="header"> <span slot="header">
${t`Update Flow`} ${t`Update Flow`}
</span> </span>
<ak-flow-form slot="form" .flow=${item}> <ak-flow-form slot="form" .instancePk=${item.pk}>
</ak-flow-form> </ak-flow-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit`} ${t`Edit`}

34
web/src/pages/flows/StageBindingForm.ts
View File

@ -8,18 +8,22 @@ import { until } from "lit-html/directives/until";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/forms/HorizontalFormElement"; import "../../elements/forms/HorizontalFormElement";
import { first, groupBy } from "../../utils"; import { first, groupBy } from "../../utils";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-stage-binding-form") @customElement("ak-stage-binding-form")
export class StageBindingForm extends Form<FlowStageBinding> { export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
@property({attribute: false}) loadInstance(pk: string): Promise<FlowStageBinding> {
fsb?: FlowStageBinding; return new FlowsApi(DEFAULT_CONFIG).flowsBindingsRead({
fsbUuid: pk,
});
}
@property() @property()
targetPk?: string; targetPk?: string;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.fsb) { if (this.instance) {
return t`Successfully updated binding.`; return t`Successfully updated binding.`;
} else { } else {
return t`Successfully created binding.`; return t`Successfully created binding.`;
@ -27,9 +31,9 @@ export class StageBindingForm extends Form<FlowStageBinding> {
} }
send = (data: FlowStageBinding): Promise<FlowStageBinding> => { send = (data: FlowStageBinding): Promise<FlowStageBinding> => {
if (this.fsb) { if (this.instance) {
return new FlowsApi(DEFAULT_CONFIG).flowsBindingsUpdate({ return new FlowsApi(DEFAULT_CONFIG).flowsBindingsUpdate({
fsbUuid: this.fsb.pk || "", fsbUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -45,7 +49,7 @@ export class StageBindingForm extends Form<FlowStageBinding> {
${groupBy<Stage>(stages, (s => s.verboseName || "")).map(([group, stages]) => { ${groupBy<Stage>(stages, (s => s.verboseName || "")).map(([group, stages]) => {
return html`<optgroup label=${group}> return html`<optgroup label=${group}>
${stages.map(stage => { ${stages.map(stage => {
const selected = (this.fsb?.stage === stage.pk); const selected = (this.instance?.stage === stage.pk);
return html`<option ?selected=${selected} value=${ifDefined(stage.pk)}>${stage.name}</option>`; return html`<option ?selected=${selected} value=${ifDefined(stage.pk)}>${stage.name}</option>`;
})} })}
</optgroup>`; </optgroup>`;
@ -54,8 +58,8 @@ export class StageBindingForm extends Form<FlowStageBinding> {
} }
getOrder(): Promise<number> { getOrder(): Promise<number> {
if (this.fsb) { if (this.instance) {
return Promise.resolve(this.fsb.order); return Promise.resolve(this.instance.order);
} }
return new FlowsApi(DEFAULT_CONFIG).flowsBindingsList({ return new FlowsApi(DEFAULT_CONFIG).flowsBindingsList({
target: this.targetPk || "", target: this.targetPk || "",
@ -69,9 +73,9 @@ export class StageBindingForm extends Form<FlowStageBinding> {
} }
renderTarget(): TemplateResult { renderTarget(): TemplateResult {
if (this.fsb?.target || this.targetPk) { if (this.instance?.target || this.targetPk) {
return html` return html`
<input required name="target" type="hidden" value=${ifDefined(this.fsb?.target || this.targetPk)}> <input required name="target" type="hidden" value=${ifDefined(this.instance?.target || this.targetPk)}>
`; `;
} }
return html`<ak-form-element-horizontal return html`<ak-form-element-horizontal
@ -114,7 +118,7 @@ export class StageBindingForm extends Form<FlowStageBinding> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="evaluateOnPlan"> <ak-form-element-horizontal name="evaluateOnPlan">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.fsb?.evaluateOnPlan, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.evaluateOnPlan, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Evaluate on plan`} ${t`Evaluate on plan`}
</label> </label>
@ -125,7 +129,7 @@ export class StageBindingForm extends Form<FlowStageBinding> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="reEvaluatePolicies"> <ak-form-element-horizontal name="reEvaluatePolicies">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.fsb?.reEvaluatePolicies, false)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.reEvaluatePolicies, false)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Re-evaluate policies`} ${t`Re-evaluate policies`}
</label> </label>
@ -137,10 +141,10 @@ export class StageBindingForm extends Form<FlowStageBinding> {
?required=${true} ?required=${true}
name="policyEngineMode"> name="policyEngineMode">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value=${FlowStageBindingPolicyEngineModeEnum.Any} ?selected=${this.fsb?.policyEngineMode === FlowStageBindingPolicyEngineModeEnum.Any}> <option value=${FlowStageBindingPolicyEngineModeEnum.Any} ?selected=${this.instance?.policyEngineMode === FlowStageBindingPolicyEngineModeEnum.Any}>
${t`ANY, any policy must match to include this stage access.`} ${t`ANY, any policy must match to include this stage access.`}
</option> </option>
<option value=${FlowStageBindingPolicyEngineModeEnum.All} ?selected=${this.fsb?.policyEngineMode === FlowStageBindingPolicyEngineModeEnum.All}> <option value=${FlowStageBindingPolicyEngineModeEnum.All} ?selected=${this.instance?.policyEngineMode === FlowStageBindingPolicyEngineModeEnum.All}>
${t`ALL, all policies must match to include this stage access.`} ${t`ALL, all policies must match to include this stage access.`}
</option> </option>
</select> </select>