Files
authentik/web/src/admin/applications/wizard/application/ak-application-wizard-application-details.ts
Ken Sternberg 7a0b227b46 Interim commit
2024-08-08 14:25:14 -07:00

104 lines
4.3 KiB
TypeScript

import { policyOptions } from "@goauthentik/admin/applications/ApplicationForm";
import { first } from "@goauthentik/common/utils.js";
import "@goauthentik/components/ak-radio-input";
import "@goauthentik/components/ak-slug-input";
import "@goauthentik/components/ak-switch-input";
import "@goauthentik/components/ak-text-input";
import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement";
import { msg } from "@lit/localize";
import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
import { TemplateResult, html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import BasePanel from "../BasePanel";
@customElement("ak-application-wizard-application-details")
export class ApplicationWizardApplicationDetails extends BasePanel {
handleChange(_ev: Event) {
const formValues = this.formValues;
if (!formValues) {
throw new Error("No application values on form?");
}
this.dispatchWizardUpdate({
update: {
...this.wizard,
app: formValues,
},
status: this.valid ? "valid" : "invalid",
});
}
render(): TemplateResult {
return html` <form class="pf-c-form pf-m-horizontal" @input=${this.handleChange}>
<ak-text-input
name="name"
value=${ifDefined(this.wizard.app?.name)}
label=${msg("Name")}
required
help=${msg("Application's display Name.")}
id="ak-application-wizard-details-name"
.errorMessages=${this.wizard.errors.app?.name ?? []}
></ak-text-input>
<ak-slug-input
name="slug"
value=${ifDefined(this.wizard.app?.slug)}
label=${msg("Slug")}
source="#ak-application-wizard-details-name"
required
help=${msg("Internal application name used in URLs.")}
.errorMessages=${this.wizard.errors.app?.slug ?? []}
></ak-slug-input>
<ak-text-input
name="group"
value=${ifDefined(this.wizard.app?.group)}
label=${msg("Group")}
.errorMessages=${this.wizard.errors.app?.group ?? []}
help=${msg(
"Optionally enter a group name. Applications with identical groups are shown grouped together.",
)}
></ak-text-input>
<ak-radio-input
label=${msg("Policy engine mode")}
required
name="policyEngineMode"
.options=${policyOptions}
.value=${this.wizard.app?.policyEngineMode}
.errorMessages=${this.wizard.errors.app?.policyEngineMode ?? []}
></ak-radio-input>
<ak-form-group aria-label=${msg("UI Settings")}>
<span slot="header"> ${msg("UI Settings")} </span>
<div slot="body" class="pf-c-form">
<ak-text-input
name="metaLaunchUrl"
label=${msg("Launch URL")}
value=${ifDefined(this.wizard.app?.metaLaunchUrl)}
help=${msg(
"If left empty, authentik will try to extract the launch URL based on the selected provider.",
)}
.errorMessages=${this.wizard.errors.app?.metaLaunchUrl ?? []}
></ak-text-input>
<ak-switch-input
name="openInNewTab"
?checked=${first(this.wizard.app?.openInNewTab, false)}
label=${msg("Open in new tab")}
help=${msg(
"If checked, the launch URL will open in a new browser tab or window from the user's application library.",
)}
>
</ak-switch-input>
</div>
</ak-form-group>
</form>`;
}
}
export default ApplicationWizardApplicationDetails;
declare global {
interface HTMLElementTagNameMap {
"ak-application-wizard-application-details": ApplicationWizardApplicationDetails;
}
}