Feat: UI for OAuth2 Credentials independent of the Request Output pan…

…e - sort tokens first. Blur unfocused tokens for privacy.

usebruno#1999
usebruno#1003

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js

@@ -7,6 +7,8 @@ import { useDispatch } from 'react-redux';
 const CredentialsPreview = ({ item, collection }) => {
   const oauth2CredentialsAreaRef = React.createRef();
   const [oauth2Credentials, setOauth2Credentials] = useState({});
+  const [focusedField, setFocusedField] = useState(null);
+
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -31,6 +33,27 @@ const CredentialsPreview = ({ item, collection }) => {
       });
   };
 
+  const handleFocus = (field) => {
+    setFocusedField(field);
+  };
+
+  const handleBlur = () => {
+    setFocusedField(null);
+  };
+
+  const sortedFields = () => {
+    const tokens = {};
+    const extras = {};
+    Object.entries(oauth2Credentials).forEach(([key, value]) => {
+      if (key.endsWith('_token')) {
+        tokens[key] = value;
+      } else {
+        extras[key] = value;
+      }
+    });
+    return { ...tokens, ...extras };
+  };
+
   return (
     <div className="flex flex-col w-full gap-1 mt-4">
       <div className="flex flex-row gap-4">
@@ -43,10 +66,25 @@ const CredentialsPreview = ({ item, collection }) => {
       </div>
       <div ref={oauth2CredentialsAreaRef}>
         <label className="flex flex-row w-full mt-2 gap-2">Cached OAuth2 Credentials:</label>
-        {Object.entries(oauth2Credentials).map(([key, value]) => (
-          <div key={key}>
-            <label className="text-xs">{key}</label>
-            <textarea className="w-full h-24 p-2 text-xs border rounded" value={value} readOnly />
+        {Object.entries(sortedFields()).map(([field, value]) => (
+          <div key={field}>
+            <label className="text-xs">{field}</label>
+            {focusedField === field || !field.endsWith('_token') ? (
+              <textarea className="w-full h-24 p-2 text-xs border rounded" value={value} onBlur={handleBlur} readOnly />
+            ) : (
+              <textarea
+                className="w-full h-24 p-2 text-xs border rounded blur"
+                value={value}
+                onFocus={() => handleFocus(field)}
+                readOnly
+              />
+            )}
+            <style jsx>{`
+              blur {
+                filter: 'blur(4px)';
+                transition: filter 0.3s ease;
+              }
+            `}</style>
           </div>
         ))}
       </div>