rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-19 02:00:15 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added error messages with tips when invalid or not matching.

Browse Source
This commit is contained in:
Nicholas 2024-02-29 22:51:58 -05:00
parent 6dcb0eb5cc
commit 21c4717bc8
1 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
compass/app/auth/newPassword/page.tsx
View File

@ -15,20 +15,24 @@ function isStrongPassword(password: string): boolean {
export default function Page() { export default function Page() {
const [newPassword, setNewPassword] = useState(''); const [newPassword, setNewPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState('');
const [valid, setValid] = useState(false); const [valid, setValid] = useState(true);
const [matching, setMatching] = useState(false); const [matching, setMatching] = useState(true);
const [isButtonDisabled, setIsButtonDisabled] = useState(true); const [isButtonDisabled, setIsButtonDisabled] = useState(true);
useEffect(() => { useEffect(() => {
setValid(isStrongPassword(newPassword)) if (newPassword !== ''){
setValid(isStrongPassword(newPassword))
}
}, [newPassword])
useEffect(() => {
if (confirmPassword !== ''){
setMatching(newPassword === confirmPassword) setMatching(newPassword === confirmPassword)
}, [newPassword, confirmPassword]) }
}, [newPassword, confirmPassword])
useEffect(() => { useEffect(() => {
setIsButtonDisabled(newPassword === '' || confirmPassword === '' || !matching || !valid); setIsButtonDisabled(newPassword === '' || confirmPassword === '' || !matching || !valid);
console.log(matching)
console.log(valid)
console.log('newPasswordDisabledTest',isButtonDisabled)
}, [matching, valid]); }, [matching, valid]);
@ -59,6 +63,12 @@ export default function Page() {
}} }}
/> />
</div> </div>
{valid ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
<strong className="block font-medium text-red-800"> Password is not strong enough. </strong>
<p className="mt-2 text-sm text-red-700">
Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters!
</p>
</div>}
<div className="mb-6"> <div className="mb-6">
<Input <Input
type="password" type="password"
@ -69,6 +79,12 @@ export default function Page() {
}} }}
/> />
</div> </div>
{matching ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
<strong className="block font-medium text-red-800"> Passwords do not match. </strong>
<p className="mt-2 text-sm text-red-700">
Please make sure both passwords are the exact same!
</p>
</div>}
<div className="flex flex-col items-left space-y-4"> <div className="flex flex-col items-left space-y-4">
<Button type="submit" disabled={isButtonDisabled} > <Button type="submit" disabled={isButtonDisabled} >
Send Send