Merge branch 'master' into version-2021.12

This commit is contained in:
Jens Langhammer
2021-12-16 15:48:53 +01:00
28 changed files with 235 additions and 128 deletions

View File

@ -0,0 +1,32 @@
import { CSSResult, LitElement, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import AKGlobal from "../authentik.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFList from "@patternfly/patternfly/components/List/list.css";
export interface MarkdownDocument {
html: string;
metadata: { [key: string]: string };
filename: string;
}
@customElement("ak-markdown")
export class Markdown extends LitElement {
@property({ attribute: false })
md?: MarkdownDocument;
static get styles(): CSSResult[] {
return [PFList, PFContent, AKGlobal];
}
render(): TemplateResult {
if (!this.md) {
return html``;
}
const finalHTML = this.md?.html.replace("<ul>", "<ul class='pf-c-list'>");
return html`${this.md?.metadata.title ? html`<h2>${this.md.metadata.title}</h2>` : html``}
${unsafeHTML(finalHTML)}`;
}
}

View File

@ -81,7 +81,7 @@ export class PageHeader extends LitElement {
font-size: 24px;
}
.notification-trigger.has-notifications {
color: #2b9af3;
color: var(--pf-global--active-color--100);
}
`,
];

View File

@ -183,9 +183,15 @@ export class NotificationDrawer extends LitElement {
composed: true,
}),
);
this.dispatchEvent(
new CustomEvent(EVENT_NOTIFICATION_DRAWER_TOGGLE, {
bubbles: true,
composed: true,
}),
);
});
}}
class="pf-c-button pf-m-secondary pf-m-block"
class="pf-c-button pf-m-primary pf-m-block"
type="button"
aria-label=${t`Clear all`}
>

View File

@ -4,6 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFSidebar from "@patternfly/patternfly/components/Sidebar/sidebar.css";
import "../../elements/PageHeader";
import { Table } from "./Table";
@ -14,7 +15,15 @@ export abstract class TablePage<T> extends Table<T> {
abstract pageIcon(): string;
static get styles(): CSSResult[] {
return super.styles.concat(PFPage, PFContent);
return super.styles.concat(PFPage, PFContent, PFSidebar);
}
renderSidebarBefore(): TemplateResult {
return html``;
}
renderSidebarAfter(): TemplateResult {
return html``;
}
render(): TemplateResult {
@ -25,7 +34,15 @@ export abstract class TablePage<T> extends Table<T> {
>
</ak-page-header>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card">${this.renderTable()}</div>
<div class="pf-c-sidebar pf-m-gutter">
<div class="pf-c-sidebar__main">
${this.renderSidebarBefore()}
<div class="pf-c-sidebar__content">
<div class="pf-c-card">${this.renderTable()}</div>
</div>
${this.renderSidebarAfter()}
</div>
</div>
</section>`;
}
}

2
web/src/global.d.ts vendored
View File

@ -1,7 +1,7 @@
declare module "*.css";
declare module "*.md" {
const html: string;
const metadata: object;
const metadata: { [key: string]: string };
const filename: string;
}

View File

@ -122,6 +122,10 @@ msgstr "API Token (can be used to access the API programmatically)"
msgid "API request failed"
msgstr "API request failed"
#: src/pages/applications/ApplicationListPage.ts
msgid "About applications"
msgstr "About applications"
#: src/pages/sources/oauth/OAuthSourceViewPage.ts
msgid "Access Key"
msgstr "Access Key"

View File

@ -128,6 +128,10 @@ msgstr "Jeton d'API (peut être utilisé pour accéder à l'API via un programme
msgid "API request failed"
msgstr "Requête d'API échouée"
#: src/pages/applications/ApplicationListPage.ts
msgid "About applications"
msgstr ""
#: src/pages/sources/oauth/OAuthSourceViewPage.ts
msgid "Access Key"
msgstr "Clé d'accès"

View File

@ -122,6 +122,10 @@ msgstr ""
msgid "API request failed"
msgstr ""
#: src/pages/applications/ApplicationListPage.ts
msgid "About applications"
msgstr ""
#: src/pages/sources/oauth/OAuthSourceViewPage.ts
msgid "Access Key"
msgstr ""

View File

