diff --git a/compass/app/auth/newPassword/page.tsx b/compass/app/auth/newPassword/page.tsx index cdf55d8..d230894 100644 --- a/compass/app/auth/newPassword/page.tsx +++ b/compass/app/auth/newPassword/page.tsx @@ -15,20 +15,24 @@ function isStrongPassword(password: string): boolean { export default function Page() { const [newPassword, setNewPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); - const [valid, setValid] = useState(false); - const [matching, setMatching] = useState(false); + const [valid, setValid] = useState(true); + const [matching, setMatching] = useState(true); const [isButtonDisabled, setIsButtonDisabled] = useState(true); useEffect(() => { - setValid(isStrongPassword(newPassword)) + if (newPassword !== ''){ + setValid(isStrongPassword(newPassword)) + } + }, [newPassword]) + + useEffect(() => { + if (confirmPassword !== ''){ setMatching(newPassword === confirmPassword) - }, [newPassword, confirmPassword]) + } +}, [newPassword, confirmPassword]) useEffect(() => { setIsButtonDisabled(newPassword === '' || confirmPassword === '' || !matching || !valid); - console.log(matching) - console.log(valid) - console.log('newPasswordDisabledTest',isButtonDisabled) }, [matching, valid]); @@ -59,6 +63,12 @@ export default function Page() { }} /> + {valid ? null :
+ Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters! +
++ Please make sure both passwords are the exact same! +
+