initial commit
This commit is contained in:
Kar k1
175
components/auth/LoginForm.tsx
Normal file
175
components/auth/LoginForm.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
import { GoogleSignInButton } from './GoogleSignInButton'
|
||||
import { GitHubSignInButton } from './GitHubSignInButton'
|
||||
import { Mail, Lock, Eye, EyeOff } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
const LoginSchema = z.object({
|
||||
emailOrId: z.string().min(1, 'Email or Silicon ID is required'),
|
||||
password: z.string().min(1, 'Password is required'),
|
||||
rememberMe: z.boolean().optional(),
|
||||
})
|
||||
|
||||
type LoginFormData = z.infer<typeof LoginSchema>
|
||||
|
||||
interface LoginFormProps {
|
||||
onSwitchToRegister?: () => void
|
||||
}
|
||||
|
||||
export function LoginForm({ onSwitchToRegister }: LoginFormProps) {
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const { login, loading } = useAuth()
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
getValues,
|
||||
trigger,
|
||||
} = useForm<LoginFormData>({
|
||||
resolver: zodResolver(LoginSchema),
|
||||
})
|
||||
|
||||
const onSubmit = async (data: LoginFormData) => {
|
||||
try {
|
||||
setError(null)
|
||||
await login(data.emailOrId, data.password, data.rememberMe)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Login failed')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md mx-auto">
|
||||
<CardHeader>
|
||||
<CardTitle>Sign In</CardTitle>
|
||||
<CardDescription>Enter your email and password to access your account</CardDescription>
|
||||
</CardHeader>
|
||||
<form method="post" onSubmit={handleSubmit(onSubmit)}>
|
||||
<CardContent className="space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="emailOrId">Email or Silicon ID</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="emailOrId"
|
||||
type="text"
|
||||
placeholder="your@email.com or silicon123"
|
||||
className="pl-10"
|
||||
{...register('emailOrId')}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
{errors.emailOrId && <p className="text-sm text-red-600">{errors.emailOrId.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Link href="/forgot-password" className="text-sm text-primary hover:underline">
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="••••••••"
|
||||
className="pl-10 pr-10"
|
||||
{...register('password')}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
disabled={loading}
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
<span className="sr-only">{showPassword ? 'Hide password' : 'Show password'}</span>
|
||||
</Button>
|
||||
</div>
|
||||
{errors.password && <p className="text-sm text-red-600">{errors.password.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="rememberMe"
|
||||
checked={getValues('rememberMe') || false}
|
||||
onCheckedChange={(checked) => {
|
||||
setValue('rememberMe', checked as boolean)
|
||||
trigger('rememberMe')
|
||||
}}
|
||||
/>
|
||||
<Label htmlFor="rememberMe" className="text-sm font-normal">
|
||||
Remember me
|
||||
</Label>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex flex-col space-y-4 pt-6">
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? 'Signing In...' : 'Sign In'}
|
||||
</Button>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-background px-2 text-muted-foreground">Or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<GoogleSignInButton disabled={loading} />
|
||||
<GitHubSignInButton disabled={loading} />
|
||||
</div>
|
||||
</CardFooter>
|
||||
</form>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground mt-4">
|
||||
Don't have an account?{' '}
|
||||
{onSwitchToRegister ? (
|
||||
<button
|
||||
onClick={onSwitchToRegister}
|
||||
className="text-primary hover:underline cursor-pointer"
|
||||
>
|
||||
Create account
|
||||
</button>
|
||||
) : (
|
||||
<Link href="/auth?mode=register" className="text-primary hover:underline">
|
||||
Create account
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user