@ -5,12 +5,15 @@ import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import { Application, CoreApi } from "@goauthentik/api";
import MDApplication from "../../../../website/docs/core/applications.md";
import { AKResponse } from "../../api/Client";
import { DEFAULT_CONFIG } from "../../api/Config";
import { uiConfig } from "../../common/config";
import "../../elements/Markdown";
import "../../elements/buttons/SpinnerButton";
import "../../elements/forms/DeleteBulkForm";
import "../../elements/forms/ModalForm";
@ -52,6 +55,7 @@ export class ApplicationListPage extends TablePage<Application> {
static get styles(): CSSResult[] {
return super.styles.concat(
PFAvatar,
PFCard,
css`
tr td:first-child {
width: auto;
@ -74,6 +78,17 @@ export class ApplicationListPage extends TablePage<Application> {
];
}
renderSidebarAfter(): TemplateResult {
return html`<div class="pf-c-sidebar__panel pf-m-width-25">
<div class="pf-c-card">
<div class="pf-c-card__title">${t`About applications`}</div>
<div class="pf-c-card__body">
<ak-markdown .md=${MDApplication}></ak-markdown>
</div>
</div>
</div>`;
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length < 1;
return html`<ak-forms-delete-bulk

View File

@ -1,7 +1,6 @@
import { t } from "@lingui/macro";
import { CSSResult, LitElement, TemplateResult, html } from "lit";
import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
import { customElement, property } from "lit/decorators.js";
import AKGlobal from "../../../authentik.css";
@ -28,6 +27,8 @@ import { DEFAULT_CONFIG } from "../../../api/Config";
import { EVENT_REFRESH } from "../../../constants";
import "../../../elements/CodeMirror";
import { PFColor } from "../../../elements/Label";
import "../../../elements/Markdown";
import { MarkdownDocument } from "../../../elements/Markdown";
import "../../../elements/Tabs";
import "../../../elements/buttons/ModalButton";
import "../../../elements/buttons/SpinnerButton";
@ -90,20 +91,19 @@ export class ProxyProviderViewPage extends LitElement {
});
}
renderConfigTemplate(tmpl: string): TemplateResult {
renderConfigTemplate(markdown: MarkdownDocument): MarkdownDocument {
// See website/docs/providers/proxy/forward_auth.mdx
let final = "";
if (this.provider?.mode === ProxyMode.ForwardSingle) {
final = tmpl
markdown.html = markdown.html
.replaceAll("authentik.company", window.location.hostname)
.replaceAll("outpost.company", window.location.hostname)
.replaceAll("app.company", this.provider?.externalHost || "");
} else if (this.provider?.mode == ProxyMode.ForwardDomain) {
final = tmpl
markdown.html = markdown.html
.replaceAll("authentik.company", window.location.hostname)
.replaceAll("outpost.company", this.provider?.externalHost || "");
}
return html`${unsafeHTML(final)}`;
return markdown;
}
render(): TemplateResult {
@ -250,42 +250,54 @@ export class ProxyProviderViewPage extends LitElement {
data-tab-title="${t`Nginx (Ingress)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDNginxIngress.html)}
<ak-markdown
.md=${this.renderConfigTemplate(MDNginxIngress)}
></ak-markdown>
</section>
<section
slot="page-nginx-proxy-manager"
data-tab-title="${t`Nginx (Proxy Manager)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDNginxPM.html)}
<ak-markdown
.md=${this.renderConfigTemplate(MDNginxPM)}
></ak-markdown>
</section>
<section
slot="page-nginx-standalone"
data-tab-title="${t`Nginx (standalone)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDNginxStandalone.html)}
<ak-markdown
.md=${this.renderConfigTemplate(MDNginxStandalone)}
></ak-markdown>
</section>
<section
slot="page-traefik-ingress"
data-tab-title="${t`Traefik (Ingress)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDTraefikIngres.html)}
<ak-markdown
.md=${this.renderConfigTemplate(MDTraefikIngres)}
></ak-markdown>
</section>
<section
slot="page-traefik-compose"
data-tab-title="${t`Traefik (Compose)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDTraefikCompose.html)}
<ak-markdown
.md=${this.renderConfigTemplate(MDTraefikCompose)}
></ak-markdown>
</section>
<section
slot="page-traefik-standalone"
data-tab-title="${t`Traefik (Standalone)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
${this.renderConfigTemplate(MDTraefikStandalone.html)}
<ak-markdown
.md=${this.renderConfigTemplate(MDTraefikStandalone)}
></ak-markdown>
</section>
</ak-tabs>
`

View File

@ -107,11 +107,15 @@ export class StageListPage extends TablePage<Stage> {
<div>${item.name}</div>
<small>${item.verboseName}</small>
</div>`,
html`${item.flowSet?.map((flow) => {
return html`<a href="#/flow/flows/${flow.slug}">
<code>${flow.slug}</code>
</a>`;
})}`,
html`<ul class="pf-c-list">
${item.flowSet?.map((flow) => {
return html`<li>
<a href="#/flow/flows/${flow.slug}">
<code>${flow.slug}</code>
</a>
</li>`;
})}
</ul>`,
html` <ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update ${item.verboseName}`} </span>