web: refactor rendering of source icons

closes #4718

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

web/src/admin/sources/SourceViewPage.ts

@@ -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 })

web/src/flow/stages/identification/IdentificationStage.ts

@@ -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>`;
+        const icon = renderSourceIcon(source.name, source.iconUrl);
-        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}" />`;
-            }
-        }
         return html`<li class="pf-c-login__main-footer-links-item">
             <button
                 type="button"

web/src/user/user-settings/sources/SourceSettings.ts

@@ -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} />
+                                        ${renderSourceIcon(source.title, source.iconUrl)}
-                                        ${stage.title}
+                                        ${source.title}
                                     </div>
                                     <div class="pf-c-data-list__cell">
-                                        ${this.renderSourceSettings(stage)}
+                                        ${this.renderSourceSettings(source)}
                                     </div>
                                 </div>
                             </li>`;