static: start implementing new application page

passbook/static/static/src/api/application.ts

@@ -0,0 +1,20 @@
+export class Application {
+
+    pk: string;
+    name: string;
+    slug: string;
+    provider?: number;
+
+    meta_launch_url?: string;
+    meta_icon?: string;
+    meta_description?: string;
+    meta_publisher?: string;
+    policies?: string[];
+
+    static get(slug: string): Promise<Application> {
+        return fetch(`/api/v2beta/core/applications/${slug}/`)
+            .then(r => r.json())
+            .then(r => <Application>r);
+    }
+
+}

passbook/static/static/src/api/errors.ts

@@ -0,0 +1,3 @@
+export class NotFoundError extends Error {
+
+}

passbook/static/static/src/common/styles.ts

@@ -0,0 +1,10 @@
+// @ts-ignore
+import PF from "@patternfly/patternfly/patternfly.css";
+// @ts-ignore
+import PFAddons from "@patternfly/patternfly/patternfly-addons.css";
+// @ts-ignore
+import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
+// @ts-ignore
+import PBGlobal from "../passbook.css";
+
+export const COMMON_STYLES = [PF, PFAddons, FA, PBGlobal];

passbook/static/static/src/main.ts

@@ -3,17 +3,18 @@ import "construct-style-sheets-polyfill";
 import "./legacy.js";
 
 import "./elements/ActionButton";
-import "./elements/Sidebar";
+import "./elements/AdminLoginsChart";
-import "./elements/SidebarBrand";
-import "./elements/SidebarUser";
 import "./elements/CodeMirror";
 import "./elements/Dropdown";
 import "./elements/FetchFillSlot";
 import "./elements/Messages";
 import "./elements/ModalButton";
-import "./elements/TokenCopyButton";
+import "./elements/Sidebar";
+import "./elements/SidebarBrand";
+import "./elements/SidebarUser";
 import "./elements/Tabs";
-import "./pages/SiteShell";
+import "./elements/TokenCopyButton";
+import "./pages/applications/ApplicationViewPage";
 import "./pages/FlowShellCard";
 import "./pages/RouterOutlet";
-import "./elements/AdminLoginsChart";
+import "./pages/SiteShell";

passbook/static/static/src/pages/RouterOutlet.ts

@@ -7,18 +7,11 @@ import {
     TemplateResult,
 } from "lit-element";
 // @ts-ignore
-import PF from "@patternfly/patternfly/patternfly.css";
-// @ts-ignore
-import PFAddons from "@patternfly/patternfly/patternfly-addons.css";
-// @ts-ignore
-import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
-// @ts-ignore
-import PBGlobal from "../passbook.css";
-// @ts-ignore
 import CodeMirrorStyle from "codemirror/lib/codemirror.css";
 // @ts-ignore
 import CodeMirrorTheme from "codemirror/theme/monokai.css";
 import { ColorStyles } from "../constants";
+import { COMMON_STYLES } from "../common/styles";
 
 export class Route {
     url: RegExp;
@@ -61,10 +54,8 @@ export const ROUTES: Route[] = [
     // Prevent infinite Shell loops
     new Route(new RegExp(`^/$`)).redirect("/-/overview/"),
     new Route(new RegExp(`^/applications/$`), html`<h1>test</h1>`),
-    new Route(new RegExp(`^/-/applications/(?<slug>${SLUG_REGEX})/$`)).then((args) => {
+    new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})/$`)).then((args) => {
-        return html`<h1>test</h1>
+        return html`<pb-application-view .args=${args}></pb-application-view>`;
-
-        <span>${args.slug}</span>`;
     }),
 ];
 
@@ -92,10 +83,6 @@ export class RouterOutlet extends LitElement {
 
     static get styles() {
         return [
-            PF,
-            PFAddons,
-            FA,
-            PBGlobal,
             CodeMirrorStyle,
             CodeMirrorTheme,
             ColorStyles,
@@ -104,7 +91,7 @@ export class RouterOutlet extends LitElement {
                     height: 100%;
                 }
             `,
-        ];
+        ].concat(...COMMON_STYLES);
     }
 
     constructor() {

passbook/static/static/src/pages/applications/ApplicationViewPage.ts

@@ -0,0 +1,47 @@
+import { customElement, html, LitElement, property } from "lit-element";
+import { Application } from "../../api/application";
+import { COMMON_STYLES } from "../../common/styles";
+
+@customElement("pb-application-view")
+export class ApplicationViewPage extends LitElement {
+    @property()
+    set args(value: { [key: string]: string; }) {
+        this.applicationSlug = value.slug;
+    }
+
+    @property()
+    set applicationSlug(value: string) {
+        Application.get(value).then(app => this.application = app);
+    }
+
+    @property()
+    application?: Application;
+
+    static get styles() {
+        return COMMON_STYLES;
+    }
+
+    render() {
+        return html`<section class="pf-c-page__main-section pf-m-light">
+                <div class="pf-c-content">
+                    <h1>
+                        <i class="pf-icon pf-icon-applications"></i>
+                        ${this.application?.name}
+                    </h1>
+                    <p>External Applications which use passbook as Identity-Provider, utilizing protocols like OAuth2 and SAML.</p>
+                </div>
+            </section>
+            <section class="pf-c-page__main-section pf-m-no-padding-mobile">
+                <div class="pf-c-card">
+                    <div class="pf-c-toolbar">
+                        <div class="pf-c-toolbar__content">
+                            <h1>test</h1>
+
+                            <span>${this.applicationSlug}</span>
+                        </div>
+                    </div>
+                </div>
+            </section>`;
+    }
+
+}