diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js index 7dabb4c71..f7cebda40 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js @@ -86,7 +86,7 @@ const AuthMode = ({ collection }) => { onModeChange('oauth2'); }} > - Oauth2 + OAuth 2.0
{ const dispatch = useDispatch(); @@ -64,17 +62,6 @@ const OAuth2AuthorizationCode = ({ collection }) => { }) ); }; - - const handleClearCache = (e) => { - clearOauth2Cache(collection?.uid) - .then(() => { - toast.success('cleared cache successfully'); - }) - .catch((err) => { - toast.error(err.message); - }); - }; - return ( {inputsConfig.map((input) => { @@ -105,14 +92,6 @@ const OAuth2AuthorizationCode = ({ collection }) => { onChange={handlePKCEToggle} />
-
- - -
); }; 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 d69122b48..856e9373e 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 @@ -60,9 +60,6 @@ const OAuth2ClientCredentials = ({ collection }) => { ); })} - ); }; 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 d2d9eed1f..068f0070c 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 @@ -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(); @@ -62,11 +62,8 @@ const OAuth2AuthorizationCode = ({ item, collection }) => { ); })} - ); }; -export default OAuth2AuthorizationCode; +export default OAuth2PasswordCredentials; diff --git a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js index 1aa674ab9..e9d511168 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js @@ -5,6 +5,7 @@ import GrantTypeSelector from './GrantTypeSelector/index'; import OAuth2PasswordCredentials from './PasswordCredentials/index'; import OAuth2AuthorizationCode from './AuthorizationCode/index'; import OAuth2ClientCredentials from './ClientCredentials/index'; +import CredentialsPreview from 'components/RequestPane/Auth/OAuth2/CredentialsPreview'; const grantTypeComponentMap = (grantType, collection) => { switch (grantType) { @@ -30,6 +31,7 @@ const OAuth2 = ({ collection }) => { {grantTypeComponentMap(oAuth?.grantType, collection)} + ); }; 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 2bb5dcc35..0265ddbe4 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 @@ -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(); @@ -67,16 +65,6 @@ const OAuth2AuthorizationCode = ({ item, collection }) => { ); }; - const handleClearCache = (e) => { - clearOauth2Cache(collection?.uid) - .then(() => { - toast.success('cleared cache successfully'); - }) - .catch((err) => { - toast.error(err.message); - }); - }; - return ( {inputsConfig.map((input) => { @@ -108,14 +96,6 @@ const OAuth2AuthorizationCode = ({ item, collection }) => { onChange={handlePKCEToggle} /> -
- - -
); }; 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 a43c8f0ad..1bbee2253 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 @@ -62,9 +62,6 @@ const OAuth2ClientCredentials = ({ item, collection }) => { ); })} - ); }; diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/StyledWrapper.js new file mode 100644 index 000000000..a1f84cfe6 --- /dev/null +++ b/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; diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js new file mode 100644 index 000000000..d7415fe25 --- /dev/null +++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js @@ -0,0 +1,80 @@ +import React, { useEffect, useState } from 'react'; +import { clearOauth2Cache, readOauth2CachedCredentials } from 'utils/network'; +import { sendCollectionOauth2Request, sendRequest } from 'providers/ReduxStore/slices/collections/actions'; +import toast from 'react-hot-toast'; +import { useDispatch } from 'react-redux'; +import StyledWrapper from './StyledWrapper'; + +const CredentialsPreview = ({ item, collection }) => { + const oauth2CredentialsAreaRef = React.createRef(); + const [oauth2Credentials, setOauth2Credentials] = useState({}); + + const dispatch = useDispatch(); + useEffect(() => { + oauth2CredentialsAreaRef.current.value = oauth2Credentials; + readOauth2CachedCredentials(collection.uid).then((credentials) => setOauth2Credentials(credentials)); + }, [oauth2CredentialsAreaRef]); + + const handleRun = async () => { + if (item) { + dispatch(sendRequest(item, collection.uid)); + } else { + dispatch(sendCollectionOauth2Request(collection.uid)); + } + }; + + const handleClearCache = (e) => { + clearOauth2Cache(collection?.uid) + .then(() => { + readOauth2CachedCredentials(collection.uid).then((credentials) => { + setOauth2Credentials(credentials); + toast.success('Cleared cache successfully'); + }); + }) + .catch((err) => { + toast.error(err.message); + }); + }; + + 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 ( + +
+ {Object.entries(oauth2Credentials).length > 0 ? ( + <> + +
+ Cached OAuth2 Credentials + {Object.entries(sortedFields()).map(([field, value]) => ( +
+ +