Added Gitea oauth login

src/App.tsx

@@ -4,6 +4,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
+import GiteaOAuthCallback from "./pages/GiteaOAuthCallback";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -16,6 +17,7 @@ const App = () => (
       <BrowserRouter basename="/admin">
         <Routes>
           <Route path="/" element={<Index />} />
+          <Route path="/oauth/gitea/callback" element={<GiteaOAuthCallback />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

src/components/AdminDashboard.tsx

@@ -29,19 +29,26 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
   // Get current media item
   const currentMedia = mediaQueue.length > 0 ? mediaQueue[0] : null;
 
-  // Preload images
   useEffect(() => {
-    if (mediaQueue.length > 0) {
-      // Preload next images (up to 2)
-      mediaQueue.slice(1, 3).forEach(media => {
-        if (media.preview_url) {
-          const img = new Image();
-          img.src = media.preview_url;
-        }
-      });
-    }
+    // only preload if there are items after the current one
+    mediaQueue.slice(1, 5).forEach(media => {
+      if (!media.preview_url) return;
+
+      const img = new Image();
+      img.onload = () => {
+        // successful preload — nothing to do
+      };
+      img.onerror = () => {
+        // this media is broken even before we show it: remove it now
+        setMediaQueue(queue =>
+          queue.filter(item => item.id !== media.id)
+        );
+      };
+      img.src = media.preview_url;
+    });
   }, [mediaQueue]);
 
+
   const fetchMedia = async () => {
     setIsLoading(true);
     try {
@@ -94,10 +101,10 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
   // Fill the queue with initial media items
   const fillMediaQueue = async () => {
     // If queue is already being filled or has items, don't fetch more
-    if (isLoading || mediaQueue.length >= 3) return;
+    if (isLoading || mediaQueue.length >= 5) return;
 
     // Determine how many more items we need
-    const itemsNeeded = 3 - mediaQueue.length;
+    const itemsNeeded = 5 - mediaQueue.length;
 
     // Fetch the items one by one
     for (let i = 0; i < itemsNeeded; i++) {
@@ -110,6 +117,7 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
     fillMediaQueue();
   }, [mediaQueue.length]);
 
+
   const handleAction = async (action: 'approve' | 'reject') => {
     if (!currentMedia) return;
 
@@ -170,102 +178,112 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
-    {/* Header */}
-    <div className="bg-white shadow-sm border-b">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div className="flex justify-between items-center h-16">
-    <h1 className="text-xl font-semibold text-slate-800">Admin Dashboard</h1>
-    <Button
-    variant="outline"
-    onClick={onLogout}
-    className="flex items-center gap-2"
-    >
-    <LogOut className="w-4 h-4" />
-    Logout
-    </Button>
-    </div>
-    </div>
-    </div>
-
-    {/* Main Content */}
-    <div className="flex items-center justify-center min-h-[calc(100vh-4rem)] p-8">
-    <Card className="max-w-2xl w-full shadow-lg">
-    <CardContent className="p-8">
-    {isLoading && mediaQueue.length === 0 ? (
-      <div className="flex flex-col items-center justify-center py-16">
-      <Loader2 className="w-8 h-8 animate-spin text-slate-600 mb-4" />
-      <p className="text-slate-600">Loading media...</p>
-      </div>
-    ) : currentMedia ? (
-      <div className="space-y-6">
-      {/* Image */}
-      <div className="flex justify-center">
-      <img
-      src={currentMedia.preview_url}
-      alt="Media to review"
-      className="max-w-full max-h-96 rounded-lg shadow-md object-contain"
-      onError={(e) => {
-        // Fallback to remote URL if preview fails
-        const target = e.target as HTMLImageElement;
-        target.src = currentMedia.remote_url;
-      }}
-      />
-      </div>
-
-      {/* Media Info */}
-      <div className="text-center text-sm text-slate-600">
-      <p>Media ID: {currentMedia.id}</p>
-      <p>Post ID: {currentMedia.PostID}</p>
-      <p className="text-xs text-slate-400 mt-1">
-      {mediaQueue.length > 1 ? `${mediaQueue.length - 1} more item(s) pre-loaded` : 'Loading more items...'}
-      </p>
-      </div>
-
-      {/* Status Message */}
-      {statusMessage && (
-        <div className="text-center">
-        <p className="text-lg font-medium text-slate-700">{statusMessage}</p>
+      {/* Header */}
+      <div className="bg-white shadow-sm border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <h1 className="text-xl font-semibold text-slate-800">Admin Dashboard</h1>
+            <Button
+              variant="outline"
+              onClick={onLogout}
+              className="flex items-center gap-2"
+            >
+              <LogOut className="w-4 h-4" />
+              Logout
+            </Button>
+          </div>
         </div>
-      )}
+      </div>
 
-      {/* Action Buttons */}
-      <div className="flex gap-4 justify-center">
-      <Button
-      onClick={() => handleAction('reject')}
-      disabled={isProcessing}
-      variant="destructive"
-      className="flex items-center gap-2 px-8 py-3"
-      >
-      <X className="w-5 h-5" />
-      Reject
-      </Button>
-      <Button
-      onClick={() => handleAction('approve')}
-      disabled={isProcessing}
-      className="flex items-center gap-2 px-8 py-3 bg-green-600 hover:bg-green-700"
-      >
-      <Check className="w-5 h-5" />
-      Approve
-      </Button>
+      {/* Main Content */}
+      <div className="flex items-center justify-center min-h-[calc(100vh-4rem)] p-8">
+        <Card className="max-w-2xl w-full shadow-lg">
+          <CardContent className="p-8">
+            {isLoading && mediaQueue.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-16">
+                <Loader2 className="w-8 h-8 animate-spin text-slate-600 mb-4" />
+                <p className="text-slate-600">Loading media...</p>
+              </div>
+            ) : currentMedia ? (
+              <div className="space-y-6">
+                {/* Image */}
+                <div className="flex justify-center">
+                  <img
+                    src={currentMedia.preview_url}
+                    alt="Media to review"
+                    className="max-w-full max-h-96 … object-contain"
+                    onError={(e) => {
+                      const imgEl = e.currentTarget;
+                      if (!imgEl.dataset.fallbackTried) {
+                        imgEl.dataset.fallbackTried = 'true';
+                        imgEl.src = currentMedia.remote_url;
+                      } else {
+                        // both preview AND remote have failed — drop it
+                        setMediaQueue(queue =>
+                          queue.filter(item => item.id !== currentMedia.id)
+                        );
+                      }
+                    }}
+                  />
+
+
+                </div>
+
+                {/* Media Info */}
+                <div className="text-center text-sm text-slate-600">
+                  <p>Media ID: {currentMedia.id}</p>
+                  <p>Post ID: {currentMedia.PostID}</p>
+                  <p className="text-xs text-slate-400 mt-1">
+                    {mediaQueue.length > 1 ? `${mediaQueue.length - 1} more item(s) pre-loaded` : 'Loading more items...'}
+                  </p>
+                </div>
+
+                {/* Status Message */}
+                {statusMessage && (
+                  <div className="text-center">
+                    <p className="text-lg font-medium text-slate-700">{statusMessage}</p>
+                  </div>
+                )}
+
+                {/* Action Buttons */}
+                <div className="flex gap-4 justify-center">
+                  <Button
+                    onClick={() => handleAction('reject')}
+                    disabled={isProcessing}
+                    variant="destructive"
+                    className="flex items-center gap-2 px-8 py-3"
+                  >
+                    <X className="w-5 h-5" />
+                    Reject
+                  </Button>
+                  <Button
+                    onClick={() => handleAction('approve')}
+                    disabled={isProcessing}
+                    className="flex items-center gap-2 px-8 py-3 bg-green-600 hover:bg-green-700"
+                  >
+                    <Check className="w-5 h-5" />
+                    Approve
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div className="text-center py-16">
+                <p className="text-lg text-slate-600">No media available for review</p>
+                <Button
+                  onClick={fillMediaQueue}
+                  className="mt-4"
+                  variant="outline"
+                >
+                  Refresh
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
       </div>
-      </div>
-    ) : (
-      <div className="text-center py-16">
-      <p className="text-lg text-slate-600">No media available for review</p>
-      <Button
-      onClick={fillMediaQueue}
-      className="mt-4"
-      variant="outline"
-      >
-      Refresh
-      </Button>
-      </div>
-    )}
-    </CardContent>
-    </Card>
-    </div>
     </div>
   );
 };
 
 export default AdminDashboard;
+

src/components/LoginPage.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { toast } from '@/hooks/use-toast';
-import { Lock } from 'lucide-react';
+import { Lock, Github } from 'lucide-react';
 
 interface LoginPageProps {
   onLogin: (token: string) => void;
@@ -62,6 +62,11 @@ const LoginPage = ({ onLogin }: LoginPageProps) => {
     }
   };
 
+  const handleGiteaLogin = () => {
+    // Redirect to the Gitea OAuth endpoint
+    window.location.href = '/admin/api/login/oauth/gitea';
+  };
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
       <Card className="w-full max-w-md shadow-lg">
@@ -91,6 +96,25 @@ const LoginPage = ({ onLogin }: LoginPageProps) => {
               {isLoading ? "Signing in..." : "Sign In"}
             </Button>
           </form>
+          
+          <div className="relative my-6">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-300"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-white text-gray-500">Or continue with</span>
+            </div>
+          </div>
+          
+          <Button
+            type="button"
+            onClick={handleGiteaLogin}
+            className="w-full h-12 text-base"
+            variant="outline"
+          >
+            <Github className="w-5 h-5 mr-2" />
+            Login with Gitea
+          </Button>
         </CardContent>
       </Card>
     </div>

src/pages/GiteaOAuthCallback.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { toast } from '@/hooks/use-toast';
+
+const GiteaOAuthCallback = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    const handleOAuthCallback = async () => {
+      // Get the code from the URL parameters
+      const code = searchParams.get('code');
+      
+      if (!code) {
+        toast({
+          title: "Error",
+          description: "No authorization code received from Gitea",
+          variant: "destructive",
+        });
+        navigate('/');
+        return;
+      }
+
+      try {
+        // Send the code to our backend to exchange for a JWT token
+        const response = await fetch('/admin/api/login/oauth/gitea/final', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ code }),
+        });
+
+        const data = await response.json();
+
+        if (response.ok && data.token) {
+          // Store the token in localStorage
+          localStorage.setItem('adminToken', data.token);
+          
+          toast({
+            title: "Success",
+            description: data.message || "Login successful",
+          });
+          
+          // Redirect to the admin dashboard
+          window.location.href = '/admin';
+        } else {
+          toast({
+            title: "Error",
+            description: data.error || "Login failed",
+            variant: "destructive",
+          });
+          navigate('/');
+        }
+      } catch (error) {
+        toast({
+          title: "Error",
+          description: "Network error. Please try again.",
+          variant: "destructive",
+        });
+        navigate('/');
+      }
+    };
+
+    handleOAuthCallback();
+  }, [navigate, searchParams]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
+      <div className="text-center">
+        <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-slate-600 mb-4"></div>
+        <h2 className="text-2xl font-semibold text-slate-800">Processing Gitea Login</h2>
+        <p className="text-slate-600 mt-2">Please wait while we complete your authentication...</p>
+      </div>
+    </div>
+  );
+};
+
+export default GiteaOAuthCallback;