diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index 528e744..fd15618 100644 --- a/src/app/auth/page.tsx +++ b/src/app/auth/page.tsx @@ -20,6 +20,14 @@ export default function Auth() { const searchParams = useSearchParams(); const callback = searchParams.get("callbackUrl"); + const [passwordFeedback, setPasswordFeedback] = useState({ + length: false, + uppercase: false, + lowercase: false, + number: false, + specialChar: false, + }); + const { register, handleSubmit, @@ -35,6 +43,16 @@ export default function Auth() { console.log(callback); + const validatePassword = (password: string) => { + setPasswordFeedback({ + length: password.length >= 8, + uppercase: /[A-Z]/.test(password), + lowercase: /[a-z]/.test(password), + number: /\d/.test(password), + specialChar: /[@$!%*?&]/.test(password), + }); + }; + const onSubmit = async (data: any) => { if (isSignup) { try { @@ -171,7 +189,7 @@ export default function Auth() { type={hidden ? "password" : "text"} placeholder="Password" disabled={isLoading} - {...register("password")} + {...register("password", {onChange:(e)=>validatePassword(e.target.value)})} className={styles.input} /> - {errors.password && ( + {/* {errors.password && (
{errors.password.message?.toString()}
- )} + )} */} > )} + + {/* Password criteria feedback */} ++ {passwordFeedback.length ? "✔️ At least 8 characters" : "❌ At least 8 characters"} +
++ {passwordFeedback.uppercase ? "✔️ At least 1 uppercase letter" : "❌ At least 1 uppercase letter"} +
++ {passwordFeedback.lowercase ? "✔️ At least 1 lowercase letter" : "❌ At least 1 lowercase letter"} +
++ {passwordFeedback.number ? "✔️ At least 1 number" : "❌ At least 1 number"} +
++ {passwordFeedback.specialChar ? "✔️ At least 1 special character" : "❌ At least 1 special character"} +
+