Merge branch 'master' into version-2021.12

web/src/authentik.css

@@ -83,9 +83,6 @@ html > form > input {
     color: var(--pf-global--danger-color--100);
 }
 
-.ak-static-page h1 {
-    color: var(--ak-dark-foreground);
-}
 .form-help-text {
     color: var(--pf-global--Color--100);
 }
@@ -96,6 +93,9 @@ html > form > input {
 }
 
 @media (prefers-color-scheme: dark) {
+    .ak-static-page h1 {
+        color: var(--ak-dark-foreground);
+    }
     body {
         background-color: var(--ak-dark-background) !important;
     }

web/src/elements/buttons/Dropdown.ts

@@ -1,17 +1,32 @@
 import { LitElement, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
+import { EVENT_REFRESH } from "../../constants";
+
 @customElement("ak-dropdown")
 export class DropdownButton extends LitElement {
+    menu: HTMLElement | null;
+
     constructor() {
         super();
-        const menu = this.querySelector<HTMLElement>(".pf-c-dropdown__menu");
+        this.menu = this.querySelector<HTMLElement>(".pf-c-dropdown__menu");
         this.querySelectorAll("button.pf-c-dropdown__toggle").forEach((btn) => {
             btn.addEventListener("click", () => {
-                if (!menu) return;
-                menu.hidden = !menu.hidden;
+                if (!this.menu) return;
+                this.menu.hidden = !this.menu.hidden;
             });
         });
+        window.addEventListener(EVENT_REFRESH, this.clickHandler);
+    }
+
+    clickHandler = (): void => {
+        if (!this.menu) return;
+        this.menu.hidden = true;
+    };
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        window.removeEventListener(EVENT_REFRESH, this.clickHandler);
     }
 
     render(): TemplateResult {

web/src/elements/notifications/NotificationDrawer.ts

@@ -95,7 +95,7 @@ export class NotificationDrawer extends LitElement {
                         class="pf-c-dropdown__toggle pf-m-plain"
                         href="#/events/log/${item.event?.pk}"
                     >
-                        <i class="fas fas fa-share-square"></i>
+                        <i class="fas fa-share-square"></i>
                     </a>
                 `}
                 <button

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

@@ -143,7 +143,7 @@ export class IdentificationStage extends BaseStage<
     }
 
     renderSource(source: LoginSource): TemplateResult {
-        let icon = html`<i class="fas fas fa-share-square" title="${source.name}"></i>`;
+        let icon = html`<i class="fas fa-share-square" title="${source.name}"></i>`;
         if (source.iconUrl) {
             icon = html`<img src="${source.iconUrl}" alt="${source.name}" />`;
         }

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."
@@ -5619,6 +5623,10 @@ msgstr "Wait (min)"
 msgid "Warning"
 msgstr "Warning"
 
+#: src/pages/applications/ApplicationViewPage.ts
+msgid "Warning: Application is not used by any Outpost."
+msgstr "Warning: Application is not used by any Outpost."
+
 #: src/pages/stages/invitation/InvitationListPage.ts
 msgid "Warning: No invitation stage is bound to any flow. Invitations will not work as expected."
 msgstr "Warning: No invitation stage is bound to any flow. Invitations will not work as expected."

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."
@@ -5557,6 +5561,10 @@ msgstr "Attente (min)"
 msgid "Warning"
 msgstr "Avertissement"
 
+#: src/pages/applications/ApplicationViewPage.ts
+msgid "Warning: Application is not used by any Outpost."
+msgstr ""
+
 #: src/pages/stages/invitation/InvitationListPage.ts
 msgid "Warning: No invitation stage is bound to any flow. Invitations will not work as expected."
 msgstr ""

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 ""
@@ -5599,6 +5603,10 @@ msgstr ""
 msgid "Warning"
 msgstr ""
 
+#: src/pages/applications/ApplicationViewPage.ts
+msgid "Warning: Application is not used by any Outpost."
+msgstr ""
+
 #: src/pages/stages/invitation/InvitationListPage.ts
 msgid "Warning: No invitation stage is bound to any flow. Invitations will not work as expected."
 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/pages/applications/ApplicationListPage.ts

@@ -125,7 +125,7 @@ export class ApplicationListPage extends TablePage<Application> {
                 </ak-forms-modal>
                 ${item.launchUrl
                     ? html`<a href=${item.launchUrl} target="_blank" class="pf-c-button pf-m-plain">
-                          <i class="fas fas fa-share-square"></i>
+                          <i class="fas fa-share-square"></i>
                       </a>`
                     : html``}`,
         ];

web/src/pages/applications/ApplicationViewPage.ts

@@ -1,10 +1,11 @@
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import AKGlobal from "../../authentik.css";
+import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@@ -13,7 +14,7 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { Application, CoreApi } from "@goauthentik/api";
+import { Application, CoreApi, OutpostsApi } from "@goauthentik/api";
 
 import { DEFAULT_CONFIG } from "../../api/Config";
 import "../../elements/EmptyState";
@@ -36,14 +37,45 @@ export class ApplicationViewPage extends LitElement {
             })
             .then((app) => {
                 this.application = app;
+                if (
+                    app.providerObj &&
+                    [
+                        "authentik_providers_proxy.proxyprovider",
+                        "authentik_providers_ldap.ldapprovider",
+                    ].includes(app.providerObj.metaModelName)
+                ) {
+                    new OutpostsApi(DEFAULT_CONFIG)
+                        .outpostsInstancesList({
+                            providersByPk: [app.provider || 0],
+                            pageSize: 1,
+                        })
+                        .then((outposts) => {
+                            if (outposts.pagination.count < 1) {
+                                this.missingOutpost = true;
+                            }
+                        });
+                }
             });
     }
 
     @property({ attribute: false })
     application!: Application;
 
+    @state()
+    missingOutpost = false;
+
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFContent, PFButton, PFDescriptionList, PFGrid, PFCard, AKGlobal];
+        return [
+            PFBase,
+            PFBanner,
+            PFPage,
+            PFContent,
+            PFButton,
+            PFDescriptionList,
+            PFGrid,
+            PFCard,
+            AKGlobal,
+        ];
     }
 
     render(): TemplateResult {
@@ -61,7 +93,12 @@ export class ApplicationViewPage extends LitElement {
         if (!this.application) {
             return html`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`;
         }
-        return html` <ak-tabs>
+        return html`<ak-tabs>
+            ${this.missingOutpost
+                ? html`<div slot="header" class="pf-c-banner pf-m-warning">
+                      ${t`Warning: Application is not used by any Outpost.`}
+                  </div>`
+                : html``}
             <section
                 slot="page-overview"
                 data-tab-title="${t`Overview`}"
@@ -88,6 +125,7 @@ export class ApplicationViewPage extends LitElement {
                                                           .providerObj?.pk}"
                                                   >
                                                       ${this.application.providerObj?.name}
+                                                      (${this.application.providerObj?.verboseName})
                                                   </a>
                                               </div>
                                           </dd>

web/src/pages/events/EventListPage.ts

@@ -70,7 +70,7 @@ export class EventListPage extends TablePage<Event> {
             html`<span>${item.clientIp || t`-`}</span>`,
             html`<span>${item.tenant?.name || t`-`}</span>`,
             html`<a href="#/events/log/${item.pk}">
-                <i class="fas fas fa-share-square"></i>
+                <i class="fas fa-share-square"></i>
             </a>`,
         ];
     }

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,14 +88,7 @@ export class LibraryApplication extends LitElement {
             style="background: ${this.background} !important"
         >
             <div class="pf-c-card__header">
-                ${this.application.metaIcon
-                    ? html`<a href="${ifDefined(this.application.launchUrl ?? "")}"
-                          ><img
-                              class="app-icon pf-c-avatar"
-                              src="${ifDefined(this.application.metaIcon)}"
-                              alt="${t`Application Icon`}"
-                      /></a>`
-                    : html`<i class="fas fas fa-share-square"></i>`}
+                <a href="${ifDefined(this.application.launchUrl ?? "")}"> ${this.renderIcon()} </a>
                 ${until(
                     uiConfig().then((config) => {
                         if (!config.enabledFeatures.applicationEdit) {