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"} +

+
+ diff --git a/src/lib/zod.ts b/src/lib/zod.ts index ba8fc62..cf1c0ed 100644 --- a/src/lib/zod.ts +++ b/src/lib/zod.ts @@ -1,6 +1,7 @@ import { object, string, z } from "zod"; -const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; +// const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; +const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/; export const loginSchema = z.object({ loginIdentifier: z.string().min(1, "Email or Username is required"),