80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { signInWithEmailAndPassword, signInWithPopup } from "firebase/auth";
|
|
import { auth, googleProvider } from "@/lib/firebase";
|
|
import { useRouter } from "next/navigation";
|
|
import Navbar from "@/components/Navbar";
|
|
|
|
export default function LoginPage() {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const router = useRouter();
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
await signInWithEmailAndPassword(auth, email, password);
|
|
router.push("/dashboard");
|
|
} catch (error: any) {
|
|
alert(error.message);
|
|
}
|
|
};
|
|
|
|
const handleGoogleLogin = async () => {
|
|
try {
|
|
await signInWithPopup(auth, googleProvider);
|
|
router.push("/dashboard");
|
|
} catch (error: any) {
|
|
alert(error.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
<div className="flex min-h-screen items-center justify-center">
|
|
<form
|
|
className="p-6 bg-white rounded shadow-md w-full max-w-md"
|
|
onSubmit={handleLogin}
|
|
>
|
|
<h2 className="text-2xl font-bold mb-4 text-center">Login</h2>
|
|
<input
|
|
type="email"
|
|
placeholder="Email"
|
|
className="border p-2 w-full mb-2 rounded"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="Password"
|
|
className="border p-2 w-full mb-2 rounded"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
<button
|
|
className="w-full bg-green-600 text-white p-2 rounded mt-2"
|
|
type="submit"
|
|
>
|
|
Login
|
|
</button>
|
|
<p className="mt-4 text-sm text-right">
|
|
<a
|
|
href="/forgot-password"
|
|
className="text-blue-600 hover:underline"
|
|
>
|
|
Forgot Password?
|
|
</a>
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={handleGoogleLogin}
|
|
className="w-full bg-red-500 text-white p-2 rounded mt-2"
|
|
>
|
|
Login with Google
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|