static: start implementing new application page

This commit is contained in:
Jens Langhammer 2020-11-26 15:55:01 +01:00
parent feabd38173
commit 81a2c3992a
8 changed files with 100 additions and 32 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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);
}
}

View File

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

View File

@ -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];

View File

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

View File

@ -7,18 +7,11 @@ import {
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
// @ts-ignore // @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"; import CodeMirrorStyle from "codemirror/lib/codemirror.css";
// @ts-ignore // @ts-ignore
import CodeMirrorTheme from "codemirror/theme/monokai.css"; import CodeMirrorTheme from "codemirror/theme/monokai.css";
import { ColorStyles } from "../constants"; import { ColorStyles } from "../constants";
import { COMMON_STYLES } from "../common/styles";
export class Route { export class Route {
url: RegExp; url: RegExp;
@ -61,10 +54,8 @@ export const ROUTES: Route[] = [
// Prevent infinite Shell loops // Prevent infinite Shell loops
new Route(new RegExp(`^/$`)).redirect("/-/overview/"), new Route(new RegExp(`^/$`)).redirect("/-/overview/"),
new Route(new RegExp(`^/applications/$`), html`<h1>test</h1>`), 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() { static get styles() {
return [ return [
PF,
PFAddons,
FA,
PBGlobal,
CodeMirrorStyle, CodeMirrorStyle,
CodeMirrorTheme, CodeMirrorTheme,
ColorStyles, ColorStyles,
@ -104,7 +91,7 @@ export class RouterOutlet extends LitElement {
height: 100%; height: 100%;
} }
`, `,
]; ].concat(...COMMON_STYLES);
} }
constructor() { constructor() {

View File

@ -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>`;
}
}