From 235d283defd7317ba8e53c94c89aa687efcdd1b4 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 28 Nov 2021 21:03:24 +0100
Subject: [PATCH] web/elements: use <slot> in ak-label instead of attribute

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/Label.ts                     |  8 ++-----
 .../crypto/CertificateKeyPairListPage.ts      | 11 +++++++---
 web/src/pages/outposts/OutpostHealth.ts       | 21 ++++++++-----------
 web/src/pages/outposts/OutpostHealthSimple.ts |  9 ++++----
 .../outposts/ServiceConnectionListPage.ts     | 12 ++++-------
 .../pages/system-tasks/SystemTaskListPage.ts  |  8 +++----
 web/src/pages/users/UserViewPage.ts           |  2 --
 7 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/web/src/elements/Label.ts b/web/src/elements/Label.ts
index ba1f20936..0d836dfce 100644
--- a/web/src/elements/Label.ts
+++ b/web/src/elements/Label.ts
@@ -20,9 +20,6 @@ export class Label extends LitElement {
     @property()
     icon?: string;
 
-    @property()
-    text?: string;
-
     static get styles(): CSSResult[] {
         return [PFBase, PFLabel, AKGlobal];
     }
@@ -47,12 +44,11 @@ export class Label extends LitElement {
             <span class="pf-c-label__content">
                 <span class="pf-c-label__icon">
                     <i
-                        class="fas ${this.text ? "fa-fw" : ""} ${this.icon ||
-                        this.getDefaultIcon()}"
+                        class="fas fa-fw${this.icon || this.getDefaultIcon()}"
                         aria-hidden="true"
                     ></i>
                 </span>
-                ${this.text || ""}
+                <slot></slot>
             </span>
         </span>`;
     }
diff --git a/web/src/pages/crypto/CertificateKeyPairListPage.ts b/web/src/pages/crypto/CertificateKeyPairListPage.ts
index 74c3ac56b..b676b9f89 100644
--- a/web/src/pages/crypto/CertificateKeyPairListPage.ts
+++ b/web/src/pages/crypto/CertificateKeyPairListPage.ts
@@ -10,6 +10,7 @@ import { CertificateKeyPair, CryptoApi } from "@goauthentik/api";
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { uiConfig } from "../../common/config";
+import { PFColor } from "../../elements/Label";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
 import "../../elements/forms/ModalForm";
@@ -92,9 +93,13 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
     row(item: CertificateKeyPair): TemplateResult[] {
         return [
             html`${item.name}`,
-            html`${item.privateKeyAvailable ? t`Yes` : t`No`}`,
-            html`${item.certExpiry?.toLocaleString()}`,
-            html` <ak-forms-modal>
+            html` <ak-label color=${item.privateKeyAvailable ? PFColor.Green : PFColor.Grey}>
+                ${item.privateKeyAvailable ? t`Yes` : t`No`}
+            </ak-label>`,
+            html` <ak-label color=${item.certExpiry > new Date() ? PFColor.Green : PFColor.Orange}>
+                ${item.certExpiry?.toLocaleString()}
+            </ak-label>`,
+            html`<ak-forms-modal>
                 <span slot="submit"> ${t`Update`} </span>
                 <span slot="header"> ${t`Update Certificate-Key Pair`} </span>
                 <ak-crypto-certificate-form slot="form" .instancePk=${item.pk}>
diff --git a/web/src/pages/outposts/OutpostHealth.ts b/web/src/pages/outposts/OutpostHealth.ts
index 476a7c74b..64e43934d 100644
--- a/web/src/pages/outposts/OutpostHealth.ts
+++ b/web/src/pages/outposts/OutpostHealth.ts
@@ -26,21 +26,18 @@ export class OutpostHealthElement extends LitElement {
         }
         return html` <ul>
             <li role="cell">
-                <ak-label
-                    color=${PFColor.Green}
-                    text=${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}
-                ></ak-label>
+                <ak-label color=${PFColor.Green}>
+                    ${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}
+                </ak-label>
             </li>
             <li role="cell">
                 ${this.outpostHealth.versionOutdated
-                    ? html`<ak-label
-                          color=${PFColor.Red}
-                          text=${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`}
-                      ></ak-label>`
-                    : html`<ak-label
-                          color=${PFColor.Green}
-                          text=${t`Version: ${this.outpostHealth.version || ""}`}
-                      ></ak-label>`}
+                    ? html`<ak-label color=${PFColor.Red}
+                          >${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`}
+                      </ak-label>`
+                    : html`<ak-label color=${PFColor.Green}
+                          >${t`Version: ${this.outpostHealth.version || ""}`}
+                      </ak-label>`}
             </li>
         </ul>`;
     }
diff --git a/web/src/pages/outposts/OutpostHealthSimple.ts b/web/src/pages/outposts/OutpostHealthSimple.ts
index 6131df78f..293a37811 100644
--- a/web/src/pages/outposts/OutpostHealthSimple.ts
+++ b/web/src/pages/outposts/OutpostHealthSimple.ts
@@ -58,11 +58,10 @@ export class OutpostHealthSimpleElement extends LitElement {
             return html`<ak-spinner></ak-spinner>`;
         }
         if (!this.outpostHealth) {
-            return html`<ak-label color=${PFColor.Grey} text=${t`Not available`}></ak-label>`;
+            return html`<ak-label color=${PFColor.Grey}>${t`Not available`}</ak-label>`;
         }
-        return html` <ak-label
-            color=${PFColor.Green}
-            text=${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}
-        ></ak-label>`;
+        return html`<ak-label color=${PFColor.Green}>
+            ${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}</ak-label
+        >`;
     }
 }
diff --git a/web/src/pages/outposts/ServiceConnectionListPage.ts b/web/src/pages/outposts/ServiceConnectionListPage.ts
index ba35eec8b..ba81b1008 100644
--- a/web/src/pages/outposts/ServiceConnectionListPage.ts
+++ b/web/src/pages/outposts/ServiceConnectionListPage.ts
@@ -73,15 +73,11 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
                     })
                     .then((state) => {
                         if (state.healthy) {
-                            return html`<ak-label
-                                color=${PFColor.Green}
-                                text=${ifDefined(state.version)}
-                            ></ak-label>`;
+                            return html`<ak-label color=${PFColor.Green}
+                                >${ifDefined(state.version)}</ak-label
+                            >`;
                         }
-                        return html`<ak-label
-                            color=${PFColor.Red}
-                            text=${t`Unhealthy`}
-                        ></ak-label>`;
+                        return html`<ak-label color=${PFColor.Red}>${t`Unhealthy`}</ak-label>`;
                     }),
                 html`<ak-spinner></ak-spinner>`,
             )}`,
diff --git a/web/src/pages/system-tasks/SystemTaskListPage.ts b/web/src/pages/system-tasks/SystemTaskListPage.ts
index ce28367d7..8940ee402 100644
--- a/web/src/pages/system-tasks/SystemTaskListPage.ts
+++ b/web/src/pages/system-tasks/SystemTaskListPage.ts
@@ -68,13 +68,13 @@ export class SystemTaskListPage extends TablePage<Task> {
     taskStatus(task: Task): TemplateResult {
         switch (task.status) {
             case StatusEnum.Successful:
-                return html`<ak-label color=${PFColor.Green} text=${t`Successful`}></ak-label>`;
+                return html`<ak-label color=${PFColor.Green}>${t`Successful`}</ak-label>`;
             case StatusEnum.Warning:
-                return html`<ak-label color=${PFColor.Orange} text=${t`Warning`}></ak-label>`;
+                return html`<ak-label color=${PFColor.Orange}>${t`Warning`}</ak-label>`;
             case StatusEnum.Error:
-                return html`<ak-label color=${PFColor.Red} text=${t`Error`}></ak-label>`;
+                return html`<ak-label color=${PFColor.Red}>${t`Error`}</ak-label>`;
             default:
-                return html`<ak-label color=${PFColor.Grey} text=${t`Unknown`}></ak-label>`;
+                return html`<ak-label color=${PFColor.Grey}>${t`Unknown`}</ak-label>`;
         }
     }
 
diff --git a/web/src/pages/users/UserViewPage.ts b/web/src/pages/users/UserViewPage.ts
index 4f3a5086c..67fc2227c 100644
--- a/web/src/pages/users/UserViewPage.ts
+++ b/web/src/pages/users/UserViewPage.ts
@@ -161,7 +161,6 @@ export class UserViewPage extends LitElement {
                                                 color=${this.user.isActive
                                                     ? PFColor.Green
                                                     : PFColor.Orange}
-                                                text=""
                                             ></ak-label>
                                         </div>
                                     </dd>
@@ -178,7 +177,6 @@ export class UserViewPage extends LitElement {
                                                 color=${this.user.isSuperuser
                                                     ? PFColor.Green
                                                     : PFColor.Orange}
-                                                text=""
                                             ></ak-label>
                                         </div>
                                     </dd>