web: use ak-label for boolean values

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
2021-11-28 21:12:53 +01:00 · 2021-11-28 21:12:53 +01:00 · 109283b189
parent 235d283def
commit 109283b189
15 changed files with 62 additions and 34 deletions
--- 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(", ")}`,
        ];
--- 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>
--- 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>
--- 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`-`)}`,
        ];
    }
--- 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({
--- 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)}
--- 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>
--- 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>
--- 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>
--- 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`
--- 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}`,
        ];
    }
--- 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>
--- 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">
+                                    <ak-label color=${item.expiring ? PFColor.Green : PFColor.Red}>
                                        ${item.expiring ? t`Yes` : t`No`}
+                                    </ak-label>
                                </div>
                            </dd>
                        </div>