web: add page for Proxy Provider

This commit is contained in:
Jens Langhammer 2021-02-06 18:57:25 +01:00
parent 830b8bcd5b
commit 91282c7bd8
4 changed files with 163 additions and 5 deletions

View file

@ -6,7 +6,6 @@ from urllib.parse import urljoin
from django.db import models
from django.forms import ModelForm
from django.http import HttpRequest
from django.utils.translation import gettext as _
from rest_framework.serializers import Serializer
@ -119,10 +118,6 @@ class ProxyProvider(OutpostModel, OAuth2Provider):
"""Use external_host as launch URL"""
return self.external_host
def html_setup_urls(self, request: HttpRequest) -> Optional[str]:
"""Overwrite Setup URLs as they are not needed for proxy"""
return None
def set_oauth_defaults(self):
"""Ensure all OAuth2-related settings are correct"""
self.client_type = ClientTypes.CONFIDENTIAL

View file

@ -0,0 +1,30 @@
import { DefaultClient } from "../Client";
import { Provider } from "../Providers";
export class ProxyProvider extends Provider {
internal_host: string;
external_host: string;
internal_host_ssl_validation: boolean
certificate?: string;
skip_path_regex: string;
basic_auth_enabled: boolean;
basic_auth_password_attribute: string;
basic_auth_user_attribute: string;
constructor() {
super();
throw Error();
}
static get(id: number): Promise<ProxyProvider> {
return DefaultClient.fetch<ProxyProvider>(["providers", "proxy", id.toString()]);
}
static getMetadata(id: number): Promise<{ metadata: string }> {
return DefaultClient.fetch(["providers", "proxy", id.toString(), "metadata"]);
}
static appUrl(rest: string): string {
return `/application/proxy/${rest}`;
}
}

View file

@ -8,6 +8,7 @@ import { SpinnerSize } from "../../elements/Spinner";
import "./SAMLProviderViewPage";
import "./OAuth2ProviderViewPage";
import "./ProxyProviderViewPage";
@customElement("ak-provider-view")
export class ProviderViewPage extends LitElement {
@ -45,6 +46,8 @@ export class ProviderViewPage extends LitElement {
return html`<ak-provider-saml-view providerID=${this.provider.pk}></ak-provider-saml-view>`;
case "oauth2":
return html`<ak-provider-oauth2-view providerID=${this.provider.pk}></ak-provider-oauth2-view>`;
case "proxy":
return html`<ak-provider-proxy-view providerID=${this.provider.pk}></ak-provider-proxy-view>`;
default:
return html`<p>Invalid provider type ${this.provider?.object_type}</p>`;
}

View file

@ -0,0 +1,130 @@
import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { Provider } from "../../api/Providers";
import { ProxyProvider } from "../../api/providers/Proxy";
import { COMMON_STYLES } from "../../common/styles";
import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton";
import "../../elements/CodeMirror";
import "../../elements/Tabs";
import { Page } from "../../elements/Page";
@customElement("ak-provider-proxy-view")
export class ProxyProviderViewPage extends Page {
pageTitle(): string {
return gettext(`Proxy Provider ${this.provider?.name}`);
}
pageDescription(): string | undefined {
return;
}
pageIcon(): string {
return "pf-icon pf-icon-integration";
}
@property()
set args(value: { [key: string]: number }) {
this.providerID = value.id;
}
@property({type: Number})
set providerID(value: number) {
ProxyProvider.get(value).then((app) => (this.provider = app));
}
@property({ attribute: false })
provider?: ProxyProvider;
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
constructor() {
super();
this.addEventListener("ak-refresh", () => {
if (!this.provider?.pk) return;
this.providerID = this.provider?.pk;
});
}
renderContent(): TemplateResult {
if (!this.provider) {
return html``;
}
return html`<ak-tabs>
<section slot="page-1" data-tab-title="${gettext("Overview")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75">
<div class="pf-c-card pf-c-card-aggregate">
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("Name")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">${this.provider.name}</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("Assigned to application")}</span>
</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>
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("Internal Host")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">${this.provider.internal_host}</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("External Host")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">${this.provider.internal_host}</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("Basic-Auth")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
${this.provider.basic_auth_enabled ?
html`<span class="pf-c-button__icon pf-m-start">
<i class="fas fa-check-circle" aria-hidden="true"></i>
</span>&nbsp;${gettext("Yes")}`:
html`<span class="pf-c-button__icon pf-m-start">
<i class="fas fa-times-circle" aria-hidden="true"></i>
</span>&nbsp;${gettext("No")}`
}
</div>
</dd>
</div>
</dl>
</div>
<div class="pf-c-card__footer">
<ak-modal-button href="${Provider.adminUrl(`${this.provider.pk}/update/`)}">
<ak-spinner-button slot="trigger" class="pf-m-primary">
${gettext("Edit")}
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>
</div>
</div>
</div>
</div>
</section>
</ak-tabs>`;
}
}