mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-21 23:43:15 +01:00
* feat/(#1003): oauth2 support - styling fixes, code cleanup (#1674) --------- Co-authored-by: lohit-1 <lohit@usebruno.com>
This commit is contained in:
lohit
GitHub
parent
6729d718cf
commit
01360d1522
@ -11,7 +11,7 @@ const BearerAuth = ({ collection }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { storedTheme } = useTheme();
|
||||
|
||||
const bearerToken = get(collection, 'root.request.auth.bearer.token');
|
||||
const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
|
||||
|
||||
const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
|
||||
|
||||
|
||||
@ -75,19 +75,19 @@ const AuthMode = ({ item, collection }) => {
|
||||
className="dropdown-item"
|
||||
onClick={() => {
|
||||
dropdownTippyRef?.current?.hide();
|
||||
onModeChange('inherit');
|
||||
onModeChange('oauth2');
|
||||
}}
|
||||
>
|
||||
Inherit
|
||||
OAuth 2.0
|
||||
</div>
|
||||
<div
|
||||
className="dropdown-item"
|
||||
onClick={() => {
|
||||
dropdownTippyRef?.current?.hide();
|
||||
onModeChange('oauth2');
|
||||
onModeChange('inherit');
|
||||
}}
|
||||
>
|
||||
OAuth 2.0
|
||||
Inherit
|
||||
</div>
|
||||
<div
|
||||
className="dropdown-item"
|
||||
|
||||
@ -6,6 +6,7 @@ const Wrapper = styled.div`
|
||||
}
|
||||
|
||||
.single-line-editor-wrapper {
|
||||
max-width: 400px;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
border: solid 1px ${(props) => props.theme.input.border};
|
||||
|
||||
@ -6,6 +6,7 @@ const Wrapper = styled.div`
|
||||
}
|
||||
|
||||
.single-line-editor-wrapper {
|
||||
max-width: 400px;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
border: solid 1px ${(props) => props.theme.input.border};
|
||||
|
||||
@ -6,6 +6,7 @@ const Wrapper = styled.div`
|
||||
}
|
||||
|
||||
.single-line-editor-wrapper {
|
||||
max-width: 400px;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
border: solid 1px ${(props) => props.theme.input.border};
|
||||
|
||||
@ -12,8 +12,8 @@ const BearerAuth = ({ item, collection }) => {
|
||||
const { storedTheme } = useTheme();
|
||||
|
||||
const bearerToken = item.draft
|
||||
? get(item, 'draft.request.auth.bearer.token')
|
||||
: get(item, 'request.auth.bearer.token');
|
||||
? 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));
|
||||
|
||||
@ -6,6 +6,7 @@ const Wrapper = styled.div`
|
||||
}
|
||||
|
||||
.single-line-editor-wrapper {
|
||||
max-width: 400px;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
border: solid 1px ${(props) => props.theme.input.border};
|
||||
|
||||
@ -5,6 +5,7 @@ const Wrapper = styled.div`
|
||||
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};
|
||||
|
||||
@ -40,7 +40,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
|
||||
{inputsConfig.map((input) => {
|
||||
const { key, label } = input;
|
||||
return (
|
||||
<div className="flex flex-col w-full gap-1">
|
||||
<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
|
||||
|
||||
@ -5,6 +5,7 @@ const Wrapper = styled.div`
|
||||
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};
|
||||
|
||||
@ -10,24 +10,24 @@ const Wrapper = styled.div`
|
||||
background-color: ${(props) => props.theme.input.bg};
|
||||
|
||||
.dropdown {
|
||||
width: 100%;
|
||||
width: fit-content;
|
||||
|
||||
div[data-tippy-root] {
|
||||
width: 100%;
|
||||
width: fit-content;
|
||||
}
|
||||
.tippy-box {
|
||||
width: 100%;
|
||||
width: fit-content;
|
||||
max-width: none !important;
|
||||
|
||||
.tippy-content: {
|
||||
width: 100%;
|
||||
width: fit-content;
|
||||
max-width: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grant-type-label {
|
||||
width: 100%;
|
||||
width: fit-content;
|
||||
color: ${(props) => props.theme.colors.text.yellow};
|
||||
justify-content: space-between;
|
||||
padding: 0 0.5rem;
|
||||
|
||||
@ -6,6 +6,7 @@ import StyledWrapper from './StyledWrapper';
|
||||
import { IconCaretDown } from '@tabler/icons';
|
||||
import { updateAuth } from 'providers/ReduxStore/slices/collections';
|
||||
import { humanizeGrantType } from 'utils/collections';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
const GrantTypeSelector = ({ item, collection }) => {
|
||||
const dispatch = useDispatch();
|
||||
@ -35,10 +36,26 @@ const GrantTypeSelector = ({ item, collection }) => {
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// initalize redux state with a default oauth2 auth type
|
||||
// authorization_code - default option
|
||||
!oAuth?.grantType &&
|
||||
dispatch(
|
||||
updateAuth({
|
||||
mode: 'oauth2',
|
||||
collectionUid: collection.uid,
|
||||
itemUid: item.uid,
|
||||
content: {
|
||||
grantType: 'authorization_code'
|
||||
}
|
||||
})
|
||||
);
|
||||
}, [oAuth]);
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<label className="block font-medium mb-2">Grant Type</label>
|
||||
<div className="inline-flex items-center cursor-pointer grant-type-mode-selector w-full">
|
||||
<div className="inline-flex items-center cursor-pointer grant-type-mode-selector w-fit">
|
||||
<Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
|
||||
<div
|
||||
className="dropdown-item"
|
||||
|
||||
@ -5,6 +5,7 @@ const Wrapper = styled.div`
|
||||
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};
|
||||
|
||||
@ -5,6 +5,7 @@ const Wrapper = styled.div`
|
||||
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};
|
||||
|
||||
@ -9,7 +9,7 @@ const safeParseJson = (json) => {
|
||||
|
||||
const indentString = (str) => {
|
||||
if (!str || !str.length) {
|
||||
return str;
|
||||
return str || '';
|
||||
}
|
||||
|
||||
return str
|
||||
@ -20,7 +20,7 @@ const indentString = (str) => {
|
||||
|
||||
const outdentString = (str) => {
|
||||
if (!str || !str.length) {
|
||||
return str;
|
||||
return str || '';
|
||||
}
|
||||
|
||||
return str
|
||||
|
||||
@ -89,12 +89,12 @@ const jsonToBru = (json) => {
|
||||
|
||||
if (auth && auth.awsv4) {
|
||||
bru += `auth:awsv4 {
|
||||
${indentString(`accessKeyId: ${auth.awsv4.accessKeyId}`)}
|
||||
${indentString(`secretAccessKey: ${auth.awsv4.secretAccessKey}`)}
|
||||
${indentString(`sessionToken: ${auth.awsv4.sessionToken}`)}
|
||||
${indentString(`service: ${auth.awsv4.service}`)}
|
||||
${indentString(`region: ${auth.awsv4.region}`)}
|
||||
${indentString(`profileName: ${auth.awsv4.profileName}`)}
|
||||
${indentString(`accessKeyId: ${auth?.awsv4?.accessKeyId || ''}`)}
|
||||
${indentString(`secretAccessKey: ${auth?.awsv4?.secretAccessKey || ''}`)}
|
||||
${indentString(`sessionToken: ${auth?.awsv4?.sessionToken || ''}`)}
|
||||
${indentString(`service: ${auth?.awsv4?.service || ''}`)}
|
||||
${indentString(`region: ${auth?.awsv4?.region || ''}`)}
|
||||
${indentString(`profileName: ${auth?.awsv4?.profileName || ''}`)}
|
||||
}
|
||||
|
||||
`;
|
||||
@ -102,8 +102,8 @@ ${indentString(`profileName: ${auth.awsv4.profileName}`)}
|
||||
|
||||
if (auth && auth.basic) {
|
||||
bru += `auth:basic {
|
||||
${indentString(`username: ${auth.basic.username}`)}
|
||||
${indentString(`password: ${auth.basic.password}`)}
|
||||
${indentString(`username: ${auth?.basic?.username || ''}`)}
|
||||
${indentString(`password: ${auth?.basic?.password || ''}`)}
|
||||
}
|
||||
|
||||
`;
|
||||
@ -111,7 +111,7 @@ ${indentString(`password: ${auth.basic.password}`)}
|
||||
|
||||
if (auth && auth.bearer) {
|
||||
bru += `auth:bearer {
|
||||
${indentString(`token: ${auth.bearer.token}`)}
|
||||
${indentString(`token: ${auth?.bearer?.token || ''}`)}
|
||||
}
|
||||
|
||||
`;
|
||||
@ -119,8 +119,8 @@ ${indentString(`token: ${auth.bearer.token}`)}
|
||||
|
||||
if (auth && auth.digest) {
|
||||
bru += `auth:digest {
|
||||
${indentString(`username: ${auth.digest.username}`)}
|
||||
${indentString(`password: ${auth.digest.password}`)}
|
||||
${indentString(`username: ${auth?.digest?.username || ''}`)}
|
||||
${indentString(`password: ${auth?.digest?.password || ''}`)}
|
||||
}
|
||||
|
||||
`;
|
||||
@ -131,8 +131,8 @@ ${indentString(`password: ${auth.digest.password}`)}
|
||||
case 'password':
|
||||
bru += `auth:oauth2 {
|
||||
${indentString(`grant_type: password`)}
|
||||
${indentString(`username: ${auth.oauth2.username}`)}
|
||||
${indentString(`password: ${auth.oauth2.password}`)}
|
||||
${indentString(`username: ${auth?.oauth2?.username || ''}`)}
|
||||
${indentString(`password: ${auth?.oauth2?.password || ''}`)}
|
||||
}
|
||||
|
||||
`;
|
||||
@ -140,12 +140,12 @@ ${indentString(`password: ${auth.oauth2.password}`)}
|
||||
case 'authorization_code':
|
||||
bru += `auth:oauth2 {
|
||||
${indentString(`grant_type: authorization_code`)}
|
||||
${indentString(`callback_url: ${auth.oauth2.callbackUrl}`)}
|
||||
${indentString(`authorization_url: ${auth.oauth2.authorizationUrl}`)}
|
||||
${indentString(`access_token_url: ${auth.oauth2.accessTokenUrl}`)}
|
||||
${indentString(`client_id: ${auth.oauth2.clientId}`)}
|
||||
${indentString(`client_secret: ${auth.oauth2.clientSecret}`)}
|
||||
${indentString(`scope: ${auth.oauth2.scope}`)}
|
||||
${indentString(`callback_url: ${auth?.oauth2?.callbackUrl || ''}`)}
|
||||
${indentString(`authorization_url: ${auth?.oauth2?.authorizationUrl || ''}`)}
|
||||
${indentString(`access_token_url: ${auth?.oauth2?.accessTokenUrl || ''}`)}
|
||||
${indentString(`client_id: ${auth?.oauth2?.clientId || ''}`)}
|
||||
${indentString(`client_secret: ${auth?.oauth2?.clientSecret || ''}`)}
|
||||
${indentString(`scope: ${auth?.oauth2?.scope || ''}`)}
|
||||
}
|
||||
|
||||
`;
|
||||
@ -153,8 +153,8 @@ ${indentString(`scope: ${auth.oauth2.scope}`)}
|
||||
case 'client_credentials':
|
||||
bru += `auth:oauth2 {
|
||||
${indentString(`grant_type: client_credentials`)}
|
||||
${indentString(`client_id: ${auth.oauth2.clientId}`)}
|
||||
${indentString(`client_secret: ${auth.oauth2.clientSecret}`)}
|
||||
${indentString(`client_id: ${auth?.oauth2?.clientId || ''}`)}
|
||||
${indentString(`client_secret: ${auth?.oauth2?.clientSecret || ''}`)}
|
||||
}
|
||||
|
||||
`;
|
||||
@ -368,3 +368,5 @@ ${indentString(docs)}
|
||||
};
|
||||
|
||||
module.exports = jsonToBru;
|
||||
|
||||
// alternative to writing the below code to avoif undefined
|
||||
|
||||
@ -168,7 +168,9 @@ const oauth2Schema = Yup.object({
|
||||
.strict();
|
||||
|
||||
const authSchema = Yup.object({
|
||||
mode: Yup.string().oneOf(['inherit', 'none', 'awsv4', 'basic', 'bearer', 'digest', 'oauth2']).required('mode is required'),
|
||||
mode: Yup.string()
|
||||
.oneOf(['inherit', 'none', 'awsv4', 'basic', 'bearer', 'digest', 'oauth2'])
|
||||
.required('mode is required'),
|
||||
awsv4: authAwsV4Schema.nullable(),
|
||||
basic: authBasicSchema.nullable(),
|
||||
bearer: authBearerSchema.nullable(),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user