From 6f1721a728630d9efb47c2c1df38a9a6bd9fe4bb Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens@goauthentik.io>
Date: Sun, 19 Feb 2023 20:17:58 +0100
Subject: [PATCH] web: refactor rendering of source icons

closes #4718

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 web/src/admin/sources/SourceViewPage.ts              | 12 ++++++++++++
 .../stages/identification/IdentificationStage.ts     | 11 ++---------
 web/src/user/user-settings/sources/SourceSettings.ts | 10 +++++-----
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/web/src/admin/sources/SourceViewPage.ts b/web/src/admin/sources/SourceViewPage.ts
index d0050fdf9..3c010bdb0 100644
--- a/web/src/admin/sources/SourceViewPage.ts
+++ b/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 })
diff --git a/web/src/flow/stages/identification/IdentificationStage.ts b/web/src/flow/stages/identification/IdentificationStage.ts
index 25f407a39..a30b0c89f 100644
--- a/web/src/flow/stages/identification/IdentificationStage.ts
+++ b/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>`;
-        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"
diff --git a/web/src/user/user-settings/sources/SourceSettings.ts b/web/src/user/user-settings/sources/SourceSettings.ts
index 221055c60..702d4f719 100644
--- a/web/src/user/user-settings/sources/SourceSettings.ts
+++ b/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} />
-                                        ${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>`;