"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/hoppscotch-app/components/http/Authorization.vue" between
hoppscotch-2.2.1.tar.gz and hoppscotch-3.0.0.tar.gz

About: Hoppscotch is a light-weight, web based API development suite.

Authorization.vue  (hoppscotch-2.2.1):Authorization.vue  (hoppscotch-3.0.0)
<template> <template>
<div> <div class="flex flex-col flex-1">
<div <div
class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold" class="sticky z-10 flex items-center justify-between pl-4 border-b bg-prim ary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondary StickyFold"
> >
<span class="flex items-center"> <span class="flex items-center">
<label class="font-semibold text-secondaryLight"> <label class="font-semibold text-secondaryLight">
{{ $t("authorization.type") }} {{ t("authorization.type") }}
</label> </label>
<tippy <tippy
ref="authTypeOptions" ref="authTypeOptions"
interactive interactive
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
> >
<template #trigger> <span class="select-wrapper">
<span class="select-wrapper"> <ButtonSecondary class="pr-8 ml-2 rounded-none" :label="authName" />
<ButtonSecondary </span>
class="pr-8 ml-2 rounded-none" <template #content="{ hide }">
:label="authName" <div
class="flex flex-col"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
label="None"
:icon="authName === 'None' ? IconCircleDot : IconCircle"
:active="authName === 'None'"
@click="
() => {
authType = 'none'
hide()
}
"
/> />
</span> <SmartItem
label="Basic Auth"
:icon="authName === 'Basic Auth' ? IconCircleDot : IconCircle"
:active="authName === 'Basic Auth'"
@click="
() => {
authType = 'basic'
hide()
}
"
/>
<SmartItem
label="Bearer Token"
:icon="authName === 'Bearer' ? IconCircleDot : IconCircle"
:active="authName === 'Bearer'"
@click="
() => {
authType = 'bearer'
hide()
}
"
/>
<SmartItem
label="OAuth 2.0"
:icon="authName === 'OAuth 2.0' ? IconCircleDot : IconCircle"
:active="authName === 'OAuth 2.0'"
@click="
() => {
authType = 'oauth-2'
hide()
}
"
/>
<SmartItem
label="API key"
:icon="authName === 'API key' ? IconCircleDot : IconCircle"
:active="authName === 'API key'"
@click="
() => {
authType = 'api-key'
hide()
}
"
/>
</div>
</template> </template>
<SmartItem
label="None"
:icon="
authName === 'None'
? 'radio_button_checked'
: 'radio_button_unchecked'
"
:active="authName === 'None'"
@click.native="
() => {
authType = 'none'
authTypeOptions.tippy().hide()
}
"
/>
<SmartItem
label="Basic Auth"
:icon="
authName === 'Basic Auth'
? 'radio_button_checked'
: 'radio_button_unchecked'
"
:active="authName === 'Basic Auth'"
@click.native="
() => {
authType = 'basic'
authTypeOptions.tippy().hide()
}
"
/>
<SmartItem
label="Bearer Token"
:icon="
authName === 'Bearer'
? 'radio_button_checked'
: 'radio_button_unchecked'
"
:active="authName === 'Bearer'"
@click.native="
() => {
authType = 'bearer'
authTypeOptions.tippy().hide()
}
"
/>
<SmartItem
label="OAuth 2.0"
:icon="
authName === 'OAuth 2.0'
? 'radio_button_checked'
: 'radio_button_unchecked'
"
:active="authName === 'OAuth 2.0'"
@click.native="
() => {
authType = 'oauth-2'
authTypeOptions.tippy().hide()
}
"
/>
<SmartItem
label="API key"
:icon="
authName === 'API key'
? 'radio_button_checked'
: 'radio_button_unchecked'
"
:active="authName === 'API key'"
@click.native="
() => {
authType = 'api-key'
authTypeOptions.tippy().hide()
}
"
/>
</tippy> </tippy>
</span> </span>
<div class="flex"> <div class="flex">
<!-- <SmartCheckbox <!-- <SmartCheckbox
:on="!URLExcludes.auth" :on="!URLExcludes.auth"
@change="setExclude('auth', !$event)" @change="setExclude('auth', !$event)"
> >
{{ $t("authorization.include_in_url") }} {{ $t("authorization.include_in_url") }}
</SmartCheckbox> --> </SmartCheckbox>-->
<SmartCheckbox <SmartCheckbox
:on="authActive" :on="authActive"
class="px-2" class="px-2"
@change="authActive = !authActive" @change="authActive = !authActive"
>{{ t("state.enabled") }}</SmartCheckbox
> >
{{ $t("state.enabled") }}
</SmartCheckbox>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
to="https://docs.hoppscotch.io/features/authorization" to="https://docs.hoppscotch.io/features/authorization"
blank blank
:title="$t('app.wiki')" :title="t('app.wiki')"
svg="help-circle" :icon="IconHelpCircle"
/> />
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('action.clear')" :title="t('action.clear')"
svg="trash-2" :icon="IconTrash2"
@click.native="clearContent" @click="clearContent"
/> />
</div> </div>
</div> </div>
<div <div
v-if="authType === 'none'" v-if="authType === 'none'"
class="flex flex-col items-center justify-center p-4 text-secondaryLight" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/login.svg`" :src="`/images/states/${colorMode.value}/login.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4" class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${$t('empty.authorization')}`" :alt="`${t('empty.authorization')}`"
/> />
<span class="pb-4 text-center"> <span class="pb-4 text-center">{{ t("empty.authorization") }}</span>
{{ $t("empty.authorization") }}
</span>
<ButtonSecondary <ButtonSecondary
outline outline
:label="$t('app.documentation')" :label="t('app.documentation')"
to="https://docs.hoppscotch.io/features/authorization" to="https://docs.hoppscotch.io/features/authorization"
blank blank
svg="external-link" :icon="IconExternalLink"
reverse reverse
class="mb-4" class="mb-4"
/> />
</div> </div>
<div v-else class="flex border-b border-dividerLight"> <div v-else class="flex flex-1 border-b border-dividerLight">
<div class="w-2/3 border-r border-dividerLight"> <div class="w-2/3 border-r border-dividerLight">
<div v-if="authType === 'basic'"> <div v-if="authType === 'basic'">
<div class="flex border-b border-dividerLight"> <div class="flex flex-1 border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput
v-model="basicUsername" v-model="basicUsername"
:placeholder="$t('authorization.username')" :placeholder="t('authorization.username')"
styles="bg-transparent flex flex-1 py-1 px-4"
/> />
</div> </div>
<div class="flex border-b border-dividerLight"> <div class="flex flex-1 border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput
v-model="basicPassword" v-model="basicPassword"
:placeholder="$t('authorization.password')" :placeholder="t('authorization.password')"
styles="bg-transparent flex flex-1 py-1 px-4"
/> />
</div> </div>
</div> </div>
<div v-if="authType === 'bearer'"> <div v-if="authType === 'bearer'">
<div class="flex border-b border-dividerLight"> <div class="flex flex-1 border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput v-model="bearerToken" placeholder="Token" />
v-model="bearerToken"
placeholder="Token"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div> </div>
</div> </div>
<div v-if="authType === 'oauth-2'"> <div v-if="authType === 'oauth-2'">
<div class="flex border-b border-dividerLight"> <div class="flex flex-1 border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput v-model="oauth2Token" placeholder="Token" />
v-model="oauth2Token"
placeholder="Token"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div> </div>
<HttpOAuth2Authorization /> <HttpOAuth2Authorization />
</div> </div>
<div v-if="authType === 'api-key'"> <div v-if="authType === 'api-key'">
<div class="flex border-b border-dividerLight"> <div class="flex flex-1 border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput v-model="apiKey" placeholder="Key" />
v-model="apiKey"
placeholder="Key"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div> </div>
<div class="flex border-b border-dividerLight"> <div class="flex flex-1 border-b border-dividerLight">
<SmartEnvInput <SmartEnvInput v-model="apiValue" placeholder="Value" />
v-model="apiValue"
placeholder="Value"
styles="bg-transparent flex flex-1 py-1 px-4"
/>
</div> </div>
<div class="flex items-center border-b border-dividerLight"> <div class="flex items-center border-b border-dividerLight">
<label class="ml-4 text-secondaryLight"> <span class="flex items-center">
{{ $t("authorization.pass_key_by") }} <label class="ml-4 text-secondaryLight">
</label> {{ t("authorization.pass_key_by") }}
<tippy </label>
ref="addToOptions" <tippy
interactive ref="addToOptions"
trigger="click" interactive
theme="popover" trigger="click"
arrow theme="popover"
> arrow
<template #trigger> >
<span class="select-wrapper"> <span class="select-wrapper">
<ButtonSecondary <ButtonSecondary
:label="addTo || $t('state.none')" :label="addTo || t('state.none')"
class="pr-8 ml-2 rounded-none" class="pr-8 ml-2 rounded-none"
/> />
</span> </span>
</template> <template #content="{ hide }">
<SmartItem <div
:icon=" class="flex flex-col"
addTo === 'Headers' tabindex="0"
? 'radio_button_checked' role="menu"
: 'radio_button_unchecked' @keyup.escape="hide()"
" >
:active="addTo === 'Headers'" <SmartItem
:label="'Headers'" :icon="addTo === 'Headers' ? IconCircleDot : IconCircle"
@click.native=" :active="addTo === 'Headers'"
() => { :label="'Headers'"
addTo = 'Headers' @click="
addToOptions.tippy().hide() () => {
} addTo = 'Headers'
" hide()
/> }
<SmartItem "
:icon=" />
addTo === 'Query params' <SmartItem
? 'radio_button_checked' :icon="
: 'radio_button_unchecked' addTo === 'Query params' ? IconCircleDot : IconCircle
" "
:active="addTo === 'Query params'" :active="addTo === 'Query params'"
:label="'Query params'" :label="'Query params'"
@click.native=" @click="
() => { () => {
addTo = 'Query params' addTo = 'Query params'
addToOptions.tippy().hide() hide()
} }
" "
/> />
</tippy> </div>
</template>
</tippy>
</span>
</div> </div>
</div> </div>
</div> </div>
<div <div
class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStick yFold min-w-46 max-w-1/3 z-9" class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStick yFold min-w-46 max-w-1/3 z-9"
> >
<div class="pb-2 text-secondaryLight"> <div class="pb-2 text-secondaryLight">
{{ $t("helpers.authorization") }} {{ t("helpers.authorization") }}
</div> </div>
<SmartAnchor <SmartAnchor
class="link" class="link"
:label="`${$t('authorization.learn')} \xA0 →`" :label="t('authorization.learn')"
:icon="IconExternalLink"
to="https://docs.hoppscotch.io/features/authorization" to="https://docs.hoppscotch.io/features/authorization"
blank blank
reverse
/> />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { computed, defineComponent, ref, Ref } from "@nuxtjs/composition-api" import IconHelpCircle from "~icons/lucide/help-circle"
import IconTrash2 from "~icons/lucide/trash-2"
import IconExternalLink from "~icons/lucide/external-link"
import IconCircleDot from "~icons/lucide/circle-dot"
import IconCircle from "~icons/lucide/circle"
import { computed, ref, Ref } from "vue"
import { import {
HoppRESTAuthBasic, HoppRESTAuthBasic,
HoppRESTAuthBearer, HoppRESTAuthBearer,
HoppRESTAuthOAuth2, HoppRESTAuthOAuth2,
HoppRESTAuthAPIKey, HoppRESTAuthAPIKey,
} from "@hoppscotch/data" } from "@hoppscotch/data"
import { pluckRef, useStream } from "~/helpers/utils/composables" import { pluckRef } from "@composables/ref"
import { useStream } from "@composables/stream"
import { useI18n } from "@composables/i18n"
import { useColorMode } from "@composables/theming"
import { restAuth$, setRESTAuth } from "~/newstore/RESTSession" import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
import { useSetting } from "~/newstore/settings"
export default defineComponent({ const t = useI18n()
setup() {
const auth = useStream( const colorMode = useColorMode()
restAuth$,
{ authType: "none", authActive: true },
setRESTAuth
)
const authType = pluckRef(auth, "authType")
const authName = computed(() => {
if (authType.value === "basic") return "Basic Auth"
else if (authType.value === "bearer") return "Bearer"
else if (authType.value === "oauth-2") return "OAuth 2.0"
else if (authType.value === "api-key") return "API key"
else return "None"
})
const authActive = pluckRef(auth, "authActive")
const basicUsername = pluckRef(auth as Ref<HoppRESTAuthBasic>, "username")
const basicPassword = pluckRef(auth as Ref<HoppRESTAuthBasic>, "password")
const bearerToken = pluckRef(auth as Ref<HoppRESTAuthBearer>, "token")
const oauth2Token = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "token")
const apiKey = pluckRef(auth as Ref<HoppRESTAuthAPIKey>, "key")
const apiValue = pluckRef(auth as Ref<HoppRESTAuthAPIKey>, "value")
const addTo = pluckRef(auth as Ref<HoppRESTAuthAPIKey>, "addTo")
if (typeof addTo.value === "undefined") {
addTo.value = "Headers"
apiKey.value = ""
apiValue.value = ""
}
const URLExcludes = useSetting("URL_EXCLUDES") const auth = useStream(
const clearContent = () => { restAuth$,
auth.value = { { authType: "none", authActive: true },
authType: "none", setRESTAuth
authActive: true, )
} const authType = pluckRef(auth, "authType")
} const authName = computed(() => {
return { if (authType.value === "basic") return "Basic Auth"
auth, else if (authType.value === "bearer") return "Bearer"
authType, else if (authType.value === "oauth-2") return "OAuth 2.0"
authName, else if (authType.value === "api-key") return "API key"
authActive, else return "None"
basicUsername,
basicPassword,
bearerToken,
oauth2Token,
URLExcludes,
clearContent,
apiKey,
apiValue,
addTo,
authTypeOptions: ref<any | null>(null),
addToOptions: ref<any | null>(null),
}
},
}) })
const authActive = pluckRef(auth, "authActive")
const basicUsername = pluckRef(auth as Ref<HoppRESTAuthBasic>, "username")
const basicPassword = pluckRef(auth as Ref<HoppRESTAuthBasic>, "password")
const bearerToken = pluckRef(auth as Ref<HoppRESTAuthBearer>, "token")
const oauth2Token = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "token")
const apiKey = pluckRef(auth as Ref<HoppRESTAuthAPIKey>, "key")
const apiValue = pluckRef(auth as Ref<HoppRESTAuthAPIKey>, "value")
const addTo = pluckRef(auth as Ref<HoppRESTAuthAPIKey>, "addTo")
if (typeof addTo.value === "undefined") {
addTo.value = "Headers"
apiKey.value = ""
apiValue.value = ""
}
const clearContent = () => {
auth.value = {
authType: "none",
authActive: true,
}
}
const authTypeOptions = ref<any | null>(null)
const addToOptions = ref<any | null>(null)
</script> </script>
 End of changes. 37 change blocks. 
233 lines changed or deleted 192 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)