feat: enable / disable authorization

assets/scss/themes.scss

@@ -99,7 +99,7 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.green.600");
   // Light Contrast color
-  --accent-contrast-color: theme("colors.green.50");
+  --accent-contrast-color: theme("colors.white");
   // Gradient from
   --gradient-from-color: theme("colors.green.200");
   // Gradient via
@@ -116,7 +116,7 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.teal.600");
   // Light Contrast color
-  --accent-contrast-color: theme("colors.teal.50");
+  --accent-contrast-color: theme("colors.white");
   // Gradient from
   --gradient-from-color: theme("colors.teal.200");
   // Gradient via
@@ -133,7 +133,7 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.blue.600");
   // Light Contrast color
-  --accent-contrast-color: theme("colors.blue.50");
+  --accent-contrast-color: theme("colors.white");
   // Gradient from
   --gradient-from-color: theme("colors.blue.200");
   // Gradient via
@@ -150,7 +150,7 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.indigo.600");
   // Light Contrast color
-  --accent-contrast-color: theme("colors.indigo.50");
+  --accent-contrast-color: theme("colors.white");
   // Gradient from
   --gradient-from-color: theme("colors.indigo.200");
   // Gradient via
@@ -167,7 +167,7 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.purple.600");
   // Light Contrast color
-  --accent-contrast-color: theme("colors.purple.50");
+  --accent-contrast-color: theme("colors.white");
   // Gradient from
   --gradient-from-color: theme("colors.purple.200");
   // Gradient via
@@ -184,7 +184,7 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.yellow.600");
   // Light Contrast color
-  --accent-contrast-color: theme("colors.yellow.50");
+  --accent-contrast-color: theme("colors.white");
   // Gradient from
   --gradient-from-color: theme("colors.yellow.200");
   // Gradient via
@@ -201,7 +201,7 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.orange.600");
   // Light Contrast color
-  --accent-contrast-color: theme("colors.orange.50");
+  --accent-contrast-color: theme("colors.white");
   // Gradient from
   --gradient-from-color: theme("colors.orange.200");
   // Gradient via
@@ -218,7 +218,7 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.red.600");
   // Light Contrast color
-  --accent-contrast-color: theme("colors.red.50");
+  --accent-contrast-color: theme("colors.white");
   // Gradient from
   --gradient-from-color: theme("colors.red.200");
   // Gradient via
@@ -235,7 +235,7 @@
   // Dark Accent color
   --accent-dark-color: theme("colors.pink.600");
   // Light Contrast color
-  --accent-contrast-color: theme("colors.pink.50");
+  --accent-contrast-color: theme("colors.white");
   // Gradient from
   --gradient-from-color: theme("colors.pink.200");
   // Gradient via

components/app/Search.vue

