closeModal()} />
+
{
+ closeModal({ type: 'backdrop' });
+ }}
+ />
);
};
diff --git a/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js b/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
index d4d6eeff..61293b61 100644
--- a/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
@@ -197,10 +197,11 @@ const AssertionRow = ({
handleAssertionChange(e, assertion, 'enabled')}
/>
-
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
new file mode 100644
index 00000000..cdbdf842
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ font-size: 0.8125rem;
+
+ .auth-mode-selector {
+ background: transparent;
+
+ .auth-mode-label {
+ color: ${(props) => props.theme.colors.text.yellow};
+ }
+
+ .dropdown-item {
+ padding: 0.2rem 0.6rem !important;
+ }
+
+ .label-item {
+ padding: 0.2rem 0.6rem !important;
+ }
+ }
+
+ .caret {
+ color: rgb(140, 140, 140);
+ fill: rgb(140 140 140);
+ }
+`;
+
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
new file mode 100644
index 00000000..43c90e2c
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
@@ -0,0 +1,70 @@
+import React, { useRef, forwardRef } from 'react';
+import get from 'lodash/get';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import { useDispatch } from 'react-redux';
+import { updateRequestAuthMode } from 'providers/ReduxStore/slices/collections';
+import { humanizeRequestAuthMode } from 'utils/collections';
+import StyledWrapper from './StyledWrapper';
+
+const AuthMode = ({ item, collection }) => {
+ const dispatch = useDispatch();
+ const dropdownTippyRef = useRef();
+ const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+ const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
+
+ const Icon = forwardRef((props, ref) => {
+ return (
+
+ {humanizeRequestAuthMode(authMode)}
+
+ );
+ });
+
+ const onModeChange = (value) => {
+ dispatch(
+ updateRequestAuthMode({
+ itemUid: item.uid,
+ collectionUid: collection.uid,
+ mode: value
+ })
+ );
+ };
+
+ return (
+
+
+
} placement="bottom-end">
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('basic');
+ }}
+ >
+ Basic Auth
+
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('bearer');
+ }}
+ >
+ Bearer Token
+
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('none');
+ }}
+ >
+ No Auth
+
+
+
+ );
+};
+export default AuthMode;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
new file mode 100644
index 00000000..c2bb5d20
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ label {
+ font-size: 0.8125rem;
+ }
+
+ .single-line-editor-wrapper {
+ 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;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
new file mode 100644
index 00000000..845dae27
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
@@ -0,0 +1,76 @@
+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 { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const BasicAuth = ({ item, collection }) => {
+ const dispatch = useDispatch();
+ const { storedTheme } = useTheme();
+
+ const basicAuth = item.draft ? get(item, 'draft.request.auth.basic', {}) : get(item, 'request.auth.basic', {});
+
+ const handleRun = () => dispatch(sendRequest(item, collection.uid));
+ const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+ const handleUsernameChange = (username) => {
+ dispatch(
+ updateAuth({
+ mode: 'basic',
+ collectionUid: collection.uid,
+ itemUid: item.uid,
+ content: {
+ username: username,
+ password: basicAuth.password
+ }
+ })
+ );
+ };
+
+ const handlePasswordChange = (password) => {
+ dispatch(
+ updateAuth({
+ mode: 'basic',
+ collectionUid: collection.uid,
+ itemUid: item.uid,
+ content: {
+ username: basicAuth.username,
+ password: password
+ }
+ })
+ );
+ };
+
+ return (
+
+
+
+ handleUsernameChange(val)}
+ onRun={handleRun}
+ collection={collection}
+ />
+
+
+
+
+ handlePasswordChange(val)}
+ onRun={handleRun}
+ collection={collection}
+ />
+
+
+ );
+};
+
+export default BasicAuth;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
new file mode 100644
index 00000000..c2bb5d20
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ label {
+ font-size: 0.8125rem;
+ }
+
+ .single-line-editor-wrapper {
+ 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;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
new file mode 100644
index 00000000..d839d620
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
@@ -0,0 +1,51 @@
+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 { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const BearerAuth = ({ item, collection }) => {
+ const dispatch = useDispatch();
+ const { storedTheme } = useTheme();
+
+ const bearerToken = item.draft
+ ? get(item, 'draft.request.auth.bearer.token')
+ : get(item, 'request.auth.bearer.token');
+
+ const handleRun = () => dispatch(sendRequest(item, collection.uid));
+ const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+ const handleTokenChange = (token) => {
+ dispatch(
+ updateAuth({
+ mode: 'bearer',
+ collectionUid: collection.uid,
+ itemUid: item.uid,
+ content: {
+ token: token
+ }
+ })
+ );
+ };
+
+ return (
+
+
+
+ handleTokenChange(val)}
+ onRun={handleRun}
+ collection={collection}
+ />
+
+
+ );
+};
+
+export default BearerAuth;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js
new file mode 100644
index 00000000..e4922085
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div``;
+
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/index.js b/packages/bruno-app/src/components/RequestPane/Auth/index.js
new file mode 100644
index 00000000..314bbb21
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/Auth/index.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import get from 'lodash/get';
+import AuthMode from './AuthMode';
+import BearerAuth from './BearerAuth';
+import BasicAuth from './BasicAuth';
+import StyledWrapper from './StyledWrapper';
+
+const Auth = ({ item, collection }) => {
+ const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
+
+ const getAuthView = () => {
+ switch (authMode) {
+ case 'basic': {
+ return
;
+ }
+ case 'bearer': {
+ return
;
+ }
+ }
+ };
+
+ return (
+
+
+ {getAuthView()}
+
+ );
+};
+export default Auth;
diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
index 4f28cc57..3cf5842e 100644
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
@@ -116,10 +116,11 @@ const FormUrlEncodedParams = ({ item, collection }) => {
handleParamChange(e, param, 'enabled')}
/>
-