mirror of
https://github.com/RayLabsHQ/gitea-mirror.git
synced 2025-12-06 11:36:44 +03:00
283 lines
12 KiB
TypeScript
283 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { useAuthMethods } from '@/hooks/useAuthMethods';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { authClient } from '@/lib/auth-client';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { toast, Toaster } from 'sonner';
|
|
import { showErrorToast } from '@/lib/utils';
|
|
import { Loader2, Mail, Globe } from 'lucide-react';
|
|
|
|
|
|
export function LoginForm() {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [ssoEmail, setSsoEmail] = useState('');
|
|
const { login } = useAuth();
|
|
const { authMethods, isLoading: isLoadingMethods } = useAuthMethods();
|
|
|
|
// Determine which tab to show by default
|
|
const getDefaultTab = () => {
|
|
if (authMethods.emailPassword) return 'email';
|
|
if (authMethods.sso.enabled) return 'sso';
|
|
return 'email'; // fallback
|
|
};
|
|
|
|
async function handleLogin(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
const form = e.currentTarget;
|
|
const formData = new FormData(form);
|
|
const email = formData.get('email') as string | null;
|
|
const password = formData.get('password') as string | null;
|
|
|
|
if (!email || !password) {
|
|
toast.error('Please enter both email and password');
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await login(email, password);
|
|
toast.success('Login successful!');
|
|
// Small delay before redirecting to see the success message
|
|
setTimeout(() => {
|
|
window.location.href = '/';
|
|
}, 1000);
|
|
} catch (error) {
|
|
showErrorToast(error, toast);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
async function handleSSOLogin(domain?: string, providerId?: string) {
|
|
setIsLoading(true);
|
|
try {
|
|
if (!domain && !ssoEmail) {
|
|
toast.error('Please enter your email or select a provider');
|
|
return;
|
|
}
|
|
|
|
const baseURL = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:4321';
|
|
await authClient.signIn.sso({
|
|
email: ssoEmail || undefined,
|
|
domain: domain,
|
|
providerId: providerId,
|
|
callbackURL: `${baseURL}/`,
|
|
scopes: ['openid', 'email', 'profile'], // TODO: This is not being respected by the SSO plugin.
|
|
});
|
|
} catch (error) {
|
|
showErrorToast(error, toast);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader className="text-center">
|
|
<div className="flex justify-center mb-4">
|
|
<img
|
|
src="/logo.png"
|
|
alt="Gitea Mirror Logo"
|
|
className="h-8 w-10"
|
|
/>
|
|
</div>
|
|
<CardTitle className="text-2xl">Gitea Mirror</CardTitle>
|
|
<CardDescription>
|
|
Log in to manage your GitHub to Gitea mirroring
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
{isLoadingMethods ? (
|
|
<CardContent>
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
</CardContent>
|
|
) : (
|
|
<>
|
|
{/* Show tabs only if multiple auth methods are available */}
|
|
{authMethods.sso.enabled && authMethods.emailPassword ? (
|
|
<Tabs defaultValue={getDefaultTab()} className="w-full">
|
|
<TabsList className="grid w-full grid-cols-2 mx-6" style={{ width: 'calc(100% - 3rem)' }}>
|
|
<TabsTrigger value="email">
|
|
<Mail className="h-4 w-4 mr-2" />
|
|
Email
|
|
</TabsTrigger>
|
|
<TabsTrigger value="sso">
|
|
<Globe className="h-4 w-4 mr-2" />
|
|
SSO
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="email">
|
|
<CardContent>
|
|
<form id="login-form" onSubmit={handleLogin}>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium mb-1">
|
|
Email
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
required
|
|
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
placeholder="Enter your email"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium mb-1">
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
required
|
|
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
placeholder="Enter your password"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button type="submit" form="login-form" className="w-full" disabled={isLoading}>
|
|
{isLoading ? 'Logging in...' : 'Log In'}
|
|
</Button>
|
|
</CardFooter>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="sso">
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{authMethods.sso.providers.length > 0 && (
|
|
<>
|
|
<div className="space-y-2">
|
|
<p className="text-sm text-muted-foreground text-center">
|
|
Sign in with your organization account
|
|
</p>
|
|
{authMethods.sso.providers.map(provider => (
|
|
<Button
|
|
key={provider.id}
|
|
variant="outline"
|
|
className="w-full"
|
|
onClick={() => handleSSOLogin(provider.domain, provider.providerId)}
|
|
disabled={isLoading}
|
|
>
|
|
<Globe className="h-4 w-4 mr-2" />
|
|
Sign in with {provider.domain}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<Separator />
|
|
</div>
|
|
<div className="relative flex justify-center text-xs uppercase">
|
|
<span className="bg-background px-2 text-muted-foreground">Or</span>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div>
|
|
<label htmlFor="sso-email" className="block text-sm font-medium mb-1">
|
|
Work Email
|
|
</label>
|
|
<input
|
|
id="sso-email"
|
|
type="email"
|
|
value={ssoEmail}
|
|
onChange={(e) => setSsoEmail(e.target.value)}
|
|
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
placeholder="Enter your work email"
|
|
disabled={isLoading}
|
|
/>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
We'll redirect you to your organization's SSO provider
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
className="w-full"
|
|
onClick={() => handleSSOLogin(undefined, undefined)}
|
|
disabled={isLoading || !ssoEmail}
|
|
>
|
|
{isLoading ? 'Redirecting...' : 'Continue with SSO'}
|
|
</Button>
|
|
</CardFooter>
|
|
</TabsContent>
|
|
</Tabs>
|
|
) : (
|
|
// Single auth method - show email/password only
|
|
<>
|
|
<CardContent>
|
|
<form id="login-form" onSubmit={handleLogin}>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium mb-1">
|
|
Email
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
required
|
|
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
placeholder="Enter your email"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium mb-1">
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
required
|
|
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
placeholder="Enter your password"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button type="submit" form="login-form" className="w-full" disabled={isLoading}>
|
|
{isLoading ? 'Logging in...' : 'Log In'}
|
|
</Button>
|
|
</CardFooter>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
<div className="px-6 pb-6 text-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
Don't have an account? Contact your administrator.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
<Toaster />
|
|
</>
|
|
);
|
|
}
|