diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx index 880607c7..4fd6a0a5 100644 --- a/src/pages/Signup/Signup.tsx +++ b/src/pages/Signup/Signup.tsx @@ -14,274 +14,237 @@ interface SignUpFormData { password: string; } -const SignUp: React.FC = () => { - const [formData, setFormData] = useState({ - username: "", - email: "", - password: "", - }); - - const [message, setMessage] = useState(""); - const [errors, setErrors] = useState({ - username: "", - email: "", - password: "", - }); - - const [showPassword, setShowPassword] = useState(false); - const [isLoading, setIsLoading] = useState(false); - - const navigate = useNavigate(); - const themeContext = useContext(ThemeContext) as ThemeContextType; - const { mode } = themeContext; - - const handleChange = (e: React.ChangeEvent) => { - const { name, value } = e.target; - setFormData({ ...formData, [name]: value }); - - let errorMessage = ""; - - if (name === "username") { - if (!value.trim()) { - errorMessage = "Username is required"; - } else if (!/^[A-Za-z\s]+$/.test(value)) { - errorMessage = "Only letters are allowed"; - } - } +interface FormErrors { + firstName?: string; + lastName?: string; + email?: string; + password?: string; +} - if (name === "email") { - if (!value.trim()) { - errorMessage = "Email is required"; - } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim())) { - errorMessage = "Enter a valid email"; - } - } +interface IconEyeProps { + open: boolean; +} - if (name === "password") { - if (!value.trim()) { - errorMessage = "Password is required"; - } else if ( - !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(value) - ) { - errorMessage = - "Password must be 8+ characters with letters and numbers"; - } - } +function IconUser(): JSX.Element { + return ( + + + + ); +} - setErrors((prev) => ({ ...prev, [name]: errorMessage })); - }; +function IconMail(): JSX.Element { + return ( + + + + ); +} - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); +function IconLock(): JSX.Element { + return ( + + + + ); +} - const usernameError = !formData.username.trim() - ? "Username is required" - : !/^[A-Za-z\s]+$/.test(formData.username) - ? "Only letters are allowed" - : ""; +function IconEye({ open }: IconEyeProps): JSX.Element { + return open ? ( + + + + ) : ( + + + + ); +} - const emailError = !formData.email.trim() - ? "Email is required" - : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim()) - ? "Enter a valid email" - : ""; +function IconArrow(): JSX.Element { + return ( + + + + ); +} - const passwordError = !formData.password.trim() - ? "Password is required" - : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test( - formData.password, - ) - ? "Password must be 8+ characters with letters and numbers" - : ""; +function IconCheck(): JSX.Element { + return ( + + + + ); +} - if (usernameError || emailError || passwordError) { - setErrors({ - username: usernameError, - email: emailError, - password: passwordError, - }); - return; - } +function GoogleIcon(): JSX.Element { + return ( + + + + + + + ); +} - setIsLoading(true); +function GitHubIcon(): JSX.Element { + return ( + + + + ); +} - try { - const response = await axios.post( - `${backendUrl}/api/auth/signup`, - formData, - ); +export default function RegisterPage(): JSX.Element { + const [form, setForm] = useState({ firstName: "", lastName: "", email: "", password: "" }); + const [showPass, setShowPass] = useState(false); + const [errors, setErrors] = useState({}); + const [loading, setLoading] = useState(false); + const [success, setSuccess] = useState(false); + + const validate = (): FormErrors => { + const e: FormErrors = {}; + if (!form.firstName.trim()) e.firstName = "Required"; + if (!form.lastName.trim()) e.lastName = "Required"; + if (!form.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) e.email = "Enter a valid email"; + if (form.password.length < 8) e.password = "Min 8 characters"; + return e; + }; - setMessage(response.data.message); + const handleChange = (field: keyof FormState) => (ev: ChangeEvent): void => { + setForm((f) => ({ ...f, [field]: ev.target.value })); + if (errors[field]) setErrors((e) => ({ ...e, [field]: undefined })); + }; - if (response.data.message === "User created successfully") { - navigate("/login"); - } - } catch (error: any) { - setMessage( - error.response?.data?.message || - "Something went wrong. Please try again.", - ); - } finally { - setIsLoading(false); - } + const handleSubmit = async (): Promise => { + const e = validate(); + if (Object.keys(e).length) { setErrors(e); return; } + setLoading(true); + await new Promise((r) => setTimeout(r, 1400)); + setLoading(false); + setSuccess(true); }; return ( -
- {/* Background */} -
-
-
-
-
- -
- {/* ✅ BACK TO HOME BUTTON ADDED */} - - - {/* Header */} - -
- Logo -
- -

- GitHubTracker -

- -

- Join your GitHub journey -

- - - {/* Form */} - -

- Create Account -

- -
- {/* Username */} -
- - {errors.username && ( -

{errors.username}

- )} + <> + +
+
+
+
+
+
+ logo +
+ GitHub Tracker
- - {/* Email */} -
- - {errors.email && ( -

{errors.email}

- )} +
Welcome to
+
Your new
workspace
+
Create your account and start building something great today.
+
+
+
+
+
- {/* Password */} -
- - {errors.password && ( -

{errors.password}

- )} + {success ? ( +
+
+
Account created!
+
Welcome to GitHub Tracker, {form.firstName}.
Check your email to verify your account.
+
+ ) : ( +
+
+
+ +
+ + +
+ {errors.firstName && {errors.firstName}} +
+
+ +
+ + +
+ {errors.lastName && {errors.lastName}} +
+
+ +
+ +
+ + +
+ {errors.email && {errors.email}} +
+ +
+ +
+ + + +
+ {errors.password && {errors.password}} +
+ +

+ By creating an account you agree to our{" "} + Terms of Service and Privacy Policy. +

+ + + +
+
or continue with
+
+ +

+ Already have an account?{" "} + + Sign in + +

- - - - - {message && ( -
{message}
)} - -
- - Already have an account? Sign in - -
- +
-
+ ); -}; - -export default SignUp; +}