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

web/admin: more consistent label usage, use compact labels

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-12-25 14:06:29 +01:00
parent 7e44de2da9
commit 5132f0f876
No known key found for this signature in database
4 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/src/admin/outposts/OutpostListPage.ts
View file

@ -5,6 +5,7 @@ import "@goauthentik/admin/outposts/OutpostHealth";
import "@goauthentik/admin/outposts/OutpostHealthSimple"; import "@goauthentik/admin/outposts/OutpostHealthSimple";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config"; import { uiConfig } from "@goauthentik/common/ui/config";
import { PFColor } from "@goauthentik/elements/Label";
import { PFSize } from "@goauthentik/elements/Spinner"; import { PFSize } from "@goauthentik/elements/Spinner";
import "@goauthentik/elements/buttons/SpinnerButton"; import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/forms/DeleteBulkForm"; import "@goauthentik/elements/forms/DeleteBulkForm";
@ -83,12 +84,12 @@ export class OutpostListPage extends TablePage<Outpost> {
return [ return [
html`<div>${item.name}</div> html`<div>${item.name}</div>
${item.config.authentik_host === "" ${item.config.authentik_host === ""
? html`<i class="pf-icon pf-icon-warning-triangle"></i> ? html`<ak-label color=${PFColor.Orange} ?compact=${true}>
<small ${t`Warning: authentik Domain is not configured, authentication will not work.`}
>${t`Warning: authentik Domain is not configured, authentication will not work.`}</small </ak-label>`
>` : html`<ak-label color=${PFColor.Green} ?compact=${true}>
: html`<i class="pf-icon pf-icon-ok"></i> ${t`Logging in via ${item.config.authentik_host}.`}
<small> ${t`Logging in via ${item.config.authentik_host}.`} </small>`}`, </ak-label>`}`,
html`${TypeToLabel(item.type)}`, html`${TypeToLabel(item.type)}`,
html`<ul> html`<ul>
${item.providersObj?.map((p) => { ${item.providersObj?.map((p) => {

4
web/src/admin/policies/PolicyListPage.ts
View file

@ -72,10 +72,10 @@ export class PolicyListPage extends TablePage<Policy> {
return [ return [
html`<div>${item.name}</div> html`<div>${item.name}</div>
${(item.boundTo || 0) > 0 ${(item.boundTo || 0) > 0
? html`<ak-label color=${PFColor.Green}> ? html`<ak-label color=${PFColor.Green} ?compact=${true}>
${t`Assigned to ${item.boundTo} object(s).`} ${t`Assigned to ${item.boundTo} object(s).`}
</ak-label>` </ak-label>`
: html`<ak-label color=${PFColor.Orange}> : html`<ak-label color=${PFColor.Orange} ?compact=${true}>
${t`Warning: Policy is not assigned.`} ${t`Warning: Policy is not assigned.`}
</ak-label>`}`, </ak-label>`}`,
html`${item.verboseName}`, html`${item.verboseName}`,

13
web/src/admin/sources/SourceListPage.ts
View file

@ -5,6 +5,7 @@ import "@goauthentik/admin/sources/plex/PlexSourceForm";
import "@goauthentik/admin/sources/saml/SAMLSourceForm"; import "@goauthentik/admin/sources/saml/SAMLSourceForm";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config"; import { uiConfig } from "@goauthentik/common/ui/config";
import { PFColor } from "@goauthentik/elements/Label";
import "@goauthentik/elements/forms/DeleteBulkForm"; import "@goauthentik/elements/forms/DeleteBulkForm";
import "@goauthentik/elements/forms/ModalForm"; import "@goauthentik/elements/forms/ModalForm";
import "@goauthentik/elements/forms/ProxyForm"; import "@goauthentik/elements/forms/ProxyForm";
@ -82,7 +83,11 @@ export class SourceListPage extends TablePage<Source> {
return [ return [
html`<a href="#/core/sources/${item.slug}"> html`<a href="#/core/sources/${item.slug}">
<div>${item.name}</div> <div>${item.name}</div>
${item.enabled ? html`` : html`<small>${t`Disabled`}</small>`} ${item.enabled
? html``
: html`<ak-label color=${PFColor.Orange} ?compact=${true}>
${t`Disabled`}</ak-label
>`}
</a>`, </a>`,
html`${item.verboseName}`, html`${item.verboseName}`,
html` <ak-forms-modal> html` <ak-forms-modal>
@ -105,10 +110,10 @@ export class SourceListPage extends TablePage<Source> {
rowInbuilt(item: Source): TemplateResult[] { rowInbuilt(item: Source): TemplateResult[] {
return [ return [
html`<span> html`<div>
<div>${item.name}</div> <div>${item.name}</div>
<small>${t`Built-in`}</small> <ak-label color=${PFColor.Grey} ?compact=${true}> ${t`Built-in`}</ak-label>
</span>`, </div>`,
html`${t`Built-in`}`, html`${t`Built-in`}`,
html``, html``,
]; ];

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

@ -22,6 +22,9 @@ export class Label extends AKElement {
@property() @property()
icon?: string; icon?: string;
@property({ type: Boolean })
compact = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFLabel, AKGlobal]; return [PFBase, PFLabel, AKGlobal];
} }
@ -35,14 +38,14 @@ export class Label extends AKElement {
case PFColor.Red: case PFColor.Red:
return "fa-times"; return "fa-times";
case PFColor.Grey: case PFColor.Grey:
return "fa-question-circle"; return "fa-info-circle";
default: default:
return ""; return "";
} }
} }
render(): TemplateResult { render(): TemplateResult {
return html`<span class="pf-c-label ${this.color}"> return html`<span class="pf-c-label ${this.color} ${this.compact ? "pf-m-compact" : ""}">
<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