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__content">
<span class="pf-c-label__icon"> <span class="pf-c-label__icon">
<i <i
class="fas fa-fw${this.icon || this.getDefaultIcon()}" class="fas fa-fw ${this.icon || this.getDefaultIcon()}"
aria-hidden="true" aria-hidden="true"
></i> ></i>
</span> </span>

View File

@ -10,6 +10,7 @@ import { ExpiringBaseGrantModel, Oauth2Api, RefreshTokenModel } from "@goauthent
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { uiConfig } from "../../common/config"; import { uiConfig } from "../../common/config";
import { PFColor } from "../Label";
import "../forms/DeleteBulkForm"; import "../forms/DeleteBulkForm";
import { Table, TableColumn } from "../table/Table"; import { Table, TableColumn } from "../table/Table";
@ -85,7 +86,9 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
row(item: RefreshTokenModel): TemplateResult[] { row(item: RefreshTokenModel): TemplateResult[] {
return [ return [
html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`, 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.expires?.toLocaleString()}`,
html`${item.scope.join(", ")}`, 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 { Application, CoreApi, PolicyTestResult } from "@goauthentik/api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { PFColor } from "../../elements/Label";
import { Form } from "../../elements/forms/Form"; import { Form } from "../../elements/forms/Form";
import "../../elements/forms/HorizontalFormElement"; import "../../elements/forms/HorizontalFormElement";
import { UserOption } from "../../elements/user/utils"; 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`}> return html` <ak-form-element-horizontal label=${t`Passing`}>
<div class="pf-c-form__group-label"> <div class="pf-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<span class="pf-c-form__label-text" <span class="pf-c-form__label-text">
>${this.result?.passing ? t`Yes` : t`No`}</span <ak-label color=${this.result?.passing ? PFColor.Green : PFColor.Red}>
> ${this.result?.passing ? t`Yes` : t`No`}
</ak-label>
</span>
</div> </div>
</div> </div>
</ak-form-element-horizontal> </ak-form-element-horizontal>

View File

@ -93,10 +93,10 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
row(item: CertificateKeyPair): TemplateResult[] { row(item: CertificateKeyPair): TemplateResult[] {
return [ return [
html`${item.name}`, 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`} ${item.privateKeyAvailable ? t`Yes` : t`No`}
</ak-label>`, </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()} ${item.certExpiry?.toLocaleString()}
</ak-label>`, </ak-label>`,
html`<ak-forms-modal> html`<ak-forms-modal>

View File

@ -8,6 +8,7 @@ import { CoreApi, Group } from "@goauthentik/api";
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { uiConfig } from "../../common/config"; import { uiConfig } from "../../common/config";
import { PFColor } from "../../elements/Label";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
import "../../elements/forms/DeleteBulkForm"; import "../../elements/forms/DeleteBulkForm";
import "../../elements/forms/ModalForm"; import "../../elements/forms/ModalForm";
@ -80,7 +81,9 @@ export class GroupListPage extends TablePage<Group> {
html`${item.name}`, html`${item.name}`,
html`${item.parentName || t`-`}`, html`${item.parentName || t`-`}`,
html`${Array.from(item.users || []).length}`, 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> html` <ak-forms-modal>
<span slot="submit"> ${t`Update`} </span> <span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update Group`} </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 { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { uiConfig } from "../../common/config"; import { uiConfig } from "../../common/config";
import { PFColor } from "../../elements/Label";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
import { TableColumn } from "../../elements/table/Table"; import { TableColumn } from "../../elements/table/Table";
import { TableModal } from "../../elements/table/TableModal"; import { TableModal } from "../../elements/table/TableModal";
@ -50,7 +51,9 @@ export class MemberSelectTable extends TableModal<User> {
<div>${item.username}</div> <div>${item.username}</div>
<small>${item.name}</small> <small>${item.name}</small>
</div>`, </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`-`)}`, html`${first(item.lastLogin?.toLocaleString(), t`-`)}`,
]; ];
} }

View File

@ -65,7 +65,9 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
return [ return [
html`${item.name}`, html`${item.name}`,
html`${item.verboseName}`, 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( html`${until(
new OutpostsApi(DEFAULT_CONFIG) new OutpostsApi(DEFAULT_CONFIG)
.outpostsServiceConnectionsAllStateRetrieve({ .outpostsServiceConnectionsAllStateRetrieve({

View File

@ -10,6 +10,7 @@ import { PoliciesApi, PolicyBinding } from "@goauthentik/api";
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { uiConfig } from "../../common/config"; import { uiConfig } from "../../common/config";
import { PFColor } from "../../elements/Label";
import { PFSize } from "../../elements/Spinner"; import { PFSize } from "../../elements/Spinner";
import "../../elements/Tabs"; import "../../elements/Tabs";
import "../../elements/buttons/Dropdown"; import "../../elements/buttons/Dropdown";
@ -136,7 +137,9 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
row(item: PolicyBinding): TemplateResult[] { row(item: PolicyBinding): TemplateResult[] {
return [ return [
html`${this.getPolicyUserGroupRow(item)}`, 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.order}`,
html`${item.timeout}`, html`${item.timeout}`,
html` ${this.getObjectEditButton(item)} html` ${this.getObjectEditButton(item)}

View File

@ -16,6 +16,7 @@ import {
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import "../../elements/CodeMirror"; import "../../elements/CodeMirror";
import { PFColor } from "../../elements/Label";
import { Form } from "../../elements/forms/Form"; import { Form } from "../../elements/forms/Form";
import "../../elements/forms/HorizontalFormElement"; import "../../elements/forms/HorizontalFormElement";
import { UserOption } from "../../elements/user/utils"; 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`}> return html` <ak-form-element-horizontal label=${t`Passing`}>
<div class="pf-c-form__group-label"> <div class="pf-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<span class="pf-c-form__label-text" <span class="pf-c-form__label-text">
>${this.result?.passing ? t`Yes` : t`No`}</span <ak-label color=${this.result?.passing ? PFColor.Green : PFColor.Red}>
> ${this.result?.passing ? t`Yes` : t`No`}
</ak-label>
</span>
</div> </div>
</div> </div>
</ak-form-element-horizontal> </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 { DEFAULT_CONFIG } from "../../../api/Config";
import { EVENT_REFRESH } from "../../../constants"; import { EVENT_REFRESH } from "../../../constants";
import "../../../elements/CodeMirror"; import "../../../elements/CodeMirror";
import { PFColor } from "../../../elements/Label";
import "../../../elements/Tabs"; import "../../../elements/Tabs";
import "../../../elements/buttons/ModalButton"; import "../../../elements/buttons/ModalButton";
import "../../../elements/buttons/SpinnerButton"; import "../../../elements/buttons/SpinnerButton";
@ -172,21 +173,13 @@ export class ProxyProviderViewPage extends LitElement {
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-c-description-list__text">
${this.provider.basicAuthEnabled <ak-label
? html`<span class="pf-c-button__icon pf-m-start"> color=${this.provider.basicAuthEnabled
<i ? PFColor.Green
class="fas fa-check-circle" : PFColor.Red}
aria-hidden="true" >
></i ${this.provider.basicAuthEnabled ? t`Yes` : t`No`}
>&nbsp; </span </ak-label>
>${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`}`}
</div> </div>
</dd> </dd>
</div> </div>

View File

@ -8,6 +8,7 @@ import { CoreApi, Tenant } from "@goauthentik/api";
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { uiConfig } from "../../common/config"; import { uiConfig } from "../../common/config";
import { PFColor } from "../../elements/Label";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
import "../../elements/forms/DeleteBulkForm"; import "../../elements/forms/DeleteBulkForm";
import "../../elements/forms/ModalForm"; import "../../elements/forms/ModalForm";
@ -77,7 +78,9 @@ export class TenantListPage extends TablePage<Tenant> {
row(item: Tenant): TemplateResult[] { row(item: Tenant): TemplateResult[] {
return [ return [
html`${item.domain}`, 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> html`<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span> <span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update Tenant`} </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 { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { uiConfig } from "../../common/config"; import { uiConfig } from "../../common/config";
import { PFColor } from "../../elements/Label";
import "../../elements/buttons/Dropdown"; import "../../elements/buttons/Dropdown";
import "../../elements/buttons/TokenCopyButton"; import "../../elements/buttons/TokenCopyButton";
import "../../elements/forms/DeleteBulkForm"; 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``} ${item.managed ? html`<small>${t`Token is managed by authentik.`}</small>` : html``}
</div>`, </div>`,
html`<a href="#/identity/users/${item.userObj?.pk}">${item.userObj?.username}</a>`, 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`${item.expiring ? item.expires?.toLocaleString() : t`-`}`,
html`${IntentToLabel(item.intent || IntentEnum.Api)}`, html`${IntentToLabel(item.intent || IntentEnum.Api)}`,
html` html`

View File

@ -8,6 +8,7 @@ import { CoreApi, Group } from "@goauthentik/api";
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../api/Config";
import { uiConfig } from "../../common/config"; import { uiConfig } from "../../common/config";
import { PFColor } from "../../elements/Label";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
import { TableColumn } from "../../elements/table/Table"; import { TableColumn } from "../../elements/table/Table";
import { TableModal } from "../../elements/table/TableModal"; import { TableModal } from "../../elements/table/TableModal";
@ -48,7 +49,9 @@ export class GroupSelectModal extends TableModal<Group> {
html`<div> html`<div>
<div>${item.name}</div> <div>${item.name}</div>
</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}`, html`${item.users.length}`,
]; ];
} }

View File

@ -11,6 +11,7 @@ import { CoreApi, User } from "@goauthentik/api";
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG, tenant } from "../../api/Config"; import { DEFAULT_CONFIG, tenant } from "../../api/Config";
import { uiConfig } from "../../common/config"; import { uiConfig } from "../../common/config";
import { PFColor } from "../../elements/Label";
import "../../elements/buttons/ActionButton"; import "../../elements/buttons/ActionButton";
import "../../elements/forms/DeleteBulkForm"; import "../../elements/forms/DeleteBulkForm";
import "../../elements/forms/ModalForm"; import "../../elements/forms/ModalForm";
@ -110,7 +111,9 @@ export class UserListPage extends TablePage<User> {
<div>${item.username}</div> <div>${item.username}</div>
<small>${item.name}</small> <small>${item.name}</small>
</a>`, </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`${first(item.lastLogin?.toLocaleString(), t`-`)}`,
html` <ak-forms-modal> html` <ak-forms-modal>
<span slot="submit"> ${t`Update`} </span> <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 { AKResponse } from "../../../api/Client";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { uiConfig } from "../../../common/config"; import { uiConfig } from "../../../common/config";
import { PFColor } from "../../../elements/Label";
import "../../../elements/buttons/Dropdown"; import "../../../elements/buttons/Dropdown";
import "../../../elements/buttons/ModalButton"; import "../../../elements/buttons/ModalButton";
import "../../../elements/buttons/TokenCopyButton"; import "../../../elements/buttons/TokenCopyButton";
@ -92,7 +93,9 @@ export class UserTokenList extends Table<Token> {
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text"> <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> </div>
</dd> </dd>
</div> </div>