slightly improve login / logout

frontend/src/components/header/index.tsx

@@ -50,6 +50,11 @@ export const Paths = () => {
 export const Header = () => {
   const user = useUser().data;
 
+  const logout = () => {
+    localStorage.removeItem("monitor-auth-token");
+    window.location.reload();
+  };
+
   return (
     <header className="sticky top-0 z-40 w-full border-b bg-background">
       <div className="container flex h-16 items-center space-x-4 justify-between sm:space-x-0">
@@ -69,7 +74,7 @@ export const Header = () => {
           )}
           <ThemeToggle />
           {user && (
-            <Button variant="ghost">
+            <Button variant="ghost" onClick={logout}>
               <LogOut className="w-4 h-4" />
             </Button>
           )}

frontend/src/hooks.ts

@@ -1,8 +1,9 @@
 import { Types } from "@monitor/client";
 import { client } from "./main";
-import { useQuery, useMutation } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useAtomValue, useSetAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import { useNavigate } from "react-router-dom";
 
 export const useRead = <T extends Types.ReadRequest>(req: T) =>
   useQuery([req], () => client.read(req));
@@ -15,10 +16,18 @@ export const useExecute = <T extends Types.ExecuteRequest>() =>
 
 export const useUser = () => useRead({ type: "GetUser", params: {} });
 
-export const useLogin = () =>
-  useMutation(client.login, {
-    onSuccess: (jwt) => localStorage.setItem("monitor-auth-token", jwt ?? ""),
+export const useLogin = () => {
+  const { refetch } = useUser();
+  const nav = useNavigate();
+
+  return useMutation(client.login, {
+    onSuccess: async (jwt) => {
+      await refetch();
+      localStorage.setItem("monitor-auth-token", jwt ?? "");
+      nav("/");
+    },
   });
+};
 
 // const recents_atom = atomWithStorage<
 //   { type: "Deployment" | "Build" | "Server"; id: string }[]

frontend/src/layouts/layout.tsx

@@ -1,5 +1,6 @@
 import { Header } from "@components/header";
 import { useUser } from "@hooks";
+import { Login } from "@pages/auth/login";
 import { Toaster } from "@ui/toast";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
@@ -8,11 +9,6 @@ export const Layout = () => {
   const path = useLocation().pathname;
   const nav = useNavigate();
   if (isError && !path.includes("login")) nav("/login");
-  // const navigate = useNavigate();
-  // const path = useLocation().pathname;
-  // if (isError) return navigate("/login");
-  // if ((isError && !path.includes("login")) || !path.includes("signup"))
-  //   navigate("/login");
 
   return (
     <>

frontend/src/pages/auth/login.tsx

@@ -4,13 +4,10 @@ import { Input } from "@ui/input";
 import { Label } from "@ui/label";
 import { useLogin } from "@hooks";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 export const Login = () => {
-  const { mutateAsync } = useLogin();
-  const nav = useNavigate();
+  const { mutate, isLoading } = useLogin();
   const [creds, set] = useState({ username: "", password: "" });
-  const login = async () => !!(await mutateAsync(creds)) && nav("/");
 
   return (
     <Card className="w-full max-w-[500px] place-self-center">
@@ -40,7 +37,11 @@ export const Login = () => {
           />
         </div>
         <div className="flex w-full justify-end">
-          <Button variant="outline" onClick={login}>
+          <Button
+            variant="outline"
+            onClick={() => mutate(creds)}
+            disabled={isLoading}
+          >
             Login
           </Button>
         </div>