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
2023-03-23 14:05:14 +01:00
committed by GitHub
parent 20522558fe
commit 14f0034a0a
29 changed files with 900 additions and 995 deletions

View File

@ -5,7 +5,7 @@ import {
EVENT_WS_MESSAGE,
} from "@goauthentik/common/constants";
import { configureSentry } from "@goauthentik/common/sentry";
import { UIConfig, UserDisplay, uiConfig } from "@goauthentik/common/ui/config";
import { UserDisplay } from "@goauthentik/common/ui/config";
import { autoDetectLanguage } from "@goauthentik/common/ui/locale";
import { me } from "@goauthentik/common/users";
import { first } from "@goauthentik/common/utils";
@ -56,9 +56,6 @@ export class UserInterface extends Interface {
@state()
me?: SessionUser;
@state()
config?: UIConfig;
static get styles(): CSSResult[] {
return [
PFBase,
@ -126,7 +123,6 @@ export class UserInterface extends Interface {
async firstUpdated(): Promise<void> {
this.me = await me();
this.config = await uiConfig();
const notifications = await new EventsApi(DEFAULT_CONFIG).eventsNotificationsList({
seen: false,
ordering: "-created",
@ -137,11 +133,11 @@ export class UserInterface extends Interface {
}
render(): TemplateResult {
if (!this.config || !this.me) {
if (!this.uiConfig || !this.me) {
return html``;
}
let userDisplay = "";
switch (this.config.navbar.userDisplay) {
switch (this.uiConfig.navbar.userDisplay) {
case UserDisplay.username:
userDisplay = this.me.user.username;
break;
@ -155,7 +151,7 @@ export class UserInterface extends Interface {
userDisplay = this.me.user.username;
}
return html`<div class="pf-c-page">
<div class="background-wrapper" style="${this.config.theme.background}"></div>
<div class="background-wrapper" style="${this.uiConfig.theme.background}"></div>
<header class="pf-c-page__header">
<div class="pf-c-page__header-brand">
<a href="#/" class="pf-c-page__header-brand-link">
@ -168,7 +164,7 @@ export class UserInterface extends Interface {
</div>
<div class="pf-c-page__header-tools">
<div class="pf-c-page__header-tools-group">
${this.config.enabledFeatures.apiDrawer
${this.uiConfig.enabledFeatures.apiDrawer
? html`<div
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
>
@ -186,7 +182,7 @@ export class UserInterface extends Interface {
</button>
</div>`
: html``}
${this.config.enabledFeatures.notificationDrawer
${this.uiConfig.enabledFeatures.notificationDrawer
? html`<div
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
>
@ -216,7 +212,7 @@ export class UserInterface extends Interface {
</button>
</div> `
: html``}
${this.config.enabledFeatures.settings
${this.uiConfig.enabledFeatures.settings
? html` <div class="pf-c-page__header-tools-item">
<a class="pf-c-button pf-m-plain" type="button" href="#/settings">
<i class="fas fa-cog" aria-hidden="true"></i>