From a91204e5b9ad2f986a3256d43a2fdd252fead9d6 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Mon, 6 Dec 2021 21:20:15 +0100
Subject: [PATCH] web/user: allow custom font-awesome icons for applications

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

#1189
---
 authentik/core/models.py                      |  2 +-
 web/src/locales/en.po                         |  4 +++
 web/src/locales/fr_FR.po                      |  4 +++
 web/src/locales/pseudo-LOCALE.po              |  4 +++
 web/src/pages/applications/ApplicationForm.ts |  3 +++
 web/src/user/LibraryApplication.ts            | 25 ++++++++++++-------
 6 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/authentik/core/models.py b/authentik/core/models.py
index 30969f3b0..ad07d3c12 100644
--- a/authentik/core/models.py
+++ b/authentik/core/models.py
@@ -262,7 +262,7 @@ class Application(PolicyBindingModel):
         it is returned as-is"""
         if not self.meta_icon:
             return None
-        if self.meta_icon.name.startswith("http") or self.meta_icon.name.startswith("/static"):
+        if "://" in self.meta_icon.name or self.meta_icon.name.startswith("/static"):
             return self.meta_icon.name
         return self.meta_icon.url
 
diff --git a/web/src/locales/en.po b/web/src/locales/en.po
index c71cb3398..215ed92d7 100644
--- a/web/src/locales/en.po
+++ b/web/src/locales/en.po
@@ -1580,6 +1580,10 @@ msgstr "Edit Stage"
 msgid "Edit User"
 msgstr "Edit User"
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon \"fa-test\"."
+msgstr "Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon \"fa-test\"."
+
 #: src/user/LibraryPage.ts
 msgid "Either no applications are defined, or you don't have access to any."
 msgstr "Either no applications are defined, or you don't have access to any."
diff --git a/web/src/locales/fr_FR.po b/web/src/locales/fr_FR.po
index 2c8e6c5f2..cb2d9a9c9 100644
--- a/web/src/locales/fr_FR.po
+++ b/web/src/locales/fr_FR.po
@@ -1568,6 +1568,10 @@ msgstr "Éditer l'étap"
 msgid "Edit User"
 msgstr "Éditer l'utilisateur"
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon \"fa-test\"."
+msgstr ""
+
 #: src/user/LibraryPage.ts
 msgid "Either no applications are defined, or you don't have access to any."
 msgstr "Soit aucune application n'est définie, soit vous n'en avez accès à aucune."
diff --git a/web/src/locales/pseudo-LOCALE.po b/web/src/locales/pseudo-LOCALE.po
index 291fc2387..3082044af 100644
--- a/web/src/locales/pseudo-LOCALE.po
+++ b/web/src/locales/pseudo-LOCALE.po
@@ -1572,6 +1572,10 @@ msgstr ""
 msgid "Edit User"
 msgstr ""
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon \"fa-test\"."
+msgstr ""
+
 #: src/user/LibraryPage.ts
 msgid "Either no applications are defined, or you don't have access to any."
 msgstr ""
diff --git a/web/src/pages/applications/ApplicationForm.ts b/web/src/pages/applications/ApplicationForm.ts
index f686cd6d1..8091cef52 100644
--- a/web/src/pages/applications/ApplicationForm.ts
+++ b/web/src/pages/applications/ApplicationForm.ts
@@ -266,6 +266,9 @@ export class ApplicationForm extends ModelForm<Application, string> {
                                     value="${first(this.instance?.metaIcon, "")}"
                                     class="pf-c-form-control"
                                 />
+                                <p class="pf-c-form__helper-text">
+                                    ${t`Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon "fa-test".`}
+                                </p>
                             </ak-form-element-horizontal>`;
                         }),
                     )}
diff --git a/web/src/user/LibraryApplication.ts b/web/src/user/LibraryApplication.ts
index 7ed6d989d..1f6ceabd8 100644
--- a/web/src/user/LibraryApplication.ts
+++ b/web/src/user/LibraryApplication.ts
@@ -62,6 +62,21 @@ export class LibraryApplication extends LitElement {
         ];
     }
 
+    renderIcon(): TemplateResult {
+        if (this.application?.metaIcon) {
+            if (this.application.metaIcon.startsWith("fa://")) {
+                const icon = this.application.metaIcon.replaceAll("fa://", "");
+                return html`<i class="fas ${icon}"></i>`;
+            }
+            return html`<img
+                class="app-icon pf-c-avatar"
+                src="${ifDefined(this.application.metaIcon)}"
+                alt="${t`Application Icon`}"
+            />`;
+        }
+        return html`<i class="fas fa-share-square"></i>`;
+    }
+
     render(): TemplateResult {
         if (!this.application) {
             return html`<ak-spinner></ak-spinner>`;
@@ -73,15 +88,7 @@ export class LibraryApplication extends LitElement {
             style="background: ${this.background} !important"
         >
             <div class="pf-c-card__header">
-                <a href="${ifDefined(this.application.launchUrl ?? "")}">
-                    ${this.application.metaIcon
-                        ? html`<img
-                              class="app-icon pf-c-avatar"
-                              src="${ifDefined(this.application.metaIcon)}"
-                              alt="${t`Application Icon`}"
-                          />`
-                        : html`<i class="fas fa-share-square"></i>`}
-                </a>
+                <a href="${ifDefined(this.application.launchUrl ?? "")}"> ${this.renderIcon()} </a>
                 ${until(
                     uiConfig().then((config) => {
                         if (!config.enabledFeatures.applicationEdit) {