feat: refactor frontend routing and authentication

- Changed root div ID from 'root' to 'app' in index.html.
- Updated package.json to include new dependencies for routing and state management.
- Removed App component and replaced it with a router setup in main.tsx.
- Added route definitions for login, about, and index pages.
- Implemented authentication logic using Zustand for state management.
- Created API client with Axios for handling requests and token management.
- Added CORS support in the backend API.
- Updated schema for login requests to use camelCase.
This commit is contained in:
2025-11-16 00:36:30 +01:00
parent f7a839b11a
commit 252491bd2f
19 changed files with 655 additions and 27 deletions

View File

@@ -0,0 +1,37 @@
import type { User } from "@/domain/types"
import { useAuthStorage } from "@/hooks/use-auth-storage"
import apiClient from "@/services/api-client"
import { useNavigate } from "@tanstack/react-router"
import { useMutation } from "@tanstack/react-query"
type LoginCredentials = {
usernameOrEmail: string
password: string
}
type LoginResponse = {
token: string
user: User
}
const login = async (credentials: LoginCredentials): Promise<LoginResponse> => {
const { data } = await apiClient.post('/auth/login', credentials)
return data
}
export const useLogin = () => {
const navigate = useNavigate()
const { setToken } = useAuthStorage()
return useMutation({
mutationFn: login,
onSuccess: (data) => {
setToken(data.token, data.user)
navigate({ to: '/' })
},
onError: (error) => {
console.error('Login failed:', error)
// TODO: Add user-facing error toast
},
})
}