From c5ec7eea349b1f3fff8ee4db1bed4964e5736b6b Mon Sep 17 00:00:00 2001
From: Natalie Carey <natalie@nataliecarey.uk>
Date: Mon, 5 Aug 2024 07:21:01 +0100
Subject: [PATCH] Feature: Add a show/hide privacy toggle to passwords and
 secrets in Auth options (#2750)

* mask support for SingleLineEditor

* add secret visibility toggle button

* move visibility toggle into SingleLineComponent

Co-authored-by: Liz MacLean <18120837+lizziemac@users.noreply.github.com>

* fix eye button focus state

* center enabled and secret toggle

* fix input field scales to 100% width

* Using a prvacy toggle for all sensitive auth details.

* Applied privacy toggle to Collection Auth settings.

---------

Co-authored-by: Max Bauer <krummbar@pm.me>
Co-authored-by: Liz MacLean <18120837+lizziemac@users.noreply.github.com>
---
 .../components/CollectionSettings/Auth/AwsV4Auth/index.js   | 1 +
 .../components/CollectionSettings/Auth/BasicAuth/index.js   | 1 +
 .../components/CollectionSettings/Auth/BearerAuth/index.js  | 1 +
 .../components/CollectionSettings/Auth/DigestAuth/index.js  | 1 +
 .../Auth/OAuth2/AuthorizationCode/index.js                  | 3 ++-
 .../Auth/OAuth2/AuthorizationCode/inputsConfig.js           | 3 ++-
 .../Auth/OAuth2/ClientCredentials/index.js                  | 3 ++-
 .../Auth/OAuth2/ClientCredentials/inputsConfig.js           | 3 ++-
 .../Auth/OAuth2/PasswordCredentials/index.js                | 3 ++-
 .../Auth/OAuth2/PasswordCredentials/inputsConfig.js         | 3 ++-
 .../src/components/RequestPane/Auth/AwsV4Auth/index.js      | 1 +
 .../src/components/RequestPane/Auth/BasicAuth/index.js      | 1 +
 .../src/components/RequestPane/Auth/BearerAuth/index.js     | 1 +
 .../src/components/RequestPane/Auth/DigestAuth/index.js     | 1 +
 .../RequestPane/Auth/OAuth2/AuthorizationCode/index.js      | 3 ++-
 .../Auth/OAuth2/AuthorizationCode/inputsConfig.js           | 3 ++-
 .../RequestPane/Auth/OAuth2/ClientCredentials/index.js      | 3 ++-
 .../Auth/OAuth2/ClientCredentials/inputsConfig.js           | 3 ++-
 .../RequestPane/Auth/OAuth2/PasswordCredentials/index.js    | 3 ++-
 .../Auth/OAuth2/PasswordCredentials/inputsConfig.js         | 6 ++++--
 20 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js
index bc9cb67b5..38fae3447 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js
@@ -138,6 +138,7 @@ const AwsV4Auth = ({ collection }) => {
           onSave={handleSave}
           onChange={(val) => handleSecretAccessKeyChange(val)}
           collection={collection}
+          isSecret={true}
         />
       </div>
 
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
index b09cf1175..3c29895ed 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
@@ -62,6 +62,7 @@ const BasicAuth = ({ collection }) => {
           onSave={handleSave}
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
+          isSecret={true}
         />
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
index a8b341a8c..82f8be12c 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
@@ -37,6 +37,7 @@ const BearerAuth = ({ collection }) => {
           onSave={handleSave}
           onChange={(val) => handleTokenChange(val)}
           collection={collection}
+          isSecret={true}
         />
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js
index 3e084c06d..5ac6b1e26 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js
@@ -62,6 +62,7 @@ const DigestAuth = ({ collection }) => {
           onSave={handleSave}
           onChange={(val) => handlePasswordChange(val)}
           collection={collection}
+          isSecret={true}
         />
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js
index 8ec71a69a..8f3dc1601 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js
@@ -78,7 +78,7 @@ const OAuth2AuthorizationCode = ({ collection }) => {
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       {inputsConfig.map((input) => {
-        const { key, label } = input;
+        const { key, label, isSecret } = input;
         return (
           <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
             <label className="block font-medium">{label}</label>
@@ -90,6 +90,7 @@ const OAuth2AuthorizationCode = ({ collection }) => {
                 onChange={(val) => handleChange(key, val)}
                 onRun={handleRun}
                 collection={collection}
+                isSecret={isSecret}
               />
             </div>
           </div>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/inputsConfig.js b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/inputsConfig.js
index 67bc277aa..a100ce8e5 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/inputsConfig.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/inputsConfig.js
@@ -17,7 +17,8 @@ const inputsConfig = [
   },
   {
     key: 'clientSecret',
-    label: 'Client Secret'
+    label: 'Client Secret',
+    isSecret: true
   },
   {
     key: 'scope',
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js
index 5be4fde1d..d69122b48 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js
@@ -42,7 +42,7 @@ const OAuth2ClientCredentials = ({ collection }) => {
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       {inputsConfig.map((input) => {
-        const { key, label } = input;
+        const { key, label, isSecret } = input;
         return (
           <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
             <label className="block font-medium">{label}</label>
@@ -54,6 +54,7 @@ const OAuth2ClientCredentials = ({ collection }) => {
                 onChange={(val) => handleChange(key, val)}
                 onRun={handleRun}
                 collection={collection}
+                isSecret={isSecret}
               />
             </div>
           </div>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/inputsConfig.js b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/inputsConfig.js
index 164dcaab4..f2cd88ae3 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/inputsConfig.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/inputsConfig.js
@@ -9,7 +9,8 @@ const inputsConfig = [
   },
   {
     key: 'clientSecret',
-    label: 'Client Secret'
+    label: 'Client Secret',
+    isSecret: true
   },
   {
     key: 'scope',
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js
index 44598da1a..d2d9eed1f 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js
@@ -44,7 +44,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       {inputsConfig.map((input) => {
-        const { key, label } = input;
+        const { key, label, isSecret } = input;
         return (
           <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
             <label className="block font-medium">{label}</label>
@@ -56,6 +56,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
                 onChange={(val) => handleChange(key, val)}
                 onRun={handleRun}
                 collection={collection}
+                isSecret={isSecret}
               />
             </div>
           </div>
diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/inputsConfig.js b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/inputsConfig.js
index 6366bb5e7..ec9efb1a8 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/inputsConfig.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/inputsConfig.js
@@ -17,7 +17,8 @@ const inputsConfig = [
   },
   {
     key: 'clientSecret',
-    label: 'Client Secret'
+    label: 'Client Secret',
+    isSecret: true
   },
   {
     key: 'scope',
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js
index 41820a0c8..a44cecc1b 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js
@@ -150,6 +150,7 @@ const AwsV4Auth = ({ onTokenChange, item, collection }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isSecret={true}
         />
       </div>
 
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
index bbe16ec70..8582a53cd 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
@@ -69,6 +69,7 @@ const BasicAuth = ({ item, collection }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isSecret={true}
         />
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
index 1dfa42b15..bef4d062a 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
@@ -43,6 +43,7 @@ const BearerAuth = ({ item, collection }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isSecret={true}
         />
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js
index 24f4610f0..e91ed8d1f 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js
@@ -69,6 +69,7 @@ const DigestAuth = ({ item, collection }) => {
           onRun={handleRun}
           collection={collection}
           item={item}
+          isSecret={true}
         />
       </div>
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
index 793be57f0..2bb5dcc35 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
@@ -80,7 +80,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       {inputsConfig.map((input) => {
-        const { key, label } = input;
+        const { key, label, isSecret } = input;
         return (
           <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
             <label className="block font-medium">{label}</label>
@@ -93,6 +93,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
                 onRun={handleRun}
                 collection={collection}
                 item={item}
+                isSecret={isSecret}
               />
             </div>
           </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/inputsConfig.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/inputsConfig.js
index 67bc277aa..a100ce8e5 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/inputsConfig.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/inputsConfig.js
@@ -17,7 +17,8 @@ const inputsConfig = [
   },
   {
     key: 'clientSecret',
-    label: 'Client Secret'
+    label: 'Client Secret',
+    isSecret: true
   },
   {
     key: 'scope',
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
index df08475e8..a43c8f0ad 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
@@ -43,7 +43,7 @@ const OAuth2ClientCredentials = ({ item, collection }) => {
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       {inputsConfig.map((input) => {
-        const { key, label } = input;
+        const { key, label, isSecret } = input;
         return (
           <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
             <label className="block font-medium">{label}</label>
@@ -56,6 +56,7 @@ const OAuth2ClientCredentials = ({ item, collection }) => {
                 onRun={handleRun}
                 collection={collection}
                 item={item}
+                isSecret={isSecret}
               />
             </div>
           </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/inputsConfig.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/inputsConfig.js
index 164dcaab4..f2cd88ae3 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/inputsConfig.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/inputsConfig.js
@@ -9,7 +9,8 @@ const inputsConfig = [
   },
   {
     key: 'clientSecret',
-    label: 'Client Secret'
+    label: 'Client Secret',
+    isSecret: true
   },
   {
     key: 'scope',
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
index cfcff9784..4ec8c1faa 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
@@ -45,7 +45,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       {inputsConfig.map((input) => {
-        const { key, label } = input;
+        const { key, label, isSecret } = input;
         return (
           <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
             <label className="block font-medium">{label}</label>
@@ -58,6 +58,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
                 onRun={handleRun}
                 collection={collection}
                 item={item}
+                isSecret={isSecret}
               />
             </div>
           </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/inputsConfig.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/inputsConfig.js
index 6366bb5e7..32f2c999c 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/inputsConfig.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/inputsConfig.js
@@ -9,7 +9,8 @@ const inputsConfig = [
   },
   {
     key: 'password',
-    label: 'Password'
+    label: 'Password',
+    isSecret: true
   },
   {
     key: 'clientId',
@@ -17,7 +18,8 @@ const inputsConfig = [
   },
   {
     key: 'clientSecret',
-    label: 'Client Secret'
+    label: 'Client Secret',
+    isSecret: true
   },
   {
     key: 'scope',