From 84a60b54e472fe07aa25333cbbd46332e4a1ef6e Mon Sep 17 00:00:00 2001 From: Anish Lakhwara Date: Tue, 1 Aug 2023 15:38:27 -0700 Subject: [PATCH 01/10] feat: Display waiting message while backend is initializing --- frontend/src/pages/log-in.ts | 79 ++++++++++++++++++++++++++++++++++-- 1 file changed, 76 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts index bc736723..90daedbe 100644 --- a/frontend/src/pages/log-in.ts +++ b/frontend/src/pages/log-in.ts @@ -28,6 +28,7 @@ type FormEvent = | { type: "SHOW_SIGN_IN_WITH_PASSWORD" } | { type: "SHOW_FORGOT_PASSWORD" } | { type: "SUBMIT" } + | { type: "BACKEND_INITIALIZED" } | FormSuccessEvent | FormErrorEvent; @@ -51,6 +52,10 @@ type FormTypestate = | { value: "submittingForgotPassword"; context: FormContext; + } + | { + value: "backendInitializing"; + context: FormContext; }; const initialContext = {}; @@ -58,7 +63,7 @@ const initialContext = {}; const machine = createMachine( { id: "loginForm", - initial: "signIn", + initial: "backendInitializing", context: initialContext, states: { ["signIn"]: { @@ -106,6 +111,14 @@ const machine = createMachine( }, }, }, + ["backendInitializing"]: { + on: { + BACKEND_INITIALIZED: { + target: "signIn", + actions: "reset", + }, + }, + }, }, }, { @@ -120,7 +133,7 @@ const machine = createMachine( ...(event as FormErrorEvent).detail, })), }, - } + }, ); @localized() @@ -142,6 +155,7 @@ export class LogInPage extends LiteElement { }); this.formStateService.start(); + this.checkBackendInitialized(); } disconnectedCallback() { @@ -173,6 +187,16 @@ export class LogInPage extends LiteElement { >${msg("Sign in with password")} `; + } else if (this.formState.value === "backendInitializing") { + form = this.renderBackendInitializing(); + link = html` + ${msg("Sign in with password")} + `; } else { form = this.renderLoginForm(); link = html` @@ -269,6 +293,46 @@ export class LogInPage extends LiteElement { `; } + private renderBackendInitializing() { + return html` +
+
+ + +
+
+ + +
+ ${msg("Log in")} +
+ `; + } + private renderForgotPasswordForm() { let formError; @@ -309,6 +373,15 @@ export class LogInPage extends LiteElement { `; } + async checkBackendInitialized() { + const resp = await fetch("/api/healthz"); + if (resp.status === 200) { + this.formStateService.send("BACKEND_INITIALIZED"); + } else { + setTimeout(this.checkBackendInitialized, 5000); + } + } + async onSubmitLogIn(event: SubmitEvent) { event.preventDefault(); this.formStateService.send("SUBMIT"); @@ -366,7 +439,7 @@ export class LogInPage extends LiteElement { type: "SUCCESS", detail: { successMessage: msg( - "Successfully received your request. You will receive an email to reset your password if your email is found in our system." + "Successfully received your request. You will receive an email to reset your password if your email is found in our system.", ), }, }); From 06918c967b2a5a2612681134157adf940b371de8 Mon Sep 17 00:00:00 2001 From: Anish Lakhwara Date: Wed, 2 Aug 2023 11:37:55 -0700 Subject: [PATCH 02/10] feat: use html dialog instead --- frontend/src/pages/log-in.ts | 40 ++++++------------------------------ 1 file changed, 6 insertions(+), 34 deletions(-) diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts index 90daedbe..5cf77626 100644 --- a/frontend/src/pages/log-in.ts +++ b/frontend/src/pages/log-in.ts @@ -295,41 +295,11 @@ export class LogInPage extends LiteElement { private renderBackendInitializing() { return html` -
- - + +

Please wait while the backend initializes

+
-
- - -
- ${msg("Log in")} -
`; } @@ -374,8 +344,10 @@ export class LogInPage extends LiteElement { } async checkBackendInitialized() { - const resp = await fetch("/api/healthz"); + const resp = await fetch("/api/settings"); if (resp.status === 200) { + const Dialog = document.getElementById("backend-initializing"); + Dialog.close() this.formStateService.send("BACKEND_INITIALIZED"); } else { setTimeout(this.checkBackendInitialized, 5000); From 2f26fcefce748c674b00220e39df76f7c15c6bfb Mon Sep 17 00:00:00 2001 From: Anish Lakhwara Date: Wed, 2 Aug 2023 16:36:28 -0700 Subject: [PATCH 03/10] fix: make pretty & work correctly --- frontend/src/pages/log-in.ts | 44 ++++++++++++++++++++++++++++-------- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts index 5cf77626..a4860c84 100644 --- a/frontend/src/pages/log-in.ts +++ b/frontend/src/pages/log-in.ts @@ -29,6 +29,7 @@ type FormEvent = | { type: "SHOW_FORGOT_PASSWORD" } | { type: "SUBMIT" } | { type: "BACKEND_INITIALIZED" } + | { type: "BACKEND_NOT_INITIALIZED" } | FormSuccessEvent | FormErrorEvent; @@ -63,7 +64,7 @@ const initialContext = {}; const machine = createMachine( { id: "loginForm", - initial: "backendInitializing", + initial: "signIn", context: initialContext, states: { ["signIn"]: { @@ -76,6 +77,9 @@ const machine = createMachine( target: "signingIn", actions: "reset", }, + BACKEND_NOT_INITIALIZED: { + target: "backendInitializing", + }, }, }, ["signingIn"]: { @@ -133,7 +137,7 @@ const machine = createMachine( ...(event as FormErrorEvent).detail, })), }, - }, + } ); @localized() @@ -295,11 +299,34 @@ export class LogInPage extends LiteElement { private renderBackendInitializing() { return html` +
- -

Please wait while the backend initializes

- + +
+
+ + + +

Please wait while the backend initializes

+ +
+
`; } @@ -346,11 +373,10 @@ export class LogInPage extends LiteElement { async checkBackendInitialized() { const resp = await fetch("/api/settings"); if (resp.status === 200) { - const Dialog = document.getElementById("backend-initializing"); - Dialog.close() this.formStateService.send("BACKEND_INITIALIZED"); } else { - setTimeout(this.checkBackendInitialized, 5000); + this.formStateService.send("BACKEND_NOT_INITIALIZED"); + setTimeout(() => this.checkBackendInitialized(), 5000); } } @@ -411,7 +437,7 @@ export class LogInPage extends LiteElement { type: "SUCCESS", detail: { successMessage: msg( - "Successfully received your request. You will receive an email to reset your password if your email is found in our system.", + "Successfully received your request. You will receive an email to reset your password if your email is found in our system." ), }, }); From a8bedeffb5c2f824e108ba98ea2811f836718c7e Mon Sep 17 00:00:00 2001 From: Anish Lakhwara Date: Wed, 2 Aug 2023 17:10:45 -0700 Subject: [PATCH 04/10] fix: take Sua's suggestons, less code needed --- frontend/src/pages/log-in.ts | 49 +++++------------------------------- 1 file changed, 6 insertions(+), 43 deletions(-) diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts index a4860c84..d798ea61 100644 --- a/frontend/src/pages/log-in.ts +++ b/frontend/src/pages/log-in.ts @@ -191,16 +191,6 @@ export class LogInPage extends LiteElement { >${msg("Sign in with password")} `; - } else if (this.formState.value === "backendInitializing") { - form = this.renderBackendInitializing(); - link = html` - ${msg("Sign in with password")} - `; } else { form = this.renderLoginForm(); link = html` @@ -290,42 +280,15 @@ export class LogInPage extends LiteElement { class="w-full" variant="primary" ?loading=${this.formState.value === "signingIn"} + ?disabled=${this.formState.value === "backendInitializing"} type="submit" >${msg("Log in")} - - `; - } - - private renderBackendInitializing() { - return html` -
-
- - -
-
- - - -

Please wait while the backend initializes

- -
+ ${this.formState.value === "backendInitializing" + ? html`

+ ${msg("Please wait while the backend initializes")} +

` + : ""}
`; } From f1d91e3bf91516cdc6a908f0a299a1dfcbde192a Mon Sep 17 00:00:00 2001 From: Anish Lakhwara Date: Wed, 2 Aug 2023 17:18:40 -0700 Subject: [PATCH 05/10] fix: add styling --- frontend/src/pages/log-in.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts index d798ea61..a09e458e 100644 --- a/frontend/src/pages/log-in.ts +++ b/frontend/src/pages/log-in.ts @@ -285,9 +285,14 @@ export class LogInPage extends LiteElement { >${msg("Log in")} ${this.formState.value === "backendInitializing" - ? html`

- ${msg("Please wait while the backend initializes")} -

` + ? html`
+ 
 + ${msg( + "Please wait while the backend initializes" + )} +
` : ""} `; From 196b26c60efecf6f7ad165a929684af0d6f07d58 Mon Sep 17 00:00:00 2001 From: Anish Lakhwara Date: Wed, 2 Aug 2023 17:21:36 -0700 Subject: [PATCH 06/10] fix: center text --- frontend/src/pages/log-in.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts index a09e458e..50fa70cf 100644 --- a/frontend/src/pages/log-in.ts +++ b/frontend/src/pages/log-in.ts @@ -287,7 +287,7 @@ export class LogInPage extends LiteElement { ${this.formState.value === "backendInitializing" ? html`

 - ${msg( "Please wait while the backend initializes" )} Date: Wed, 2 Aug 2023 17:26:26 -0700 Subject: [PATCH 07/10] fix: clear timeout on disconnect callback --- frontend/src/pages/log-in.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts index 50fa70cf..f2e46f28 100644 --- a/frontend/src/pages/log-in.ts +++ b/frontend/src/pages/log-in.ts @@ -152,6 +152,7 @@ export class LogInPage extends LiteElement { @state() private formState = machine.initialState; + private timerId?: number; firstUpdated() { this.formStateService.subscribe((state) => { @@ -164,6 +165,7 @@ export class LogInPage extends LiteElement { disconnectedCallback() { this.formStateService.stop(); + window.clearTimeout(this.timeoutId); super.disconnectedCallback(); } @@ -289,7 +291,7 @@ export class LogInPage extends LiteElement { 
 ${msg( - "Please wait while the backend initializes" + "Please wait while Browsertrix Cloud is initializing" )}
` @@ -344,7 +346,7 @@ export class LogInPage extends LiteElement { this.formStateService.send("BACKEND_INITIALIZED"); } else { this.formStateService.send("BACKEND_NOT_INITIALIZED"); - setTimeout(() => this.checkBackendInitialized(), 5000); + this.timerId = setTimeout(() => this.checkBackendInitialized(), 5000); } } From 6ecfd8ec24bab159ec2cf5d06a2685a15c46522c Mon Sep 17 00:00:00 2001 From: Anish Lakhwara Date: Wed, 2 Aug 2023 17:28:07 -0700 Subject: [PATCH 08/10] fix: timerId not timeoutId --- frontend/src/pages/log-in.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts index f2e46f28..04e15ab4 100644 --- a/frontend/src/pages/log-in.ts +++ b/frontend/src/pages/log-in.ts @@ -165,7 +165,7 @@ export class LogInPage extends LiteElement { disconnectedCallback() { this.formStateService.stop(); - window.clearTimeout(this.timeoutId); + window.clearTimeout(this.timerId); super.disconnectedCallback(); } From 5ed2faaeccad39142ff64ceae185672249430069 Mon Sep 17 00:00:00 2001 From: Anish Lakhwara Date: Wed, 2 Aug 2023 17:31:01 -0700 Subject: [PATCH 09/10] fix: need to use `window.timeOut` to get a timerId back --- frontend/src/pages/log-in.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts index 04e15ab4..fd883b9f 100644 --- a/frontend/src/pages/log-in.ts +++ b/frontend/src/pages/log-in.ts @@ -346,7 +346,10 @@ export class LogInPage extends LiteElement { this.formStateService.send("BACKEND_INITIALIZED"); } else { this.formStateService.send("BACKEND_NOT_INITIALIZED"); - this.timerId = setTimeout(() => this.checkBackendInitialized(), 5000); + this.timerId = window.setTimeout( + () => this.checkBackendInitialized(), + 5000 + ); } } From fa58e771675d02238cbd7ab0bde636df9e54bcd9 Mon Sep 17 00:00:00 2001 From: Anish Lakhwara Date: Wed, 2 Aug 2023 17:34:09 -0700 Subject: [PATCH 10/10] fix: remove strange character? --- frontend/src/pages/log-in.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/pages/log-in.ts b/frontend/src/pages/log-in.ts index fd883b9f..78dff746 100644 --- a/frontend/src/pages/log-in.ts +++ b/frontend/src/pages/log-in.ts @@ -288,7 +288,6 @@ export class LogInPage extends LiteElement { > ${this.formState.value === "backendInitializing" ? html`
- 
 ${msg( "Please wait while Browsertrix Cloud is initializing"