Feature/inherit oauth

packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js

@@ -77,7 +77,7 @@ const AuthMode = ({ collection }) => {
               onModeChange('oauth2');
             }}
           >
-            Oauth2
+            OAuth 2.0
           </div>
           <div
             className="dropdown-item"

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js

@@ -7,8 +7,6 @@ import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/Redux
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
-import { clearOauth2Cache } from 'utils/network/index';
-import toast from 'react-hot-toast';
 
 const OAuth2AuthorizationCode = ({ collection }) => {
   const dispatch = useDispatch();
@@ -62,17 +60,6 @@ const OAuth2AuthorizationCode = ({ collection }) => {
       })
     );
   };
-
-  const handleClearCache = (e) => {
-    clearOauth2Cache(collection?.uid)
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       {inputsConfig.map((input) => {
@@ -102,14 +89,6 @@ const OAuth2AuthorizationCode = ({ collection }) => {
           onChange={handlePKCEToggle}
         />
       </div>
-      <div className="flex flex-row gap-4">
-        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-          Get Access Token
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js

@@ -59,9 +59,6 @@ const OAuth2ClientCredentials = ({ collection }) => {
           </div>
         );
       })}
-      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-        Get Access Token
-      </button>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/GrantTypeSelector/index.js

@@ -90,6 +90,15 @@ const GrantTypeSelector = ({ collection }) => {
           >
             Client Credentials
           </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onGrantTypeChange('implicit');
+            }}
+          >
+            Implicit
+          </div>
         </Dropdown>
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/Implicit/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/Implicit/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
+
+const OAuth2Implicit = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+
+  const handleRun = async () => {
+    dispatch(sendCollectionOauth2Request(collection.uid));
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const { callbackUrl, authorizationUrl, clientId, scope } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'implicit',
+          callbackUrl,
+          authorizationUrl,
+          clientId,
+          scope,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
+      {inputsConfig.map((input) => {
+        const { key, label } = input;
+        return (
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
+            <label className="block font-medium">{label}</label>
+            <div className="single-line-editor-wrapper">
+              <SingleLineEditor
+                value={oAuth[key] || ''}
+                theme={storedTheme}
+                onSave={handleSave}
+                onChange={(val) => handleChange(key, val)}
+                onRun={handleRun}
+                collection={collection}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2Implicit;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/Implicit/inputsConfig.js

@@ -0,0 +1,20 @@
+const inputsConfig = [
+  {
+    key: 'callbackUrl',
+    label: 'Callback URL'
+  },
+  {
+    key: 'authorizationUrl',
+    label: 'Authorization URL'
+  },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js

@@ -6,9 +6,9 @@ import SingleLineEditor from 'components/SingleLineEditor';
 import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
 
-const OAuth2AuthorizationCode = ({ item, collection }) => {
+const OAuth2PasswordCredentials = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
@@ -61,11 +61,8 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
           </div>
         );
       })}
-      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-        Get Access Token
-      </button>
     </StyledWrapper>
   );
 };
 
-export default OAuth2AuthorizationCode;
+export default OAuth2PasswordCredentials;

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

@@ -5,6 +5,8 @@ import GrantTypeSelector from './GrantTypeSelector/index';
 import OAuth2PasswordCredentials from './PasswordCredentials/index';
 import OAuth2AuthorizationCode from './AuthorizationCode/index';
 import OAuth2ClientCredentials from './ClientCredentials/index';
+import OAuth2Implicit from './Implicit/index';
+import CredentialsPreview from 'components/RequestPane/Auth/OAuth2/CredentialsPreview';
 
 const grantTypeComponentMap = (grantType, collection) => {
   switch (grantType) {
@@ -17,6 +19,9 @@ const grantTypeComponentMap = (grantType, collection) => {
     case 'client_credentials':
       return <OAuth2ClientCredentials collection={collection} />;
       break;
+    case 'implicit':
+      return <OAuth2Implicit collection={collection} />;
+      break;
     default:
       return <div>TBD</div>;
       break;
@@ -30,6 +35,7 @@ const OAuth2 = ({ collection }) => {
     <StyledWrapper className="mt-2 w-full">
       <GrantTypeSelector collection={collection} />
       {grantTypeComponentMap(oAuth?.grantType, collection)}
+      <CredentialsPreview collection={collection} />
     </StyledWrapper>
   );
 };

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

@@ -7,8 +7,6 @@ import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import { clearOauth2Cache } from 'utils/network/index';
-import toast from 'react-hot-toast';
 
 const OAuth2AuthorizationCode = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -65,16 +63,6 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
     );
   };
 
-  const handleClearCache = (e) => {
-    clearOauth2Cache(collection?.uid)
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       {inputsConfig.map((input) => {
@@ -104,14 +92,6 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
           onChange={handlePKCEToggle}
         />
       </div>
-      <div className="flex flex-row gap-4">
-        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-          Get Access Token
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
     </StyledWrapper>
   );
 };

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

@@ -60,9 +60,6 @@ const OAuth2ClientCredentials = ({ item, collection }) => {
           </div>
         );
       })}
-      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-        Get Access Token
-      </button>
     </StyledWrapper>
   );
 };

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

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    display: block;
+    font-size: 0.8125rem;
+  }
+
+  textarea {
+    height: fit-content;
+    max-width: 400px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;