From 7cbdb09939737d755f710e9ccfb5f9134685d56f Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Mon, 11 Nov 2024 10:45:32 +0100 Subject: [PATCH] cleanup loading states --- .../src/components/change-password-form.tsx | 27 ++++++------ apps/login/src/components/idp-signin.tsx | 5 ++- apps/login/src/components/invite-form.tsx | 15 ++++--- apps/login/src/components/login-otp.tsx | 38 ++++++++-------- apps/login/src/components/login-passkey.tsx | 43 +++++++++++-------- apps/login/src/components/password-form.tsx | 29 +++++++------ .../login/src/components/register-passkey.tsx | 22 ++++++---- apps/login/src/components/register-u2f.tsx | 28 ++++++------ apps/login/src/components/session-item.tsx | 11 +++-- .../src/components/set-password-form.tsx | 30 +++++++------ .../components/set-register-password-form.tsx | 12 +++--- .../login/src/components/sign-in-with-idp.tsx | 12 +++--- apps/login/src/components/totp-register.tsx | 5 ++- apps/login/src/components/username-form.tsx | 12 +++--- apps/login/src/components/verify-form.tsx | 29 +++++++------ .../src/components/verify-redirect-button.tsx | 15 ++++--- 16 files changed, 186 insertions(+), 147 deletions(-) diff --git a/apps/login/src/components/change-password-form.tsx b/apps/login/src/components/change-password-form.tsx index 5fc9368acef..b203019a7ab 100644 --- a/apps/login/src/components/change-password-form.tsx +++ b/apps/login/src/components/change-password-form.tsx @@ -61,11 +61,13 @@ export function ChangePasswordForm({ const changeResponse = await setMyPassword({ sessionId: sessionId, password: values.password, - }).catch(() => { - setError("Could not change password"); - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not change password"); + }) + .finally(() => { + setLoading(false); + }); if (changeResponse && "error" in changeResponse) { setError(changeResponse.error); @@ -86,13 +88,14 @@ export function ChangePasswordForm({ password: { password: values.password }, }), authRequestId, - }).catch(() => { - setLoading(false); - setError("Could not verify password"); - return; - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not verify password"); + return; + }) + .finally(() => { + setLoading(false); + }); if ( passwordResponse && diff --git a/apps/login/src/components/idp-signin.tsx b/apps/login/src/components/idp-signin.tsx index ebee13ae271..dfed09839f4 100644 --- a/apps/login/src/components/idp-signin.tsx +++ b/apps/login/src/components/idp-signin.tsx @@ -60,9 +60,10 @@ export function IdpSignin({ .catch((error) => { setError(error.message); return; + }) + .finally(() => { + setLoading(false); }); - - setLoading(false); }, []); return ( diff --git a/apps/login/src/components/invite-form.tsx b/apps/login/src/components/invite-form.tsx index a8a84e8150e..35c0bec0280 100644 --- a/apps/login/src/components/invite-form.tsx +++ b/apps/login/src/components/invite-form.tsx @@ -55,13 +55,14 @@ export function InviteForm({ firstName: values.firstname, lastName: values.lastname, organization: organization, - }).catch(() => { - setError("Could not create invitation Code"); - setLoading(false); - return; - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not create invitation Code"); + return; + }) + .finally(() => { + setLoading(false); + }); if (response && typeof response === "object" && "error" in response) { setError(response.error); diff --git a/apps/login/src/components/login-otp.tsx b/apps/login/src/components/login-otp.tsx index 3d0d190045a..7dfed9bfd16 100644 --- a/apps/login/src/components/login-otp.tsx +++ b/apps/login/src/components/login-otp.tsx @@ -57,11 +57,10 @@ export function LoginOTP({ initialized.current = true; setLoading(true); updateSessionForOTPChallenge() - .then((response) => { - setLoading(false); - }) .catch((error) => { setError(error); + }) + .finally(() => { setLoading(false); }); } @@ -89,12 +88,13 @@ export function LoginOTP({ organization, challenges, authRequestId, - }).catch((error) => { - setError(error.message ?? "Could not request OTP challenge"); - setLoading(false); - }); - - setLoading(false); + }) + .catch((error) => { + setError(error.message ?? "Could not request OTP challenge"); + }) + .finally(() => { + setLoading(false); + }); return response; } @@ -139,13 +139,14 @@ export function LoginOTP({ organization, checks, authRequestId, - }).catch(() => { - setError("Could not verify OTP code"); - setLoading(false); - return; - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not verify OTP code"); + return; + }) + .finally(() => { + setLoading(false); + }); return response; } @@ -206,11 +207,10 @@ export function LoginOTP({ onClick={() => { setLoading(true); updateSessionForOTPChallenge() - .then((response) => { - setLoading(false); - }) .catch((error) => { setError(error); + }) + .finally(() => { setLoading(false); }); }} diff --git a/apps/login/src/components/login-passkey.tsx b/apps/login/src/components/login-passkey.tsx index 54898ce8358..db4246eda02 100644 --- a/apps/login/src/components/login-passkey.tsx +++ b/apps/login/src/components/login-passkey.tsx @@ -61,16 +61,17 @@ export function LoginPasskey({ } return submitLoginAndContinue(pK) - .then(() => { - setLoading(false); - }) .catch((error) => { setError(error); + }) + .finally(() => { setLoading(false); }); }) .catch((error) => { setError(error); + }) + .finally(() => { setLoading(false); }); } @@ -94,10 +95,13 @@ export function LoginPasskey({ }, }), authRequestId, - }).catch(() => { - setError("Could not request passkey challenge"); - }); - setLoading(false); + }) + .catch(() => { + setError("Could not request passkey challenge"); + }) + .finally(() => { + setLoading(false); + }); return session; } @@ -112,11 +116,13 @@ export function LoginPasskey({ webAuthN: { credentialAssertionData: data }, } as Checks, authRequestId, - }).catch(() => { - setError("Could not verify passkey"); - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not verify passkey"); + }) + .finally(() => { + setLoading(false); + }); return response; } @@ -243,7 +249,9 @@ export function LoginPasskey({ variant={ButtonVariants.Primary} disabled={loading} onClick={async () => { - const response = await updateSessionForChallenge(); + const response = await updateSessionForChallenge().finally(() => { + setLoading(false); + }); const pK = response?.challenges?.webAuthN?.publicKeyCredentialRequestOptions @@ -251,15 +259,16 @@ export function LoginPasskey({ if (!pK) { setError("Could not request passkey challenge"); - setLoading(false); + return; } + setLoading(true); + return submitLoginAndContinue(pK) - .then(() => { - setLoading(false); - }) .catch((error) => { setError(error); + }) + .finally(() => { setLoading(false); }); }} diff --git a/apps/login/src/components/password-form.tsx b/apps/login/src/components/password-form.tsx index 98b0ec853ff..1f0e504af33 100644 --- a/apps/login/src/components/password-form.tsx +++ b/apps/login/src/components/password-form.tsx @@ -60,13 +60,14 @@ export function PasswordForm({ }), authRequestId, forceMfa: loginSettings?.forceMfa, - }).catch(() => { - setLoading(false); - setError("Could not verify password"); - return; - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not verify password"); + return; + }) + .finally(() => { + setLoading(false); + }); if (response && "error" in response && response.error) { setError(response.error); @@ -83,12 +84,14 @@ export function PasswordForm({ const response = await resetPassword({ loginName, organization, - }).catch(() => { - setError("Could not reset password"); - return; - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not reset password"); + return; + }) + .finally(() => { + setLoading(false); + }); if (response && "error" in response) { setError(response.error); diff --git a/apps/login/src/components/register-passkey.tsx b/apps/login/src/components/register-passkey.tsx index e067b387434..3ddc0ddc90a 100644 --- a/apps/login/src/components/register-passkey.tsx +++ b/apps/login/src/components/register-passkey.tsx @@ -50,11 +50,14 @@ export function RegisterPasskey({ passkeyName, publicKeyCredential, sessionId, - }).catch(() => { - setError("Could not verify Passkey"); - }); + }) + .catch(() => { + setError("Could not verify Passkey"); + }) + .finally(() => { + setLoading(false); + }); - setLoading(false); return response; } @@ -62,10 +65,13 @@ export function RegisterPasskey({ setLoading(true); const resp = await registerPasskeyLink({ sessionId, - }).catch(() => { - setError("Could not register passkey"); - }); - setLoading(false); + }) + .catch(() => { + setError("Could not register passkey"); + }) + .finally(() => { + setLoading(false); + }); if (!resp) { setError("An error on registering passkey"); diff --git a/apps/login/src/components/register-u2f.tsx b/apps/login/src/components/register-u2f.tsx index 2f294ea070e..ea0cdc1f583 100644 --- a/apps/login/src/components/register-u2f.tsx +++ b/apps/login/src/components/register-u2f.tsx @@ -47,16 +47,18 @@ export function RegisterU2f({ passkeyName, publicKeyCredential, sessionId, - }).catch(() => { - setError("An error on verifying passkey occurred"); - }); + }) + .catch(() => { + setError("An error on verifying passkey occurred"); + }) + .finally(() => { + setLoading(false); + }); if (response && "error" in response && response?.error) { setError(response?.error); } - setLoading(false); - return response; } @@ -65,11 +67,13 @@ export function RegisterU2f({ setLoading(true); const response = await addU2F({ sessionId, - }).catch(() => { - setError("An error on registering passkey"); - }); - - setLoading(false); + }) + .catch(() => { + setError("An error on registering passkey"); + }) + .finally(() => { + setLoading(false); + }); if (response && "error" in response && response?.error) { setError(response?.error); @@ -115,7 +119,6 @@ export function RegisterU2f({ !(resp as any).rawId ) { setError("An error on registering passkey"); - setLoading(false); return; } @@ -139,7 +142,6 @@ export function RegisterU2f({ const submitResponse = await submitVerify(u2fId, "", data, sessionId); if (!submitResponse) { - setLoading(false); setError("An error on verifying passkey"); return; } @@ -177,8 +179,6 @@ export function RegisterU2f({ router.push(urlToContinue); } - - setLoading(false); } return ( diff --git a/apps/login/src/components/session-item.tsx b/apps/login/src/components/session-item.tsx index a2abfd897a6..69ddedf19f6 100644 --- a/apps/login/src/components/session-item.tsx +++ b/apps/login/src/components/session-item.tsx @@ -40,11 +40,14 @@ export function SessionItem({ setLoading(true); const response = await cleanupSession({ sessionId: id, - }).catch((error) => { - setError(error.message); - }); + }) + .catch((error) => { + setError(error.message); + }) + .finally(() => { + setLoading(false); + }); - setLoading(false); return response; } diff --git a/apps/login/src/components/set-password-form.tsx b/apps/login/src/components/set-password-form.tsx index 1fb3acda90d..7bd0b7c488a 100644 --- a/apps/login/src/components/set-password-form.tsx +++ b/apps/login/src/components/set-password-form.tsx @@ -71,13 +71,14 @@ export function SetPasswordForm({ payload = { ...payload, code: values.code }; } - const changeResponse = await changePassword(payload).catch(() => { - setError("Could not set password"); - setLoading(false); - return; - }); - - setLoading(false); + const changeResponse = await changePassword(payload) + .catch(() => { + setError("Could not set password"); + return; + }) + .finally(() => { + setLoading(false); + }); if (changeResponse && "error" in changeResponse) { setError(changeResponse.error); @@ -107,13 +108,14 @@ export function SetPasswordForm({ password: { password: values.password }, }), authRequestId, - }).catch((error) => { - setLoading(false); - setError("Could not verify password"); - return; - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not verify password"); + return; + }) + .finally(() => { + setLoading(false); + }); if ( passwordResponse && diff --git a/apps/login/src/components/set-register-password-form.tsx b/apps/login/src/components/set-register-password-form.tsx index b46711a1b7a..22002f5e94b 100644 --- a/apps/login/src/components/set-register-password-form.tsx +++ b/apps/login/src/components/set-register-password-form.tsx @@ -65,11 +65,13 @@ export function SetRegisterPasswordForm({ organization: organization, authRequestId: authRequestId, password: values.password, - }).catch(() => { - setError("Could not register user"); - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not register user"); + }) + .finally(() => { + setLoading(false); + }); if (response && "error" in response) { setError(response.error); diff --git a/apps/login/src/components/sign-in-with-idp.tsx b/apps/login/src/components/sign-in-with-idp.tsx index df5b13afe4f..90520d449bc 100644 --- a/apps/login/src/components/sign-in-with-idp.tsx +++ b/apps/login/src/components/sign-in-with-idp.tsx @@ -53,11 +53,13 @@ export function SignInWithIdp({ `${host}/idp/${provider}/success?` + new URLSearchParams(params), failureUrl: `${host}/idp/${provider}/failure?` + new URLSearchParams(params), - }).catch(() => { - setError("Could not start IDP flow"); - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not start IDP flow"); + }) + .finally(() => { + setLoading(false); + }); return response; } diff --git a/apps/login/src/components/totp-register.tsx b/apps/login/src/components/totp-register.tsx index 450cb5bfa76..c3f9b03e2ad 100644 --- a/apps/login/src/components/totp-register.tsx +++ b/apps/login/src/components/totp-register.tsx @@ -51,7 +51,6 @@ export function TotpRegister({ setLoading(true); return verifyTOTP(values.code, loginName, organization) .then((response) => { - setLoading(false); // if attribute is set, validate MFA after it is setup, otherwise proceed as usual (when mfa is enforced to login) if (checkAfter) { const params = new URLSearchParams({}); @@ -96,8 +95,10 @@ export function TotpRegister({ } }) .catch((e) => { - setLoading(false); setError(e.message); + }) + .finally(() => { + setLoading(false); }); } diff --git a/apps/login/src/components/username-form.tsx b/apps/login/src/components/username-form.tsx index 80780a8ede1..cd1732210d9 100644 --- a/apps/login/src/components/username-form.tsx +++ b/apps/login/src/components/username-form.tsx @@ -52,11 +52,13 @@ export function UsernameForm({ loginName: values.loginName, organization, authRequestId, - }).catch(() => { - setError("An internal error occurred"); - }); - - setLoading(false); + }) + .catch(() => { + setError("An internal error occurred"); + }) + .finally(() => { + setLoading(false); + }); if (res?.error) { setError(res.error); diff --git a/apps/login/src/components/verify-form.tsx b/apps/login/src/components/verify-form.tsx index b43c0eaa42e..54976ac32a7 100644 --- a/apps/login/src/components/verify-form.tsx +++ b/apps/login/src/components/verify-form.tsx @@ -41,13 +41,15 @@ export function VerifyForm({ userId, code, isInvite, params }: Props) { const response = await resendVerification({ userId, isInvite: isInvite, - }).catch(() => { - setError("Could not resend email"); - setLoading(false); - return; - }); + }) + .catch(() => { + setError("Could not resend email"); + return; + }) + .finally(() => { + setLoading(false); + }); - setLoading(false); return response; } @@ -61,13 +63,14 @@ export function VerifyForm({ userId, code, isInvite, params }: Props) { code: value.code, userId, isInvite: isInvite, - }).catch((error) => { - setError("Could not verify user"); - setLoading(false); - return; - }); - - setLoading(false); + }) + .catch(() => { + setError("Could not verify user"); + return; + }) + .finally(() => { + setLoading(false); + }); }, [isInvite, userId], ); diff --git a/apps/login/src/components/verify-redirect-button.tsx b/apps/login/src/components/verify-redirect-button.tsx index 0c09c835d8f..4fe313cd1d7 100644 --- a/apps/login/src/components/verify-redirect-button.tsx +++ b/apps/login/src/components/verify-redirect-button.tsx @@ -29,13 +29,14 @@ export function VerifyRedirectButton({ await sendVerificationRedirectWithoutCheck({ userId, authRequestId, - }).catch((error) => { - setError("Could not verify user"); - setLoading(false); - return; - }); - - setLoading(false); + }) + .catch((error) => { + setError("Could not verify user"); + return; + }) + .finally(() => { + setLoading(false); + }); } return (