-
-
`;
}
render() {
- return html`
-
this.onClick(e)}>
+ return html`
this.onClick(e)}
+ >
${this.open ? this.renderModal() : ""}`;
}
-
}
diff --git a/passbook/static/static/src/elements/Tabs.ts b/passbook/static/static/src/elements/Tabs.ts
index 0939cc29a4..1f2b0e5490 100644
--- a/passbook/static/static/src/elements/Tabs.ts
+++ b/passbook/static/static/src/elements/Tabs.ts
@@ -1,27 +1,34 @@
-import { LitElement, html, customElement } from 'lit-element';
+import { LitElement, html, customElement } from "lit-element";
@customElement("pb-tabs")
export class Tabs extends LitElement {
-
_currentPage? = "";
_firstPage? = "";
get currentPage() {
- return this._currentPage
+ return this._currentPage;
}
set currentPage(value) {
try {
// Show active tab page
- this.querySelector(`.pf-c-tab-content[tab-name='${value}']`)?.removeAttribute("hidden");
+ this.querySelector(
+ `.pf-c-tab-content[tab-name='${value}']`
+ )?.removeAttribute("hidden");
// Update active status on buttons
- this.querySelector(`.pf-c-tabs__item[tab-name='${value}']`)?.classList.add("pf-m-current");
+ this.querySelector(
+ `.pf-c-tabs__item[tab-name='${value}']`
+ )?.classList.add("pf-m-current");
// Hide other tab pages
- this.querySelectorAll(`.pf-c-tab-content:not([tab-name='${value}'])`).forEach((el) => {
+ this.querySelectorAll(
+ `.pf-c-tab-content:not([tab-name='${value}'])`
+ ).forEach((el) => {
el.setAttribute("hidden", "");
});
// Update active status on other buttons
- this.querySelectorAll(`.pf-c-tabs__item:not([tab-name='${value}'])`).forEach((el) => {
+ this.querySelectorAll(
+ `.pf-c-tabs__item:not([tab-name='${value}'])`
+ ).forEach((el) => {
el.classList.remove("pf-m-current");
});
// Update window hash
@@ -37,7 +44,9 @@ export class Tabs extends LitElement {
}
firstUpdated() {
- this._firstPage = this.querySelector(".pf-c-tab-content")?.getAttribute("tab-name")!;
+ this._firstPage = this.querySelector(".pf-c-tab-content")?.getAttribute(
+ "tab-name"
+ )!;
if (window.location.hash) {
this.currentPage = window.location.hash;
} else {
@@ -47,8 +56,7 @@ export class Tabs extends LitElement {
button.addEventListener("click", (e) => {
let tabPage = button.parentElement?.getAttribute("tab-name")!;
this.currentPage = tabPage;
- })
+ });
});
}
-
}
diff --git a/passbook/static/static/src/legacy.js b/passbook/static/static/src/legacy.js
index 6ecbc9018b..624962e765 100644
--- a/passbook/static/static/src/legacy.js
+++ b/passbook/static/static/src/legacy.js
@@ -11,23 +11,25 @@ document.querySelectorAll("input[type=search]").forEach((si) => {
document.querySelectorAll("[data-pb-fetch-fill]").forEach((el) => {
const url = el.dataset.pbFetchFill;
const key = el.dataset.pbFetchKey;
- fetch(url).then(r => r.json()).then(r => {
- el.textContent = r[key];
- el.value = r[key];
- });
+ fetch(url)
+ .then((r) => r.json())
+ .then((r) => {
+ el.textContent = r[key];
+ el.value = r[key];
+ });
});
// Modal
document.querySelectorAll("[data-target='modal']").forEach((m) => {
m.addEventListener("click", (e) => {
const parentContainer = e.target.closest('[data-target="modal"]');
- const modalId = parentContainer.attributes['data-modal'].value;
+ const modalId = parentContainer.attributes["data-modal"].value;
document.querySelector(`#${modalId}`).removeAttribute("hidden");
});
});
document.querySelectorAll(".pf-c-modal-box [data-modal-close]").forEach((b) => {
b.addEventListener("click", (e) => {
- const parentContainer = e.target.closest('.pf-c-backdrop');
+ const parentContainer = e.target.closest(".pf-c-backdrop");
parentContainer.setAttribute("hidden", true);
});
});
@@ -35,31 +37,37 @@ document.querySelectorAll(".pf-c-modal-box [data-modal-close]").forEach((b) => {
// Make Checkbox label click trigger checkbox toggle
document.querySelectorAll(".pf-c-check__label").forEach((checkLabel) => {
checkLabel.addEventListener("click", (e) => {
- const checkbox = e.target.parentElement.querySelector("input[type=checkbox]");
+ const checkbox = e.target.parentElement.querySelector(
+ "input[type=checkbox]"
+ );
checkbox.checked = !checkbox.checked;
});
});
// Hamburger Menu
-document.querySelectorAll(".pf-c-page__header-brand-toggle>button").forEach((toggle) => {
- toggle.addEventListener("click", (e) => {
- const sidebar = document.querySelector(".pf-c-page__sidebar");
- if (sidebar.classList.contains("pf-m-expanded")) {
- // Sidebar already expanded
- sidebar.classList.remove("pf-m-expanded");
- sidebar.style.zIndex = 0;
- } else {
- // Sidebar not expanded yet
- sidebar.classList.add("pf-m-expanded");
- sidebar.style.zIndex = 200;
- }
+document
+ .querySelectorAll(".pf-c-page__header-brand-toggle>button")
+ .forEach((toggle) => {
+ toggle.addEventListener("click", (e) => {
+ const sidebar = document.querySelector(".pf-c-page__sidebar");
+ if (sidebar.classList.contains("pf-m-expanded")) {
+ // Sidebar already expanded
+ sidebar.classList.remove("pf-m-expanded");
+ sidebar.style.zIndex = 0;
+ } else {
+ // Sidebar not expanded yet
+ sidebar.classList.add("pf-m-expanded");
+ sidebar.style.zIndex = 200;
+ }
+ });
});
-});
// Collapsable Menus in Sidebar
-document.querySelectorAll(".pf-m-expandable>.pf-c-nav__link").forEach((menu) => {
- menu.addEventListener("click", (e) => {
- e.preventDefault();
- menu.parentElement.classList.toggle("pf-m-expanded");
+document
+ .querySelectorAll(".pf-m-expandable>.pf-c-nav__link")
+ .forEach((menu) => {
+ menu.addEventListener("click", (e) => {
+ e.preventDefault();
+ menu.parentElement.classList.toggle("pf-m-expanded");
+ });
});
-});
diff --git a/passbook/static/static/src/main.ts b/passbook/static/static/src/main.ts
index a68edc77d3..85f08a3bb9 100644
--- a/passbook/static/static/src/main.ts
+++ b/passbook/static/static/src/main.ts
@@ -1,13 +1,13 @@
import "./legacy.js";
-import './elements/ActionButton';
-import './elements/AdminSidebar';
-import './elements/CodeMirror';
-import './elements/Dropdown';
-import './elements/FetchFillSlot';
-import './elements/Messages';
-import './elements/ModalButton';
-import './elements/Tabs';
-import './pages/AdminSiteShell';
-import './pages/FlowShellCard';
+import "./elements/ActionButton";
+import "./elements/AdminSidebar";
+import "./elements/CodeMirror";
+import "./elements/Dropdown";
+import "./elements/FetchFillSlot";
+import "./elements/Messages";
+import "./elements/ModalButton";
+import "./elements/Tabs";
+import "./pages/AdminSiteShell";
+import "./pages/FlowShellCard";
import "./elements/AdminLoginsChart";
diff --git a/passbook/static/static/src/pages/AdminSiteShell.ts b/passbook/static/static/src/pages/AdminSiteShell.ts
index 85cabe080c..418abfceb5 100644
--- a/passbook/static/static/src/pages/AdminSiteShell.ts
+++ b/passbook/static/static/src/pages/AdminSiteShell.ts
@@ -1,4 +1,11 @@
-import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import {
+ css,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
// @ts-ignore
import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
// @ts-ignore
@@ -6,7 +13,6 @@ import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css"
@customElement("pb-admin-shell")
export class AdminSiteShell extends LitElement {
-
@property()
set defaultUrl(value: string) {
if (window.location.hash === "" && value !== undefined) {
@@ -18,18 +24,22 @@ export class AdminSiteShell extends LitElement {
loading: boolean = false;
static get styles() {
- return [css`
- :host {
- position: relative;
- }
- :host .pf-l-bullseye {
- position: absolute;
- height: 100%;
- width: 100%;
- top: 0;
- left: 0;
- }
- `, BullseyeStyle, SpinnerStyle];
+ return [
+ css`
+ :host {
+ position: relative;
+ }
+ :host .pf-l-bullseye {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ }
+ `,
+ BullseyeStyle,
+ SpinnerStyle,
+ ];
}
constructor() {
@@ -41,49 +51,56 @@ export class AdminSiteShell extends LitElement {
loadContent() {
let url = window.location.hash.slice(1, Infinity);
if (url === "") {
- return
+ return;
}
this.loading = true;
- fetch(url).then(r => r.text()).then((t) => {
- this.querySelector("[slot=body]")!.innerHTML = t;
- }).then(() => {
- // Ensure anchors only change the hash
- this.querySelectorAll
("a:not(.pb-root-link)").forEach(a => {
- if (a.href === "") {
- return;
- }
- try {
- const url = new URL(a.href);
- const qs = url.search || "";
- a.href = `#${url.pathname}${qs}`;
- } catch (e) {
- a.href = `#${a.href}`;
- }
- });
- // Create refresh buttons
- this.querySelectorAll("[role=pb-refresh]").forEach(rt => {
- rt.addEventListener("click", e => {
- this.loadContent();
+ fetch(url)
+ .then((r) => r.text())
+ .then((t) => {
+ this.querySelector("[slot=body]")!.innerHTML = t;
+ })
+ .then(() => {
+ // Ensure anchors only change the hash
+ this.querySelectorAll(
+ "a:not(.pb-root-link)"
+ ).forEach((a) => {
+ if (a.href === "") {
+ return;
+ }
+ try {
+ const url = new URL(a.href);
+ const qs = url.search || "";
+ a.href = `#${url.pathname}${qs}`;
+ } catch (e) {
+ a.href = `#${a.href}`;
+ }
});
+ // Create refresh buttons
+ this.querySelectorAll("[role=pb-refresh]").forEach((rt) => {
+ rt.addEventListener("click", (e) => {
+ this.loadContent();
+ });
+ });
+ this.loading = false;
});
- this.loading = false;
- });
}
render() {
- return html`
- ${this.loading ? html`
- `: ""}
-
- `;
+ return html` ${this.loading
+ ? html` `
+ : ""}
+ `;
}
-
}
diff --git a/passbook/static/static/src/pages/FlowShellCard.ts b/passbook/static/static/src/pages/FlowShellCard.ts
index cc54ecc383..e8bff50465 100644
--- a/passbook/static/static/src/pages/FlowShellCard.ts
+++ b/passbook/static/static/src/pages/FlowShellCard.ts
@@ -1,9 +1,9 @@
-import { LitElement, html, customElement, property } from 'lit-element';
+import { LitElement, html, customElement, property } from "lit-element";
import { updateMessages } from "../elements/Messages";
enum ResponseType {
redirect = "redirect",
- template = "template"
+ template = "template",
}
interface Response {
@@ -14,7 +14,6 @@ interface Response {
@customElement("pb-flow-shell-card")
export class FlowShellCard extends LitElement {
-
@property()
flowBodyUrl: string = "";
@@ -26,19 +25,23 @@ export class FlowShellCard extends LitElement {
}
firstUpdated() {
- fetch(this.flowBodyUrl).then(r => {
- if (!r.ok) {
- throw Error(r.statusText);
- }
- return r;
- }).then((r) => {
- return r.json();
- }).then((r) => {
- this.updateCard(r);
- }).catch((e) => {
- // Catch JSON or Update errors
- this.errorMessage(e);
- });
+ fetch(this.flowBodyUrl)
+ .then((r) => {
+ if (!r.ok) {
+ throw Error(r.statusText);
+ }
+ return r;
+ })
+ .then((r) => {
+ return r.json();
+ })
+ .then((r) => {
+ this.updateCard(r);
+ })
+ .catch((e) => {
+ // Catch JSON or Update errors
+ this.errorMessage(e);
+ });
}
async updateCard(data: Response) {
@@ -54,13 +57,15 @@ export class FlowShellCard extends LitElement {
this.loadFormCode();
this.setFormSubmitHandlers();
default:
- console.log(`passbook/flows: unexpected data type ${data.type}`);
+ console.log(
+ `passbook/flows: unexpected data type ${data.type}`
+ );
break;
}
- };
+ }
loadFormCode() {
- this.querySelectorAll("script").forEach(script => {
+ this.querySelectorAll("script").forEach((script) => {
let newScript = document.createElement("script");
newScript.src = script.src;
document.head.appendChild(newScript);
@@ -78,7 +83,9 @@ export class FlowShellCard extends LitElement {
for (let index = 0; index < form.elements.length; index++) {
const element = form.elements[index];
if (element.value === form.action) {
- console.log("passbook/flows: Found Form action URL in form elements, not changing form action.");
+ console.log(
+ "passbook/flows: Found Form action URL in form elements, not changing form action."
+ );
return false;
}
}
@@ -94,26 +101,31 @@ export class FlowShellCard extends LitElement {
}
setFormSubmitHandlers() {
- this.querySelectorAll("form").forEach(form => {
- console.log(`passbook/flows: Checking for autosubmit attribute ${form}`);
+ this.querySelectorAll("form").forEach((form) => {
+ console.log(
+ `passbook/flows: Checking for autosubmit attribute ${form}`
+ );
this.checkAutosubmit(form);
console.log(`passbook/flows: Setting action for form ${form}`);
this.updateFormAction(form);
console.log(`passbook/flows: Adding handler for form ${form}`);
- form.addEventListener('submit', (e) => {
+ form.addEventListener("submit", (e) => {
e.preventDefault();
let formData = new FormData(form);
this.flowBody = undefined;
fetch(this.flowBodyUrl, {
- method: 'post',
+ method: "post",
body: formData,
- }).then((response) => {
- return response.json()
- }).then(data => {
- this.updateCard(data);
- }).catch((e) => {
- this.errorMessage(e);
- });
+ })
+ .then((response) => {
+ return response.json();
+ })
+ .then((data) => {
+ this.updateCard(data);
+ })
+ .catch((e) => {
+ this.errorMessage(e);
+ });
});
form.classList.add("pb-flow-wrapped");
});
@@ -141,19 +153,22 @@ export class FlowShellCard extends LitElement {
}
loading() {
- return html`
-
-
-
-
-
-
-
`;
+ return html`
+
+
+
+
+
+
`;
}
render() {
if (this.flowBody) {
- return html([this.flowBody]);
+ return html(([this.flowBody]));
}
return this.loading();
}
diff --git a/passbook/static/static/src/utils.ts b/passbook/static/static/src/utils.ts
index 33d83d52b2..2312bce3a0 100644
--- a/passbook/static/static/src/utils.ts
+++ b/passbook/static/static/src/utils.ts
@@ -1,12 +1,14 @@
export function getCookie(name: string) {
let cookieValue = null;
- if (document.cookie && document.cookie !== '') {
- const cookies = document.cookie.split(';');
+ if (document.cookie && document.cookie !== "") {
+ const cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
- if (cookie.substring(0, name.length + 1) === (name + '=')) {
- cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+ if (cookie.substring(0, name.length + 1) === name + "=") {
+ cookieValue = decodeURIComponent(
+ cookie.substring(name.length + 1)
+ );
break;
}
}
@@ -17,6 +19,6 @@ export function getCookie(name: string) {
export function convertToSlug(text: string): string {
return text
.toLowerCase()
- .replace(/ /g, '-')
- .replace(/[^\w-]+/g, '');
+ .replace(/ /g, "-")
+ .replace(/[^\w-]+/g, "");
}
diff --git a/passbook/static/static/tsconfig.json b/passbook/static/static/tsconfig.json
index 70b808d35f..e14404fecc 100644
--- a/passbook/static/static/tsconfig.json
+++ b/passbook/static/static/tsconfig.json
@@ -9,10 +9,6 @@
"target": "es2017",
"module": "es2015",
"moduleResolution": "node",
- "lib": [
- "es2017",
- "dom",
- "dom.iterable"
- ],
+ "lib": ["es2017", "dom", "dom.iterable"]
}
}