@@ -161,17 +163,23 @@ export class App extends LiteElement {
case "login":
return html`
`;
case "home":
return html`
-
+
${msg("Log In")}
`;
- case "my-account":
+ case "myAccount":
return appLayout(html`
) {
this.clearAuthState();
- this.navigate("/log-in");
+
+ if (event?.detail?.api) {
+ // TODO refresh instead of redirect
+ }
+ this.navigate(ROUTES.login);
}
onNavigateTo(event: NavigateEvent) {
diff --git a/frontend/src/pages/archive-info-tab.ts b/frontend/src/pages/archive-info-tab.ts
index 15a7b905..ed4bbcd1 100644
--- a/frontend/src/pages/archive-info-tab.ts
+++ b/frontend/src/pages/archive-info-tab.ts
@@ -1,11 +1,12 @@
import LiteElement, { html } from "../utils/LiteElement";
+import { needLogin } from "../utils/auth";
import type { Archive, ArchiveConfig } from "../types/archives";
import type { AuthState } from "../types/auth";
+@needLogin
export class ArchiveConfigsPage extends LiteElement {
- archive!: Archive & {
- authState: AuthState;
- };
+ archive!: Archive;
+ authState!: AuthState;
configs: ArchiveConfig;
static get properties() {
@@ -16,14 +17,9 @@ export class ArchiveConfigsPage extends LiteElement {
}
async firstUpdated() {
- if (!this.archive?.authState) {
- // TODO
- return;
- }
-
const res = await this.apiFetch(
`/archives/${this.archive.aid}/crawlconfigs`,
- this.archive.authState
+ this.authState!
);
this.configs = res.crawl_configs;
}
diff --git a/frontend/src/pages/archive-info.ts b/frontend/src/pages/archive-info.ts
index 912a16cd..ff91d741 100644
--- a/frontend/src/pages/archive-info.ts
+++ b/frontend/src/pages/archive-info.ts
@@ -1,7 +1,9 @@
import LiteElement, { html } from "../utils/LiteElement";
+import { needLogin } from "../utils/auth";
import type { Archive } from "../types/archives";
import type { AuthState } from "../types/auth";
+@needLogin
export class ArchivePage extends LiteElement {
authState: AuthState = null;
aid?: Archive["aid"];
@@ -48,8 +50,8 @@ export class ArchivePage extends LiteElement {
? html``
: ""}
diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts
index 0baffd30..e1179290 100644
--- a/frontend/src/pages/log-in.ts
+++ b/frontend/src/pages/log-in.ts
@@ -3,9 +3,6 @@ import LiteElement, { html } from "../utils/LiteElement";
import type { Auth } from "../types/auth";
export class LogInPage extends LiteElement {
- @property({ type: Object })
- auth?: Auth;
-
@state()
isLoggingIn: boolean = false;
@@ -90,10 +87,6 @@ export class LogInPage extends LiteElement {
console.error(e);
}
- if (!this.auth) {
- this.loginError = "Unknown login response";
- }
-
this.isLoggingIn = false;
}
}
diff --git a/frontend/src/pages/my-account.ts b/frontend/src/pages/my-account.ts
index 27f699c4..b07851f7 100644
--- a/frontend/src/pages/my-account.ts
+++ b/frontend/src/pages/my-account.ts
@@ -1,7 +1,9 @@
import LiteElement, { html } from "../utils/LiteElement";
+import { needLogin } from "../utils/auth";
import type { Archive } from "../types/archives";
import type { AuthState } from "../types/auth";
+@needLogin
export class MyAccountPage extends LiteElement {
archiveList: Archive[] = [];
authState: AuthState = null;
@@ -15,15 +17,10 @@ export class MyAccountPage extends LiteElement {
}
async firstUpdated() {
- if (!this.authState) {
- this.dispatchEvent(new CustomEvent("need-login"));
- return;
- }
-
- const data = await this.apiFetch("/archives", this.authState);
+ const data = await this.apiFetch("/archives", this.authState!);
this.archiveList = data.archives;
- const data2 = await this.apiFetch("/users/me", this.authState);
+ const data2 = await this.apiFetch("/users/me", this.authState!);
this.id = data2.id;
}
diff --git a/frontend/src/utils/LiteElement.ts b/frontend/src/utils/LiteElement.ts
index 3a8d6aae..685cca79 100644
--- a/frontend/src/utils/LiteElement.ts
+++ b/frontend/src/utils/LiteElement.ts
@@ -27,10 +27,27 @@ export default class LiteElement extends LitElement {
async apiFetch(path: string, auth: Auth) {
const resp = await fetch("/api" + path, { headers: auth.headers });
+
if (resp.status !== 200) {
- this.navTo("/log-in");
- throw new Error("logged out");
+ if (resp.status === 401) {
+ this.dispatchEvent(
+ new CustomEvent("need-login", {
+ detail: { api: true },
+ })
+ );
+ }
+
+ // TODO get error details
+ let errorMessage: string;
+
+ try {
+ errorMessage = (await resp.json()).detail;
+ } catch {
+ errorMessage = "Unknown API error";
+ }
+ throw new Error(errorMessage);
}
+
return await resp.json();
}
}
diff --git a/frontend/src/utils/auth.test.ts b/frontend/src/utils/auth.test.ts
new file mode 100644
index 00000000..4c34c85d
--- /dev/null
+++ b/frontend/src/utils/auth.test.ts
@@ -0,0 +1,26 @@
+import { spy } from "sinon";
+import { expect } from "@esm-bundle/chai";
+
+import * as auth from "./auth";
+
+describe("auth", () => {
+ describe("needLogin", () => {
+ it("dispatches the correct event on need log in", () => {
+ const dispatchEventSpy = spy();
+ class LiteElementMock {
+ dispatchEvent = dispatchEventSpy;
+ }
+
+ const Element = auth.needLogin(
+ class extends LiteElementMock {
+ authState = null;
+ } as any
+ );
+
+ const element = new Element();
+ element.connectedCallback();
+
+ expect(dispatchEventSpy.getCall(0).firstArg.type).to.equal("need-login");
+ });
+ });
+});
diff --git a/frontend/src/utils/auth.ts b/frontend/src/utils/auth.ts
new file mode 100644
index 00000000..e194fea2
--- /dev/null
+++ b/frontend/src/utils/auth.ts
@@ -0,0 +1,33 @@
+import LiteElement from "../utils/LiteElement";
+import type { AuthState } from "../types/auth";
+
+/**
+ * Block rendering and dispatch event if user is not logged in
+ *
+ * Usage example:
+ * ```ts
+ * @needLogin
+ * MyComponent extends LiteElement {}
+ * ```
+ */
+export function needLogin