From 109283b1891ff9e799fd2e9e90625fa91599724f Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 28 Nov 2021 21:12:53 +0100
Subject: [PATCH] web: use ak-label for boolean values

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/Label.ts                     |  2 +-
 web/src/elements/oauth/UserRefreshList.ts     |  5 +++-
 .../ApplicationCheckAccessForm.ts             |  9 +++++---
 .../crypto/CertificateKeyPairListPage.ts      |  4 ++--
 web/src/pages/groups/GroupListPage.ts         |  5 +++-
 web/src/pages/groups/MemberSelectModal.ts     |  5 +++-
 .../outposts/ServiceConnectionListPage.ts     |  4 +++-
 web/src/pages/policies/BoundPoliciesList.ts   |  5 +++-
 web/src/pages/policies/PolicyTestForm.ts      |  9 +++++---
 .../providers/proxy/ProxyProviderViewPage.ts  | 23 +++++++------------
 web/src/pages/tenants/TenantListPage.ts       |  5 +++-
 web/src/pages/tokens/TokenListPage.ts         |  5 +++-
 web/src/pages/users/GroupSelectModal.ts       |  5 +++-
 web/src/pages/users/UserListPage.ts           |  5 +++-
 .../user-settings/tokens/UserTokenList.ts     |  5 +++-
 15 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/web/src/elements/Label.ts b/web/src/elements/Label.ts
