Auth: SignIn, SignUp (TODO: rewrite into react-hook-form)

This commit is contained in:
cracklesparkle
2024-06-24 17:06:41 +09:00
parent d6906503d1
commit 62695acf74
20 changed files with 617 additions and 71 deletions

View File

@ -1,4 +1,4 @@
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import { BrowserRouter as Router, Route, Routes, Navigate, redirect } from "react-router-dom"
import Main from "./pages/Main"
import Users from "./pages/Users"
import Roles from "./pages/Roles"
@ -7,27 +7,52 @@ import DashboardLayout from "./layouts/DashboardLayout"
import MainLayout from "./layouts/MainLayout"
import SignIn from "./pages/auth/SignIn"
import ApiTest from "./pages/ApiTest"
import SignUp from "./pages/auth/SignUp"
import { useAuthStore } from "./store/auth"
import { useEffect, useState } from "react"
import { CircularProgress } from "@mui/material"
function App() {
return (
<>
<Router>
<Routes>
<Route element={<MainLayout/>}>
<Route path="/auth/signin" element={<SignIn/>}/>
</Route>
const auth = useAuthStore()
const [isLoading, setIsLoading] = useState(true)
<Route element={<DashboardLayout />}>
<Route path="/" element={<Main />} />
<Route path="/user" element={<Users />} />
<Route path="/role" element={<Roles />} />
<Route path="/api-test" element={<ApiTest />} />
<Route path="*" element={<NotFound />} />
</Route>
</Routes>
</Router>
</>
)
useEffect(() => {
auth.initializeAuth()
}, [])
// Once auth is there, set loading to false and render the app
useEffect(() => {
if (auth) {
setIsLoading(false)
}
}, [auth])
if (isLoading) {
return (
<CircularProgress />
)
} else {
return (
<>
<Router>
<Routes>
<Route element={<MainLayout />}>
<Route path="/auth/signin" element={<SignIn />} />
<Route path="/auth/signup" element={<SignUp />} />
</Route>
<Route element={auth.isAuthenticated ? <DashboardLayout /> : <Navigate to={"/auth/signin"} />}>
<Route path="/" element={<Main />} />
<Route path="/user" element={<Users />} />
<Route path="/role" element={<Roles />} />
<Route path="/api-test" element={<ApiTest />} />
<Route path="*" element={<NotFound />} />
</Route>
</Routes>
</Router>
</>
)
}
}
export default App