From 456e95cb828b51a0852cb3a645b650304227e2f1 Mon Sep 17 00:00:00 2001
From: Khaliq <khaliq@nango.dev>
Date: Fri, 29 Sep 2023 21:37:56 +0300
Subject: [PATCH] [gh-#1032] autoComplete="new-password" (#1049)

* [gh-#1032] autoComplete="new-password"

* [gh-#1032] remove form autoComplete off
---
 packages/webapp/src/pages/ConnectionCreate.tsx  |  5 ++++-
 packages/webapp/src/pages/IntegrationCreate.tsx |  4 +++-
 packages/webapp/src/pages/ProjectSettings.tsx   | 12 ++++++++----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/webapp/src/pages/ConnectionCreate.tsx b/packages/webapp/src/pages/ConnectionCreate.tsx
index 2763d47f9ab..5e1056de3fd 100644
--- a/packages/webapp/src/pages/ConnectionCreate.tsx
+++ b/packages/webapp/src/pages/ConnectionCreate.tsx
@@ -301,7 +301,7 @@ nango.auth('${integration?.uniqueKey}', '${connectionId}'${connectionConfigStr})
                 <div className="mx-auto w-largebox pb-40">
                     <h2 className="mx-20 mt-16 text-left text-3xl font-semibold tracking-tight text-white mb-12">Add New Connection</h2>
                     <div className="mx-20 h-fit border border-border-gray rounded-md text-white text-sm py-14 px-8">
-                        <form className="space-y-6" onSubmit={handleCreate} autoComplete="off">
+                        <form className="space-y-6" onSubmit={handleCreate}>
                             <div>
                                 <div>
                                     <div className="flex">
@@ -346,6 +346,7 @@ nango.auth('${integration?.uniqueKey}', '${connectionId}'${connectionConfigStr})
                                             name="connection_id"
                                             type="text"
                                             defaultValue={connectionId}
+                                            autoComplete="new-password"
                                             required
                                             className="border-border-gray bg-bg-black text-text-light-gray focus:border-white focus:ring-white block h-11 w-full appearance-none rounded-md border px-3 py-2 text-base placeholder-gray-400 shadow-sm focus:outline-none"
                                             onChange={handleConnectionIdChange}
@@ -409,6 +410,7 @@ nango.auth('${integration?.uniqueKey}', '${connectionId}'${connectionConfigStr})
                                             name={`connection-config-${paramName}`}
                                             type="text"
                                             required
+                                            autoComplete="new-password"
                                             className="border-border-gray bg-bg-black text-text-light-gray focus:border-white focus:ring-white block h-11 w-full appearance-none rounded-md border px-3 py-2 text-base placeholder-gray-400 shadow-sm focus:outline-none"
                                             onChange={handleConnectionConfigParamsChange}
                                         />
@@ -518,6 +520,7 @@ nango.auth('${integration?.uniqueKey}', '${connectionId}'${connectionConfigStr})
                                             id="authorization_params"
                                             name="authorization_params"
                                             type="text"
+                                            autoComplete="new-password"
                                             defaultValue="{ }"
                                             className={`${authorizationParamsError ? 'border-red-700' : 'border-border-gray'}  ${
                                                 authorizationParamsError ? 'text-red-700' : 'text-text-light-gray'
diff --git a/packages/webapp/src/pages/IntegrationCreate.tsx b/packages/webapp/src/pages/IntegrationCreate.tsx
index d0c95eba6de..d71c088902f 100644
--- a/packages/webapp/src/pages/IntegrationCreate.tsx
+++ b/packages/webapp/src/pages/IntegrationCreate.tsx
@@ -197,7 +197,7 @@ export default function IntegrationCreate() {
                         : 'Add New Integration'}
                     </h2>
                     <div className="mx-20 h-fit border border-border-gray rounded-md text-white text-sm py-14 px-8">
-                        <form className="space-y-6" onSubmit={handleSave} autoComplete="off">
+                        <form className="space-y-6" onSubmit={handleSave}>
                             {!providerConfigKey && providers && (
                                 <div>
                                     <div>
@@ -244,6 +244,7 @@ export default function IntegrationCreate() {
                                                 id="unique_key"
                                                 name="unique_key"
                                                 type="text"
+                                                autoComplete="new-password"
                                                 required
                                                 defaultValue={selectedProvider}
                                                 minLength={1}
@@ -304,6 +305,7 @@ export default function IntegrationCreate() {
                                                 name="client_id"
                                                 type="text"
                                                 defaultValue={integration ? integration.client_id : ''}
+                                                autoComplete="new-password"
                                                 required
                                                 minLength={1}
                                                 className="border-border-gray bg-bg-black text-text-light-gray focus:border-white focus:ring-white block h-11 w-full appearance-none rounded-md border px-3 py-2 text-base placeholder-gray-400 shadow-sm focus:outline-none"
diff --git a/packages/webapp/src/pages/ProjectSettings.tsx b/packages/webapp/src/pages/ProjectSettings.tsx
index ceac758480e..dd58154531b 100644
--- a/packages/webapp/src/pages/ProjectSettings.tsx
+++ b/packages/webapp/src/pages/ProjectSettings.tsx
@@ -460,11 +460,12 @@ export default function ProjectSettings() {
                                         </div>
                                     </div>
                                     {callbackEditMode && (
-                                        <form className="mt-2" onSubmit={handleCallbackSave} autoComplete="off">
+                                        <form className="mt-2" onSubmit={handleCallbackSave}>
                                             <div className="flex">
                                                 <input
                                                     id="callback_url"
                                                     name="callback_url"
+                                                    autoComplete="new-password"
                                                     type="url"
                                                     defaultValue={callbackUrl}
                                                     className="border-border-gray bg-bg-black text-text-light-gray focus:ring-blue block h-11 w-full appearance-none rounded-md border px-3 py-2 text-base placeholder-gray-600 shadow-sm focus:border-blue-500 focus:outline-none"
@@ -535,11 +536,12 @@ export default function ProjectSettings() {
                                         </Tooltip>
                                     </div>
                                     {webhookEditMode && (
-                                        <form className="mt-2" onSubmit={handleWebhookbackSave} autoComplete="off">
+                                        <form className="mt-2" onSubmit={handleWebhookbackSave}>
                                             <div className="flex">
                                                 <input
                                                     id="webhook_url"
                                                     name="webhook_url"
+                                                    autoComplete="new-password"
                                                     type="url"
                                                     defaultValue={webhookUrl}
                                                     className="border-border-gray bg-bg-black text-text-light-gray focus:ring-blue block h-11 w-full appearance-none rounded-md border px-3 py-2 text-base placeholder-gray-600 shadow-sm focus:border-blue-500 focus:outline-none"
@@ -612,11 +614,12 @@ export default function ProjectSettings() {
                                         </div>
                                     )}
                                     {hmacEditMode && (
-                                        <form className="mt-2" onSubmit={handleHmacSave} autoComplete="off">
+                                        <form className="mt-2" onSubmit={handleHmacSave}>
                                             <div className="flex">
                                                 <input
                                                     id="hmac_key"
                                                     name="hmac_key"
+                                                    autoComplete="new-password"
                                                     type="text"
                                                     defaultValue={hmacKey}
                                                     className="border-border-gray bg-bg-black text-text-light-gray focus:ring-blue block h-11 w-full appearance-none rounded-md border px-3 py-2 text-base placeholder-gray-600 shadow-sm focus:border-blue-500 focus:outline-none"
@@ -666,7 +669,6 @@ export default function ProjectSettings() {
                                     <form
                                         className="mt-2"
                                         onSubmit={handleEnvVariablesSave}
-                                        autoComplete="off"
                                     >
                                         {envVariables.map((envVar, index) => (
                                             <div key={index} className="flex items-center mt-2">
@@ -674,6 +676,7 @@ export default function ProjectSettings() {
                                                     id={`env_var_name_${index}`}
                                                     name={`env_var_name_${index}`}
                                                     defaultValue={envVar.name}
+                                                    autoComplete="new-password"
                                                     required
                                                     type="text"
                                                     className="border-border-gray bg-bg-black text-text-light-gray focus:ring-blue block h-11 w-full appearance-none rounded-md border text-base placeholder-gray-600 shadow-sm focus:border-blue-500 focus:outline-none mr-3"
@@ -683,6 +686,7 @@ export default function ProjectSettings() {
                                                     name={`env_var_value_${index}`}
                                                     defaultValue={envVar.value}
                                                     required
+                                                    autoComplete="new-password"
                                                     type="password"
                                                     onMouseEnter={(e) => e.currentTarget.type = 'text'}
                                                     onMouseLeave={(e) => {