feat: finalize username login

frontend/src/pages/logout-page.tsx

@@ -9,8 +9,11 @@ import {
 import { useAppContext } from "@/context/app-context";
 import { useUserContext } from "@/context/user-context";
 import { capitalize } from "@/lib/utils";
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
 import { Trans, useTranslation } from "react-i18next";
 import { Navigate } from "react-router";
+import { toast } from "sonner";
 
 export const LogoutPage = () => {
   const { provider, username, email, isLoggedIn } = useUserContext();
@@ -21,6 +24,25 @@ export const LogoutPage = () => {
     return <Navigate to="/login" />;
   }
 
+  const logoutMutation = useMutation({
+    mutationFn: () => axios.post("/api/logout"),
+    mutationKey: ["logout"],
+    onSuccess: () => {
+      toast.success(t("logoutSuccessTitle"), {
+        description: t("logoutSuccessSubtitle"),
+      });
+
+      setTimeout(async () => {
+        window.location.replace("/login");
+      }, 500);
+    },
+    onError: () => {
+      toast.error(t("logoutFailTitle"), {
+        description: t("logoutFailSubtitle"),
+      });
+    },
+  });
+
   return (
     <Card className="min-w-xs sm:min-w-sm">
       <CardHeader>
@@ -47,14 +69,19 @@ export const LogoutPage = () => {
                 code: <code />,
               }}
               values={{
-                username: username,
+                username,
               }}
             />
           )}
         </CardDescription>
       </CardHeader>
       <CardFooter className="flex flex-col items-stretch">
-        <Button>{t("logoutTitle")}</Button>
+        <Button
+          loading={logoutMutation.isPending}
+          onClick={() => logoutMutation.mutate()}
+        >
+          {t("logoutTitle")}
+        </Button>
       </CardFooter>
     </Card>
   );