web: use ak-label for boolean values

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-11-28 21:12:53 +01:00
parent 235d283def
commit 109283b189
15 changed files with 62 additions and 34 deletions

View File

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

View File

@ -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(", ")}`,
];

View File

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

View File

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

View File

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

View File

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

View File

@ -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({

View File

@ -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)}

View File

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

View File

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

View File

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

View File

@ -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`

View File

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

View File

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

View File

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