habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: switch to eslint

Browse Source
This commit is contained in:
Jens Langhammer
2020-12-01 09:15:41 +01:00
parent a312ad2ad1
commit 0231bcf685
25 changed files with 1010 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/src/pages/FlowShellCard.ts
View File

@ -1,4 +1,4 @@
import { LitElement, html, customElement, property } from "lit-element";
import { LitElement, html, customElement, property, TemplateResult } from "lit-element";
enum ResponseType {
redirect = "redirect",
@ -14,16 +14,16 @@ interface Response {
@customElement("pb-flow-shell-card")
export class FlowShellCard extends LitElement {
@property()
flowBodyUrl: string = "";
flowBodyUrl = "";
@property()
flowBody?: string;
createRenderRoot() {
createRenderRoot(): Element | ShadowRoot {
return this;
}
firstUpdated() {
firstUpdated(): void {
fetch(this.flowBodyUrl)
.then((r) => {
if (r.status === 404) {
@ -46,40 +46,40 @@ export class FlowShellCard extends LitElement {
});
}
async updateCard(data: Response) {
async updateCard(data: Response): Promise<void> {
switch (data.type) {
case ResponseType.redirect:
window.location.assign(data.to!);
break;
case ResponseType.template:
this.flowBody = data.body;
await this.requestUpdate();
this.checkAutofocus();
this.loadFormCode();
this.setFormSubmitHandlers();
break;
default:
console.debug(`passbook/flows: unexpected data type ${data.type}`);
break;
case ResponseType.redirect:
window.location.assign(data.to!);
break;
case ResponseType.template:
this.flowBody = data.body;
await this.requestUpdate();
this.checkAutofocus();
this.loadFormCode();
this.setFormSubmitHandlers();
break;
default:
console.debug(`passbook/flows: unexpected data type ${data.type}`);
break;
}
}
loadFormCode() {
loadFormCode(): void {
this.querySelectorAll("script").forEach((script) => {
let newScript = document.createElement("script");
const newScript = document.createElement("script");
newScript.src = script.src;
document.head.appendChild(newScript);
});
}
checkAutofocus() {
checkAutofocus(): void {
const autofocusElement = <HTMLElement>this.querySelector("[autofocus]");
if (autofocusElement !== null) {
autofocusElement.focus();
}
}
updateFormAction(form: HTMLFormElement) {
updateFormAction(form: HTMLFormElement): boolean {
for (let index = 0; index < form.elements.length; index++) {
const element = <HTMLInputElement>form.elements[index];
if (element.value === form.action) {
@ -94,13 +94,13 @@ export class FlowShellCard extends LitElement {
return true;
}
checkAutosubmit(form: HTMLFormElement) {
checkAutosubmit(form: HTMLFormElement): void {
if ("autosubmit" in form.attributes) {
return form.submit();
}
}
setFormSubmitHandlers() {
setFormSubmitHandlers(): void {
this.querySelectorAll("form").forEach((form) => {
console.debug(`passbook/flows: Checking for autosubmit attribute ${form}`);
this.checkAutosubmit(form);
@ -109,7 +109,7 @@ export class FlowShellCard extends LitElement {
console.debug(`passbook/flows: Adding handler for form ${form}`);
form.addEventListener("submit", (e) => {
e.preventDefault();
let formData = new FormData(form);
const formData = new FormData(form);
this.flowBody = undefined;
fetch(this.flowBodyUrl, {
method: "post",
@ -129,7 +129,7 @@ export class FlowShellCard extends LitElement {
});
}
errorMessage(error: string) {
errorMessage(error: string): void {
this.flowBody = `
<style>
.pb-exception {
@ -150,7 +150,7 @@ export class FlowShellCard extends LitElement {
</div>`;
}
loading() {
loading(): TemplateResult {
return html` <div class="pf-c-login__main-body pb-loading">
<span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
<span class="pf-c-spinner__clipper"></span>
@ -160,7 +160,7 @@ export class FlowShellCard extends LitElement {
</div>`;
}
render() {
render(): TemplateResult {
if (this.flowBody) {
return html(<TemplateStringsArray>(<unknown>[this.flowBody]));
}

23
web/src/pages/LibraryPage.ts
View File

@ -1,6 +1,6 @@
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Application } from "../api/application";
import { DefaultClient, PBResponse } from "../api/client";
import { PBResponse } from "../api/client";
import { COMMON_STYLES } from "../common/styles";
import { truncate } from "../utils";
@ -19,18 +19,17 @@ export class ApplicationViewPage extends LitElement {
);
}
firstUpdated() {
firstUpdated(): void {
Application.list().then((r) => (this.apps = r));
}
renderEmptyState() {
renderEmptyState(): TemplateResult {
return html` <div class="pf-c-empty-state pf-m-full-height">
<div class="pf-c-empty-state__content">
<i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
<h1 class="pf-c-title pf-m-lg">{% trans 'No Applications available.' %}</h1>
<h1 class="pf-c-title pf-m-lg">No Applications available.</h1>
<div class="pf-c-empty-state__body">
{% trans "Either no applications are defined, or you don't have access to any."
%}
Either no applications are defined, or you don't have access to any.
</div>
{% if perms.passbook_core.add_application %}
<a
@ -49,12 +48,12 @@ export class ApplicationViewPage extends LitElement {
return html` <a href="${app.launch_url}" class="pf-c-card pf-m-hoverable pf-m-compact">
<div class="pf-c-card__header">
${app.meta_icon
? html`<img
? html`<img
class="app-icon pf-c-avatar"
src="${app.meta_icon}"
alt="Application Icon"
/>`
: html`<i class="pf-icon pf-icon-arrow"></i>`}
: html`<i class="pf-icon pf-icon-arrow"></i>`}
</div>
<div class="pf-c-card__title">
<p id="card-1-check-label">${app.name}</p>
@ -66,7 +65,7 @@ export class ApplicationViewPage extends LitElement {
</a>`;
}
renderLoading() {
renderLoading(): TemplateResult {
return html`<div class="pf-c-empty-state pf-m-full-height">
<div class="pf-c-empty-state__content">
<div class="pf-l-bullseye">
@ -86,7 +85,7 @@ export class ApplicationViewPage extends LitElement {
</div>`;
}
render() {
render(): TemplateResult {
return html`<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
@ -97,12 +96,12 @@ export class ApplicationViewPage extends LitElement {
</div>
</section>
${this.apps
? html`<section class="pf-c-page__main-section">
? html`<section class="pf-c-page__main-section">
<div class="pf-l-gallery pf-m-gutter">
${this.apps.results.map((app) => this.renderApp(app))}
</div>
</section>`
: this.renderLoading()}
: this.renderLoading()}
</main>`;
}
}

16
web/src/pages/RouterOutlet.ts
View File

@ -49,10 +49,10 @@ export class Route {
export const SLUG_REGEX = "[-a-zA-Z0-9_]+";
export const ROUTES: Route[] = [
// Prevent infinite Shell loops
new Route(new RegExp(`^/$`)).redirect("/library/"),
new Route(new RegExp(`^#.*`)).redirect("/library/"),
new Route(new RegExp(`^/library/$`), html`<pb-library></pb-library>`),
new Route(new RegExp(`^/applications/$`), html`<pb-application-list></pb-application-list>`),
new Route(new RegExp("^/$")).redirect("/library/"),
new Route(new RegExp("^#.*")).redirect("/library/"),
new Route(new RegExp("^/library/$"), html`<pb-library></pb-library>`),
new Route(new RegExp("^/applications/$"), html`<pb-application-list></pb-application-list>`),
new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})/$`)).then((args) => {
return html`<pb-application-view .args=${args}></pb-application-view>`;
}),
@ -99,14 +99,14 @@ export class RouterOutlet extends LitElement {
constructor() {
super();
window.addEventListener("hashchange", (e) => this.navigate());
window.addEventListener("hashchange", () => this.navigate());
}
firstUpdated() {
firstUpdated(): void {
this.navigate();
}
navigate() {
navigate(): void {
let activeUrl = window.location.hash.slice(1, Infinity);
if (activeUrl === "") {
activeUrl = this.defaultUrl!;
@ -141,7 +141,7 @@ export class RouterOutlet extends LitElement {
this.current = matchedRoute;
}
render() {
render(): TemplateResult {
return this.current?.render();
}
}

6
web/src/pages/SiteShell.ts
View File

@ -17,7 +17,7 @@ export class SiteShell extends LitElement {
_url?: string;
@property()
loading: boolean = false;
loading = false;
static get styles() {
return [
@ -99,7 +99,7 @@ export class SiteShell extends LitElement {
render() {
return html` ${this.loading
? html`<div class="pf-c-backdrop">
? html`<div class="pf-c-backdrop">
<div class="pf-l-bullseye">
<div class="pf-l-bullseye__item">
<span
@ -114,7 +114,7 @@ export class SiteShell extends LitElement {
</div>
</div>
</div>`
: ""}
: ""}
<slot name="body"> </slot>`;
}
}

51
web/src/pages/applications/ApplicationViewPage.ts
View File

@ -1,16 +1,17 @@
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Application } from "../../api/application";
import { DefaultClient, PBResponse } from "../../api/client";
import { PolicyBinding } from "../../api/policy_binding";
import { COMMON_STYLES } from "../../common/styles";
import { Table } from "../../elements/table/Table";
@customElement("pb-bound-policies-list")
export class BoundPoliciesList extends Table<any> {
export class BoundPoliciesList extends Table<PolicyBinding> {
@property()
target?: string;
apiEndpoint(page: number): Promise<PBResponse<any>> {
return DefaultClient.fetch<PBResponse<any>>(["policies", "bindings"], {
apiEndpoint(page: number): Promise<PBResponse<PolicyBinding>> {
return DefaultClient.fetch<PBResponse<PolicyBinding>>(["policies", "bindings"], {
target: this.target!,
ordering: "order",
page: page,
@ -21,12 +22,12 @@ export class BoundPoliciesList extends Table<any> {
return ["Policy", "Enabled", "Order", "Timeout", ""];
}
row(item: any): string[] {
row(item: PolicyBinding): string[] {
return [
item.policy_obj.name,
item.enabled,
item.order,
item.timeout,
item.enabled ? "Yes" : "No",
item.order.toString(),
item.timeout.toString(),
`
<pb-modal-button href="administration/policies/bindings/${item.pk}/update/">
<pb-spinner-button slot="trigger" class="pf-m-secondary">
@ -70,7 +71,7 @@ export class ApplicationViewPage extends LitElement {
);
}
render() {
render(): TemplateResult {
if (!this.application) {
return html``;
}
@ -84,44 +85,24 @@ export class ApplicationViewPage extends LitElement {
</div>
</section>
<pb-tabs>
<section
slot="page-1"
tab-title="Users"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<section slot="page-1" tab-title="Users" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-l-gallery pf-m-gutter">
<div
class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col"
style="grid-column-end: span 3;grid-row-end: span 2;"
>
<div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
<div class="pf-c-card__header">
<div class="pf-c-card__header-main">
<i class="pf-icon pf-icon-server"></i> Logins over the last 24
hours
<i class="pf-icon pf-icon-server"></i> Logins over the last 24 hours
</div>
</div>
<div class="pf-c-card__body">
<pb-admin-logins-chart
url="${DefaultClient.makeUrl([
"core",
"applications",
this.application?.slug!,
"metrics",
])}"
></pb-admin-logins-chart>
${this.application ?
html`<pb-admin-logins-chart url="${DefaultClient.makeUrl(["core", "applications", this.application?.slug!, "metrics"])}"></pb-admin-logins-chart>` : ""}
</div>
</div>
</div>
</section>
<div
slot="page-2"
tab-title="Policy Bindings"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div slot="page-2" tab-title="Policy Bindings" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card">
<pb-bound-policies-list
.target=${this.application.pk}
></pb-bound-policies-list>
<pb-bound-policies-list .target=${this.application.pk}></pb-bound-policies-list>
</div>
</div>
</pb-tabs>`;