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) {
+    // 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;
 
@@ -203,13 +211,22 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
                   <img
                     src={currentMedia.preview_url}
                     alt="Media to review"
-      className="max-w-full max-h-96 rounded-lg shadow-md object-contain"
+                    className="max-w-full max-h-96 … object-contain"
                     onError={(e) => {
-        // Fallback to remote URL if preview fails
-        const target = e.target as HTMLImageElement;
-        target.src = currentMedia.remote_url;
+                      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 */}
@@ -269,3 +286,4 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
 };
 
 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;