diff --git a/client/src/components/Authentication/Register.tsx b/client/src/components/Authentication/Register.tsx index ca31338..3a0f503 100644 --- a/client/src/components/Authentication/Register.tsx +++ b/client/src/components/Authentication/Register.tsx @@ -23,6 +23,8 @@ const Register: React.FC = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); + const [confirmPassword, setConfirmPassword] = useState(""); + const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [loading, setLoading] = useState(false); const [errorMsg, setErrorMsg] = useState(null); @@ -52,7 +54,7 @@ const Register: React.FC = () => { const handleRegister = async () => { setErrorMsg(null); - if (!username || !email || !password) { + if (!username || !email || !password || !confirmPassword) { setErrorMsg("All fields are required."); return; } @@ -62,6 +64,11 @@ const Register: React.FC = () => { return; } + if (password !== confirmPassword) { + setErrorMsg("Passwords do not match."); + return; + } + setLoading(true); try { @@ -69,6 +76,7 @@ const Register: React.FC = () => { username, email, password, + confirmPassword, }); if (res.data.success) { @@ -267,8 +275,8 @@ const Register: React.FC = () => { + {/* Confirm Password */} +
+ +
+ setConfirmPassword(e.target.value)} + className={`w-full px-4 py-3 bg-white dark:bg-gray-900/50 border rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:border-transparent outline-none pr-10 ${confirmPassword && password !== confirmPassword + ? "border-[#e74c3c] focus:ring-[#e74c3c]" + : confirmPassword && password === confirmPassword + ? "border-[#2ecc71] focus:ring-[#2ecc71]" + : "border-gray-300 dark:border-gray-600 focus:ring-[#3498db]" + }`} + placeholder="Re-enter your password" + /> + +
+ + {confirmPassword && ( +

+ {password === confirmPassword ? ( + <> + + Passwords match + + ) : ( + "Passwords do not match" + )} +

+ )} +
+ {errorMsg && (

{errorMsg}

@@ -288,7 +347,15 @@ const Register: React.FC = () => {