${pageCount === 1
diff --git a/frontend/src/features/crawl-workflows/workflow-list.ts b/frontend/src/features/crawl-workflows/workflow-list.ts
index 7f3875c557..4b2881e6c9 100644
--- a/frontend/src/features/crawl-workflows/workflow-list.ts
+++ b/frontend/src/features/crawl-workflows/workflow-list.ts
@@ -260,14 +260,14 @@ export class WorkflowListItem extends BtrixElement {
${this.safeRender((workflow) => {
if (workflow.lastCrawlTime && workflow.lastCrawlStartTime) {
- return html`
+ >
${msg(
str`in ${this.localize.humanizeDuration(
new Date(workflow.lastCrawlTime).valueOf() -
@@ -301,37 +301,32 @@ export class WorkflowListItem extends BtrixElement {
workflow.totalSize &&
workflow.lastCrawlSize
) {
- return html`
+ return html`${this.localize.bytes(+workflow.totalSize, {
+ unitDisplay: "narrow",
+ })}
+
-
+ ${this.localize.bytes(workflow.lastCrawlSize, {
+ unitDisplay: "narrow",
+ })}
`;
}
if (workflow.totalSize && workflow.lastCrawlSize) {
- return html`
`;
+ return this.localize.bytes(+workflow.totalSize, {
+ unitDisplay: "narrow",
+ });
}
if (workflow.isCrawlRunning && workflow.lastCrawlSize) {
return html`
-
+ ${this.localize.bytes(workflow.lastCrawlSize, {
+ unitDisplay: "narrow",
+ })}
`;
}
if (workflow.totalSize) {
- return html`
`;
+ return this.localize.bytes(+workflow.totalSize, {
+ unitDisplay: "narrow",
+ });
}
return notSpecified;
})}
@@ -353,14 +348,14 @@ export class WorkflowListItem extends BtrixElement {
${this.safeRender(
(workflow) => html`
-
+ >
`,
)}
diff --git a/frontend/src/features/org/usage-history-table.ts b/frontend/src/features/org/usage-history-table.ts
index b716fdc66f..efe97ced7a 100644
--- a/frontend/src/features/org/usage-history-table.ts
+++ b/frontend/src/features/org/usage-history-table.ts
@@ -147,13 +147,13 @@ export class UsageHistoryTable extends BtrixElement {
const tableRows = [
html`
-
-
+
`,
humanizeExecutionSeconds(crawlTime || 0),
totalSecondsUsed ? humanizeExecutionSeconds(totalSecondsUsed) : "--",
diff --git a/frontend/src/index.test.ts b/frontend/src/index.test.ts
index b27ad4dd0c..e92ac0cf16 100644
--- a/frontend/src/index.test.ts
+++ b/frontend/src/index.test.ts
@@ -2,8 +2,11 @@ import { expect, fixture } from "@open-wc/testing";
import { html } from "lit";
import { restore, stub } from "sinon";
+import { NavigateController } from "./controllers/navigate";
+import { NotifyController } from "./controllers/notify";
+import { type AppSettings } from "./utils/app";
import AuthService from "./utils/AuthService";
-import { AppStateService } from "./utils/state";
+import appState, { AppStateService } from "./utils/state";
import { formatAPIUser } from "./utils/user";
import { App, type APIUser } from ".";
@@ -25,12 +28,28 @@ const mockAPIUser: APIUser = {
};
const mockUserInfo = formatAPIUser(mockAPIUser);
+const mockAppSettings: AppSettings = {
+ registrationEnabled: false,
+ jwtTokenLifetime: 86400,
+ defaultBehaviorTimeSeconds: 300,
+ defaultPageLoadTimeSeconds: 120,
+ maxPagesPerCrawl: 50000,
+ numBrowsers: 2,
+ maxScale: 3,
+ billingEnabled: false,
+ signUpUrl: "",
+ salesEmail: "",
+ supportEmail: "",
+ localesEnabled: ["en", "es"],
+};
+
describe("browsertrix-app", () => {
beforeEach(() => {
AppStateService.resetAll();
AuthService.broadcastChannel = new BroadcastChannel(AuthService.storageKey);
window.sessionStorage.clear();
stub(window.history, "pushState");
+ stub(NotifyController.prototype, "toast");
});
afterEach(() => {
@@ -51,12 +70,26 @@ describe("browsertrix-app", () => {
username: "test-auth@example.com",
}),
);
+ // @ts-expect-error checkFreshness is private
+ stub(AuthService.prototype, "checkFreshness");
+ stub(appState, "settings").returns(mockAppSettings);
const el = await fixture
(html` `);
+ await el.updateComplete;
expect(el.shadowRoot?.querySelector("btrix-home")).to.exist;
});
it("renders home when not authenticated", async () => {
stub(AuthService, "initSessionStorage").returns(Promise.resolve(null));
+ // @ts-expect-error checkFreshness is private
+ stub(AuthService.prototype, "checkFreshness");
+ stub(appState, "settings").returns(mockAppSettings);
+ stub(NavigateController, "createNavigateEvent").callsFake(
+ () =>
+ new CustomEvent("x-ignored", {
+ detail: { url: "", resetScroll: false },
+ }),
+ );
+
const el = await fixture(html` `);
expect(el.shadowRoot?.querySelector("btrix-home")).to.exist;
});
@@ -113,6 +146,9 @@ describe("browsertrix-app", () => {
username: "test-auth@example.com",
}),
);
+ stub(AuthService, "createNeedLoginEvent").callsFake(
+ () => new CustomEvent("x-ignored", { detail: {} }),
+ );
const el = await fixture("");
diff --git a/frontend/src/index.ts b/frontend/src/index.ts
index d1df6fd956..fbfa0e087c 100644
--- a/frontend/src/index.ts
+++ b/frontend/src/index.ts
@@ -40,7 +40,7 @@ import {
translatedLocales,
type TranslatedLocaleEnum,
} from "@/types/localization";
-import { type AppSettings } from "@/utils/app";
+import { getAppSettings, type AppSettings } from "@/utils/app";
import { DEFAULT_MAX_SCALE } from "@/utils/crawler";
import localize from "@/utils/localize";
import { toast } from "@/utils/notify";
@@ -115,6 +115,20 @@ export class App extends BtrixElement {
if (authState && !this.userInfo) {
void this.fetchAndUpdateUserInfo();
}
+
+ try {
+ this.settings = await getAppSettings();
+ } catch (e) {
+ console.error(e);
+ this.notify.toast({
+ message: msg("Couldn’t initialize Browsertrix correctly."),
+ variant: "danger",
+ icon: "exclamation-octagon",
+ id: "get-app-settings-error",
+ });
+ } finally {
+ await localize.initLanguage();
+ }
super.connectedCallback();
this.addEventListener("btrix-navigate", this.onNavigateTo);
@@ -156,10 +170,6 @@ export class App extends BtrixElement {
}
}
- protected firstUpdated(): void {
- localize.initLanguage();
- }
-
getLocationPathname() {
return window.location.pathname;
}
diff --git a/frontend/src/pages/account-settings.ts b/frontend/src/pages/account-settings.ts
index 368818b398..1a41d77dfc 100644
--- a/frontend/src/pages/account-settings.ts
+++ b/frontend/src/pages/account-settings.ts
@@ -1,5 +1,10 @@
import { localized, msg, str } from "@lit/localize";
-import type { SlInput, SlSelectEvent } from "@shoelace-style/shoelace";
+import type {
+ SlChangeEvent,
+ SlInput,
+ SlSelectEvent,
+ SlSwitch,
+} from "@shoelace-style/shoelace";
import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
import type { ZxcvbnResult } from "@zxcvbn-ts/core";
import { html, nothing, type PropertyValues } from "lit";
@@ -12,9 +17,10 @@ import { BtrixElement } from "@/classes/BtrixElement";
import { TailwindElement } from "@/classes/TailwindElement";
import needLogin from "@/decorators/needLogin";
import { pageHeader } from "@/layouts/pageHeader";
-import { translatedLocales, type LanguageCode } from "@/types/localization";
+import { type LanguageCode } from "@/types/localization";
import type { UnderlyingFunction } from "@/types/utils";
import { isApiError } from "@/utils/api";
+import localize from "@/utils/localize";
import PasswordService from "@/utils/PasswordService";
import { AppStateService } from "@/utils/state";
import { tw } from "@/utils/tailwind";
@@ -27,8 +33,8 @@ enum Tab {
const { PASSWORD_MINLENGTH, PASSWORD_MAXLENGTH, PASSWORD_MIN_SCORE } =
PasswordService;
-@localized()
@customElement("btrix-request-verify")
+@localized()
export class RequestVerify extends TailwindElement {
@property({ type: String })
email!: string;
@@ -99,8 +105,8 @@ export class RequestVerify extends TailwindElement {
}
}
-@localized()
@customElement("btrix-account-settings")
+@localized()
@needLogin
export class AccountSettings extends BtrixElement {
@property({ type: String })
@@ -242,9 +248,7 @@ export class AccountSettings extends BtrixElement {
- ${(translatedLocales as unknown as string[]).length > 1
- ? this.renderLanguage()
- : nothing}
+ ${localize.languages.length > 1 ? this.renderLanguage() : nothing}
`;
}
@@ -348,6 +352,37 @@ export class AccountSettings extends BtrixElement {
@sl-select=${this.onSelectLocale}
>