feat: add support for Digest authorization (#4339)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com> Co-authored-by: nivedin <nivedinp@gmail.com>
2024-10-29 13:04:40 +06:00
parent c1bc74635f
commit 4b2f04df82
29 changed files with 964 additions and 49 deletions
--- a/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
@@ -80,10 +80,11 @@ const props = defineProps<{
  active: boolean
 }>()

-const formattedShortcutKeys = computed(() =>
-  props.entry.meta?.keyboardShortcut?.map(
-    (key) => SPECIAL_KEY_CHARS[key] ?? capitalize(key)
-  )
+const formattedShortcutKeys = computed(
+  () =>
+    props.entry.meta?.keyboardShortcut?.map(
+      (key) => SPECIAL_KEY_CHARS[key] ?? capitalize(key)
+    )
 )

 const emit = defineEmits<{
--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
@@ -39,7 +39,9 @@
                :active="item.key === authType"
                @click="
                  () => {
-                    item.handler ? item.handler() : (auth.authType = item.key)
+                    item.handler
+                      ? item.handler()
+                      : (auth = { ...auth, authType: item.key } as HoppGQLAuth)
                    hide()
                  }
                "
@@ -117,7 +119,8 @@
            {{
              t("authorization.inherited_from", {
                auth: getAuthName(
-                  inheritedProperties.auth.inheritedAuth.authType
+                  (inheritedProperties.auth.inheritedAuth as HoppGQLAuth)
+                    .authType
                ),
                collection: inheritedProperties?.auth.parentName,
              })
@@ -176,7 +179,11 @@
 import { useI18n } from "@composables/i18n"
 import { pluckRef } from "@composables/ref"
 import { useColorMode } from "@composables/theming"
-import { HoppGQLAuth, HoppGQLAuthOAuth2 } from "@hoppscotch/data"
+import {
+  HoppGQLAuth,
+  HoppGQLAuthOAuth2,
+  HoppGQLAuthAWSSignature,
+} from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
 import { computed, onMounted, ref } from "vue"

@@ -255,15 +262,23 @@ const selectAPIKeyAuthType = () => {
 }

 const selectAWSSignatureAuthType = () => {
+  const {
+    accessKey = "",
+    secretKey = "",
+    region = "",
+    serviceName = "",
+    addTo = "HEADERS",
+  } = auth.value as HoppGQLAuthAWSSignature
+
  auth.value = {
    ...auth.value,
    authType: "aws-signature",
-    addTo: "HEADERS",
-    accessKey: "",
-    secretKey: "",
-    region: "",
-    serviceName: "",
-  } as HoppGQLAuth
+    addTo,
+    accessKey,
+    secretKey,
+    region,
+    serviceName,
+  }
 }

 const authTypes: AuthType[] = [
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -231,6 +231,7 @@ import { useColorMode } from "@composables/theming"
 import { useToast } from "@composables/toast"
 import {
  GQLHeader,
+  HoppGQLAuth,
  HoppGQLRequest,
  parseRawKeyValueEntriesE,
  rawKeyValueEntriesToString,
@@ -675,7 +676,7 @@ const inheritedProperties = computedAsync(async () => {

  const [computedAuthHeader] = await getComputedAuthHeaders(
    request.value,
-    props.inheritedProperties.auth.inheritedAuth
+    props.inheritedProperties.auth.inheritedAuth as HoppGQLAuth
  )

  if (
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@@ -39,7 +39,9 @@
                :active="item.key === authType"
                @click="
                  () => {
-                    item.handler ? item.handler() : (auth.authType = item.key)
+                    item.handler
+                      ? item.handler()
+                      : (auth = { ...auth, authType: item.key } as HoppRESTAuth)
                    hide()
                  }
                "
@@ -149,6 +151,9 @@
        <div v-if="auth.authType === 'aws-signature'">
          <HttpAuthorizationAWSSign v-model="auth" :envs="envs" />
        </div>
+        <div v-if="auth.authType === 'digest'">
+          <HttpAuthorizationDigest v-model="auth" :envs="envs" />
+        </div>
      </div>
      <div
        class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
@@ -184,7 +189,12 @@ import IconHelpCircle from "~icons/lucide/help-circle"
 import IconTrash2 from "~icons/lucide/trash-2"

 import { getDefaultAuthCodeOauthFlowParams } from "~/services/oauth/flows/authCode"
-import { HoppRESTAuth, HoppRESTAuthOAuth2 } from "@hoppscotch/data"
+import {
+  HoppRESTAuth,
+  HoppRESTAuthAWSSignature,
+  HoppRESTAuthDigest,
+  HoppRESTAuthOAuth2,
+} from "@hoppscotch/data"

 const t = useI18n()

@@ -236,14 +246,40 @@ const selectAPIKeyAuthType = () => {
 }

 const selectAWSSignatureAuthType = () => {
+  const {
+    accessKey = "",
+    secretKey = "",
+    region = "",
+    serviceName = "",
+    addTo = "HEADERS",
+  } = auth.value as HoppRESTAuthAWSSignature
+
  auth.value = {
    ...auth.value,
    authType: "aws-signature",
-    addTo: "HEADERS",
-    accessKey: "",
-    secretKey: "",
-    region: "",
-    serviceName: "",
+    addTo,
+    accessKey,
+    secretKey,
+    region,
+    serviceName,
+  }
+}
+
+const selectDigestAuthType = () => {
+  const {
+    username = "",
+    password = "",
+    algorithm = "MD5",
+  } = auth.value as HoppRESTAuthDigest
+
+  console.error(`Auth is `, auth.value)
+
+  auth.value = {
+    ...auth.value,
+    authType: "digest",
+    username,
+    password,
+    algorithm,
  } as HoppRESTAuth
 }

@@ -260,6 +296,11 @@ const authTypes: AuthType[] = [
    key: "basic",
    label: "Basic Auth",
  },
+  {
+    key: "digest",
+    label: "Digest Auth",
+    handler: selectDigestAuthType,
+  },
  {
    key: "bearer",
    label: "Bearer",
--- a/packages/hoppscotch-common/src/components/http/authorization/AWSSign.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/AWSSign.vue
@@ -21,11 +21,11 @@
  <div class="flex flex-col divide-y divide-dividerLight">
    <!-- label as advanced config here -->
    <div class="p-4 flex flex-col space-y-1">
-      <label class="">
-        {{ t("authorization.aws_signature.advance_config") }}
+      <label>
+        {{ t("authorization.advance_config") }}
      </label>
      <p class="text-secondaryLight">
-        {{ t("authorization.aws_signature.advance_config_description") }}
+        {{ t("authorization.advance_config_description") }}
      </p>
    </div>
    <div class="flex flex-1">
--- a/packages/hoppscotch-common/src/components/http/authorization/Digest.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/Digest.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="flex flex-1 border-b border-dividerLight">
+    <SmartEnvInput
+      v-model="auth.username"
+      :placeholder="t('authorization.username')"
+      :auto-complete-env="true"
+      :envs="envs"
+    />
+  </div>
+  <div class="flex flex-1 border-b border-dividerLight">
+    <SmartEnvInput
+      v-model="auth.password"
+      :placeholder="t('authorization.password')"
+      :auto-complete-env="true"
+      :envs="envs"
+    />
+  </div>
+
+  <!-- advanced config -->
+
+  <div class="flex flex-col divide-y divide-dividerLight">
+    <!-- label as advanced config here -->
+    <div class="p-4 flex flex-col space-y-1">
+      <label>
+        {{ t("authorization.advance_config") }}
+      </label>
+
+      <p class="text-secondaryLight">
+        {{ t("authorization.advance_config_description") }}
+      </p>
+    </div>
+
+    <div class="flex flex-1 border-b border-dividerLight">
+      <SmartEnvInput
+        v-model="auth.realm"
+        :auto-complete-env="true"
+        :placeholder="`${t(
+          'authorization.digest.realm'
+        )} (e.g. testrealm@example.com)
+        `"
+        :envs="envs"
+      />
+    </div>
+
+    <div class="flex flex-1 border-b border-dividerLight">
+      <SmartEnvInput
+        v-model="auth.nonce"
+        :auto-complete-env="true"
+        :placeholder="t('authorization.digest.nonce')"
+        :envs="envs"
+      />
+    </div>
+
+    <div class="flex items-center border-b border-dividerLight">
+      <span class="flex items-center">
+        <label class="ml-4 text-secondaryLight">
+          {{ t("authorization.digest.algorithm") }}
+        </label>
+        <tippy
+          interactive
+          trigger="click"
+          theme="popover"
+          :on-shown="() => authTippyActions.focus()"
+        >
+          <HoppSmartSelectWrapper>
+            <HoppButtonSecondary
+              :label="auth.algorithm"
+              class="ml-2 rounded-none pr-8"
+            />
+          </HoppSmartSelectWrapper>
+          <template #content="{ hide }">
+            <div
+              ref="authTippyActions"
+              class="flex flex-col focus:outline-none"
+              tabindex="0"
+              @keyup.escape="hide()"
+            >
+              <HoppSmartItem
+                v-for="alg in algorithms"
+                :key="alg"
+                :icon="auth.algorithm === alg ? IconCircleDot : IconCircle"
+                :active="auth.algorithm === alg"
+                :label="alg"
+                @click="
+                  () => {
+                    auth.algorithm = alg
+                    hide()
+                  }
+                "
+              />
+            </div>
+          </template>
+        </tippy>
+      </span>
+    </div>
+
+    <div class="flex flex-1 border-b border-dividerLight">
+      <SmartEnvInput
+        v-model="auth.qop"
+        :auto-complete-env="true"
+        :placeholder="`${t('authorization.digest.qop')} (e.g. auth-int)
+        `"
+        :envs="envs"
+      />
+    </div>
+
+    <div class="flex flex-1 border-b border-dividerLight">
+      <SmartEnvInput
+        v-model="auth.nc"
+        :auto-complete-env="true"
+        :placeholder="`${t('authorization.digest.nonce_count')} (e.g. 00000001)
+        `"
+        :envs="envs"
+      />
+    </div>
+
+    <div class="flex flex-1 border-b border-dividerLight">
+      <SmartEnvInput
+        v-model="auth.cnonce"
+        :auto-complete-env="true"
+        :placeholder="`${t('authorization.digest.client_nonce')} (e.g. Oa4f113b)
+        `"
+        :envs="envs"
+      />
+    </div>
+
+    <div class="flex flex-1 border-b border-dividerLight">
+      <SmartEnvInput
+        v-model="auth.opaque"
+        :auto-complete-env="true"
+        :placeholder="t('authorization.digest.opaque')"
+        :envs="envs"
+      />
+    </div>
+
+    <div class="px-4 pt-3 pb-6">
+      <HoppSmartCheckbox
+        :on="auth.disableRetry"
+        @change="auth.disableRetry = !auth.disableRetry"
+      >
+        {{ t("authorization.digest.disable_retry") }}
+      </HoppSmartCheckbox>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconCircle from "~icons/lucide/circle"
+import IconCircleDot from "~icons/lucide/circle-dot"
+import { useI18n } from "@composables/i18n"
+import { HoppRESTAuthDigest } from "@hoppscotch/data"
+import { useVModel } from "@vueuse/core"
+import { AggregateEnvironment } from "~/newstore/environments"
+import { ref } from "vue"
+
+const t = useI18n()
+
+const props = defineProps<{
+  modelValue: HoppRESTAuthDigest
+  envs?: AggregateEnvironment[]
+}>()
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: HoppRESTAuthDigest): void
+}>()
+
+const algorithms: HoppRESTAuthDigest["algorithm"][] = ["MD5", "MD5-sess"]
+
+const auth = useVModel(props, "modelValue", emit)
+
+const authTippyActions = ref<any | null>(null)
+</script>