index 0d836dfce..36c756ac6 100644
--- a/web/src/elements/Label.ts
+++ b/web/src/elements/Label.ts
@@ -44,7 +44,7 @@ export class Label extends LitElement {
             <span class="pf-c-label__content">
                 <span class="pf-c-label__icon">
                     <i
-                        class="fas fa-fw${this.icon || this.getDefaultIcon()}"
+                        class="fas fa-fw ${this.icon || this.getDefaultIcon()}"
                         aria-hidden="true"
                     ></i>
                 </span>
diff --git a/web/src/elements/oauth/UserRefreshList.ts b/web/src/elements/oauth/UserRefreshList.ts
index 279c01a55..891bfae26 100644
--- a/web/src/elements/oauth/UserRefreshList.ts
+++ b/web/src/elements/oauth/UserRefreshList.ts
@@ -10,6 +10,7 @@ import { ExpiringBaseGrantModel, Oauth2Api, RefreshTokenModel } from "@goauthent
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { uiConfig } from "../../common/config";
+import { PFColor } from "../Label";
 import "../forms/DeleteBulkForm";
 import { Table, TableColumn } from "../table/Table";
 
@@ -85,7 +86,9 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
     row(item: RefreshTokenModel): TemplateResult[] {
         return [
             html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
-            html`${item.revoked ? t`Yes` : t`No`}`,
+            html`<ak-label color=${item.revoked ? PFColor.Orange : PFColor.Green}>
+                ${item.revoked ? t`Yes` : t`No`}
+            </ak-label>`,
             html`${item.expires?.toLocaleString()}`,
             html`${item.scope.join(", ")}`,
         ];
diff --git a/web/src/pages/applications/ApplicationCheckAccessForm.ts b/web/src/pages/applications/ApplicationCheckAccessForm.ts
index b8c0f233b..0f0484ae7 100644
--- a/web/src/pages/applications/ApplicationCheckAccessForm.ts
+++ b/web/src/pages/applications/ApplicationCheckAccessForm.ts
@@ -7,6 +7,7 @@ import { until } from "lit/directives/until.js";
 import { Application, CoreApi, PolicyTestResult } from "@goauthentik/api";
 
 import { DEFAULT_CONFIG } from "../../api/Config";
+import { PFColor } from "../../elements/Label";
 import { Form } from "../../elements/forms/Form";
 import "../../elements/forms/HorizontalFormElement";
 import { UserOption } from "../../elements/user/utils";
@@ -45,9 +46,11 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
         return html` <ak-form-element-horizontal label=${t`Passing`}>
                 <div class="pf-c-form__group-label">
                     <div class="c-form__horizontal-group">
-                        <span class="pf-c-form__label-text"
-                            >${this.result?.passing ? t`Yes` : t`No`}</span
-                        >
+                        <span class="pf-c-form__label-text">
+                            <ak-label color=${this.result?.passing ? PFColor.Green : PFColor.Red}>
+                                ${this.result?.passing ? t`Yes` : t`No`}
+                            </ak-label>
+                        </span>
                     </div>
                 </div>
             </ak-form-element-horizontal>
diff --git a/web/src/pages/crypto/CertificateKeyPairListPage.ts b/web/src/pages/crypto/CertificateKeyPairListPage.ts
index b676b9f89..844626a4c 100644
--- a/web/src/pages/crypto/CertificateKeyPairListPage.ts
+++ b/web/src/pages/crypto/CertificateKeyPairListPage.ts
@@ -93,10 +93,10 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
     row(item: CertificateKeyPair): TemplateResult[] {
         return [
             html`${item.name}`,
-            html` <ak-label color=${item.privateKeyAvailable ? PFColor.Green : PFColor.Grey}>
+            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}>
+            html`<ak-label color=${item.certExpiry > new Date() ? PFColor.Green : PFColor.Orange}>
                 ${item.certExpiry?.toLocaleString()}
             </ak-label>`,
             html`<ak-forms-modal>
diff --git a/web/src/pages/groups/GroupListPage.ts b/web/src/pages/groups/GroupListPage.ts
index d84984305..b83a59e61 100644
--- a/web/src/pages/groups/GroupListPage.ts
+++ b/web/src/pages/groups/GroupListPage.ts
@@ -8,6 +8,7 @@ import { CoreApi, Group } 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";
@@ -80,7 +81,9 @@ export class GroupListPage extends TablePage<Group> {
             html`${item.name}`,
             html`${item.parentName || t`-`}`,
             html`${Array.from(item.users || []).length}`,
-            html`${item.isSuperuser ? t`Yes` : t`No`}`,
+            html` <ak-label color=${item.isSuperuser ? PFColor.Green : PFColor.Grey}>
+                ${item.isSuperuser ? t`Yes` : t`No`}
+            </ak-label>`,
             html` <ak-forms-modal>
                 <span slot="submit"> ${t`Update`} </span>
                 <span slot="header"> ${t`Update Group`} </span>
diff --git a/web/src/pages/groups/MemberSelectModal.ts b/web/src/pages/groups/MemberSelectModal.ts
index cb5edff03..b0153bea1 100644
--- a/web/src/pages/groups/MemberSelectModal.ts
+++ b/web/src/pages/groups/MemberSelectModal.ts
@@ -8,6 +8,7 @@ import { CoreApi, User } 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 { TableColumn } from "../../elements/table/Table";
 import { TableModal } from "../../elements/table/TableModal";
@@ -50,7 +51,9 @@ export class MemberSelectTable extends TableModal<User> {
                 <div>${item.username}</div>
                 <small>${item.name}</small>
             </div>`,
-            html`${item.isActive ? t`Yes` : t`No`}`,
+            html` <ak-label color=${item.isActive ? PFColor.Green : PFColor.Orange}>
+                ${item.isActive ? t`Yes` : t`No`}
+            </ak-label>`,
             html`${first(item.lastLogin?.toLocaleString(), t`-`)}`,
         ];
     }
diff --git a/web/src/pages/outposts/ServiceConnectionListPage.ts b/web/src/pages/outposts/ServiceConnectionListPage.ts
index ba81b1008..7100ea8be 100644
--- a/web/src/pages/outposts/ServiceConnectionListPage.ts
+++ b/web/src/pages/outposts/ServiceConnectionListPage.ts
@@ -65,7 +65,9 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
         return [
             html`${item.name}`,
             html`${item.verboseName}`,
-            html`${item.local ? t`Yes` : t`No`}`,
+            html`<ak-label color=${item.local ? PFColor.Grey : PFColor.Green}>
+                ${item.local ? t`Yes` : t`No`}
+            </ak-label>`,
             html`${until(
                 new OutpostsApi(DEFAULT_CONFIG)
                     .outpostsServiceConnectionsAllStateRetrieve({
diff --git a/web/src/pages/policies/BoundPoliciesList.ts b/web/src/pages/policies/BoundPoliciesList.ts
index cc0f62f81..df3cf0b4c 100644
--- a/web/src/pages/policies/BoundPoliciesList.ts
+++ b/web/src/pages/policies/BoundPoliciesList.ts
@@ -10,6 +10,7 @@ import { PoliciesApi, PolicyBinding } 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 { PFSize } from "../../elements/Spinner";
 import "../../elements/Tabs";
 import "../../elements/buttons/Dropdown";
@@ -136,7 +137,9 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
     row(item: PolicyBinding): TemplateResult[] {
         return [
             html`${this.getPolicyUserGroupRow(item)}`,
-            html`${item.enabled ? t`Yes` : t`No`}`,
+            html` <ak-label color=${item.enabled ? PFColor.Green : PFColor.Orange}>
+                ${item.enabled ? t`Yes` : t`No`}
+            </ak-label>`,
             html`${item.order}`,
             html`${item.timeout}`,
             html` ${this.getObjectEditButton(item)}
diff --git a/web/src/pages/policies/PolicyTestForm.ts b/web/src/pages/policies/PolicyTestForm.ts
index 024ed306f..30b9595a3 100644
--- a/web/src/pages/policies/PolicyTestForm.ts
+++ b/web/src/pages/policies/PolicyTestForm.ts
@@ -16,6 +16,7 @@ import {
 
 import { DEFAULT_CONFIG } from "../../api/Config";
 import "../../elements/CodeMirror";
+import { PFColor } from "../../elements/Label";
 import { Form } from "../../elements/forms/Form";
 import "../../elements/forms/HorizontalFormElement";
 import { UserOption } from "../../elements/user/utils";
@@ -50,9 +51,11 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
         return html` <ak-form-element-horizontal label=${t`Passing`}>
                 <div class="pf-c-form__group-label">
                     <div class="c-form__horizontal-group">
-                        <span class="pf-c-form__label-text"
-                            >${this.result?.passing ? t`Yes` : t`No`}</span
-                        >
+                        <span class="pf-c-form__label-text">
+                            <ak-label color=${this.result?.passing ? PFColor.Green : PFColor.Red}>
+                                ${this.result?.passing ? t`Yes` : t`No`}
+                            </ak-label>
+                        </span>
                     </div>
                 </div>
             </ak-form-element-horizontal>
diff --git a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
index 0c46834ab..aae9c6f68 100644
--- a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
+++ b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
@@ -27,6 +27,7 @@ import MDTraefikStandalone from "../../../../../website/docs/providers/proxy/_tr
 import { DEFAULT_CONFIG } from "../../../api/Config";
 import { EVENT_REFRESH } from "../../../constants";
 import "../../../elements/CodeMirror";
+import { PFColor } from "../../../elements/Label";
 import "../../../elements/Tabs";
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/SpinnerButton";
@@ -172,21 +173,13 @@ export class ProxyProviderViewPage extends LitElement {
                                 </dt>
                                 <dd class="pf-c-description-list__description">
                                     <div class="pf-c-description-list__text">
-                                        ${this.provider.basicAuthEnabled
-                                            ? html`<span class="pf-c-button__icon pf-m-start">
-                                                      <i
-                                                          class="fas fa-check-circle"
-                                                          aria-hidden="true"
-                                                      ></i
-                                                      >&nbsp; </span
-                                                  >${t`Yes`}`
-                                            : html`<span class="pf-c-button__icon pf-m-start">
-                                                      <i
-                                                          class="fas fa-times-circle"
-                                                          aria-hidden="true"
-                                                      ></i
-                                                      >&nbsp; </span
-                                                  >${t`No`}`}
+                                        <ak-label
+                                            color=${this.provider.basicAuthEnabled
+                                                ? PFColor.Green
+                                                : PFColor.Red}
+                                        >
+                                            ${this.provider.basicAuthEnabled ? t`Yes` : t`No`}
+                                        </ak-label>
                                     </div>
                                 </dd>
                             </div>
diff --git a/web/src/pages/tenants/TenantListPage.ts b/web/src/pages/tenants/TenantListPage.ts
index bc23b28ec..02dbbb690 100644
--- a/web/src/pages/tenants/TenantListPage.ts
+++ b/web/src/pages/tenants/TenantListPage.ts
@@ -8,6 +8,7 @@ import { CoreApi, Tenant } 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";
@@ -77,7 +78,9 @@ export class TenantListPage extends TablePage<Tenant> {
     row(item: Tenant): TemplateResult[] {
         return [
             html`${item.domain}`,
-            html`${item._default ? t`Yes` : t`No`}`,
+            html` <ak-label color=${item._default ? PFColor.Green : PFColor.Red}>
+                ${item._default ? t`Yes` : t`No`}
+            </ak-label>`,
             html`<ak-forms-modal>
                 <span slot="submit"> ${t`Update`} </span>
                 <span slot="header"> ${t`Update Tenant`} </span>
diff --git a/web/src/pages/tokens/TokenListPage.ts b/web/src/pages/tokens/TokenListPage.ts
index 60efeb6b2..b6950249d 100644
--- a/web/src/pages/tokens/TokenListPage.ts
+++ b/web/src/pages/tokens/TokenListPage.ts
@@ -8,6 +8,7 @@ import { CoreApi, IntentEnum, Token } 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/Dropdown";
 import "../../elements/buttons/TokenCopyButton";
 import "../../elements/forms/DeleteBulkForm";
@@ -110,7 +111,9 @@ export class TokenListPage extends TablePage<Token> {
                 ${item.managed ? html`<small>${t`Token is managed by authentik.`}</small>` : html``}
             </div>`,
             html`<a href="#/identity/users/${item.userObj?.pk}">${item.userObj?.username}</a>`,
-            html`${item.expiring ? t`Yes` : t`No`}`,
+            html` <ak-label color=${item.expiring ? PFColor.Green : PFColor.Orange}>
+                ${item.expiring ? t`Yes` : t`No`}
+            </ak-label>`,
             html`${item.expiring ? item.expires?.toLocaleString() : t`-`}`,
             html`${IntentToLabel(item.intent || IntentEnum.Api)}`,
             html`
diff --git a/web/src/pages/users/GroupSelectModal.ts b/web/src/pages/users/GroupSelectModal.ts
index e7e0127a9..64c53ad36 100644
--- a/web/src/pages/users/GroupSelectModal.ts
+++ b/web/src/pages/users/GroupSelectModal.ts
@@ -8,6 +8,7 @@ import { CoreApi, Group } 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 { TableColumn } from "../../elements/table/Table";
 import { TableModal } from "../../elements/table/TableModal";
@@ -48,7 +49,9 @@ export class GroupSelectModal extends TableModal<Group> {
             html`<div>
                 <div>${item.name}</div>
             </div>`,
-            html`${item.isSuperuser ? t`Yes` : t`No`}`,
+            html` <ak-label color=${item.isSuperuser ? PFColor.Green : PFColor.Grey}>
+                ${item.isSuperuser ? t`Yes` : t`No`}
+            </ak-label>`,
             html`${item.users.length}`,
         ];
     }
diff --git a/web/src/pages/users/UserListPage.ts b/web/src/pages/users/UserListPage.ts
index 0a2065594..c9779a454 100644
--- a/web/src/pages/users/UserListPage.ts
+++ b/web/src/pages/users/UserListPage.ts
@@ -11,6 +11,7 @@ import { CoreApi, User } from "@goauthentik/api";
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG, tenant } from "../../api/Config";
 import { uiConfig } from "../../common/config";
+import { PFColor } from "../../elements/Label";
 import "../../elements/buttons/ActionButton";
 import "../../elements/forms/DeleteBulkForm";
 import "../../elements/forms/ModalForm";
@@ -110,7 +111,9 @@ export class UserListPage extends TablePage<User> {
                 <div>${item.username}</div>
                 <small>${item.name}</small>
             </a>`,
-            html`${item.isActive ? t`Yes` : t`No`}`,
+            html` <ak-label color=${item.isActive ? PFColor.Green : PFColor.Red}>
+                ${item.isActive ? t`Yes` : t`No`}
+            </ak-label>`,
             html`${first(item.lastLogin?.toLocaleString(), t`-`)}`,
             html` <ak-forms-modal>
                     <span slot="submit"> ${t`Update`} </span>
diff --git a/web/src/user/user-settings/tokens/UserTokenList.ts b/web/src/user/user-settings/tokens/UserTokenList.ts
index 721924a9a..29ac58d13 100644
--- a/web/src/user/user-settings/tokens/UserTokenList.ts
+++ b/web/src/user/user-settings/tokens/UserTokenList.ts
@@ -10,6 +10,7 @@ import { CoreApi, IntentEnum, Token } 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/Dropdown";
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/TokenCopyButton";
@@ -92,7 +93,9 @@ export class UserTokenList extends Table<Token> {
                             </dt>
                             <dd class="pf-c-description-list__description">
                                 <div class="pf-c-description-list__text">
-                                    ${item.expiring ? t`Yes` : t`No`}
+                                    <ak-label color=${item.expiring ? PFColor.Green : PFColor.Red}>
+                                        ${item.expiring ? t`Yes` : t`No`}
+                                    </ak-label>
                                 </div>
                             </dd>
                         </div>