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() @property()
icon?: string; icon?: string;
@property()
text?: string;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFLabel, AKGlobal]; return [PFBase, PFLabel, AKGlobal];
} }
@ -47,12 +44,11 @@ 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 ${this.text ? "fa-fw" : ""} ${this.icon || class="fas fa-fw${this.icon || this.getDefaultIcon()}"
this.getDefaultIcon()}"
aria-hidden="true" aria-hidden="true"
></i> ></i>
</span> </span>
${this.text || ""} <slot></slot>
</span> </span>
</span>`; </span>`;
} }

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

@ -10,6 +10,7 @@ import { CertificateKeyPair, CryptoApi } 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";
@ -92,9 +93,13 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
row(item: CertificateKeyPair): TemplateResult[] { row(item: CertificateKeyPair): TemplateResult[] {
return [ return [
html`${item.name}`, html`${item.name}`,
html`${item.privateKeyAvailable ? t`Yes` : t`No`}`, html` <ak-label color=${item.privateKeyAvailable ? PFColor.Green : PFColor.Grey}>
html`${item.certExpiry?.toLocaleString()}`, ${item.privateKeyAvailable ? t`Yes` : t`No`}
html` <ak-forms-modal> </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="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update Certificate-Key Pair`} </span> <span slot="header"> ${t`Update Certificate-Key Pair`} </span>
<ak-crypto-certificate-form slot="form" .instancePk=${item.pk}> <ak-crypto-certificate-form slot="form" .instancePk=${item.pk}>

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

@ -26,21 +26,18 @@ export class OutpostHealthElement extends LitElement {
} }
return html` <ul> return html` <ul>
<li role="cell"> <li role="cell">
<ak-label <ak-label color=${PFColor.Green}>
color=${PFColor.Green} ${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}
text=${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`} </ak-label>
></ak-label>
</li> </li>
<li role="cell"> <li role="cell">
${this.outpostHealth.versionOutdated ${this.outpostHealth.versionOutdated
? html`<ak-label ? html`<ak-label color=${PFColor.Red}
color=${PFColor.Red} >${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`}
text=${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`} </ak-label>`
></ak-label>` : html`<ak-label color=${PFColor.Green}
: html`<ak-label >${t`Version: ${this.outpostHealth.version || ""}`}
color=${PFColor.Green} </ak-label>`}
text=${t`Version: ${this.outpostHealth.version || ""}`}
></ak-label>`}
</li> </li>
</ul>`; </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>`; return html`<ak-spinner></ak-spinner>`;
} }
if (!this.outpostHealth) { 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 return html`<ak-label color=${PFColor.Green}>
color=${PFColor.Green} ${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}</ak-label
text=${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) => { .then((state) => {
if (state.healthy) { if (state.healthy) {
return html`<ak-label return html`<ak-label color=${PFColor.Green}
color=${PFColor.Green} >${ifDefined(state.version)}</ak-label
text=${ifDefined(state.version)} >`;
></ak-label>`;
} }
return html`<ak-label return html`<ak-label color=${PFColor.Red}>${t`Unhealthy`}</ak-label>`;
color=${PFColor.Red}
text=${t`Unhealthy`}
></ak-label>`;
}), }),
html`<ak-spinner></ak-spinner>`, 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 { taskStatus(task: Task): TemplateResult {
switch (task.status) { switch (task.status) {
case StatusEnum.Successful: 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: 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: 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: 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 color=${this.user.isActive
? PFColor.Green ? PFColor.Green
: PFColor.Orange} : PFColor.Orange}
text=""
></ak-label> ></ak-label>
</div> </div>
</dd> </dd>
@ -178,7 +177,6 @@ export class UserViewPage extends LitElement {
color=${this.user.isSuperuser color=${this.user.isSuperuser
? PFColor.Green ? PFColor.Green
: PFColor.Orange} : PFColor.Orange}
text=""
></ak-label> ></ak-label>
</div> </div>
</dd> </dd>