129 lines
3.8 KiB
JavaScript
129 lines
3.8 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useNavigate, Link } from "react-router-dom";
|
|
import { createUserWithEmailAndPassword } from "firebase/auth";
|
|
import { auth } from "@/firebase";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
export default function Register() {
|
|
const navigate = useNavigate();
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const validatePassword = (password) => {
|
|
if (password.length < 6) {
|
|
return "Password must be at least 6 characters long.";
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const validateEmail = (email) => {
|
|
const re =
|
|
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
if (!re.test(String(email).toLowerCase())) {
|
|
return "Invalid email address.";
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const handleRegister = async (e) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
if (!email || !password) {
|
|
setError("Email and password are required.");
|
|
return;
|
|
}
|
|
|
|
const emailError = validateEmail(email);
|
|
if (emailError) {
|
|
setError(emailError);
|
|
return;
|
|
}
|
|
|
|
const passwordError = validatePassword(password);
|
|
if (passwordError) {
|
|
setError(passwordError);
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await createUserWithEmailAndPassword(auth, email, password);
|
|
navigate("/");
|
|
} catch (error) {
|
|
setError(error.message || "Something went wrong. Please try again.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
|
|
<Card className="w-[350px]">
|
|
<CardHeader>
|
|
<CardTitle>Register</CardTitle>
|
|
<CardDescription>Create a new account.</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<form onSubmit={handleRegister}>
|
|
<div className="grid w-full items-center gap-4">
|
|
<div className="flex flex-col space-y-1.5">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
autoComplete="email"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-1.5">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
placeholder="Enter your password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
autoComplete="new-password"
|
|
/>
|
|
</div>
|
|
|
|
{error && <p className="text-red-500 text-sm">{error}</p>}
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
|
|
<CardFooter className="flex-col">
|
|
<Button onClick={handleRegister} disabled={loading} className="w-full">
|
|
{loading ? <Loader2 className="w-4 h-4 animate-spin" /> : "Register"}
|
|
</Button>
|
|
|
|
<p className="mt-4 text-sm text-slate-600">
|
|
Already have an account?{" "}
|
|
<Link to="/login" className="text-blue-600 hover:underline">
|
|
Login
|
|
</Link>
|
|
</p>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|