static: update ts formatting
This commit is contained in:
Jens Langhammer
parent
1e640fac76
commit
28980d932a
|
|
@ -1 +1,4 @@
|
||||||
{}
|
{
|
||||||
|
"printWidth": 100,
|
||||||
|
"jsxBracketSameLine": true
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,21 +16,10 @@
|
||||||
crossorigin
|
crossorigin
|
||||||
/>
|
/>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
|
||||||
/>
|
|
||||||
<title>passbook</title>
|
<title>passbook</title>
|
||||||
<link
|
<link rel="icon" type="image/png" href="/static/dist/assets/images/logo.png" />
|
||||||
rel="icon"
|
<link rel="shortcut icon" type="image/png" href="/static/dist/assets/images/logo.png" />
|
||||||
type="image/png"
|
|
||||||
href="/static/dist/assets/images/logo.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="shortcut icon"
|
|
||||||
type="image/png"
|
|
||||||
href="/static/dist/assets/images/logo.png"
|
|
||||||
/>
|
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
type="text/css"
|
type="text/css"
|
||||||
|
|
@ -46,19 +35,13 @@
|
||||||
type="text/css"
|
type="text/css"
|
||||||
href="/static/node_modules/%40fortawesome/fontawesome-free/css/fontawesome.min.css"
|
href="/static/node_modules/%40fortawesome/fontawesome-free/css/fontawesome.min.css"
|
||||||
/>
|
/>
|
||||||
<link
|
<link rel="stylesheet" type="text/css" href="/static/passbook/passbook.css" />
|
||||||
rel="stylesheet"
|
|
||||||
type="text/css"
|
|
||||||
href="/static/passbook/passbook.css"
|
|
||||||
/>
|
|
||||||
<script src="/static/dist/main.js" type="module"></script>
|
<script src="/static/dist/main.js" type="module"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<pb-messages url="/api/v2beta/root/messages/"></pb-messages>
|
<pb-messages url="/api/v2beta/root/messages/"></pb-messages>
|
||||||
<div class="pf-c-page">
|
<div class="pf-c-page">
|
||||||
<a
|
<a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content"
|
||||||
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
||||||
href="#main-content"
|
|
||||||
>Skip to content</a
|
>Skip to content</a
|
||||||
>
|
>
|
||||||
<pb-sidebar class="pf-c-page__sidebar"> </pb-sidebar>
|
<pb-sidebar class="pf-c-page__sidebar"> </pb-sidebar>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -13,9 +13,7 @@ export class Client {
|
||||||
if (r.status > 300) {
|
if (r.status > 300) {
|
||||||
switch (r.status) {
|
switch (r.status) {
|
||||||
case 404:
|
case 404:
|
||||||
throw new NotFoundError(
|
throw new NotFoundError(`URL ${this.makeUrl(...url)} not found`);
|
||||||
`URL ${this.makeUrl(...url)} not found`
|
|
||||||
);
|
|
||||||
default:
|
default:
|
||||||
throw new RequestError(r.statusText);
|
throw new RequestError(r.statusText);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,7 @@ interface TokenResponse {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function tokenByIdentifier(identifier: string): Promise<string> {
|
export function tokenByIdentifier(identifier: string): Promise<string> {
|
||||||
return DefaultClient.fetch<TokenResponse>(
|
return DefaultClient.fetch<TokenResponse>("core", "tokens", identifier, "view_key").then(
|
||||||
"core",
|
(r) => r.key
|
||||||
"tokens",
|
);
|
||||||
identifier,
|
|
||||||
"view_key"
|
|
||||||
).then((r) => r.key);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,9 +31,7 @@ export class ActionButton extends LitElement {
|
||||||
css`
|
css`
|
||||||
button {
|
button {
|
||||||
/* Have to use !important here, as buttons with pf-m-progress have transition already */
|
/* Have to use !important here, as buttons with pf-m-progress have transition already */
|
||||||
transition: all
|
transition: all var(--pf-c-button--m-progress--TransitionDuration) ease 0s !important;
|
||||||
var(--pf-c-button--m-progress--TransitionDuration) ease
|
|
||||||
0s !important;
|
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -43,9 +43,9 @@ export class AdminLoginsChart extends LitElement {
|
||||||
.then((r) => r.json())
|
.then((r) => r.json())
|
||||||
.catch((e) => console.error(e))
|
.catch((e) => console.error(e))
|
||||||
.then((r) => {
|
.then((r) => {
|
||||||
let ctx = (<HTMLCanvasElement>(
|
let ctx = (<HTMLCanvasElement>this.shadowRoot?.querySelector("canvas")).getContext(
|
||||||
this.shadowRoot?.querySelector("canvas")
|
"2d"
|
||||||
)).getContext("2d")!;
|
)!;
|
||||||
this.chart = new Chart(ctx, {
|
this.chart = new Chart(ctx, {
|
||||||
type: "bar",
|
type: "bar",
|
||||||
data: {
|
data: {
|
||||||
|
|
@ -77,19 +77,10 @@ export class AdminLoginsChart extends LitElement {
|
||||||
type: "time",
|
type: "time",
|
||||||
offset: true,
|
offset: true,
|
||||||
ticks: {
|
ticks: {
|
||||||
callback: function (
|
callback: function (value, index: number, values) {
|
||||||
value,
|
const valueStamp = <TickValue>(<unknown>values[index]);
|
||||||
index: number,
|
const delta = Date.now() - valueStamp.value;
|
||||||
values
|
const ago = Math.round(delta / 1000 / 3600);
|
||||||
) {
|
|
||||||
const valueStamp = <TickValue>(
|
|
||||||
(<unknown>values[index])
|
|
||||||
);
|
|
||||||
const delta =
|
|
||||||
Date.now() - valueStamp.value;
|
|
||||||
const ago = Math.round(
|
|
||||||
delta / 1000 / 3600
|
|
||||||
);
|
|
||||||
return `${ago} Hours ago`;
|
return `${ago} Hours ago`;
|
||||||
},
|
},
|
||||||
autoSkip: true,
|
autoSkip: true,
|
||||||
|
|
|
||||||
|
|
@ -53,9 +53,7 @@ export class Messages extends LitElement {
|
||||||
this.messageSocket.addEventListener("close", (e) => {
|
this.messageSocket.addEventListener("close", (e) => {
|
||||||
console.debug(`passbook/messages: closed ws connection: ${e}`);
|
console.debug(`passbook/messages: closed ws connection: ${e}`);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
console.debug(
|
console.debug(`passbook/messages: reconnecting ws in ${this.retryDelay}ms`);
|
||||||
`passbook/messages: reconnecting ws in ${this.retryDelay}ms`
|
|
||||||
);
|
|
||||||
this.connect();
|
this.connect();
|
||||||
}, this.retryDelay);
|
}, this.retryDelay);
|
||||||
this.retryDelay = this.retryDelay * 2;
|
this.retryDelay = this.retryDelay * 2;
|
||||||
|
|
|
||||||
|
|
@ -49,36 +49,29 @@ export class ModalButton extends LitElement {
|
||||||
|
|
||||||
updateHandlers() {
|
updateHandlers() {
|
||||||
// Ensure links close the modal
|
// Ensure links close the modal
|
||||||
this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach(
|
this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach((a) => {
|
||||||
(a) => {
|
|
||||||
// Make click on a close the modal
|
// Make click on a close the modal
|
||||||
a.addEventListener("click", (e) => {
|
a.addEventListener("click", (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.open = false;
|
this.open = false;
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
);
|
|
||||||
// Make name field update slug field
|
// Make name field update slug field
|
||||||
this.querySelectorAll<HTMLInputElement>("input[name=name]").forEach(
|
this.querySelectorAll<HTMLInputElement>("input[name=name]").forEach((input) => {
|
||||||
(input) => {
|
|
||||||
input.addEventListener("input", (e) => {
|
input.addEventListener("input", (e) => {
|
||||||
const form = input.closest("form");
|
const form = input.closest("form");
|
||||||
if (form === null) {
|
if (form === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const slugField = form.querySelector<HTMLInputElement>(
|
const slugField = form.querySelector<HTMLInputElement>("input[name=slug]");
|
||||||
"input[name=slug]"
|
|
||||||
);
|
|
||||||
if (!slugField) {
|
if (!slugField) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
slugField.value = convertToSlug(input.value);
|
slugField.value = convertToSlug(input.value);
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
);
|
|
||||||
// Ensure forms sends in AJAX
|
// Ensure forms sends in AJAX
|
||||||
this.querySelectorAll<HTMLFormElement>("[slot=modal] form").forEach(
|
this.querySelectorAll<HTMLFormElement>("[slot=modal] form").forEach((form) => {
|
||||||
(form) => {
|
|
||||||
form.addEventListener("submit", (e) => {
|
form.addEventListener("submit", (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
let formData = new FormData(form);
|
let formData = new FormData(form);
|
||||||
|
|
@ -92,18 +85,12 @@ export class ModalButton extends LitElement {
|
||||||
})
|
})
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (data.indexOf("csrfmiddlewaretoken") !== -1) {
|
if (data.indexOf("csrfmiddlewaretoken") !== -1) {
|
||||||
this.querySelector(
|
this.querySelector("[slot=modal]")!.innerHTML = data;
|
||||||
"[slot=modal]"
|
console.debug(`passbook/modalbutton: re-showing form`);
|
||||||
)!.innerHTML = data;
|
|
||||||
console.debug(
|
|
||||||
`passbook/modalbutton: re-showing form`
|
|
||||||
);
|
|
||||||
this.updateHandlers();
|
this.updateHandlers();
|
||||||
} else {
|
} else {
|
||||||
this.open = false;
|
this.open = false;
|
||||||
console.debug(
|
console.debug(`passbook/modalbutton: successful submit`);
|
||||||
`passbook/modalbutton: successful submit`
|
|
||||||
);
|
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
new CustomEvent("hashchange", {
|
new CustomEvent("hashchange", {
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
|
|
@ -115,8 +102,7 @@ export class ModalButton extends LitElement {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onClick(e: MouseEvent) {
|
onClick(e: MouseEvent) {
|
||||||
|
|
@ -165,10 +151,7 @@ export class ModalButton extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html` <slot
|
return html` <slot name="trigger" @click=${(e: any) => this.onClick(e)}></slot>
|
||||||
name="trigger"
|
|
||||||
@click=${(e: any) => this.onClick(e)}
|
|
||||||
></slot>
|
|
||||||
${this.open ? this.renderModal() : ""}`;
|
${this.open ? this.renderModal() : ""}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,4 @@
|
||||||
import {
|
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||||
css,
|
|
||||||
customElement,
|
|
||||||
html,
|
|
||||||
LitElement,
|
|
||||||
property,
|
|
||||||
TemplateResult,
|
|
||||||
} from "lit-element";
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import PageStyle from "@patternfly/patternfly/components/Page/page.css";
|
import PageStyle from "@patternfly/patternfly/components/Page/page.css";
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|
@ -181,16 +174,12 @@ export class Sidebar extends LitElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return html` <li
|
return html` <li
|
||||||
class="pf-c-nav__item ${item.children
|
class="pf-c-nav__item ${item.children ? "pf-m-expandable pf-m-expanded" : ""}"
|
||||||
? "pf-m-expandable pf-m-expanded"
|
|
||||||
: ""}"
|
|
||||||
>
|
>
|
||||||
${item.path
|
${item.path
|
||||||
? html`<a
|
? html`<a
|
||||||
href="#${item.path}"
|
href="#${item.path}"
|
||||||
class="pf-c-nav__link ${item.path.some(
|
class="pf-c-nav__link ${item.path.some((v) => v === this.activePath)
|
||||||
(v) => v === this.activePath
|
|
||||||
)
|
|
||||||
? "pf-m-current"
|
? "pf-m-current"
|
||||||
: ""}"
|
: ""}"
|
||||||
>
|
>
|
||||||
|
|
@ -199,10 +188,7 @@ export class Sidebar extends LitElement {
|
||||||
: html`<a class="pf-c-nav__link" aria-expanded="true"
|
: html`<a class="pf-c-nav__link" aria-expanded="true"
|
||||||
>${item.name}
|
>${item.name}
|
||||||
<span class="pf-c-nav__toggle">
|
<span class="pf-c-nav__toggle">
|
||||||
<i
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
||||||
class="fas fa-angle-right"
|
|
||||||
aria-hidden="true"
|
|
||||||
></i>
|
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<section class="pf-c-nav__subnav">
|
<section class="pf-c-nav__subnav">
|
||||||
|
|
|
||||||
|
|
@ -46,11 +46,7 @@ export class SidebarBrand extends LitElement {
|
||||||
}
|
}
|
||||||
return html` <a href="" class="pf-c-page__header-brand-link">
|
return html` <a href="" class="pf-c-page__header-brand-link">
|
||||||
<div class="pf-c-brand pb-brand">
|
<div class="pf-c-brand pb-brand">
|
||||||
<img
|
<img src="${this.config?.branding_logo}" alt="passbook icon" loading="lazy" />
|
||||||
src="${this.config?.branding_logo}"
|
|
||||||
alt="passbook icon"
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
|
||||||
${this.config?.branding_title
|
${this.config?.branding_title
|
||||||
? html`<span>${this.config.branding_title}</span>`
|
? html`<span>${this.config.branding_title}</span>`
|
||||||
: ""}
|
: ""}
|
||||||
|
|
|
||||||
|
|
@ -49,19 +49,11 @@ export class SidebarUser extends LitElement {
|
||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
return html`
|
return html`
|
||||||
<a
|
<a href="#/-/user/" class="pf-c-nav__link user-avatar" id="user-settings">
|
||||||
href="#/-/user/"
|
|
||||||
class="pf-c-nav__link user-avatar"
|
|
||||||
id="user-settings"
|
|
||||||
>
|
|
||||||
<img class="pf-c-avatar" src="${this.user?.avatar}" alt="" />
|
<img class="pf-c-avatar" src="${this.user?.avatar}" alt="" />
|
||||||
<span>${this.user?.username}</span>
|
<span>${this.user?.username}</span>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a href="/flows/-/default/invalidation/" class="pf-c-nav__link user-logout" id="logout">
|
||||||
href="/flows/-/default/invalidation/"
|
|
||||||
class="pf-c-nav__link user-logout"
|
|
||||||
id="logout"
|
|
||||||
>
|
|
||||||
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
|
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
|
||||||
</a>
|
</a>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,7 @@ export class Tabs extends LitElement {
|
||||||
return html`<div class="pf-c-tabs">
|
return html`<div class="pf-c-tabs">
|
||||||
<ul class="pf-c-tabs__list">
|
<ul class="pf-c-tabs__list">
|
||||||
${pages.map((page) => {
|
${pages.map((page) => {
|
||||||
const slot = page.attributes.getNamedItem("slot")
|
const slot = page.attributes.getNamedItem("slot")?.value;
|
||||||
?.value;
|
|
||||||
return html` <li
|
return html` <li
|
||||||
class="pf-c-tabs__item ${slot === this.currentPage
|
class="pf-c-tabs__item ${slot === this.currentPage
|
||||||
? CURRENT_CLASS
|
? CURRENT_CLASS
|
||||||
|
|
@ -39,8 +38,7 @@ export class Tabs extends LitElement {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span class="pf-c-tabs__item-text">
|
<span class="pf-c-tabs__item-text">
|
||||||
${page.attributes.getNamedItem("tab-title")
|
${page.attributes.getNamedItem("tab-title")?.value}
|
||||||
?.value}
|
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</li>`;
|
</li>`;
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,7 @@ import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
|
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
|
||||||
import { tokenByIdentifier } from "../api/token";
|
import { tokenByIdentifier } from "../api/token";
|
||||||
import {
|
import { ColorStyles, ERROR_CLASS, PRIMARY_CLASS, SUCCESS_CLASS } from "../constants";
|
||||||
ColorStyles,
|
|
||||||
ERROR_CLASS,
|
|
||||||
PRIMARY_CLASS,
|
|
||||||
SUCCESS_CLASS,
|
|
||||||
} from "../constants";
|
|
||||||
|
|
||||||
@customElement("pb-token-copy-button")
|
@customElement("pb-token-copy-button")
|
||||||
export class TokenCopyButton extends LitElement {
|
export class TokenCopyButton extends LitElement {
|
||||||
|
|
@ -51,10 +46,7 @@ export class TokenCopyButton extends LitElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`<button
|
return html`<button @click=${() => this.onClick()} class="pf-c-button ${this.buttonClass}">
|
||||||
@click=${() => this.onClick()}
|
|
||||||
class="pf-c-button ${this.buttonClass}"
|
|
||||||
>
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</button>`;
|
</button>`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,21 +16,10 @@
|
||||||
crossorigin
|
crossorigin
|
||||||
/>
|
/>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
|
||||||
/>
|
|
||||||
<title>passbook</title>
|
<title>passbook</title>
|
||||||
<link
|
<link rel="icon" type="image/png" href="/static/dist/assets/images/logo.png" />
|
||||||
rel="icon"
|
<link rel="shortcut icon" type="image/png" href="/static/dist/assets/images/logo.png" />
|
||||||
type="image/png"
|
|
||||||
href="/static/dist/assets/images/logo.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="shortcut icon"
|
|
||||||
type="image/png"
|
|
||||||
href="/static/dist/assets/images/logo.png"
|
|
||||||
/>
|
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
type="text/css"
|
type="text/css"
|
||||||
|
|
@ -46,19 +35,13 @@
|
||||||
type="text/css"
|
type="text/css"
|
||||||
href="/static/node_modules/%40fortawesome/fontawesome-free/css/fontawesome.min.css"
|
href="/static/node_modules/%40fortawesome/fontawesome-free/css/fontawesome.min.css"
|
||||||
/>
|
/>
|
||||||
<link
|
<link rel="stylesheet" type="text/css" href="/static/passbook/passbook.css" />
|
||||||
rel="stylesheet"
|
|
||||||
type="text/css"
|
|
||||||
href="/static/passbook/passbook.css"
|
|
||||||
/>
|
|
||||||
<script src="/static/dist/main.js" type="module"></script>
|
<script src="/static/dist/main.js" type="module"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<pb-messages url="/api/v2beta/root/messages/"></pb-messages>
|
<pb-messages url="/api/v2beta/root/messages/"></pb-messages>
|
||||||
<div class="pf-c-page">
|
<div class="pf-c-page">
|
||||||
<a
|
<a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content"
|
||||||
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
||||||
href="#main-content"
|
|
||||||
>Skip to content</a
|
>Skip to content</a
|
||||||
>
|
>
|
||||||
<pb-sidebar class="pf-c-page__sidebar"> </pb-sidebar>
|
<pb-sidebar class="pf-c-page__sidebar"> </pb-sidebar>
|
||||||
|
|
|
||||||
|
|
@ -56,9 +56,7 @@ export class FlowShellCard extends LitElement {
|
||||||
this.setFormSubmitHandlers();
|
this.setFormSubmitHandlers();
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
console.debug(
|
console.debug(`passbook/flows: unexpected data type ${data.type}`);
|
||||||
`passbook/flows: unexpected data type ${data.type}`
|
|
||||||
);
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -89,9 +87,7 @@ export class FlowShellCard extends LitElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
form.action = this.flowBodyUrl;
|
form.action = this.flowBodyUrl;
|
||||||
console.debug(
|
console.debug(`passbook/flows: updated form.action ${this.flowBodyUrl}`);
|
||||||
`passbook/flows: updated form.action ${this.flowBodyUrl}`
|
|
||||||
);
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -103,9 +99,7 @@ export class FlowShellCard extends LitElement {
|
||||||
|
|
||||||
setFormSubmitHandlers() {
|
setFormSubmitHandlers() {
|
||||||
this.querySelectorAll("form").forEach((form) => {
|
this.querySelectorAll("form").forEach((form) => {
|
||||||
console.debug(
|
console.debug(`passbook/flows: Checking for autosubmit attribute ${form}`);
|
||||||
`passbook/flows: Checking for autosubmit attribute ${form}`
|
|
||||||
);
|
|
||||||
this.checkAutosubmit(form);
|
this.checkAutosubmit(form);
|
||||||
console.debug(`passbook/flows: Setting action for form ${form}`);
|
console.debug(`passbook/flows: Setting action for form ${form}`);
|
||||||
this.updateFormAction(form);
|
this.updateFormAction(form);
|
||||||
|
|
@ -155,11 +149,7 @@ export class FlowShellCard extends LitElement {
|
||||||
|
|
||||||
loading() {
|
loading() {
|
||||||
return html` <div class="pf-c-login__main-body pb-loading">
|
return html` <div class="pf-c-login__main-body pb-loading">
|
||||||
<span
|
<span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
|
||||||
class="pf-c-spinner"
|
|
||||||
role="progressbar"
|
|
||||||
aria-valuetext="Loading..."
|
|
||||||
>
|
|
||||||
<span class="pf-c-spinner__clipper"></span>
|
<span class="pf-c-spinner__clipper"></span>
|
||||||
<span class="pf-c-spinner__lead-ball"></span>
|
<span class="pf-c-spinner__lead-ball"></span>
|
||||||
<span class="pf-c-spinner__tail-ball"></span>
|
<span class="pf-c-spinner__tail-ball"></span>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,4 @@
|
||||||
import {
|
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||||
css,
|
|
||||||
customElement,
|
|
||||||
html,
|
|
||||||
LitElement,
|
|
||||||
property,
|
|
||||||
TemplateResult,
|
|
||||||
} from "lit-element";
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import CodeMirrorStyle from "codemirror/lib/codemirror.css";
|
import CodeMirrorStyle from "codemirror/lib/codemirror.css";
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|
@ -49,9 +42,7 @@ export class Route {
|
||||||
}
|
}
|
||||||
|
|
||||||
toString(): string {
|
toString(): string {
|
||||||
return `<Route url=${this.url} callback=${
|
return `<Route url=${this.url} callback=${this.callback ? "true" : "false"}>`;
|
||||||
this.callback ? "true" : "false"
|
|
||||||
}>`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -61,13 +52,9 @@ export const ROUTES: Route[] = [
|
||||||
new Route(new RegExp(`^/$`)).redirect("/-/overview/"),
|
new Route(new RegExp(`^/$`)).redirect("/-/overview/"),
|
||||||
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(
|
new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})/$`)).then((args) => {
|
||||||
(args) => {
|
return html`<pb-application-view .args=${args}></pb-application-view>`;
|
||||||
return html`<pb-application-view
|
}),
|
||||||
.args=${args}
|
|
||||||
></pb-application-view>`;
|
|
||||||
}
|
|
||||||
),
|
|
||||||
];
|
];
|
||||||
|
|
||||||
class RouteMatch {
|
class RouteMatch {
|
||||||
|
|
@ -128,9 +115,7 @@ export class RouterOutlet extends LitElement {
|
||||||
}
|
}
|
||||||
let matchedRoute: RouteMatch | null = null;
|
let matchedRoute: RouteMatch | null = null;
|
||||||
ROUTES.forEach((route) => {
|
ROUTES.forEach((route) => {
|
||||||
console.debug(
|
console.debug(`passbook/router: matching ${activeUrl} against ${route.url}`);
|
||||||
`passbook/router: matching ${activeUrl} against ${route.url}`
|
|
||||||
);
|
|
||||||
const match = route.url.exec(activeUrl);
|
const match = route.url.exec(activeUrl);
|
||||||
if (match != null) {
|
if (match != null) {
|
||||||
matchedRoute = new RouteMatch(route);
|
matchedRoute = new RouteMatch(route);
|
||||||
|
|
@ -141,9 +126,7 @@ export class RouterOutlet extends LitElement {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (!matchedRoute) {
|
if (!matchedRoute) {
|
||||||
console.debug(
|
console.debug(`passbook/router: route "${activeUrl}" not defined, defaulting to shell`);
|
||||||
`passbook/router: route "${activeUrl}" not defined, defaulting to shell`
|
|
||||||
);
|
|
||||||
const route = new Route(
|
const route = new Route(
|
||||||
RegExp(""),
|
RegExp(""),
|
||||||
html`<pb-site-shell url=${activeUrl}>
|
html`<pb-site-shell url=${activeUrl}>
|
||||||
|
|
|
||||||
|
|
@ -35,12 +35,7 @@ export class SiteShell extends LitElement {
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
}
|
}
|
||||||
.pf-c-backdrop {
|
.pf-c-backdrop {
|
||||||
--pf-c-backdrop--BackgroundColor: rgba(
|
--pf-c-backdrop--BackgroundColor: rgba(0, 0, 0, 0) !important;
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0
|
|
||||||
) !important;
|
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
BackdropStyle,
|
BackdropStyle,
|
||||||
|
|
@ -59,9 +54,7 @@ export class SiteShell extends LitElement {
|
||||||
if (r.ok) {
|
if (r.ok) {
|
||||||
return r;
|
return r;
|
||||||
}
|
}
|
||||||
console.debug(
|
console.debug(`passbook/site-shell: Request failed ${this._url}`);
|
||||||
`passbook/site-shell: Request failed ${this._url}`
|
|
||||||
);
|
|
||||||
window.location.hash = "#/";
|
window.location.hash = "#/";
|
||||||
throw new Error("Request failed");
|
throw new Error("Request failed");
|
||||||
})
|
})
|
||||||
|
|
@ -71,9 +64,7 @@ export class SiteShell extends LitElement {
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// Ensure anchors only change the hash
|
// Ensure anchors only change the hash
|
||||||
this.querySelectorAll<HTMLAnchorElement>(
|
this.querySelectorAll<HTMLAnchorElement>("a:not(.pb-root-link)").forEach((a) => {
|
||||||
"a:not(.pb-root-link)"
|
|
||||||
).forEach((a) => {
|
|
||||||
if (a.href === "") {
|
if (a.href === "") {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -96,9 +87,7 @@ export class SiteShell extends LitElement {
|
||||||
f.addEventListener("submit", (e) => {
|
f.addEventListener("submit", (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const formData = new FormData(f);
|
const formData = new FormData(f);
|
||||||
const qs = new URLSearchParams(
|
const qs = new URLSearchParams(<any>(<unknown>formData)).toString();
|
||||||
<any>(<unknown>formData)
|
|
||||||
).toString();
|
|
||||||
window.location.hash = `#${this._url}?${qs}`;
|
window.location.hash = `#${this._url}?${qs}`;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -31,29 +31,24 @@ export class ApplicationViewPage extends LitElement {
|
||||||
return html`<section class="pf-c-page__main-section pf-m-light">
|
return html`<section class="pf-c-page__main-section pf-m-light">
|
||||||
<div class="pf-c-content">
|
<div class="pf-c-content">
|
||||||
<h1>
|
<h1>
|
||||||
<img
|
<img class="pf-icon" src="${this.application?.meta_icon || ""}" />
|
||||||
class="pf-icon"
|
|
||||||
src="${this.application?.meta_icon || ""}"
|
|
||||||
/>
|
|
||||||
${this.application?.name}
|
${this.application?.name}
|
||||||
</h1>
|
</h1>
|
||||||
<p>${this.application?.meta_publisher}</p>
|
<p>${this.application?.meta_publisher}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
|
|
||||||
<pb-tabs>
|
<pb-tabs>
|
||||||
<div slot="page-1" tab-title="Users">users</div>
|
<section slot="page-1" tab-title="Users" class="pf-c-page__main-section pf-m-no-padding-mobile">
|
||||||
<div slot="page-2" tab-title="Containers">foo</div>
|
|
||||||
</pb-tabs>
|
|
||||||
<div class="pf-c-card">
|
<div class="pf-c-card">
|
||||||
<div class="pf-c-toolbar">
|
users
|
||||||
<div class="pf-c-toolbar__content">
|
|
||||||
<h1>test</h1>
|
<h1>test</h1>
|
||||||
|
|
||||||
<span>${this.applicationSlug}</span>
|
<span>${this.application?.slug}</span>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
<div slot="page-2" tab-title="Containers">
|
||||||
|
foo
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</pb-tabs>`;
|
||||||
</section>`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,7 @@ export function getCookie(name: string) {
|
||||||
const cookie = cookies[i].trim();
|
const cookie = cookies[i].trim();
|
||||||
// Does this cookie string begin with the name we want?
|
// Does this cookie string begin with the name we want?
|
||||||
if (cookie.substring(0, name.length + 1) === name + "=") {
|
if (cookie.substring(0, name.length + 1) === name + "=") {
|
||||||
cookieValue = decodeURIComponent(
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||||
cookie.substring(name.length + 1)
|
|
||||||
);
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in New Issue