From 24b1e71cbff85c0104e812745da9caf96b5401ae Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 9 Aug 2024 16:42:31 +0530
Subject: [PATCH] [WEB-2211] fix: input autoComplete (#5333)

* fix: input autoComplete

* chore: code refactor

* chore: set autoComplete on for email, password and name
---
 admin/app/general/form.tsx                         |  1 +
 admin/core/components/instance/setup-form.tsx      |  4 ++++
 admin/core/components/login/sign-in-form.tsx       |  2 ++
 packages/ui/src/form-fields/input.tsx              | 14 +++++++++++++-
 space/core/components/account/auth-forms/email.tsx |  1 +
 .../components/account/auth-forms/password.tsx     |  1 +
 web/app/accounts/forgot-password/page.tsx          |  1 +
 web/app/accounts/reset-password/page.tsx           |  2 ++
 web/app/accounts/set-password/page.tsx             |  2 ++
 web/app/profile/page.tsx                           |  3 +++
 web/core/components/account/auth-forms/email.tsx   |  1 +
 .../components/account/auth-forms/password.tsx     |  1 +
 .../components/account/auth-forms/unique-code.tsx  |  1 +
 web/core/components/onboarding/profile-setup.tsx   |  3 +++
 14 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/admin/app/general/form.tsx b/admin/app/general/form.tsx
index 380f39357..4422ee91f 100644
--- a/admin/app/general/form.tsx
+++ b/admin/app/general/form.tsx
@@ -86,6 +86,7 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
               value={instanceAdmins[0]?.user_detail?.email ?? ""}
               placeholder="Admin email"
               className="w-full cursor-not-allowed !text-custom-text-400"
+              autoComplete="on"
               disabled
             />
           </div>
diff --git a/admin/core/components/instance/setup-form.tsx b/admin/core/components/instance/setup-form.tsx
index ec3919896..7e987dbdf 100644
--- a/admin/core/components/instance/setup-form.tsx
+++ b/admin/core/components/instance/setup-form.tsx
@@ -174,6 +174,7 @@ export const InstanceSetupForm: FC = (props) => {
                 placeholder="Wilber"
                 value={formData.first_name}
                 onChange={(e) => handleFormChange("first_name", e.target.value)}
+                autoComplete="on"
                 autoFocus
               />
             </div>
@@ -190,6 +191,7 @@ export const InstanceSetupForm: FC = (props) => {
                 placeholder="Wright"
                 value={formData.last_name}
                 onChange={(e) => handleFormChange("last_name", e.target.value)}
+                autoComplete="on"
               />
             </div>
           </div>
@@ -208,6 +210,7 @@ export const InstanceSetupForm: FC = (props) => {
               value={formData.email}
               onChange={(e) => handleFormChange("email", e.target.value)}
               hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
+              autoComplete="on"
             />
             {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
               <p className="px-1 text-xs text-red-500">{errorData.message}</p>
@@ -247,6 +250,7 @@ export const InstanceSetupForm: FC = (props) => {
                 hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
                 onFocus={() => setIsPasswordInputFocused(true)}
                 onBlur={() => setIsPasswordInputFocused(false)}
+                autoComplete="on"
               />
               {showPassword.password ? (
                 <button
diff --git a/admin/core/components/login/sign-in-form.tsx b/admin/core/components/login/sign-in-form.tsx
index 72aeae50d..30d7011e7 100644
--- a/admin/core/components/login/sign-in-form.tsx
+++ b/admin/core/components/login/sign-in-form.tsx
@@ -127,6 +127,7 @@ export const InstanceSignInForm: FC = (props) => {
               placeholder="name@company.com"
               value={formData.email}
               onChange={(e) => handleFormChange("email", e.target.value)}
+              autoComplete="on"
               autoFocus
             />
           </div>
@@ -145,6 +146,7 @@ export const InstanceSignInForm: FC = (props) => {
                 placeholder="Enter your password"
                 value={formData.password}
                 onChange={(e) => handleFormChange("password", e.target.value)}
+                autoComplete="on"
               />
               {showPassword ? (
                 <button
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
index 10f9fd85c..9b645c022 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -7,10 +7,21 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   inputSize?: "sm" | "md";
   hasError?: boolean;
   className?: string;
+  autoComplete?: "on" | "off";
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const { id, type, name, mode = "primary", inputSize = "sm", hasError = false, className = "", ...rest } = props;
+  const {
+    id,
+    type,
+    name,
+    mode = "primary",
+    inputSize = "sm",
+    hasError = false,
+    className = "",
+    autoComplete = "off",
+    ...rest
+  } = props;
 
   return (
     <input
@@ -31,6 +42,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
         },
         className
       )}
+      autoComplete={autoComplete}
       {...rest}
     />
   );
diff --git a/space/core/components/account/auth-forms/email.tsx b/space/core/components/account/auth-forms/email.tsx
index ec29a429d..6721aedab 100644
--- a/space/core/components/account/auth-forms/email.tsx
+++ b/space/core/components/account/auth-forms/email.tsx
@@ -63,6 +63,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
+            autoComplete="on"
             autoFocus
           />
           {email.length > 0 && (
diff --git a/space/core/components/account/auth-forms/password.tsx b/space/core/components/account/auth-forms/password.tsx
index 4d4467d63..3d87cded5 100644
--- a/space/core/components/account/auth-forms/password.tsx
+++ b/space/core/components/account/auth-forms/password.tsx
@@ -157,6 +157,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
             className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
             onFocus={() => setIsPasswordInputFocused(true)}
             onBlur={() => setIsPasswordInputFocused(false)}
+            autoComplete="on"
             autoFocus
           />
           {showPassword?.password ? (
diff --git a/web/app/accounts/forgot-password/page.tsx b/web/app/accounts/forgot-password/page.tsx
index 3e86e8eff..91516c5b9 100644
--- a/web/app/accounts/forgot-password/page.tsx
+++ b/web/app/accounts/forgot-password/page.tsx
@@ -154,6 +154,7 @@ export default function ForgotPasswordPage() {
                         hasError={Boolean(errors.email)}
                         placeholder="name@company.com"
                         className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                        autoComplete="on"
                         disabled={resendTimerCode > 0}
                       />
                     )}
diff --git a/web/app/accounts/reset-password/page.tsx b/web/app/accounts/reset-password/page.tsx
index 4d5303b98..04d6e3115 100644
--- a/web/app/accounts/reset-password/page.tsx
+++ b/web/app/accounts/reset-password/page.tsx
@@ -153,6 +153,7 @@ export default function ResetPasswordPage() {
                       //hasError={Boolean(errors.email)}
                       placeholder="name@company.com"
                       className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
+                      autoComplete="on"
                       disabled
                     />
                   </div>
@@ -173,6 +174,7 @@ export default function ResetPasswordPage() {
                       minLength={8}
                       onFocus={() => setIsPasswordInputFocused(true)}
                       onBlur={() => setIsPasswordInputFocused(false)}
+                      autoComplete="on"
                       autoFocus
                     />
                     {showPassword.password ? (
diff --git a/web/app/accounts/set-password/page.tsx b/web/app/accounts/set-password/page.tsx
index df1b5d567..f3ac35b76 100644
--- a/web/app/accounts/set-password/page.tsx
+++ b/web/app/accounts/set-password/page.tsx
@@ -147,6 +147,7 @@ const SetPasswordPage = observer(() => {
                       //hasError={Boolean(errors.email)}
                       placeholder="name@company.com"
                       className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
+                      autoComplete="on"
                       disabled
                     />
                   </div>
@@ -167,6 +168,7 @@ const SetPasswordPage = observer(() => {
                       minLength={8}
                       onFocus={() => setIsPasswordInputFocused(true)}
                       onBlur={() => setIsPasswordInputFocused(false)}
+                      autoComplete="on"
                       autoFocus
                     />
                     {showPassword.password ? (
diff --git a/web/app/profile/page.tsx b/web/app/profile/page.tsx
index ebad3bc58..a50a70c5a 100644
--- a/web/app/profile/page.tsx
+++ b/web/app/profile/page.tsx
@@ -245,6 +245,7 @@ const ProfileSettingsPage = observer(() => {
                       placeholder="Enter your first name"
                       className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
                       maxLength={24}
+                      autoComplete="on"
                     />
                   )}
                 />
@@ -269,6 +270,7 @@ const ProfileSettingsPage = observer(() => {
                       placeholder="Enter your last name"
                       className="w-full rounded-md"
                       maxLength={24}
+                      autoComplete="on"
                     />
                   )}
                 />
@@ -296,6 +298,7 @@ const ProfileSettingsPage = observer(() => {
                       className={`w-full cursor-not-allowed rounded-md !bg-custom-background-80 ${
                         errors.email ? "border-red-500" : ""
                       }`}
+                      autoComplete="on"
                       disabled
                     />
                   )}
diff --git a/web/core/components/account/auth-forms/email.tsx b/web/core/components/account/auth-forms/email.tsx
index 9acfcc5cc..ab328a7e1 100644
--- a/web/core/components/account/auth-forms/email.tsx
+++ b/web/core/components/account/auth-forms/email.tsx
@@ -63,6 +63,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
+            autoComplete="on"
             autoFocus
           />
           {email.length > 0 && (
diff --git a/web/core/components/account/auth-forms/password.tsx b/web/core/components/account/auth-forms/password.tsx
index 618c578b0..088dc3194 100644
--- a/web/core/components/account/auth-forms/password.tsx
+++ b/web/core/components/account/auth-forms/password.tsx
@@ -208,6 +208,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
               className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
+              autoComplete="on"
               autoFocus
             />
             {showPassword?.password ? (
diff --git a/web/core/components/account/auth-forms/unique-code.tsx b/web/core/components/account/auth-forms/unique-code.tsx
index 8c7b8a60f..530874eb9 100644
--- a/web/core/components/account/auth-forms/unique-code.tsx
+++ b/web/core/components/account/auth-forms/unique-code.tsx
@@ -107,6 +107,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             onChange={(e) => handleFormChange("email", e.target.value)}
             placeholder="name@company.com"
             className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0`}
+            autoComplete="on"
             disabled
           />
           {uniqueCodeFormData.email.length > 0 && (
diff --git a/web/core/components/onboarding/profile-setup.tsx b/web/core/components/onboarding/profile-setup.tsx
index 134f6e7a6..cc89748cf 100644
--- a/web/core/components/onboarding/profile-setup.tsx
+++ b/web/core/components/onboarding/profile-setup.tsx
@@ -372,6 +372,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                           hasError={Boolean(errors.first_name)}
                           placeholder="Wilbur"
                           className="w-full border-onboarding-border-100"
+                          autoComplete="on"
                         />
                       )}
                     />
@@ -405,6 +406,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                           hasError={Boolean(errors.last_name)}
                           placeholder="Wright"
                           className="w-full border-onboarding-border-100"
+                          autoComplete="on"
                         />
                       )}
                     />
@@ -438,6 +440,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                               className="w-full border-[0.5px] border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                               onFocus={() => setIsPasswordInputFocused(true)}
                               onBlur={() => setIsPasswordInputFocused(false)}
+                              autoComplete="on"
                             />
                             {showPassword.password ? (
                               <EyeOff