104 lines
3.8 KiB
TypeScript
104 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { useAuth } from "@/context/AuthContext";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { Terminal, CheckCircle } from "lucide-react";
|
|
import Image from "next/image";
|
|
|
|
import Logo from "../public/logo.png";
|
|
|
|
export function LoginForm({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"div">) {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
|
const { login, isLoading, error } = useAuth();
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setSuccessMessage(null); // Clear success message on new attempt
|
|
await login(email, password);
|
|
};
|
|
|
|
return (
|
|
<div className={cn("flex flex-col gap-10", className)} {...props}>
|
|
<Card className="shadow- xl">
|
|
<CardHeader className="flex flex-col items-center gap-10 justify-center text-2xl py-5">
|
|
<Image src={Logo} alt="ExamaJam Logo" className="w-72" />
|
|
<CardTitle>Welcome to ExamJam</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="flex flex-col gap-7">
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<Terminal className="h-4 w-4" />
|
|
<AlertTitle>Login Error</AlertTitle>
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
{successMessage && (
|
|
<Alert className="border-green-500 text-green-700">
|
|
<CheckCircle className="h-4 w-4 text-green-500" />
|
|
<AlertTitle>Success</AlertTitle>
|
|
<AlertDescription>{successMessage}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
<div className="grid gap-3">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-3">
|
|
<div className="flex items-center">
|
|
<Label htmlFor="password">Password</Label>
|
|
</div>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
placeholder="Enter your password"
|
|
required
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<Button
|
|
type="submit"
|
|
className="w-full cursor-pointer bg-[#113768] hover:bg-[#113768c2] py-6 text-md"
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? "Logging in..." : "Login"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 text-center text-md">
|
|
Don't have an account?{" "}
|
|
<Link href="/register" className="font-bold text-[#113768]">
|
|
Sign up
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|