web/elements: only render form once instance is loaded (#5049)
* web/elements: only render form once instance is loaded Signed-off-by: Jens Langhammer <jens@goauthentik.io> * use radio for transport Signed-off-by: Jens Langhammer <jens@goauthentik.io> * only wait for instance to be loaded if set Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add hook to load additional data in form Signed-off-by: Jens Langhammer <jens@goauthentik.io> * make send an abstract function instead of attribute Signed-off-by: Jens Langhammer <jens@goauthentik.io> * ensure form is updated after data is loaded Signed-off-by: Jens Langhammer <jens@goauthentik.io> * remove until for select and multi-selects in forms Signed-off-by: Jens Langhammer <jens@goauthentik.io> * don't use until for file uploads Signed-off-by: Jens Langhammer <jens@goauthentik.io> * remove last until from form Signed-off-by: Jens Langhammer <jens@goauthentik.io> * remove deprecated import Signed-off-by: Jens Langhammer <jens@goauthentik.io> * prevent form double load, add error handling for PreventFormSubmit Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix double creation of inner element in proxy form Signed-off-by: Jens Langhammer <jens@goauthentik.io> * make PreventFormSubmit work correctly Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
@ -10,15 +10,18 @@ import YAML from "yaml";
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
import { until } from "lit/directives/until.js";
|
||||
|
||||
import {
|
||||
Outpost,
|
||||
OutpostDefaultConfig,
|
||||
OutpostTypeEnum,
|
||||
OutpostsApi,
|
||||
OutpostsServiceConnectionsAllListRequest,
|
||||
PaginatedLDAPProviderList,
|
||||
PaginatedProxyProviderList,
|
||||
PaginatedRadiusProviderList,
|
||||
ProvidersApi,
|
||||
ServiceConnection,
|
||||
} from "@goauthentik/api";
|
||||
@ -31,6 +34,14 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
@property({ type: Boolean })
|
||||
embedded = false;
|
||||
|
||||
@state()
|
||||
providers?:
|
||||
| PaginatedProxyProviderList
|
||||
| PaginatedLDAPProviderList
|
||||
| PaginatedRadiusProviderList;
|
||||
|
||||
defaultConfig?: OutpostDefaultConfig;
|
||||
|
||||
async loadInstance(pk: string): Promise<Outpost> {
|
||||
const o = await new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesRetrieve({
|
||||
uuid: pk,
|
||||
@ -39,6 +50,34 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
return o;
|
||||
}
|
||||
|
||||
async load(): Promise<void> {
|
||||
this.defaultConfig = await new OutpostsApi(
|
||||
DEFAULT_CONFIG,
|
||||
).outpostsInstancesDefaultSettingsRetrieve();
|
||||
switch (this.type) {
|
||||
case OutpostTypeEnum.Proxy:
|
||||
this.providers = await new ProvidersApi(DEFAULT_CONFIG).providersProxyList({
|
||||
ordering: "name",
|
||||
applicationIsnull: false,
|
||||
});
|
||||
break;
|
||||
case OutpostTypeEnum.Ldap:
|
||||
this.providers = await new ProvidersApi(DEFAULT_CONFIG).providersLdapList({
|
||||
ordering: "name",
|
||||
applicationIsnull: false,
|
||||
});
|
||||
break;
|
||||
case OutpostTypeEnum.Radius:
|
||||
this.providers = await new ProvidersApi(DEFAULT_CONFIG).providersRadiusList({
|
||||
ordering: "name",
|
||||
applicationIsnull: false,
|
||||
});
|
||||
break;
|
||||
case OutpostTypeEnum.UnknownDefaultOpenApi:
|
||||
this.providers = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
getSuccessMessage(): string {
|
||||
if (this.instance) {
|
||||
return t`Successfully updated outpost.`;
|
||||
@ -60,78 +99,6 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
}
|
||||
};
|
||||
|
||||
renderProviders(): Promise<TemplateResult[]> {
|
||||
switch (this.type) {
|
||||
case OutpostTypeEnum.Proxy:
|
||||
return new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersProxyList({
|
||||
ordering: "name",
|
||||
applicationIsnull: false,
|
||||
})
|
||||
.then((providers) => {
|
||||
return providers.results.map((provider) => {
|
||||
const selected = Array.from(this.instance?.providers || []).some(
|
||||
(sp) => {
|
||||
return sp == provider.pk;
|
||||
},
|
||||
);
|
||||
return html`<option
|
||||
value=${ifDefined(provider.pk)}
|
||||
?selected=${selected}
|
||||
>
|
||||
${provider.assignedApplicationName} (${provider.externalHost})
|
||||
</option>`;
|
||||
});
|
||||
});
|
||||
case OutpostTypeEnum.Ldap:
|
||||
return new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersLdapList({
|
||||
ordering: "name",
|
||||
applicationIsnull: false,
|
||||
})
|
||||
.then((providers) => {
|
||||
return providers.results.map((provider) => {
|
||||
const selected = Array.from(this.instance?.providers || []).some(
|
||||
(sp) => {
|
||||
return sp == provider.pk;
|
||||
},
|
||||
);
|
||||
return html`<option
|
||||
value=${ifDefined(provider.pk)}
|
||||
?selected=${selected}
|
||||
>
|
||||
${provider.assignedApplicationName} (${provider.name})
|
||||
</option>`;
|
||||
});
|
||||
});
|
||||
case OutpostTypeEnum.Radius:
|
||||
return new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersRadiusList({
|
||||
ordering: "name",
|
||||
applicationIsnull: false,
|
||||
})
|
||||
.then((providers) => {
|
||||
return providers.results.map((provider) => {
|
||||
const selected = Array.from(this.instance?.providers || []).some(
|
||||
(sp) => {
|
||||
return sp == provider.pk;
|
||||
},
|
||||
);
|
||||
return html`<option
|
||||
value=${ifDefined(provider.pk)}
|
||||
?selected=${selected}
|
||||
>
|
||||
${provider.assignedApplicationName} (${provider.name})
|
||||
</option>`;
|
||||
});
|
||||
});
|
||||
case OutpostTypeEnum.UnknownDefaultOpenApi:
|
||||
return Promise.resolve([
|
||||
html` <option value="">${t`Unknown outpost type`}</option>`,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
|
||||
@ -148,6 +115,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
@change=${(ev: Event) => {
|
||||
const target = ev.target as HTMLSelectElement;
|
||||
this.type = target.selectedOptions[0].value as OutpostTypeEnum;
|
||||
this.load();
|
||||
}}
|
||||
>
|
||||
<option
|
||||
@ -162,6 +130,12 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
>
|
||||
${t`LDAP`}
|
||||
</option>
|
||||
<option
|
||||
value=${OutpostTypeEnum.Radius}
|
||||
?selected=${this.instance?.type === OutpostTypeEnum.Radius}
|
||||
>
|
||||
${t`Radius`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Integration`} name="serviceConnection">
|
||||
@ -213,7 +187,14 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
name="providers"
|
||||
>
|
||||
<select class="pf-c-form-control" multiple>
|
||||
${until(this.renderProviders(), html`<option>${t`Loading...`}</option>`)}
|
||||
${this.providers?.results.map((provider) => {
|
||||
const selected = Array.from(this.instance?.providers || []).some((sp) => {
|
||||
return sp == provider.pk;
|
||||
});
|
||||
return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>
|
||||
${provider.assignedApplicationName} (${provider.name})
|
||||
</option>`;
|
||||
})}
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`You can only select providers that match the type of the outpost.`}
|
||||
@ -223,19 +204,10 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Configuration`} name="config">
|
||||
<!-- @ts-ignore -->
|
||||
<ak-codemirror
|
||||
mode="yaml"
|
||||
value="${until(
|
||||
new OutpostsApi(DEFAULT_CONFIG)
|
||||
.outpostsInstancesDefaultSettingsRetrieve()
|
||||
.then((config) => {
|
||||
let fc = config.config;
|
||||
if (this.instance) {
|
||||
fc = this.instance.config;
|
||||
}
|
||||
return YAML.stringify(fc);
|
||||
}),
|
||||
value="${YAML.stringify(
|
||||
this.instance ? this.instance.config : this.defaultConfig?.config,
|
||||
)}"
|
||||
></ak-codemirror>
|
||||
<p class="pf-c-form__helper-text">
|
||||
|
||||
Reference in New Issue
Block a user