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) =>
-        map.shortcuts.find((shortcut) =>
-          shortcut.keywords.find((key) =>
-            key.includes(this.search.toLowerCase())
+      return this.mappings.filter((mapping) =>
+        mapping.shortcuts.some((shortcut) =>
+          shortcut.keywords.some((keyword) =>
+            keyword.toLowerCase().includes(this.search.toLowerCase())
           )
         )
       )

components/http/Auth.vue

@@ -1,6 +1,21 @@
 <template>
   <div>
     <div class="flex flex-1 p-2 items-center justify-between">
+      <span class="flex">
+        <span
+          class="
+            border
+            rounded-r-none rounded
+            border-divider border-r-0
+            font-semibold
+            text-secondaryLight
+            py-2
+            px-4
+            py-2
+          "
+        >
+          {{ $t("authorization_type") }}
+        </span>
         <tippy
           ref="authTypeOptions"
           interactive
@@ -12,8 +27,8 @@
             <div class="flex">
               <span class="select-wrapper">
                 <ButtonSecondary
-                class="pr-8"
-                :label="`${$t('authentication')}: ${authType}`"
+                  class="rounded-l-none pr-8"
+                  :label="authType.charAt(0).toUpperCase() + authType.slice(1)"
                   outline
                 />
               </span>
@@ -41,6 +56,15 @@
             "
           />
         </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')"
@@ -48,6 +72,7 @@
           @click.native="clearContent"
         />
       </div>
+    </div>
     <div v-if="authType === 'basic'" class="space-y-2 p-2">
       <div class="flex relative">
         <input
@@ -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,6 +1,21 @@
 <template>
   <div>
     <div class="flex flex-1 p-2 items-center justify-between">
+      <span class="flex">
+        <span
+          class="
+            border
+            rounded-r-none rounded
+            border-divider border-r-0
+            font-semibold
+            text-secondaryLight
+            py-2
+            px-4
+            py-2
+          "
+        >
+          {{ $t("content_type") }}
+        </span>
         <tippy
           ref="contentTypeOptions"
           interactive
@@ -11,7 +26,11 @@
           <template #trigger>
             <div class="flex">
               <span class="select-wrapper">
-              <ButtonSecondary class="pr-8" :label="contentType" outline />
+                <ButtonSecondary
+                  :label="contentType"
+                  outline
+                  class="rounded-l-none pr-8"
+                />
               </span>
             </div>
           </template>
@@ -27,6 +46,7 @@
             "
           />
         </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,6 +41,7 @@ export function getEffectiveRESTRequest(
     }))
 
   // Authentication
+  if (request.auth.authActive) {
     // TODO: Support a better b64 implementation than btoa ?
     if (request.auth.authType === "basic") {
       effectiveFinalHeaders.push({
@@ -57,6 +58,7 @@ export function getEffectiveRESTRequest(
         value: `Bearer ${request.auth.token}`,
       })
     }
+  }
 
   return {
     ...request,

lang/en-US.json

@@ -261,8 +261,8 @@
   "request_body": "Request Body",
   "raw_request_body": "Raw Request Body",
   "response_body": "Response Body",
-  "authentication": "Authentication",
-  "authentication_type": "Authentication type",
+  "authorization": "Authorization",
+  "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>