Added Gitea oauth login
This commit is contained in:
@@ -4,6 +4,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
|
|||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
import Index from "./pages/Index";
|
import Index from "./pages/Index";
|
||||||
|
import GiteaOAuthCallback from "./pages/GiteaOAuthCallback";
|
||||||
import NotFound from "./pages/NotFound";
|
import NotFound from "./pages/NotFound";
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
@@ -16,6 +17,7 @@ const App = () => (
|
|||||||
<BrowserRouter basename="/admin">
|
<BrowserRouter basename="/admin">
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Index />} />
|
<Route path="/" element={<Index />} />
|
||||||
|
<Route path="/oauth/gitea/callback" element={<GiteaOAuthCallback />} />
|
||||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||||
<Route path="*" element={<NotFound />} />
|
<Route path="*" element={<NotFound />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
|
|||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { toast } from '@/hooks/use-toast';
|
import { toast } from '@/hooks/use-toast';
|
||||||
import { Lock } from 'lucide-react';
|
import { Lock, Github } from 'lucide-react';
|
||||||
|
|
||||||
interface LoginPageProps {
|
interface LoginPageProps {
|
||||||
onLogin: (token: string) => void;
|
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 (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
|
<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">
|
<Card className="w-full max-w-md shadow-lg">
|
||||||
@@ -91,6 +96,25 @@ const LoginPage = ({ onLogin }: LoginPageProps) => {
|
|||||||
{isLoading ? "Signing in..." : "Sign In"}
|
{isLoading ? "Signing in..." : "Sign In"}
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</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>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
79
src/pages/GiteaOAuthCallback.tsx
Normal file
79
src/pages/GiteaOAuthCallback.tsx
Normal file
@@ -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;
|
Reference in New Issue
Block a user