I have implemented a form to sign in using zod for client-side validation. I wanted to also add a password strength display for which i decided to try out react-password-strength-bar.
The functionality is simple, you just render the PasswordStrengthBar and pass-in the password value as a prop:
import PasswordStrengthBar from "react-password-strength-bar";
<PasswordStrengthBar password={pass} />
While trying so, I've noticed I cannot use onChange event listener for Input field, because apparently it is already used. Same goes with ref, where I would have used useEffect that would trigger every time the input value changes.
I found that I can get the value using form.getValues("password") it feels wrong to use form function as a dependency which I would then use as a value for PasswordStrengthBar. I have also tried placing form in useEffect, but it seems like it does not update with input change.
Does anyone have any ideas of how I could make this work?
Full code:
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { useForm } from "react-hook-form";
import { useContext, useEffect, useState } from "react";
import NotificationContext from "@/lib/context/notification-context";
import defaultNotification from "@/lib/locale/default-notification";
import PasswordStrengthBar from "react-password-strength-bar";
import { authFormSchema } from "@/lib/formSchema";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ponents/ui/form";
import { Input } from "@/ponents/ui/input";
import SubmitButton from "../ui/custom-ui/submit-btn";
export default function AuthForm() {
const notifCtx = useContext(NotificationContext);
const [pass, setPass] = useState<string>("");
const form = useForm<z.infer<typeof authFormSchema>>({
resolver: zodResolver(authFormSchema),
defaultValues: { email: "", password: "" }
});
const isLoading = form.formState.isSubmitting;
async function onSubmit(values: z.infer<typeof authFormSchema>) {
// ✅ This will be type-safe and validated.
notifCtx.setNotification(defaultNotification.pending);
const res = await fetch("/api/auth/signup", {
method: "POST",
body: JSON.stringify({ ...values })
});
const { err, msg } = await res.json();
notifCtx.setNotification(defaultNotification[err ? "error" : "success"](msg));
!err && form.reset();
return;
}
useEffect(() => {
setPass(form.getValues("password"));
}, [form]);
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="[email protected]" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel className="">Password</FormLabel>
<FormControl>
<Input placeholder="password123" type="password" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<PasswordStrengthBar password={pass} />
<div className="">
<SubmitButton
className="w-full my-4 dark:bg-white dark:hover:bg-primary dark:text-black dark:hover:text-white"
isLoading={isLoading}
text="Sign up"
/>
</div>
</form>
</Form>
);
}
I have implemented a form to sign in using zod for client-side validation. I wanted to also add a password strength display for which i decided to try out react-password-strength-bar.
The functionality is simple, you just render the PasswordStrengthBar and pass-in the password value as a prop:
import PasswordStrengthBar from "react-password-strength-bar";
<PasswordStrengthBar password={pass} />
While trying so, I've noticed I cannot use onChange event listener for Input field, because apparently it is already used. Same goes with ref, where I would have used useEffect that would trigger every time the input value changes.
I found that I can get the value using form.getValues("password") it feels wrong to use form function as a dependency which I would then use as a value for PasswordStrengthBar. I have also tried placing form in useEffect, but it seems like it does not update with input change.
Does anyone have any ideas of how I could make this work?
Full code:
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { useForm } from "react-hook-form";
import { useContext, useEffect, useState } from "react";
import NotificationContext from "@/lib/context/notification-context";
import defaultNotification from "@/lib/locale/default-notification";
import PasswordStrengthBar from "react-password-strength-bar";
import { authFormSchema } from "@/lib/formSchema";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ponents/ui/form";
import { Input } from "@/ponents/ui/input";
import SubmitButton from "../ui/custom-ui/submit-btn";
export default function AuthForm() {
const notifCtx = useContext(NotificationContext);
const [pass, setPass] = useState<string>("");
const form = useForm<z.infer<typeof authFormSchema>>({
resolver: zodResolver(authFormSchema),
defaultValues: { email: "", password: "" }
});
const isLoading = form.formState.isSubmitting;
async function onSubmit(values: z.infer<typeof authFormSchema>) {
// ✅ This will be type-safe and validated.
notifCtx.setNotification(defaultNotification.pending);
const res = await fetch("/api/auth/signup", {
method: "POST",
body: JSON.stringify({ ...values })
});
const { err, msg } = await res.json();
notifCtx.setNotification(defaultNotification[err ? "error" : "success"](msg));
!err && form.reset();
return;
}
useEffect(() => {
setPass(form.getValues("password"));
}, [form]);
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="[email protected]" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel className="">Password</FormLabel>
<FormControl>
<Input placeholder="password123" type="password" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<PasswordStrengthBar password={pass} />
<div className="">
<SubmitButton
className="w-full my-4 dark:bg-white dark:hover:bg-primary dark:text-black dark:hover:text-white"
isLoading={isLoading}
text="Sign up"
/>
</div>
</form>
</Form>
);
}
1 Answer
Reset to default 9SOLVED: I forgot that you can use onChangeCapture since it doesn't contain any child elements to trigger more actions.
<Input placeholder="password123" onChangeCapture={e => setPass(e.currentTarget.value)} type="password" {...field} />