[WEB-2211] fix: input autoComplete (#5333)

* fix: input autoComplete * chore: code refactor * chore: set autoComplete on for email, password and name
makeplane · Aug 9, 2024 · 24b1e71 · 24b1e71
1 parent 0b72bd3
commit 24b1e71
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 1 deletion.
diff --git 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
@@ -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
@@ -127,6 +127,7 @@ export const InstanceSignInForm: FC = (props) => {
               placeholder="[email protected]"
               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
@@ -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
@@ -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
@@ -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
@@ -154,6 +154,7 @@ export default function ForgotPasswordPage() {
                         hasError={Boolean(errors.email)}
                         placeholder="[email protected]"
                         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
@@ -153,6 +153,7 @@ export default function ResetPasswordPage() {
                       //hasError={Boolean(errors.email)}
                       placeholder="[email protected]"
                       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
@@ -147,6 +147,7 @@ const SetPasswordPage = observer(() => {
                       //hasError={Boolean(errors.email)}
                       placeholder="[email protected]"
                       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
@@ -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
@@ -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
@@ -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
@@ -107,6 +107,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             onChange={(e) => handleFormChange("email", e.target.value)}
             placeholder="[email protected]"
             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
@@ -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