trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Broke out the text input into a single renderer. Still works as required.

This commit is contained in:
Ken Sternberg 2023-07-30 06:44:40 -07:00
parent 540eee1612
commit 6a60174371
2 changed files with 117 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
web/src/admin/applications/ApplicationForm.ts
View File

@ -26,6 +26,8 @@ import {
ProvidersApi,
} from "@goauthentik/api";
import { akText } from "./renderers";
@customElement("ak-application-form")
export class ApplicationForm extends ModelForm<Application, string> {
async loadInstance(pk: string): Promise<Application> {
@ -90,70 +92,28 @@ export class ApplicationForm extends ModelForm<Application, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input
type="text"
value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control"
required
/>
<p class="pf-c-form__helper-text">${msg("Application's display Name.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
<input
type="text"
value="${ifDefined(this.instance?.slug)}"
class="pf-c-form-control"
required
/>
<p class="pf-c-form__helper-text">
${msg("Internal application name, used in URLs.")}
</p>
</ak-form-element-horizontal>
<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>
${akText({
name: "name",
value: this.instance?.name,
label: msg("Name"),
required: true,
help: msg("Application's display Name."),
})}
${akText({
name: "slug",
value: this.instance?.slug,
label: msg("Slug"),
required: true,
help: msg("Internal application name, used in URLs."),
})}
${akText({
name: "group",
value: this.instance?.group,
label: msg("Group"),
help: msg(
"Optionally enter a group name. Applications with identical groups are shown grouped together."
),
})}
<ak-form-element-horizontal
label=${msg("Backchannel providers")}
name="backchannelProviders"
@ -191,7 +151,7 @@ export class ApplicationForm extends ModelForm<Application, string> {
</div>
<p class="pf-c-form__helper-text">
${msg(
"Select backchannel providers which augment the functionality of the main provider.",
"Select backchannel providers which augment the functionality of the main provider."
)}
</p>
</ak-form-element-horizontal>
@ -230,7 +190,7 @@ export class ApplicationForm extends ModelForm<Application, string> {
/>
<p class="pf-c-form__helper-text">
${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>
</ak-form-element-horizontal>
@ -250,12 +210,18 @@ export class ApplicationForm extends ModelForm<Application, string> {
</label>
<p class="pf-c-form__helper-text">
${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>
</ak-form-element-horizontal>
${rootInterface()?.config?.capabilities.includes(CapabilitiesEnum.CanSaveMedia)
? html`<ak-form-element-horizontal label="${msg("Icon")}" name="metaIcon">
${
rootInterface()?.config?.capabilities.includes(
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`
@ -304,7 +270,8 @@ export class ApplicationForm extends ModelForm<Application, string> {
class="pf-c-form-control"
/>
<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">
<input
type="text"

35
web/src/admin/applications/renderers.ts Normal file
View File

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