File size: 2,971 Bytes
6c4e56e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useAuth } from "../../contexts/AuthContext";
import TextInput from "../common/inputs/TextInput";
import { Button } from "../common/ui/button";
import { ROUTES } from "../../lib/constants";
const Signup = () => {
const { register } = useAuth();
const [formData, setFormData] = useState({
username: "",
email: "",
password: "",
confirmPassword: "",
});
const [errors, setErrors] = useState({});
const validateForm = () => {
const newErrors = {};
if (formData.password !== formData.confirmPassword) {
newErrors.confirmPassword = "Passwords don't match";
}
if (formData.password.length < 6) {
newErrors.password = "Password must be at least 6 characters";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
// Clear error when user types
if (errors[name]) {
setErrors((prev) => ({ ...prev, [name]: "" }));
}
};
const handleSubmit = async (event) => {
event.preventDefault();
if (validateForm()) {
const { confirmPassword, ...registrationData } = formData;
await register(registrationData);
}
};
return (
<div className="max-w-xl mx-auto p-8 bg-[#F7F9FD] mt-6">
<div className="text-center mb-8">
<h1 className="text-2xl font-bold mb-4">Create an account</h1>
<p className="text-gray-600">
Already have an account?{" "}
<Link
to={ROUTES.LOGIN}
className="text-primary hover:text-primary/90 font-semibold"
>
Login
</Link>
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
<TextInput
label="Username"
name="username"
type="text"
value={formData.username}
onChange={handleChange}
error={errors.username}
required
/>
<TextInput
label="E-mail address"
name="email"
type="email"
value={formData.email}
onChange={handleChange}
error={errors.email}
required
/>
<TextInput
label="Password"
type="password"
name="password"
value={formData.password}
onChange={handleChange}
error={errors.password}
required
/>
<TextInput
label="Confirm Password"
type="password"
name="confirmPassword"
value={formData.confirmPassword}
onChange={handleChange}
error={errors.confirmPassword}
required
/>
<Button type="submit" className="w-full">
Create
</Button>
</form>
</div>
);
};
export default Signup;
|