@@ -92,10 +92,10 @@ export default {
   },
   computed: {
     filteredMappings() {
-      return this.mappings.filter((map) =>
+      return this.mappings.filter((mapping) =>
-        map.shortcuts.find((shortcut) =>
+        mapping.shortcuts.some((shortcut) =>
-          shortcut.keywords.find((key) =>
+          shortcut.keywords.some((keyword) =>
-            key.includes(this.search.toLowerCase())
+            keyword.toLowerCase().includes(this.search.toLowerCase())
           )
         )
       )

components/http/Auth.vue

@@ -1,52 +1,77 @@
 <template>
   <div>
     <div class="flex flex-1 p-2 items-center justify-between">
-      <tippy
+      <span class="flex">
-        ref="authTypeOptions"
+        <span
-        interactive
+          class="
-        trigger="click"
+            border
-        theme="popover"
+            rounded-r-none rounded
-        arrow
+            border-divider border-r-0
-      >
+            font-semibold
-        <template #trigger>
+            text-secondaryLight
-          <div class="flex">
+            py-2
-            <span class="select-wrapper">
+            px-4
-              <ButtonSecondary
+            py-2
-                class="pr-8"
-                :label="`${$t('authentication')}: ${authType}`"
-                outline
-              />
-            </span>
-          </div>
-        </template>
-        <SmartItem
-          label="None"
-          @click.native="
-            authType = 'none'
-            $refs.authTypeOptions.tippy().hide()
           "
+        >
+          {{ $t("authorization_type") }}
+        </span>
+        <tippy
+          ref="authTypeOptions"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <div class="flex">
+              <span class="select-wrapper">
+                <ButtonSecondary
+                  class="rounded-l-none pr-8"
+                  :label="authType.charAt(0).toUpperCase() + authType.slice(1)"
+                  outline
+                />
+              </span>
+            </div>
+          </template>
+          <SmartItem
+            label="None"
+            @click.native="
+              authType = 'none'
+              $refs.authTypeOptions.tippy().hide()
+            "
+          />
+          <SmartItem
+            label="Basic"
+            @click.native="
+              authType = 'basic'
+              $refs.authTypeOptions.tippy().hide()
+            "
+          />
+          <SmartItem
+            label="Bearer"
+            @click.native="
+              authType = 'bearer'
+              $refs.authTypeOptions.tippy().hide()
+            "
+          />
+        </tippy>
+      </span>
+      <div class="flex">
+        <SmartToggle
+          :on="authActive"
+          class="mr-2 px-2"
+          @change="authActive = !authActive"
+        >
+          {{ authActive ? $t("enabled") : $t("disabled") }}
+        </SmartToggle>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent"
         />
-        <SmartItem
+      </div>
-          label="Basic"
-          @click.native="
-            authType = 'basic'
-            $refs.authTypeOptions.tippy().hide()
-          "
-        />
-        <SmartItem
-          label="Bearer"
-          @click.native="
-            authType = 'bearer'
-            $refs.authTypeOptions.tippy().hide()
-          "
-        />
-      </tippy>
-      <ButtonSecondary
-        v-tippy="{ theme: 'tooltip' }"
-        :title="$t('clear')"
-        icon="clear_all"
-        @click.native="clearContent"
-      />
     </div>
     <div v-if="authType === 'basic'" class="space-y-2 p-2">
       <div class="flex relative">
@@ -130,9 +155,14 @@ import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
   setup() {
-    const auth = useStream(restAuth$, { authType: "none" }, setRESTAuth)
+    const auth = useStream(
+      restAuth$,
+      { authType: "none", authActive: true },
+      setRESTAuth
+    )
 
     const authType = pluckRef(auth, "authType")
+    const authActive = pluckRef(auth, "authActive")
 
     const basicUsername = pluckRef(auth as Ref<HoppRESTAuthBasic>, "username")
     const basicPassword = pluckRef(auth as Ref<HoppRESTAuthBasic>, "password")
@@ -141,11 +171,12 @@ export default defineComponent({
 
     const URLExcludes = useSetting("URL_EXCLUDES")
 
-    const passwordFieldType = ref("text")
+    const passwordFieldType = ref("password")
 
     const clearContent = () => {
       auth.value = {
         authType: "none",
+        authActive: true,
       }
     }
 
@@ -158,6 +189,7 @@ export default defineComponent({
     return {
       auth,
       authType,
+      authActive,
       basicUsername,
       basicPassword,
       bearerToken,

components/http/Body.vue

@@ -1,32 +1,52 @@
 <template>
   <div>
     <div class="flex flex-1 p-2 items-center justify-between">
-      <tippy
+      <span class="flex">
-        ref="contentTypeOptions"
+        <span
-        interactive
+          class="
-        trigger="click"
+            border
-        theme="popover"
+            rounded-r-none rounded
-        arrow
+            border-divider border-r-0
-      >
+            font-semibold
-        <template #trigger>
+            text-secondaryLight
-          <div class="flex">
+            py-2
-            <span class="select-wrapper">
+            px-4
-              <ButtonSecondary class="pr-8" :label="contentType" outline />
+            py-2
-            </span>
-          </div>
-        </template>
-        <SmartItem
-          v-for="(contentTypeItem, index) in validContentTypes"
-          :key="`contentTypeItem-${index}`"
-          :label="contentTypeItem"
-          :info-icon="contentTypeItem === contentType ? 'done' : ''"
-          :active-info-icon="contentTypeItem === contentType"
-          @click.native="
-            contentType = contentTypeItem
-            $refs.contentTypeOptions.tippy().hide()
           "
-        />
+        >
-      </tippy>
+          {{ $t("content_type") }}
+        </span>
+        <tippy
+          ref="contentTypeOptions"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <div class="flex">
+              <span class="select-wrapper">
+                <ButtonSecondary
+                  :label="contentType"
+                  outline
+                  class="rounded-l-none pr-8"
+                />
+              </span>
+            </div>
+          </template>
+          <SmartItem
+            v-for="(contentTypeItem, index) in validContentTypes"
+            :key="`contentTypeItem-${index}`"
+            :label="contentTypeItem"
+            :info-icon="contentTypeItem === contentType ? 'done' : ''"
+            :active-info-icon="contentTypeItem === contentType"
+            @click.native="
+              contentType = contentTypeItem
+              $refs.contentTypeOptions.tippy().hide()
+            "
+          />
+        </tippy>
+      </span>
       <SmartToggle :on="rawInput" class="px-2" @change="rawInput = !rawInput">
         {{ $t("raw_input") }}
       </SmartToggle>

components/http/ImportCurl.vue

@@ -113,6 +113,7 @@ export default defineComponent({
             testScript: "",
             auth: {
               authType: "none",
+              authActive: true,
             },
             body: {
               contentType: "application/json",

helpers/shortcuts.js

@@ -155,28 +155,28 @@ export const spotlight = [
         label: "shortcut.navigation.back",
         action: "navigation.jump.back",
         icon: "arrow_forward",
-        keywords: ["back", "jump", "page", "navigation"],
+        keywords: ["back", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformSpecialKey(), "→"],
         label: "shortcut.navigation.forward",
         action: "navigation.jump.forward",
         icon: "arrow_forward",
-        keywords: ["forward", "jump", "page", "navigation"],
+        keywords: ["forward", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "R"],
         label: "shortcut.navigation.rest",
         action: "navigation.jump.rest",
         icon: "arrow_forward",
-        keywords: ["rest", "jump", "page", "navigation"],
+        keywords: ["rest", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "Q"],
         label: "shortcut.navigation.graphql",
         action: "navigation.jump.graphql",
         icon: "arrow_forward",
-        keywords: ["graphql", "jump", "page", "navigation"],
+        keywords: ["graphql", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "W"],
@@ -192,6 +192,7 @@ export const spotlight = [
           "socket",
           "mqtt",
           "sse",
+          "go",
         ],
       },
       {
@@ -199,7 +200,7 @@ export const spotlight = [
         label: "shortcut.navigation.documentation",
         action: "navigation.jump.documentation",
         icon: "arrow_forward",
-        keywords: ["documentation", "jump", "page", "navigation"],
+        keywords: ["documentation", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "S"],
@@ -213,6 +214,7 @@ export const spotlight = [
           "navigation",
           "account",
           "theme",
+          "go",
         ],
       },
     ],

helpers/types/HoppRESTAuth.ts

@@ -1,9 +1,11 @@
 export type HoppRESTAuthNone = {
   authType: "none"
+  authActive: true
 }
 
 export type HoppRESTAuthBasic = {
   authType: "basic"
+  authActive: true
 
   username: string
   password: string
@@ -11,6 +13,7 @@ export type HoppRESTAuthBasic = {
 
 export type HoppRESTAuthBearer = {
   authType: "bearer"
+  authActive: true
 
   token: string
 }

helpers/types/HoppRESTRequest.ts

@@ -115,11 +115,13 @@ export function parseOldAuth(x: any): HoppRESTAuth {
   if (!x.auth || x.auth === "None")
     return {
       authType: "none",
+      authActive: true,
     }
 
   if (x.auth === "Basic Auth")
     return {
       authType: "basic",
+      authActive: true,
       username: x.httpUser,
       password: x.httpPassword,
     }
@@ -127,8 +129,9 @@ export function parseOldAuth(x: any): HoppRESTAuth {
   if (x.auth === "Bearer Token")
     return {
       authType: "bearer",
+      authActive: true,
       token: x.bearerToken,
     }
 
-  return { authType: "none" }
+  return { authType: "none", authActive: true }
 }

helpers/utils/EffectiveURL.ts

@@ -41,21 +41,23 @@ export function getEffectiveRESTRequest(
     }))
 
   // Authentication
-  // TODO: Support a better b64 implementation than btoa ?
+  if (request.auth.authActive) {
-  if (request.auth.authType === "basic") {
+    // TODO: Support a better b64 implementation than btoa ?
-    effectiveFinalHeaders.push({
+    if (request.auth.authType === "basic") {
-      active: true,
+      effectiveFinalHeaders.push({
-      key: "Authorization",
+        active: true,
-      value: `Basic ${btoa(
+        key: "Authorization",
-        `${request.auth.username}:${request.auth.password}`
+        value: `Basic ${btoa(
-      )}`,
+          `${request.auth.username}:${request.auth.password}`
-    })
+        )}`,
-  } else if (request.auth.authType === "bearer") {
+      })
-    effectiveFinalHeaders.push({
+    } else if (request.auth.authType === "bearer") {
-      active: true,
+      effectiveFinalHeaders.push({
-      key: "Authorization",
+        active: true,
-      value: `Bearer ${request.auth.token}`,
+        key: "Authorization",
-    })
+        value: `Bearer ${request.auth.token}`,
+      })
+    }
   }
 
   return {

lang/en-US.json

@@ -261,8 +261,8 @@
   "request_body": "Request Body",
   "raw_request_body": "Raw Request Body",
   "response_body": "Response Body",
-  "authentication": "Authentication",
+  "authorization": "Authorization",
-  "authentication_type": "Authentication type",
+  "authorization_type": "Authorization Type",
   "include_in_url": "Include in URL",
   "parameters": "Parameters",
   "expand_response": "Expand response",

newstore/RESTSession.ts

@@ -129,6 +129,7 @@ const defaultRESTRequest: HoppRESTRequest = {
   method: "GET",
   auth: {
     authType: "none",
+    authActive: true,
   },
   preRequestScript: "// pw.env.set('variable', 'value');",
   testScript: "// pw.expect('variable').toBe('value');",

pages/index.vue

@@ -26,7 +26,7 @@
               <HttpHeaders />
             </SmartTab>
 
-            <SmartTab :id="'authentication'" :label="$t('authentication')">
+            <SmartTab :id="'authorization'" :label="$t('authorization')">
               <HttpAuth />
             </SmartTab>