habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: prevent default logo flashing in admin interface (#13960)

Browse Source 
* web: elements: SidebarBrand: prevent logo flashing in admin interface

When using a custom SVG file (or mabye other types, TBH I didn't check, I should) for a branded logo, the logo would flash the stock authentik logo for a moment before the custom logo appears on the Admin interface.

This was happening because the brand configuration was being loaded asynchronously through the context provider, causing a brief moment where the default logo was shown.

Closes https://github.com/goauthentik/authentik/issues/3228
Closes https://github.com/goauthentik/authentik/issues/13739

* use globalAK

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Dominic R
2025-04-25 05:25:40 -04:00
committed by GitHub
parent cbc5a1c39d
commit 28869858b5
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -1,10 +1,11 @@
import { EVENT_SIDEBAR_TOGGLE } from "@goauthentik/common/constants"; import { EVENT_SIDEBAR_TOGGLE } from "@goauthentik/common/constants";
import { globalAK } from "@goauthentik/common/global";
import { AKElement } from "@goauthentik/elements/Base"; import { AKElement } from "@goauthentik/elements/Base";
import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider"; import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
import { themeImage } from "@goauthentik/elements/utils/images"; import { themeImage } from "@goauthentik/elements/utils/images";
import { msg } from "@lit/localize"; import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit"; import { CSSResult, TemplateResult, css, html, nothing } from "lit";
import { customElement } from "lit/decorators.js"; import { customElement } from "lit/decorators.js";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
@ -70,7 +71,10 @@ export class SidebarBrand extends WithBrandConfig(AKElement) {
} }
render(): TemplateResult { render(): TemplateResult {
return html` ${window.innerWidth <= MIN_WIDTH const logoUrl =
globalAK().brand.brandingLogo || this.brand?.brandingLogo || DefaultBrand.brandingLogo;
return html`${window.innerWidth <= MIN_WIDTH
? html` ? html`
<button <button
class="sidebar-trigger pf-c-button" class="sidebar-trigger pf-c-button"
@ -86,14 +90,10 @@ export class SidebarBrand extends WithBrandConfig(AKElement) {
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
</button> </button>
` `
: html``} : nothing}
<a href="#/" class="pf-c-page__header-brand-link"> <a href="#/" class="pf-c-page__header-brand-link">
<div class="pf-c-brand ak-brand"> <div class="pf-c-brand ak-brand">
<img <img src=${themeImage(logoUrl)} alt="${msg("authentik Logo")}" loading="lazy" />
src=${themeImage(this.brand?.brandingLogo ?? DefaultBrand.brandingLogo)}
alt="${msg("authentik Logo")}"
loading="lazy"
/>
</div> </div>
</a>`; </a>`;
} }