web/user: allow custom font-awesome icons for applications

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

#1189

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
 

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."

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."

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 ""

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>`;
                         }),
                     )}

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 ?? "")}">
+                <a href="${ifDefined(this.application.launchUrl ?? "")}"> ${this.renderIcon()} </a>
-                    ${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>
                 ${until(
                     uiConfig().then((config) => {
                         if (!config.enabledFeatures.applicationEdit) {