From e7b44ee54ea20e0929bac7fb4240e53a26dae932 Mon Sep 17 00:00:00 2001
From: Stavros <steveiliop56@gmail.com>
Date: Sun, 12 Apr 2026 18:32:59 +0300
Subject: [PATCH] chore: small ui fixes

---
 frontend/src/components/auth/totp-form.tsx | 6 +++---
 frontend/src/pages/totp-page.tsx           | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/auth/totp-form.tsx b/frontend/src/components/auth/totp-form.tsx
index 15e490c..8168552 100644
--- a/frontend/src/components/auth/totp-form.tsx
+++ b/frontend/src/components/auth/totp-form.tsx
@@ -26,12 +26,14 @@ export const TotpForm = (props: Props) => {
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value.replace(/\D/g, "").slice(0, 6);
-    form.setValue("code", value, { shouldDirty: true, shouldValidate: true });
+    form.setValue("code", value, { shouldDirty: true, shouldValidate: false });
     if (value.length === 6) {
       form.handleSubmit(onSubmit)();
     }
   };
 
+  // Note: This is not the best UX, ideally we would want https://github.com/guilhermerodz/input-otp
+  // but some password managers cannot autofill the inputs (see #92) so, simple input it is
   return (
     <Form {...form}>
       <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
@@ -43,8 +45,6 @@ export const TotpForm = (props: Props) => {
               <FormControl>
                 <Input
                   {...field}
-                  id="totp-code"
-                  name="code"
                   type="text"
                   inputMode="numeric"
                   autoComplete="one-time-code"
diff --git a/frontend/src/pages/totp-page.tsx b/frontend/src/pages/totp-page.tsx
index d0b9726..4f1cb87 100644
--- a/frontend/src/pages/totp-page.tsx
+++ b/frontend/src/pages/totp-page.tsx
@@ -74,7 +74,7 @@ export const TotpPage = () => {
         <CardTitle className="text-xl">{t("totpTitle")}</CardTitle>
         <CardDescription>{t("totpSubtitle")}</CardDescription>
       </CardHeader>
-      <CardContent className="flex flex-col items-center">
+      <CardContent>
         <TotpForm
           formId={formId}
           onSubmit={(values) => totpMutation.mutate(values)}