trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/elements: use <slot> in ak-label instead of attribute

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-11-28 21:03:24 +01:00
parent 96a86b3298
commit 235d283def
7 changed files with 31 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/src/elements/Label.ts
View file

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

9
web/src/pages/crypto/CertificateKeyPairListPage.ts
View file

@ -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,8 +93,12 @@ 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-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>

21
web/src/pages/outposts/OutpostHealth.ts
View file

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

9
web/src/pages/outposts/OutpostHealthSimple.ts
View file

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

12
web/src/pages/outposts/ServiceConnectionListPage.ts
View file

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

8
web/src/pages/system-tasks/SystemTaskListPage.ts
View file

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

2
web/src/pages/users/UserViewPage.ts
View file

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