web: add page for Proxy Provider
This commit is contained in:
parent
830b8bcd5b
commit
91282c7bd8
|
@ -6,7 +6,6 @@ from urllib.parse import urljoin
|
||||||
|
|
||||||
from django.db import models
|
from django.db import models
|
||||||
from django.forms import ModelForm
|
from django.forms import ModelForm
|
||||||
from django.http import HttpRequest
|
|
||||||
from django.utils.translation import gettext as _
|
from django.utils.translation import gettext as _
|
||||||
from rest_framework.serializers import Serializer
|
from rest_framework.serializers import Serializer
|
||||||
|
|
||||||
|
@ -119,10 +118,6 @@ class ProxyProvider(OutpostModel, OAuth2Provider):
|
||||||
"""Use external_host as launch URL"""
|
"""Use external_host as launch URL"""
|
||||||
return self.external_host
|
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):
|
def set_oauth_defaults(self):
|
||||||
"""Ensure all OAuth2-related settings are correct"""
|
"""Ensure all OAuth2-related settings are correct"""
|
||||||
self.client_type = ClientTypes.CONFIDENTIAL
|
self.client_type = ClientTypes.CONFIDENTIAL
|
||||||
|
|
30
web/src/api/providers/Proxy.ts
Normal file
30
web/src/api/providers/Proxy.ts
Normal 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}`;
|
||||||
|
}
|
||||||
|
}
|
|
@ -8,6 +8,7 @@ import { SpinnerSize } from "../../elements/Spinner";
|
||||||
|
|
||||||
import "./SAMLProviderViewPage";
|
import "./SAMLProviderViewPage";
|
||||||
import "./OAuth2ProviderViewPage";
|
import "./OAuth2ProviderViewPage";
|
||||||
|
import "./ProxyProviderViewPage";
|
||||||
|
|
||||||
@customElement("ak-provider-view")
|
@customElement("ak-provider-view")
|
||||||
export class ProviderViewPage extends LitElement {
|
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>`;
|
return html`<ak-provider-saml-view providerID=${this.provider.pk}></ak-provider-saml-view>`;
|
||||||
case "oauth2":
|
case "oauth2":
|
||||||
return html`<ak-provider-oauth2-view providerID=${this.provider.pk}></ak-provider-oauth2-view>`;
|
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:
|
default:
|
||||||
return html`<p>Invalid provider type ${this.provider?.object_type}</p>`;
|
return html`<p>Invalid provider type ${this.provider?.object_type}</p>`;
|
||||||
}
|
}
|
||||||
|
|
130
web/src/pages/providers/ProxyProviderViewPage.ts
Normal file
130
web/src/pages/providers/ProxyProviderViewPage.ts
Normal 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> ${gettext("Yes")}`:
|
||||||
|
html`<span class="pf-c-button__icon pf-m-start">
|
||||||
|
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
||||||
|
</span> ${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>`;
|
||||||
|
}
|
||||||
|
}
|
Reference in a new issue