From b18f7af28fd1d9dc29ed016127647bbf7f6e1780 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Thu, 12 Aug 2021 13:56:11 +0530
Subject: [PATCH] feat: enable / disable authorization

---
 assets/scss/themes.scss          |  18 ++---
 components/app/Search.vue        |   8 +-
 components/http/Auth.vue         | 124 +++++++++++++++++++------------
 components/http/Body.vue         |  70 ++++++++++-------
 components/http/ImportCurl.vue   |   1 +
 helpers/shortcuts.js             |  12 +--
 helpers/types/HoppRESTAuth.ts    |   3 +
 helpers/types/HoppRESTRequest.ts |   5 +-
 helpers/utils/EffectiveURL.ts    |  32 ++++----
 lang/en-US.json                  |   4 +-
 newstore/RESTSession.ts          |   1 +
 pages/index.vue                  |   2 +-
 12 files changed, 172 insertions(+), 108 deletions(-)

diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 05e04c1b7..28b3feec3 100644
--- a/assets/scss/themes.scss
+++ b/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
diff --git a/components/app/Search.vue b/components/app/Search.vue
index 9adaf600a..0d506a870 100644
--- a/components/app/Search.vue
+++ b/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())
           )
         )
       )
diff --git a/components/http/Auth.vue b/components/http/Auth.vue
index 57079561e..0d537ceea 100644
--- a/components/http/Auth.vue
+++ b/components/http/Auth.vue
@@ -1,52 +1,77 @@
 <template>
   <div>
     <div class="flex flex-1 p-2 items-center justify-between">
-      <tippy
-        ref="authTypeOptions"
-        interactive
-        trigger="click"
-        theme="popover"
-        arrow
-      >
-        <template #trigger>
-          <div class="flex">
-            <span class="select-wrapper">
-              <ButtonSecondary
-                class="pr-8"
-                :label="`${$t('authentication')}: ${authType}`"
-                outline
-              />
-            </span>
-          </div>
-        </template>
-        <SmartItem
-          label="None"
-          @click.native="
-            authType = 'none'
-            $refs.authTypeOptions.tippy().hide()
+      <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
+          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
-          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>
     <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,
diff --git a/components/http/Body.vue b/components/http/Body.vue
index 772b440ef..09724c63a 100644
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -1,32 +1,52 @@
 <template>
   <div>
     <div class="flex flex-1 p-2 items-center justify-between">
-      <tippy
-        ref="contentTypeOptions"
-        interactive
-        trigger="click"
-        theme="popover"
-        arrow
-      >
-        <template #trigger>
-          <div class="flex">
-            <span class="select-wrapper">
-              <ButtonSecondary class="pr-8" :label="contentType" outline />
-            </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()
+      <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
           "
-        />
-      </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>
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index 5b84bc34e..d2722a903 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -113,6 +113,7 @@ export default defineComponent({
             testScript: "",
             auth: {
               authType: "none",
+              authActive: true,
             },
             body: {
               contentType: "application/json",
diff --git a/helpers/shortcuts.js b/helpers/shortcuts.js
index 30b3e88e6..29e9b05a7 100644
--- a/helpers/shortcuts.js
+++ b/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",
         ],
       },
     ],
diff --git a/helpers/types/HoppRESTAuth.ts b/helpers/types/HoppRESTAuth.ts
index 8799fc2f0..3682a6bae 100644
--- a/helpers/types/HoppRESTAuth.ts
+++ b/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
 }
diff --git a/helpers/types/HoppRESTRequest.ts b/helpers/types/HoppRESTRequest.ts
index e5d7ce9a3..b0ad526fd 100644
--- a/helpers/types/HoppRESTRequest.ts
+++ b/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 }
 }
diff --git a/helpers/utils/EffectiveURL.ts b/helpers/utils/EffectiveURL.ts
index 4f99be525..7b21a4d2d 100644
--- a/helpers/utils/EffectiveURL.ts
+++ b/helpers/utils/EffectiveURL.ts
@@ -41,21 +41,23 @@ export function getEffectiveRESTRequest(
     }))
 
   // Authentication
-  // TODO: Support a better b64 implementation than btoa ?
-  if (request.auth.authType === "basic") {
-    effectiveFinalHeaders.push({
-      active: true,
-      key: "Authorization",
-      value: `Basic ${btoa(
-        `${request.auth.username}:${request.auth.password}`
-      )}`,
-    })
-  } else if (request.auth.authType === "bearer") {
-    effectiveFinalHeaders.push({
-      active: true,
-      key: "Authorization",
-      value: `Bearer ${request.auth.token}`,
-    })
+  if (request.auth.authActive) {
+    // TODO: Support a better b64 implementation than btoa ?
+    if (request.auth.authType === "basic") {
+      effectiveFinalHeaders.push({
+        active: true,
+        key: "Authorization",
+        value: `Basic ${btoa(
+          `${request.auth.username}:${request.auth.password}`
+        )}`,
+      })
+    } else if (request.auth.authType === "bearer") {
+      effectiveFinalHeaders.push({
+        active: true,
+        key: "Authorization",
+        value: `Bearer ${request.auth.token}`,
+      })
+    }
   }
 
   return {
diff --git a/lang/en-US.json b/lang/en-US.json
index b03f2a667..0ed84fcc7 100644
--- a/lang/en-US.json
+++ b/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",
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index 3798dde3b..7b31c4b15 100644
--- a/newstore/RESTSession.ts
+++ b/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');",
diff --git a/pages/index.vue b/pages/index.vue
index fd06efa02..da878af66 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -26,7 +26,7 @@
               <HttpHeaders />
             </SmartTab>
 
-            <SmartTab :id="'authentication'" :label="$t('authentication')">
+            <SmartTab :id="'authorization'" :label="$t('authorization')">
               <HttpAuth />
             </SmartTab>