File size: 2,836 Bytes
ad67a5f 4fd8339 1dff54f d7fe8fb 2952714 b5368e4 1dff54f 4fd8339 b5368e4 4fd8339 1dff54f ff097a7 4fd8339 2952714 ff097a7 4fd8339 ff097a7 4fd8339 ff097a7 d7fe8fb ff097a7 1dff54f 4fd8339 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | // frontend/src/App.jsx
import React, { useEffect } from "react";
import { Routes, Route, useNavigate, useSearchParams } from "react-router-dom";
import { AuthProvider, useAuth } from "./contexts/AuthContext";
import Layout from "./Layout";
import Dashboard from "./pages/Dashboard";
import History from "./pages/History";
import APIKeys from "./pages/APIKeys";
import ShareHandler from "./pages/ShareHandler";
import LoginForm from "./components/auth/LoginForm";
// Auth callback handler component
function AuthCallback() {
const [searchParams] = useSearchParams();
const { handleAuthCallback } = useAuth();
const navigate = useNavigate();
useEffect(() => {
const token = searchParams.get("token");
if (token) {
handleAuthCallback(token);
navigate("/");
} else {
navigate("/");
}
}, [searchParams, handleAuthCallback, navigate]);
return (
<div className="min-h-screen flex items-center justify-center">
<div className="text-center">
<p className="text-slate-600">Completing authentication...</p>
</div>
</div>
);
}
// Protected route wrapper
function ProtectedRoute({ children }) {
const { isAuthenticated, loading } = useAuth();
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="text-center">
<div className="h-16 w-16 mx-auto rounded-2xl bg-indigo-100 flex items-center justify-center mb-4 animate-pulse">
<div className="h-8 w-8 rounded-lg bg-indigo-600"></div>
</div>
<p className="text-slate-600">Loading...</p>
</div>
</div>
);
}
if (!isAuthenticated) {
return <LoginForm />;
}
return children;
}
function AppRoutes() {
return (
<Routes>
<Route
path="/auth/callback"
element={<AuthCallback />}
/>
<Route
path="/share/:token"
element={
<ProtectedRoute>
<ShareHandler />
</ProtectedRoute>
}
/>
<Route
path="/"
element={
<ProtectedRoute>
<Layout currentPageName="Dashboard">
<Dashboard />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/history"
element={
<ProtectedRoute>
<Layout currentPageName="History">
<History />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/api-keys"
element={
<ProtectedRoute>
<Layout currentPageName="API Keys">
<APIKeys />
</Layout>
</ProtectedRoute>
}
/>
</Routes>
);
}
export default function App() {
return (
<AuthProvider>
<AppRoutes />
</AuthProvider>
);
}
|