web/admin: migrate more forms

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

View file

@ -7,15 +7,19 @@ import { Form } from "../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/forms/HorizontalFormElement";
import "../../elements/CodeMirror";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-crypto-certificate-form")
export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string> {
@property({attribute: false})
keyPair?: CertificateKeyPair;
loadInstance(pk: string): Promise<CertificateKeyPair> {
return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsRead({
kpUuid: pk,
});
}
getSuccessMessage(): string {
if (this.keyPair) {
if (this.instance) {
return t`Successfully updated certificate-key pair.`;
} else {
return t`Successfully created certificate-key pair.`;
@ -23,9 +27,9 @@ export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
}
send = (data: CertificateKeyPair): Promise<CertificateKeyPair> => {
if (this.keyPair) {
if (this.instance) {
return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsPartialUpdate({
kpUuid: this.keyPair.pk || "",
kpUuid: this.instance.pk || "",
data: data
});
} else {
@ -41,21 +45,21 @@ export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
label=${t`Name`}
name="name"
?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
label=${t`Certificate`}
name="certificateData"
?writeOnly=${this.keyPair !== undefined}
?writeOnly=${this.instance !== undefined}
?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>
</ak-form-element-horizontal>
<ak-form-element-horizontal
name="keyData"
?writeOnly=${this.keyPair !== undefined}
?writeOnly=${this.instance !== undefined}
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>
</ak-form-element-horizontal>
</form>`;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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>`;

View file

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

View file

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