diff --git a/client/src/pages/SignUp.jsx b/client/src/pages/SignUp.jsx index 5b0086c..cda315e 100644 --- a/client/src/pages/SignUp.jsx +++ b/client/src/pages/SignUp.jsx @@ -1,12 +1,12 @@ -import { useState } from "react"; -import { useNavigate } from "react-router"; +import { useEffect, useState } from "react"; +import { RxCross1 } from "react-icons/rx"; import { useDispatch, useSelector } from "react-redux"; -import { signUpAction, clearMessage } from "../redux/actions/authActions"; +import { useNavigate } from "react-router"; import { Link } from "react-router-dom"; -import ContextAuthModal from "../components/modals/ContextAuthModal"; -import { RxCross1 } from "react-icons/rx"; -import ButtonLoadingSpinner from "../components/loader/ButtonLoadingSpinner"; import Logo from "../assets/SocialEcho.png"; +import ButtonLoadingSpinner from "../components/loader/ButtonLoadingSpinner"; +import ContextAuthModal from "../components/modals/ContextAuthModal"; +import { clearMessage, signUpAction } from "../redux/actions/authActions"; const SignUpNew = () => { const [loading, setLoading] = useState(false); @@ -14,6 +14,8 @@ const SignUpNew = () => { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [confirmPasswordError, setConfirmPasswordError] = useState(null); const [avatar, setAvatar] = useState(null); const [avatarError, setAvatarError] = useState(null); @@ -40,6 +42,16 @@ const SignUpNew = () => { setPassword(e.target.value); }; + const handleConfirmPasswordChange = (event) => { + setConfirmPassword(event.target.value); + + if (event.target.value !== password) { + setConfirmPasswordError("Passwords don't match!"); + } else { + setConfirmPasswordError(null); + } + }; + const handleAvatarChange = (e) => { const file = e.target.files[0]; if (!file) { @@ -67,8 +79,24 @@ const SignUpNew = () => { const [isModalOpen, setIsModalOpen] = useState(false); const [isModerator, setIsModerator] = useState(false); + useEffect(() => { + if (confirmPasswordError) { + const submitButton = document.querySelector('button[type="submit"]'); + submitButton.disabled = true; + } else { + const submitButton = document.querySelector('button[type="submit"]'); + submitButton.disabled = false; + } + }, [confirmPasswordError]); + const handleSubmit = async (e) => { e.preventDefault(); + + if (password !== confirmPassword) { + setConfirmPasswordError("Passwords don't match!"); + return; // Stop submission if passwords don't match + } + setLoading(true); setLoadingText("Signing up..."); const formData = new FormData(); @@ -261,6 +289,40 @@ const SignUpNew = () => { autoComplete="off" /> + +
+ + + + + + + {confirmPasswordError && ( +
{confirmPasswordError}
+ )} +
+