public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Disable error on form state submitting

pull/11421/merge^2
Sean Brydon 2023-09-18 12:07:04 +01:00
parent 6a37445c51
commit 2ffefcc97e
1 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
apps/web/pages/signup.tsx
View File

@ -49,7 +49,7 @@ function UsernameField({
...props ...props
}: React.ComponentProps<typeof TextField> & { setPremium: (value: boolean) => void; premium: boolean }) { }: React.ComponentProps<typeof TextField> & { setPremium: (value: boolean) => void; premium: boolean }) {
const { t } = useLocale(); const { t } = useLocale();
const { watch, setError, register } = useFormContext<FormValues>(); const { watch, setError, register, formState } = useFormContext<FormValues>();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [taken, setTaken] = useState(false); const [taken, setTaken] = useState(false);
const watchedUsername = watch("username"); const watchedUsername = watch("username");
@ -85,28 +85,30 @@ function UsernameField({
return ( return (
<div> <div>
<TextField {...props} {...register("username")} /> <TextField {...props} {...register("username")} />
<div className="text-gray text-default flex items-center text-sm"> {!formState.isSubmitting && (
<p className="flex items-center text-sm "> <div className="text-gray text-default flex items-center text-sm">
{loading ? ( <p className="flex items-center text-sm ">
<> {loading ? (
<Loader2 className="mr-1 inline-block h-4 w-4 animate-spin" /> <>
{t("loading")} <Loader2 className="mr-1 inline-block h-4 w-4 animate-spin" />
</> {t("loading")}
) : taken ? ( </>
<div className="text-error"> ) : taken ? (
<Info className="mr-1 inline-block h-4 w-4" /> <div className="text-error">
{t("already_taken")} <Info className="mr-1 inline-block h-4 w-4" />
</div> {t("already_taken")}
) : premium ? ( </div>
<> ) : premium ? (
<StarIcon className="mr-1 inline-block h-4 w-4" /> <>
{t("premium_username", { <StarIcon className="mr-1 inline-block h-4 w-4" />
price: getPremiumPlanPriceValue(), {t("premium_username", {
})} price: getPremiumPlanPriceValue(),
</> })}
) : null} </>
</p> ) : null}
</div> </p>
</div>
)}
</div> </div>
); );
} }