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>
2024-12-25 08:09:17 +01:00 · 2024-08-05 07:21:01 +01:00 · 2024-08-05 07:21:01 +01:00 · c5ec7eea34
commit c5ec7eea34
parent 741250068f
20 changed files with 34 additions and 13 deletions
--- 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>

--- 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>
--- 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>
--- 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>
--- 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>
--- 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',
--- 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>
--- 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',
--- 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>
--- 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',
--- 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>

--- 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>
--- 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>
--- 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>
--- 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>
--- 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',
--- 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>
--- 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',
--- 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>
--- 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',