"use client";
import React, { useState } from "react";
import {useCreateUserWithEmailAndPassword} from "react-firebase-hooks/auth";
import {auth, db} from '../../firebase/config';
import Link from "next/link";
import { sendEmailVerification } from "firebase/auth";
import { collection, doc, getDoc, setDoc } from 'firebase/firestore';
export default function SignUp() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState('');
const [success, setSuccess] = useState('');
const [createUserWithEmailAndPassword] = useCreateUserWithEmailAndPassword(auth);
const handleSignUp = async () => {
setError('');
if (!email.includes('@')) {
setError('Enter a valid email address.');
return;
}
if (password.length < 8) {
setError('Password must be at least 8 characters long.');
return;
}
try {
const res = await createUserWithEmailAndPassword(email, password); // Pass auth as the first parameter
if (res && res.user) {
await sendEmailVerification(res.user);
setEmail("");
setPassword("");
setSuccess("Email verification has been sent.");
if(res.user.emailVerified){
await setDoc(doc(db, "users", res.user.uid), {
email: res.user.email,
userId: res.user.uid,
});
}
} else {
setError("Failed to create user. Please try again.");
}
} catch (error) {
console.error(error);
setError("An error occurred.");
}
};
return (
<div className="container mx-auto p-4">
<div className="box bg-gray-100 p-4 rounded-lg shadow-md">
{error && <p className="text-red-500 text-sm mb-3">{error}</p>}
{success && <p className="text-green-500 text-sm mb-3">{success}</p>}
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
Email
</label>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"/>
</div>
<div className="mb-2">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
Password
</label>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" />
</div>
<div className="mt-1 text-center mb-3">
<p className="text-gray-700 text-sm">
Already have an account?{" "}
<Link href="/login" className="text-[#63b2fc] hover:underline">
Log In
</Link>
</p>
</div>
<button
onClick={handleSignUp}
className="bg-[#63b2fc] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full" >
Sign Up
</button>
</div>
</div>
// <div className="mb-2">
// <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
// Password
// </label>
// <input
// type="password"
// id="password"
// value={password}
// onChange={(e) => setPassword(e.target.value)}
// className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
// required
// />
// {/*
// {error && <p className="text-red-500 text-xs italic">{error}</p>} */}
// </div>
// <div className="flex items-center justify-between">
// <button
// type="submit"
// className="bg-[#63b2fc] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
// >
// Sign Up
// </button>
// </div>
// </form>
// </div>
// </div>
);
}