98 lines
2.8 KiB
JavaScript
98 lines
2.8 KiB
JavaScript
import React from "react";
|
|
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
|
import App from "@/App";
|
|
import { ProtectedRoute, useAuth } from "@features/auth";
|
|
import { ComponentDemo, EditPosition } from "@/components";
|
|
|
|
// Simple login page component
|
|
const LoginPage = () => {
|
|
const { isAuthenticated, signinRedirect } = useAuth();
|
|
|
|
// Redirect to main app if already authenticated
|
|
if (isAuthenticated) {
|
|
return <Navigate to="/" replace />;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-screen bg-[#131215]">
|
|
<div className="text-center text-white mb-8">
|
|
<h1 className="text-3xl font-bold mb-4">App</h1>
|
|
<p className="text-[#adaab7] mb-8">
|
|
Please log in to access the application
|
|
</p>
|
|
<button
|
|
className="px-8 py-3 bg-[#653cee] text-white rounded-md hover:bg-[#5433c9]"
|
|
onClick={() => signinRedirect()}
|
|
>
|
|
Log In
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Callback page for handling authentication redirects
|
|
const CallbackPage = () => {
|
|
const { isLoading, isAuthenticated, error } = useAuth();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen bg-[#131215]">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#653cee]"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen bg-[#131215]">
|
|
<div className="text-center text-red-500">
|
|
<div className="text-xl mb-4">Authentication Error</div>
|
|
<div className="mb-4">{error.message}</div>
|
|
<button
|
|
className="mt-4 px-4 py-2 bg-[#653cee] text-white rounded-md"
|
|
onClick={() => (window.location.href = "/login")}
|
|
>
|
|
Return to Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Redirect to main app if authentication was successful
|
|
return <Navigate to="/" replace />;
|
|
};
|
|
|
|
// Main router component
|
|
export const AppRouter = () => {
|
|
return (
|
|
<BrowserRouter>
|
|
<Routes>
|
|
<Route path="/login" element={<LoginPage />} />
|
|
<Route path="/callback" element={<CallbackPage />} />
|
|
<Route path="/components" element={<ComponentDemo />} />
|
|
<Route
|
|
path="/edit-position"
|
|
element={
|
|
<div className="min-h-screen">
|
|
<EditPosition
|
|
onSave={(data) => console.log("Saved:", data)}
|
|
onCancel={() => window.history.back()}
|
|
/>
|
|
</div>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/*"
|
|
element={
|
|
<ProtectedRoute>
|
|
<App />
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
</Routes>
|
|
</BrowserRouter>
|
|
);
|
|
};
|