Broke out the text input into a single renderer. Still works as required.
This commit is contained in:
Ken Sternberg
parent
540eee1612
commit
6a60174371
|
|
@ -26,6 +26,8 @@ import {
|
||||||
ProvidersApi,
|
ProvidersApi,
|
||||||
} from "@goauthentik/api";
|
} from "@goauthentik/api";
|
||||||
|
|
||||||
|
import { akText } from "./renderers";
|
||||||
|
|
||||||
@customElement("ak-application-form")
|
@customElement("ak-application-form")
|
||||||
export class ApplicationForm extends ModelForm<Application, string> {
|
export class ApplicationForm extends ModelForm<Application, string> {
|
||||||
async loadInstance(pk: string): Promise<Application> {
|
async loadInstance(pk: string): Promise<Application> {
|
||||||
|
|
@ -90,70 +92,28 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
||||||
|
|
||||||
renderForm(): TemplateResult {
|
renderForm(): TemplateResult {
|
||||||
return html`<form class="pf-c-form pf-m-horizontal">
|
return html`<form class="pf-c-form pf-m-horizontal">
|
||||||
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
|
${akText({
|
||||||
<input
|
name: "name",
|
||||||
type="text"
|
value: this.instance?.name,
|
||||||
value="${ifDefined(this.instance?.name)}"
|
label: msg("Name"),
|
||||||
class="pf-c-form-control"
|
required: true,
|
||||||
required
|
help: msg("Application's display Name."),
|
||||||
/>
|
})}
|
||||||
<p class="pf-c-form__helper-text">${msg("Application's display Name.")}</p>
|
${akText({
|
||||||
</ak-form-element-horizontal>
|
name: "slug",
|
||||||
<ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
|
value: this.instance?.slug,
|
||||||
<input
|
label: msg("Slug"),
|
||||||
type="text"
|
required: true,
|
||||||
value="${ifDefined(this.instance?.slug)}"
|
help: msg("Internal application name, used in URLs."),
|
||||||
class="pf-c-form-control"
|
})}
|
||||||
required
|
${akText({
|
||||||
/>
|
name: "group",
|
||||||
<p class="pf-c-form__helper-text">
|
value: this.instance?.group,
|
||||||
${msg("Internal application name, used in URLs.")}
|
label: msg("Group"),
|
||||||
</p>
|
help: msg(
|
||||||
</ak-form-element-horizontal>
|
"Optionally enter a group name. Applications with identical groups are shown grouped together."
|
||||||
<ak-form-element-horizontal label=${msg("Group")} name="group">
|
),
|
||||||
<input
|
})}
|
||||||
type="text"
|
|
||||||
value="${ifDefined(this.instance?.group)}"
|
|
||||||
class="pf-c-form-control"
|
|
||||||
/>
|
|
||||||
<p class="pf-c-form__helper-text">
|
|
||||||
${msg(
|
|
||||||
"Optionally enter a group name. Applications with identical groups are shown grouped together.",
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</ak-form-element-horizontal>
|
|
||||||
<ak-form-element-horizontal label=${msg("Provider")} name="provider">
|
|
||||||
<ak-search-select
|
|
||||||
.fetchObjects=${async (query?: string): Promise<Provider[]> => {
|
|
||||||
const args: ProvidersAllListRequest = {
|
|
||||||
ordering: "name",
|
|
||||||
};
|
|
||||||
if (query !== undefined) {
|
|
||||||
args.search = query;
|
|
||||||
}
|
|
||||||
const items = await new ProvidersApi(DEFAULT_CONFIG).providersAllList(args);
|
|
||||||
return items.results;
|
|
||||||
}}
|
|
||||||
.renderElement=${(item: Provider): string => {
|
|
||||||
return item.name;
|
|
||||||
}}
|
|
||||||
.value=${(item: Provider | undefined): number | undefined => {
|
|
||||||
return item?.pk;
|
|
||||||
}}
|
|
||||||
.groupBy=${(items: Provider[]) => {
|
|
||||||
return groupBy(items, (item) => item.verboseName);
|
|
||||||
}}
|
|
||||||
.selected=${(item: Provider): boolean => {
|
|
||||||
return this.instance?.provider === item.pk;
|
|
||||||
}}
|
|
||||||
?blankable=${true}
|
|
||||||
>
|
|
||||||
</ak-search-select>
|
|
||||||
<p class="pf-c-form__helper-text">
|
|
||||||
${msg("Select a provider that this application should use.")}
|
|
||||||
</p>
|
|
||||||
</ak-form-element-horizontal>
|
|
||||||
|
|
||||||
<ak-form-element-horizontal
|
<ak-form-element-horizontal
|
||||||
label=${msg("Backchannel providers")}
|
label=${msg("Backchannel providers")}
|
||||||
name="backchannelProviders"
|
name="backchannelProviders"
|
||||||
|
|
@ -191,7 +151,7 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
||||||
</div>
|
</div>
|
||||||
<p class="pf-c-form__helper-text">
|
<p class="pf-c-form__helper-text">
|
||||||
${msg(
|
${msg(
|
||||||
"Select backchannel providers which augment the functionality of the main provider.",
|
"Select backchannel providers which augment the functionality of the main provider."
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
</ak-form-element-horizontal>
|
</ak-form-element-horizontal>
|
||||||
|
|
@ -230,7 +190,7 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
||||||
/>
|
/>
|
||||||
<p class="pf-c-form__helper-text">
|
<p class="pf-c-form__helper-text">
|
||||||
${msg(
|
${msg(
|
||||||
"If left empty, authentik will try to extract the launch URL based on the selected provider.",
|
"If left empty, authentik will try to extract the launch URL based on the selected provider."
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
</ak-form-element-horizontal>
|
</ak-form-element-horizontal>
|
||||||
|
|
@ -250,61 +210,68 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
||||||
</label>
|
</label>
|
||||||
<p class="pf-c-form__helper-text">
|
<p class="pf-c-form__helper-text">
|
||||||
${msg(
|
${msg(
|
||||||
"If checked, the launch URL will open in a new browser tab or window from the user's application library.",
|
"If checked, the launch URL will open in a new browser tab or window from the user's application library."
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
</ak-form-element-horizontal>
|
</ak-form-element-horizontal>
|
||||||
${rootInterface()?.config?.capabilities.includes(CapabilitiesEnum.CanSaveMedia)
|
${
|
||||||
? html`<ak-form-element-horizontal label="${msg("Icon")}" name="metaIcon">
|
rootInterface()?.config?.capabilities.includes(
|
||||||
<input type="file" value="" class="pf-c-form-control" />
|
CapabilitiesEnum.CanSaveMedia
|
||||||
|
)
|
||||||
|
? html`<ak-form-element-horizontal
|
||||||
|
label="${msg("Icon")}"
|
||||||
|
name="metaIcon"
|
||||||
|
>
|
||||||
|
<input type="file" value="" class="pf-c-form-control" />
|
||||||
|
${this.instance?.metaIcon
|
||||||
|
? html`
|
||||||
|
<p class="pf-c-form__helper-text">
|
||||||
|
${msg("Currently set to:")}
|
||||||
|
${this.instance?.metaIcon}
|
||||||
|
</p>
|
||||||
|
`
|
||||||
|
: html``}
|
||||||
|
</ak-form-element-horizontal>
|
||||||
${this.instance?.metaIcon
|
${this.instance?.metaIcon
|
||||||
? html`
|
? html`
|
||||||
<p class="pf-c-form__helper-text">
|
<ak-form-element-horizontal>
|
||||||
${msg("Currently set to:")}
|
<label class="pf-c-switch">
|
||||||
${this.instance?.metaIcon}
|
<input
|
||||||
</p>
|
class="pf-c-switch__input"
|
||||||
`
|
type="checkbox"
|
||||||
: html``}
|
@change=${(ev: Event) => {
|
||||||
</ak-form-element-horizontal>
|
const target =
|
||||||
${this.instance?.metaIcon
|
ev.target as HTMLInputElement;
|
||||||
? html`
|
this.clearIcon = target.checked;
|
||||||
<ak-form-element-horizontal>
|
}}
|
||||||
<label class="pf-c-switch">
|
/>
|
||||||
<input
|
<span class="pf-c-switch__toggle">
|
||||||
class="pf-c-switch__input"
|
<span class="pf-c-switch__toggle-icon">
|
||||||
type="checkbox"
|
<i
|
||||||
@change=${(ev: Event) => {
|
class="fas fa-check"
|
||||||
const target =
|
aria-hidden="true"
|
||||||
ev.target as HTMLInputElement;
|
></i>
|
||||||
this.clearIcon = target.checked;
|
</span>
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span class="pf-c-switch__toggle">
|
|
||||||
<span class="pf-c-switch__toggle-icon">
|
|
||||||
<i
|
|
||||||
class="fas fa-check"
|
|
||||||
aria-hidden="true"
|
|
||||||
></i>
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
<span class="pf-c-switch__label">
|
||||||
<span class="pf-c-switch__label">
|
${msg("Clear icon")}
|
||||||
${msg("Clear icon")}
|
</span>
|
||||||
</span>
|
</label>
|
||||||
</label>
|
<p class="pf-c-form__helper-text">
|
||||||
<p class="pf-c-form__helper-text">
|
${msg("Delete currently set icon.")}
|
||||||
${msg("Delete currently set icon.")}
|
</p>
|
||||||
</p>
|
</ak-form-element-horizontal>
|
||||||
</ak-form-element-horizontal>
|
`
|
||||||
`
|
: html``}`
|
||||||
: html``}`
|
: html`<ak-form-element-horizontal label=${msg("Icon")} name="metaIcon">
|
||||||
: html`<ak-form-element-horizontal label=${msg("Icon")} name="metaIcon">
|
<input
|
||||||
<input
|
type="text"
|
||||||
type="text"
|
value="${first(this.instance?.metaIcon, "")}"
|
||||||
value="${first(this.instance?.metaIcon, "")}"
|
class="pf-c-form-control"
|
||||||
class="pf-c-form-control"
|
/>
|
||||||
/>
|
<p class="pf-c-form__helper-text">${iconHelperText}</p>
|
||||||
<p class="pf-c-form__helper-text">${iconHelperText}</p>
|
</ak-form-element-horizontal>`
|
||||||
</ak-form-element-horizontal>`}
|
}
|
||||||
<ak-form-element-horizontal label=${msg("Publisher")} name="metaPublisher">
|
<ak-form-element-horizontal label=${msg("Publisher")} name="metaPublisher">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { msg } from "@lit/localize";
|
||||||
|
import { html } from "lit";
|
||||||
|
import { ifDefined } from "lit/directives/if-defined.js";
|
||||||
|
|
||||||
|
type AkTextInput = {
|
||||||
|
// The name of the field, snake-to-camel'd if necessary.
|
||||||
|
name: string;
|
||||||
|
// The label of the field.
|
||||||
|
label: string;
|
||||||
|
value?: any;
|
||||||
|
required: boolean;
|
||||||
|
// The help message, shown at the bottom.
|
||||||
|
help?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const akTextDefaults = {
|
||||||
|
required: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
export function akText(args: AkTextInput) {
|
||||||
|
const { name, label, value, required, help } = {
|
||||||
|
...akTextDefaults,
|
||||||
|
...args
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`<ak-form-element-horizontal label=${label} ?required=${required} name=${name}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value=${ifDefined(value)}
|
||||||
|
class="pf-c-form-control"
|
||||||
|
?required=${required}
|
||||||
|
/>
|
||||||
|
<p class="pf-c-form__helper-text">${help}</p>
|
||||||
|
</ak-form-element-horizontal> `;
|
||||||
|
}
|
||||||
Reference in New Issue