diff --git a/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx b/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx index 7c95ef8..15624c6 100644 --- a/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx +++ b/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx @@ -1,16 +1,15 @@ import { useState, useRef, useEffect } from 'react'; import styles from './PasswordChangeForm.module.css'; -export default function PasswordChangeForm({ onSubmit, pwError = false }) { - const [errorConfirmMessage, setErrorConfirmMessage] = useState(false); - const [errorSameMessage, setErrorSameMessage] = useState(false); +export default function PasswordChangeForm({ onSubmit, onError }) { + const [error, setError] = useState(null); const currentPasswordRef = useRef(''); const newPasswordRef = useRef(''); const confirmPasswordRef = useRef(''); useEffect(() => { - setErrorSameMessage(pwError); - }, [pwError]); + setError(onError); + }, [onError]); const handleSubmit = (e) => { e.preventDefault(); @@ -19,10 +18,9 @@ export default function PasswordChangeForm({ onSubmit, pwError = false }) { const confirmPassword = confirmPasswordRef.current.value; if (newPassword === confirmPassword) { - setErrorConfirmMessage(false); onSubmit(currentPassword, newPassword, confirmPassword); } else { - setErrorConfirmMessage(true); + setError('confirmError'); } }; return ( @@ -37,11 +35,11 @@ export default function PasswordChangeForm({ onSubmit, pwError = false }) { type="password" id="currentPassword" ref={currentPasswordRef} - maxLength={200} - className={errorSameMessage ? styles.inputErrorBox : styles.inputBox} + maxLength={50} + className={error === 'currentPwError' ? styles.inputErrorBox : styles.inputBox} required /> - {errorSameMessage &&