48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { useAuth } from "../contexts/AuthContext";
|
|
|
|
interface PrivateRouteProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
|
|
const { user, loading, openAuthModal } = useAuth();
|
|
|
|
useEffect(() => {
|
|
if (!loading && !user) {
|
|
openAuthModal("login");
|
|
}
|
|
}, [loading, user, openAuthModal]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div
|
|
className="d-flex justify-content-center align-items-center"
|
|
style={{ minHeight: "80vh" }}
|
|
>
|
|
<div className="spinner-border text-primary" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return (
|
|
<div
|
|
className="d-flex justify-content-center align-items-center"
|
|
style={{ minHeight: "80vh" }}
|
|
>
|
|
<div className="text-center">
|
|
<i className="bi bi-lock display-1 text-muted mb-3"></i>
|
|
<h3>Please log in or sign up to access this page.</h3>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <>{children}</>;
|
|
};
|
|
|
|
export default PrivateRoute;
|