web: refactor rendering of source icons
closes #4718 Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
parent
99baf1a29e
commit
6f1721a728
|
@ -14,6 +14,18 @@ import { ifDefined } from "lit/directives/if-defined.js";
|
|||
|
||||
import { Source, SourcesApi } from "@goauthentik/api";
|
||||
|
||||
export function renderSourceIcon(name: string, iconUrl: string | undefined | null): TemplateResult {
|
||||
const icon = html`<i class="fas fa-share-square" title="${name}"></i>`;
|
||||
if (iconUrl) {
|
||||
if (iconUrl.startsWith("fa://")) {
|
||||
const url = iconUrl.replaceAll("fa://", "");
|
||||
return html`<i class="fas ${url}" title="${name}"></i>`;
|
||||
}
|
||||
return html`<img src="${iconUrl}" alt="${name}" />`;
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
|
||||
@customElement("ak-source-view")
|
||||
export class SourceViewPage extends AKElement {
|
||||
@property({ type: String })
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { renderSourceIcon } from "@goauthentik/admin/sources/SourceViewPage";
|
||||
import "@goauthentik/elements/Divider";
|
||||
import "@goauthentik/elements/EmptyState";
|
||||
import "@goauthentik/elements/forms/FormElement";
|
||||
|
@ -156,15 +157,7 @@ export class IdentificationStage extends BaseStage<
|
|||
}
|
||||
|
||||
renderSource(source: LoginSource): TemplateResult {
|
||||
let icon = html`<i class="fas fa-share-square" title="${source.name}"></i>`;
|
||||
if (source.iconUrl) {
|
||||
if (source.iconUrl.startsWith("fa://")) {
|
||||
const url = source.iconUrl.replaceAll("fa://", "");
|
||||
icon = html`<i class="fas ${url}" title="${source.name}"></i>`;
|
||||
} else {
|
||||
icon = html`<img src="${source.iconUrl}" alt="${source.name}" />`;
|
||||
}
|
||||
}
|
||||
const icon = renderSourceIcon(source.name, source.iconUrl);
|
||||
return html`<li class="pf-c-login__main-footer-links-item">
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import { renderSourceIcon } from "@goauthentik/admin/sources/SourceViewPage";
|
||||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { EVENT_REFRESH } from "@goauthentik/common/constants";
|
||||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
|
@ -10,7 +11,6 @@ import { t } from "@lingui/macro";
|
|||
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
import { until } from "lit/directives/until.js";
|
||||
|
||||
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
||||
|
@ -124,15 +124,15 @@ export class UserSourceSettingsPage extends AKElement {
|
|||
header=${t`No services available.`}
|
||||
></ak-empty-state>`;
|
||||
}
|
||||
return source.map((stage) => {
|
||||
return source.map((source) => {
|
||||
return html`<li class="pf-c-data-list__item">
|
||||
<div class="pf-c-data-list__item-content">
|
||||
<div class="pf-c-data-list__cell">
|
||||
<img src="${ifDefined(stage.iconUrl)}" alt=${stage.title} />
|
||||
${stage.title}
|
||||
${renderSourceIcon(source.title, source.iconUrl)}
|
||||
${source.title}
|
||||
</div>
|
||||
<div class="pf-c-data-list__cell">
|
||||
${this.renderSourceSettings(stage)}
|
||||
${this.renderSourceSettings(source)}
|
||||
</div>
|
||||
</div>
|
||||
</li>`;
|
||||
|
|
Reference in a new issue