Merge branch 'master' into version-2021.12
This commit is contained in:
32
web/src/elements/Markdown.ts
Normal file
32
web/src/elements/Markdown.ts
Normal 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)}`;
|
||||
}
|
||||
}
|
@ -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);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
@ -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`}
|
||||
>
|
||||
|
@ -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
2
web/src/global.d.ts
vendored
@ -1,7 +1,7 @@
|
||||
declare module "*.css";
|
||||
declare module "*.md" {
|
||||
const html: string;
|
||||
const metadata: object;
|
||||
const metadata: { [key: string]: string };
|
||||
const filename: string;
|
||||
}
|
||||
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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 ""
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
`
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user