153 lines
3.7 KiB
JavaScript
153 lines
3.7 KiB
JavaScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "@/context/AuthContext";
|
|
|
|
export default function RegisterPage() {
|
|
const {register} = useAuth();
|
|
const router = useRouter();
|
|
|
|
const [form, setForm] = useState({
|
|
fullName: "",
|
|
username: "",
|
|
email: "",
|
|
phone: "",
|
|
password: "",
|
|
confirmPassword: "",});
|
|
|
|
const [error, setError] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
function handleChange(e) {
|
|
setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
|
|
}
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
setError("");
|
|
|
|
if (form.password !== form.confirmPassword) {
|
|
setError("Passwords do not match.");
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await register({fullName: form.fullName,
|
|
username: form.username,
|
|
email: form.email,
|
|
phone: form.phone,
|
|
password: form.password,
|
|
});
|
|
router.push("/");
|
|
}
|
|
|
|
catch (err) {
|
|
setError(err.message);
|
|
}
|
|
|
|
finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="auth-page">
|
|
<div className="auth-card">
|
|
<h1 className="auth-title">Create Account</h1>
|
|
|
|
{error && <p className="auth-error">{error}</p>}
|
|
|
|
<form className="auth-form" onSubmit={handleSubmit}>
|
|
<label className="auth-label">
|
|
Full Name
|
|
<input
|
|
className="auth-input"
|
|
type="text"
|
|
name="fullName"
|
|
value={form.fullName}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label className="auth-label">
|
|
Username
|
|
<input
|
|
className="auth-input"
|
|
type="text"
|
|
name="username"
|
|
value={form.username}
|
|
onChange={handleChange}
|
|
required
|
|
minLength={3}
|
|
/>
|
|
</label>
|
|
|
|
<label className="auth-label">
|
|
Email
|
|
<input
|
|
className="auth-input"
|
|
type="email"
|
|
name="email"
|
|
value={form.email}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label className="auth-label">
|
|
Phone
|
|
<input
|
|
className="auth-input"
|
|
type="tel"
|
|
name="phone"
|
|
value={form.phone}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label className="auth-label">
|
|
Password
|
|
<input
|
|
className="auth-input"
|
|
type="password"
|
|
name="password"
|
|
value={form.password}
|
|
onChange={handleChange}
|
|
required
|
|
minLength={6}
|
|
autoComplete="new-password"
|
|
/>
|
|
</label>
|
|
|
|
<label className="auth-label">
|
|
Confirm Password
|
|
<input
|
|
className="auth-input"
|
|
type="password"
|
|
name="confirmPassword"
|
|
value={form.confirmPassword}
|
|
onChange={handleChange}
|
|
required
|
|
autoComplete="new-password"
|
|
/>
|
|
</label>
|
|
|
|
<button className="auth-submit-btn" type="submit" disabled={loading}>
|
|
{loading ? "Creating account…" : "Register"}
|
|
</button>
|
|
</form>
|
|
|
|
<p className="auth-switch">
|
|
Already have an account?{" "}
|
|
<Link href="/login" className="auth-switch-link">Log in here</Link>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|