feat: auto submit totp code when it is filled

Author: steveiliop56

frontend/src/components/auth/totp-form.tsx

@@ -14,11 +14,10 @@ import z from "zod";
 interface Props {
   formId: string;
   onSubmit: (code: TotpSchema) => void;
-  loading?: boolean;
 }
 
 export const TotpForm = (props: Props) => {
-  const { formId, onSubmit, loading } = props;
+  const { formId, onSubmit } = props;
   const { t } = useTranslation();
 
   z.config({
@@ -30,6 +29,14 @@ export const TotpForm = (props: Props) => {
     resolver: zodResolver(totpSchema),
   });
 
+  const handleChange = (value: string) => {
+    form.setValue("code", value, { shouldDirty: true, shouldValidate: true });
+
+    if (value.length === 6) {
+      onSubmit({ code: value });
+    }
+  };
+
   return (
     <Form {...form}>
       <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
@@ -41,10 +48,10 @@ export const TotpForm = (props: Props) => {
               <FormControl>
                 <InputOTP
                   maxLength={6}
-                  disabled={loading}
                   {...field}
                   autoComplete="one-time-code"
                   autoFocus
+                  onChange={handleChange}
                 >
                   <InputOTPGroup>
                     <InputOTPSlot index={0} />

frontend/src/pages/totp-page.tsx

@@ -70,7 +70,6 @@ export const TotpPage = () => {
         <TotpForm
           formId={formId}
           onSubmit={(values) => totpMutation.mutate(values)}
-          loading={totpMutation.isPending}
         />
       </CardContent>
       <CardFooter className="flex flex-col items-stretch">