fix: fix loading states in forms

frontend/src/index.css

@@ -136,7 +136,7 @@ h4 {
 }
 
 p {
-  @apply leading-7 [&:not(:first-child)]:mt-6;
+  @apply leading-6 [&:not(:first-child)]:mt-6;
 }
 
 blockquote {

frontend/src/pages/continue-page.tsx

@@ -12,6 +12,7 @@ import { isValidUrl } from "@/lib/utils";
 import { Trans, useTranslation } from "react-i18next";
 import { Navigate, useLocation, useNavigate } from "react-router";
 import DOMPurify from "dompurify";
+import { useState } from "react";
 
 export const ContinuePage = () => {
   const { isLoggedIn } = useUserContext();
@@ -22,6 +23,7 @@ export const ContinuePage = () => {
 
   const { domain, disableContinue } = useAppContext();
   const { search } = useLocation();
+  const [loading, setLoading] = useState(false);
 
   const searchParams = new URLSearchParams(search);
   const redirectURI = searchParams.get("redirect_uri");
@@ -34,10 +36,15 @@ export const ContinuePage = () => {
     return <Navigate to="/logout" />;
   }
 
-  if (disableContinue) {
+  const handleRedirect = () => {
+    setLoading(true);
     window.location.href = DOMPurify.sanitize(redirectURI);
   }
 
+  if (disableContinue) {
+    handleRedirect();
+  }
+
   const { t } = useTranslation();
   const navigate = useNavigate();
 
@@ -63,14 +70,13 @@ export const ContinuePage = () => {
         </CardHeader>
         <CardFooter className="flex flex-col items-stretch gap-2">
           <Button
-            onClick={() =>
-              (window.location.href = DOMPurify.sanitize(redirectURI))
-            }
+            onClick={handleRedirect}
+            loading={loading}
             variant="destructive"
           >
             {t("continueTitle")}
           </Button>
-          <Button onClick={() => navigate("/logout")} variant="outline">
+          <Button onClick={() => navigate("/logout")} variant="outline" disabled={loading}>
             {t("cancelTitle")}
           </Button>
         </CardFooter>
@@ -97,14 +103,13 @@ export const ContinuePage = () => {
         </CardHeader>
         <CardFooter className="flex flex-col items-stretch gap-2">
           <Button
-            onClick={() =>
-              (window.location.href = DOMPurify.sanitize(redirectURI))
-            }
+            onClick={handleRedirect}
+            loading={loading}
             variant="warning"
           >
             {t("continueTitle")}
           </Button>
-          <Button onClick={() => navigate("/logout")} variant="outline">
+          <Button onClick={() => navigate("/logout")} variant="outline" disabled={loading}>
             {t("cancelTitle")}
           </Button>
         </CardFooter>
@@ -120,9 +125,8 @@ export const ContinuePage = () => {
       </CardHeader>
       <CardFooter className="flex flex-col items-stretch">
         <Button
-          onClick={() =>
-            (window.location.href = DOMPurify.sanitize(redirectURI))
-          }
+          onClick={handleRedirect}
+          loading={loading}
         >
           {t("continueTitle")}
         </Button>

frontend/src/pages/login-page.tsx

@@ -126,6 +126,8 @@ export const LoginPage = () => {
                 icon={<GoogleIcon />}
                 className="w-full"
                 onClick={() => oauthMutation.mutate("google")}
+                loading={oauthMutation.isPending && oauthMutation.variables === "google"}
+                disabled={oauthMutation.isPending || loginMutation.isPending}
               />
             )}
             {configuredProviders.includes("github") && (
@@ -134,6 +136,8 @@ export const LoginPage = () => {
                 icon={<GithubIcon />}
                 className="w-full"
                 onClick={() => oauthMutation.mutate("github")}
+                loading={oauthMutation.isPending && oauthMutation.variables === "github"}
+                disabled={oauthMutation.isPending || loginMutation.isPending}
               />
             )}
             {configuredProviders.includes("generic") && (
@@ -142,6 +146,8 @@ export const LoginPage = () => {
                 icon={<GenericIcon />}
                 className="w-full"
                 onClick={() => oauthMutation.mutate("generic")}
+                loading={oauthMutation.isPending && oauthMutation.variables === "generic"}
+                disabled={oauthMutation.isPending || loginMutation.isPending}
               />
             )}
           </div>
@@ -152,7 +158,7 @@ export const LoginPage = () => {
         {userAuthConfigured && (
           <LoginForm
             onSubmit={(values) => loginMutation.mutate(values)}
-            loading={loginMutation.isPending}
+            loading={loginMutation.isPending || oauthMutation.isPending}
           />
         )}
         {configuredProviders.length == 0 && (

frontend/src/pages/not-found-page.tsx

@@ -6,12 +6,19 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
 
 export const NotFoundPage = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+
+  const handleRedirect = () => {
+    setLoading(true);
+    navigate("/");
+  };
 
   return (
     <Card className="min-w-xs sm:min-w-sm">
@@ -20,7 +27,7 @@ export const NotFoundPage = () => {
         <CardDescription>{t("notFoundSubtitle")}</CardDescription>
       </CardHeader>
       <CardFooter className="flex flex-col items-stretch">
-        <Button onClick={() => navigate("/")}>{t("notFoundButton")}</Button>
+        <Button onClick={handleRedirect} loading={loading}>{t("notFoundButton")}</Button>
       </CardFooter>
     </Card>
   );

frontend/src/pages/totp-page.tsx

@@ -8,18 +8,24 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { useUserContext } from "@/context/user-context";
 import { TotpSchema } from "@/schemas/totp-schema";
 import { useMutation } from "@tanstack/react-query";
 import axios from "axios";
 import { useId } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation, useNavigate } from "react-router";
+import { Navigate, useLocation } from "react-router";
 import { toast } from "sonner";
 
 export const TotpPage = () => {
+  const { totpPending } = useUserContext();
+
+  if (!totpPending) {
+    return <Navigate to="/" />;
+  }
+
   const { t } = useTranslation();
   const { search } = useLocation();
-  const navigate = useNavigate();
   const formId = useId();
 
   const searchParams = new URLSearchParams(search);
@@ -34,7 +40,7 @@ export const TotpPage = () => {
       });
 
       setTimeout(() => {
-        navigate(
+        window.location.replace(
           `/continue?redirect_uri=${encodeURIComponent(redirectUri ?? "")}`,
         );
       }, 500);

frontend/src/pages/unauthorized-page.tsx

@@ -6,6 +6,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Navigate, useLocation, useNavigate } from "react-router";
 
@@ -23,6 +24,12 @@ export const UnauthorizedPage = () => {
 
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+
+  const handleRedirect = () => {
+    setLoading(true);
+    navigate("/login");
+  };
 
   let i18nKey = "unauthorizedLoginSubtitle";
 
@@ -53,7 +60,7 @@ export const UnauthorizedPage = () => {
         </CardDescription>
       </CardHeader>
       <CardFooter className="flex flex-col items-stretch">
-        <Button onClick={() => navigate("/login")}>
+        <Button onClick={handleRedirect} loading={loading}>
           {t("unauthorizedButton")}
         </Button>
       </CardFooter>