feat: add support for Digest authorization (#4339)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>

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",

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">

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>