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

web: add button to create application on provider page

This commit is contained in:
Jens Langhammer 2021-02-16 20:00:34 +01:00
parent 0b75a0028b
commit 416d949d80
7 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/elements/router/Route.ts
View File

@ -4,11 +4,15 @@ export const SLUG_REGEX = "[-a-zA-Z0-9_]+";
export const ID_REGEX = "\\d+";
export const UUID_REGEX = "[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}";
export interface RouteArgs {
[key: string]: string;
}
export class Route {
url: RegExp;
private element?: TemplateResult;
private callback?: (args: { [key: string]: string }) => TemplateResult;
private callback?: (args: RouteArgs) => TemplateResult;
constructor(url: RegExp, element?: TemplateResult) {
this.url = url;
@ -24,12 +28,12 @@ export class Route {
return this;
}
then(render: (args: { [key: string]: string }) => TemplateResult): Route {
then(render: (args: RouteArgs) => TemplateResult): Route {
this.callback = render;
return this;
}
render(args: { [key: string]: string }): TemplateResult {
render(args: RouteArgs): TemplateResult {
if (this.callback) {
return this.callback(args);
}

10
web/src/pages/providers/OAuth2ProviderViewPage.ts
View File

@ -10,11 +10,12 @@ import "../../elements/CodeMirror";
import "../../elements/Tabs";
import { Page } from "../../elements/Page";
import { convertToTitle } from "../../utils";
import "./RelatedApplicationButton";
@customElement("ak-provider-oauth2-view")
export class OAuth2ProviderViewPage extends Page {
pageTitle(): string {
return gettext(`OAuth Provider ${this.provider?.name}`);
return gettext(`OAuth Provider ${this.provider?.name || ""}`);
}
pageDescription(): string | undefined {
return;
@ -72,12 +73,7 @@ export class OAuth2ProviderViewPage extends Page {
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.provider.assigned_application_slug ?
html`<a href="#/applications/${this.provider.assigned_application_slug}">
${this.provider.assigned_application_name}
</a>`:
html`-`
}
<ak-provider-related-application .provider=${this.provider}></ak-provider-related-application>
</div>
</dd>
</div>

4
web/src/pages/providers/ProviderViewPage.ts
View File

@ -12,10 +12,6 @@ import "./ProxyProviderViewPage";
@customElement("ak-provider-view")
export class ProviderViewPage extends LitElement {
@property()
set args(value: { [key: string]: number }) {
this.providerID = value.id;
}
@property({type: Number})
set providerID(value: number) {

7
web/src/pages/providers/ProxyProviderViewPage.ts
View File

@ -9,11 +9,12 @@ import "../../elements/buttons/SpinnerButton";
import "../../elements/CodeMirror";
import "../../elements/Tabs";
import { Page } from "../../elements/Page";
import "./RelatedApplicationButton";
@customElement("ak-provider-proxy-view")
export class ProxyProviderViewPage extends Page {
pageTitle(): string {
return gettext(`Proxy Provider ${this.provider?.name}`);
return gettext(`Proxy Provider ${this.provider?.name || ""}`);
}
pageDescription(): string | undefined {
return;
@ -72,9 +73,7 @@ export class ProxyProviderViewPage extends Page {
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
<a href="#/applications/${this.provider.assigned_application_slug}">
${this.provider.assigned_application_name}
</a>
<ak-provider-related-application .provider=${this.provider}></ak-provider-related-application>
</div>
</dd>
</div>

29
web/src/pages/providers/RelatedApplicationButton.ts Normal file
View File

@ -0,0 +1,29 @@
import { gettext } from "django";
import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Application } from "../../api/Applications";
import { Provider } from "../../api/Providers";
import "../../elements/buttons/ModalButton";
import "../../elements/Spinner";
@customElement("ak-provider-related-application")
export class RelatedApplicationButton extends LitElement {
@property({attribute: false})
provider?: Provider;
render(): TemplateResult {
if (this.provider?.assigned_application_slug) {
return html`<a href="#/applications/${this.provider.assigned_application_slug}">
${this.provider.assigned_application_name}
</a>`;
}
return html`<ak-modal-button href=${Application.adminUrl(`create/?provider=${this.provider ? this.provider.pk : ""}`)}>
<ak-spinner-button slot="trigger" class="pf-m-primary">
${gettext("Create")}
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>`;
}
}

7
web/src/pages/providers/SAMLProviderViewPage.ts
View File

@ -10,11 +10,12 @@ import "../../elements/buttons/SpinnerButton";
import "../../elements/CodeMirror";
import "../../elements/Tabs";
import { Page } from "../../elements/Page";
import "./RelatedApplicationButton";
@customElement("ak-provider-saml-view")
export class SAMLProviderViewPage extends Page {
pageTitle(): string {
return gettext(`SAML Provider ${this.provider?.name}`);
return gettext(`SAML Provider ${this.provider?.name || ""}`);
}
pageDescription(): string | undefined {
return;
@ -73,9 +74,7 @@ export class SAMLProviderViewPage extends Page {
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
<a href="#/applications/${this.provider.assigned_application_slug}">
${this.provider.assigned_application_name}
</a>
<ak-provider-related-application .provider=${this.provider}></ak-provider-related-application>
</div>
</dd>
</div>

2
web/src/routes.ts
View File

@ -25,7 +25,7 @@ export const ROUTES: Route[] = [
new Route(new RegExp("^/administration/overview$"), html`<ak-admin-overview></ak-admin-overview>`),
new Route(new RegExp("^/providers$"), html`<ak-provider-list></ak-provider-list>`),
new Route(new RegExp(`^/providers/(?<id>${ID_REGEX})$`)).then((args) => {
return html`<ak-provider-view .args=${args}></ak-provider-view>`;
return html`<ak-provider-view .providerID=${parseInt(args.id, 10)}></ak-provider-view>`;
}),
new Route(new RegExp("^/applications$"), html`<ak-application-list></ak-application-list>`),
new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})$`)).then((args) => {