♻️ Refactor and tweaks, rename UserCreateOpen to UserRegister and others (#1143)

frontend/src/hooks/useAuth.ts

@@ -1,8 +1,10 @@
 import { useNavigate } from "@tanstack/react-router"
-import { useQuery } from "react-query"
+import { useState } from "react"
+import { useMutation, useQuery } from "react-query"
 
 import {
   type Body_login_login_access_token as AccessToken,
+  type ApiError,
   LoginService,
   type UserOut,
   UsersService,
@@ -13,6 +15,7 @@ const isLoggedIn = () => {
 }
 
 const useAuth = () => {
+  const [error, setError] = useState<string | null>(null)
   const navigate = useNavigate()
   const { data: user, isLoading } = useQuery<UserOut | null, Error>(
     "currentUser",
@@ -27,15 +30,30 @@ const useAuth = () => {
       formData: data,
     })
     localStorage.setItem("access_token", response.access_token)
-    navigate({ to: "/" })
   }
 
+  const loginMutation = useMutation(login, {
+    onSuccess: () => {
+      navigate({ to: "/" })
+    },
+    onError: (err: ApiError) => {
+      const errDetail = err.body.detail
+      setError(errDetail)
+    },
+  })
+
   const logout = () => {
     localStorage.removeItem("access_token")
     navigate({ to: "/login" })
   }
 
-  return { login, logout, user, isLoading }
+  return {
+    loginMutation,
+    logout,
+    user,
+    isLoading,
+    error,
+  }
 }
 
 export { isLoggedIn }