web: add missing SAML Source display page

web/src/api/sources/SAML.ts

@@ -0,0 +1,32 @@
+import { DefaultClient } from "../Client";
+import { Source } from "../Sources";
+
+export class SAMLSource extends Source {
+    issuer: string;
+    sso_url: string;
+    slo_url: string;
+    allow_idp_initiated: boolean;
+    name_id_policy: string;
+    binding_type: string
+    signing_kp?: string;
+    digest_algorithm: string;
+    signature_algorithm: string;
+    temporary_user_delete_after: string;
+
+    constructor() {
+        super();
+        throw Error();
+    }
+
+    static get(slug: string): Promise<SAMLSource> {
+        return DefaultClient.fetch<SAMLSource>(["sources", "saml", slug]);
+    }
+
+    static getMetadata(slug: string): Promise<{ metadata: string }> {
+        return DefaultClient.fetch(["sources", "saml", slug, "metadata"]);
+    }
+
+    static appUrl(slug: string, rest: string): string {
+        return `/source/saml/${slug}/${rest}`;
+    }
+}

web/src/pages/sources/OAuthSourceViewPage.ts

@@ -22,11 +22,6 @@ export class OAuthSourceViewPage extends Page {
         return "pf-icon pf-icon-middleware";
     }
 
-    @property()
-    set args(value: { [key: string]: string }) {
-        this.sourceSlug = value.slug;
-    }
-
     @property({ type: String })
     set sourceSlug(value: string) {
         OAuthSource.get(value).then((s) => this.source = s);

web/src/pages/sources/SAMLSourceViewPage.ts

@@ -0,0 +1,125 @@
+import { gettext } from "django";
+import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
+import { until } from "lit-html/directives/until";
+import { Source } from "../../api/Sources";
+import { SAMLSource } from "../../api/sources/SAML";
+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-source-saml-view")
+export class SAMLSourceViewPage extends Page {
+    pageTitle(): string {
+        return gettext(`SAML Source ${this.source?.name || ""}`);
+    }
+    pageDescription(): string | undefined {
+        return;
+    }
+    pageIcon(): string {
+        return "pf-icon pf-icon-integration";
+    }
+
+    @property({ type: String })
+    set sourceSlug(slug: string) {
+        SAMLSource.get(slug).then((s) => this.source = s);
+    }
+
+    @property({ attribute: false })
+    source?: SAMLSource;
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
+    }
+
+    constructor() {
+        super();
+        this.addEventListener("ak-refresh", () => {
+            if (!this.source?.pk) return;
+            this.sourceSlug = this.source?.slug;
+        });
+    }
+
+    renderContent(): TemplateResult {
+        if (!this.source) {
+            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.source.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("SSO URL")}</span>
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">${this.source.sso_url}</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("SLO URL")}</span>
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">${this.source.slo_url}</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("Issuer")}</span>
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">${this.source.issuer}</div>
+                                            </dd>
+                                        </div>
+                                    </dl>
+                                </div>
+                                <div class="pf-c-card__footer">
+                                    <ak-modal-button href="${Source.adminUrl(`${this.source.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>
+                <section slot="page-2" data-tab-title="${gettext("Metadata")}" 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">
+                                    ${until(
+                                        SAMLSource.getMetadata(this.source.slug).then(m => {
+                                            return html`<ak-codemirror mode="xml"><textarea class="pf-c-form-control" readonly>${m.metadata}</textarea></ak-codemirror>`;
+                                        })
+                                    )}
+                                </div>
+                                <div class="pf-c-card__footer">
+                                    <a class="pf-c-button pf-m-primary" target="_blank" href="${SAMLSource.appUrl(this.source.slug, "metadata/")}">
+                                        ${gettext("Download")}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </ak-tabs>`;
+    }
+}

web/src/pages/sources/SourceViewPage.ts

@@ -7,6 +7,7 @@ import { SpinnerSize } from "../../elements/Spinner";
 
 import "./LDAPSourceViewPage";
 import "./OAuthSourceViewPage";
+import "./SAMLSourceViewPage";
 import { Source } from "../../api/Sources";
 
 @customElement("ak-source-view")
@@ -49,6 +50,8 @@ export class SourceViewPage extends LitElement {
                 return html`<ak-source-ldap-view sourceSlug=${this.source.slug}></ak-source-ldap-view>`;
             case "oauth":
                 return html`<ak-source-oauth-view sourceSlug=${this.source.slug}></ak-source-oauth-view>`;
+            case "saml":
+                return html`<ak-source-saml-view sourceSlug=${this.source.slug}></ak-source-saml-view>`;
             default:
                 return html`<p>Invalid source type ${this.source.object_type}</p>`;
         }