Disable login/register autofill on auth fields.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/auth/AuthForm.tsx

@@ -211,12 +211,12 @@ function AuthFormInner() {
                     name="cellNumber"
                     type="tel"
                     inputMode="numeric"
-                    autoComplete="tel"
+                    autoComplete="off"
                     placeholder="09123456789"
                     dir="ltr"
                     pattern="09[0-9]{9}"
                     required={isLogin}
-                    defaultValue={pendingCell}
+                    defaultValue={pendingCell || undefined}
                   />
                   {loginMethod === "password" ? (
                     <Field
@@ -224,7 +224,7 @@ function AuthFormInner() {
                       label="رمز عبور"
                       name="password"
                       type="password"
-                      autoComplete="current-password"
+                      autoComplete="off"
                       placeholder="••••••••"
                       dir="ltr"
                       required={isLogin}
@@ -237,6 +237,7 @@ function AuthFormInner() {
                       name="code"
                       type="text"
                       inputMode="numeric"
+                      autoComplete="one-time-code"
                       placeholder="123456"
                       dir="ltr"
                       required
@@ -320,7 +321,7 @@ function AuthFormInner() {
                           label="نام"
                           name="firstName"
                           type="text"
-                          autoComplete="given-name"
+                          autoComplete="off"
                           required={!isLogin}
                         />
                         <Field
@@ -328,7 +329,7 @@ function AuthFormInner() {
                           label="نام خانوادگی"
                           name="lastName"
                           type="text"
-                          autoComplete="family-name"
+                          autoComplete="off"
                           required={!isLogin}
                         />
                       </div>
@@ -338,6 +339,7 @@ function AuthFormInner() {
                         name="cellNumber"
                         type="tel"
                         inputMode="numeric"
+                        autoComplete="off"
                         placeholder="09123456789"
                         dir="ltr"
                         pattern="09[0-9]{9}"
@@ -373,8 +375,9 @@ function AuthFormInner() {
                         label="شماره موبایل"
                         name="cellNumber"
                         type="tel"
+                        autoComplete="off"
                         dir="ltr"
-                        defaultValue={pendingCell}
+                        defaultValue={pendingCell || undefined}
                         required
                       />
                       <Field
@@ -383,6 +386,7 @@ function AuthFormInner() {
                         name="code"
                         type="text"
                         inputMode="numeric"
+                        autoComplete="one-time-code"
                         dir="ltr"
                         required
                         minLength={4}
@@ -474,7 +478,11 @@ function AuthPanel({
     <div className="w-full">
       <h1 className="mb-2 text-xl font-medium text-ink sm:text-2xl">{title}</h1>
       <p className="mb-8 max-w-sm text-sm leading-7 text-muted">{subtitle}</p>
-      <form onSubmit={onSubmit} className="flex w-full flex-col gap-4">
+      <form
+        onSubmit={onSubmit}
+        className="flex w-full flex-col gap-4"
+        autoComplete="off"
+      >
         {children}
       </form>
     </div>
@@ -484,17 +492,31 @@ function AuthPanel({
 function Field({
   id,
   label,
+  autoComplete = "off",
+  onFocus,
   ...props
 }: {
   id: string;
   label: string;
 } & InputHTMLAttributes<HTMLInputElement>) {
+  const [unlockAutofill, setUnlockAutofill] = useState(false);
+
   return (
     <div className="w-full">
       <label htmlFor={id} className="auth-label">
         {label}
       </label>
-      <input id={id} className="auth-input" {...props} />
+      <input
+        id={id}
+        className="auth-input"
+        {...props}
+        autoComplete={autoComplete}
+        readOnly={!unlockAutofill}
+        onFocus={(event) => {
+          if (!unlockAutofill) setUnlockAutofill(true);
+          onFocus?.(event);
+        }}
+      />
     </div>
   );
 }