feat: cron done, admin unfinished

frontend/src/App.tsx

@@ -9,6 +9,9 @@ import { useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import { BlogViewer } from "./utils/BlogViewer";
 import { BlogList } from "./utils/BlogList";
+import { RequireAdmin } from "./utils/RouteGuard";
+import { AdminPage } from "./utils/AdminPage";
+import Unauthorized from "./utils/UnauthorizedPage";
 
 function App() {
   const [darkMode, setDarkMode] = useState(true);
@@ -25,6 +28,15 @@ function App() {
               <Route path="/blog/:slug" element={<BlogViewer />} />
               <Route path="/about" element={<About />} />
               <Route path="/contact" element={<Contact />} />
+              <Route
+                path="/admin"
+                element={
+                  <RequireAdmin>
+                    <AdminPage />
+                  </RequireAdmin>
+                }
+              />
+              <Route path="/unauthorized" element={<Unauthorized />} />
             </Routes>
           </div>
         </div>

frontend/src/helper/auth.ts

@@ -0,0 +1,11 @@
+export const getCurrentUser = async () => {
+  // Simulate fetching user info from an API
+  return new Promise<{ username: string; isAdmin: boolean }>((resolve) => {
+    setTimeout(() => {
+      resolve({
+        username: "john_doe",
+        isAdmin: true, // change to false to simulate non-admin
+      });
+    }, 200);
+  });
+};

frontend/src/utils/AdminPage.tsx

@@ -0,0 +1,3 @@
+export function AdminPage() {
+  return <div>{"adminpage"}</div>;
+}

frontend/src/utils/RouteGuard.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState, type JSX } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+import { getCurrentUser } from "../helper/auth";
+
+export const RequireAdmin = ({ children }: { children: JSX.Element }) => {
+  const [isAdmin, setIsAdmin] = useState<boolean | null>(null);
+  const [loading, setLoading] = useState(true);
+  const location = useLocation();
+
+  useEffect(() => {
+    const checkAdmin = async () => {
+      const user = await getCurrentUser();
+      setIsAdmin(user.isAdmin);
+      setLoading(false);
+    };
+    checkAdmin();
+  }, []);
+
+  if (loading) return <div>Checking permissions...</div>;
+
+  if (!isAdmin) {
+    return <Navigate to="/unauthorized" state={{ from: location }} replace />;
+  }
+
+  return children;
+};

frontend/src/utils/UnauthorizedPage.tsx

@@ -0,0 +1,10 @@
+const Unauthorized = () => {
+  return (
+    <div className="p-4 text-red-600">
+      <h1 className="text-xl font-bold">403 - Unauthorized</h1>
+      <p>You do not have permission to view this page.</p>
+    </div>
+  );
+};
+
+export default Unauthorized;