feat(common): authorization ui panel revamp (#5258)

2025-07-24 22:56:54 +06:00 · 2025-07-24 22:56:54 +06:00 · f52349e734
commit f52349e734
parent 9751625414
12 changed files with 279 additions and 72 deletions
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@ -240,7 +240,8 @@
      "label_client_credentials": "Client Credentials",
      "label_send_as": "Client Authentication",
      "label_send_in_body": "Send Credentials in Body",
-      "label_send_as_basic_auth": "Send Credentials as Basic Auth"
+      "label_send_as_basic_auth": "Send Credentials as Basic Auth",
+      "enter_value": "Enter value"
    },
    "pass_key_by": "Pass by",
    "pass_by_query_params_label": "Query Parameters",
@ -248,6 +249,11 @@
    "password": "Password",
    "save_to_inherit": "Please save this request in any collection to inherit the authorization",
    "token": "Token",
+    "access_token": "Access Token",
+    "client_token": "Client Token",
+    "client_secret": "Client Secret",
+    "timestamp": "Timestamp",
+    "host": "Host",
    "type": "Authorization Type",
    "username": "Username",
    "advance_config": "Advanced Configuration",
@ -272,8 +278,21 @@
      "opaque": "Opaque",
      "disable_retry": "Disable Retrying Request"
    },
+    "akamai": {
+      "headers_to_sign": "Headers to Sign",
+      "max_body_size": "Max Body Size"
+    },
+    "hawk": {
+      "id": "HAWK Auth ID",
+      "key": "HAWK Auth Key",
+      "ext": "ext",
+      "app": "app",
+      "dlg": "dlg",
+      "include": "Include Payload Hash"
+    },
    "jwt": {
      "params_name": "Params Name",
+      "param_name": "Parameter Name",
      "header_prefix": "Header Prefix",
      "placeholder_request_header": "Request header prefix",
      "placeholder_request_param": "Request params name",
@ -281,6 +300,20 @@
      "headers": "JWT Headers",
      "private_key": "Private Key",
      "placeholder_headers": "JWT Headers"
+    },
+    "ntlm": {
+      "domain": "Domain",
+      "workstation": "Workstation",
+      "disable_retrying_request": "Disable Retrying Request"
+    },
+    "asap": {
+      "issuer": "Issuer",
+      "audience": "Audience",
+      "expires_in": "Expires In",
+      "key_id": "Key ID",
+      "optional_config": "Optional Configuration",
+      "subject": "Subject",
+      "additional_claims": "Additional Claims"
    }
  },
  "collection": {
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@ -118,9 +118,14 @@
        </div>
        <div v-if="auth.authType === 'bearer'">
          <div class="flex flex-1 border-b border-dividerLight">
+            <label
+              class="flex items-center ml-4 text-secondaryLight min-w-[6rem]"
+            >
+              {{ t("authorization.token") }}
+            </label>
            <SmartEnvInput
              v-model="auth.token"
-              placeholder="Token"
+              placeholder="Your Bearer Token (e.g. sk_live_abc123xyz789)"
              :auto-complete-env="true"
              :envs="envs"
              class="px-4"
@ -129,10 +134,15 @@
        </div>
        <div v-if="auth.authType === 'oauth-2'" class="w-full">
          <div class="flex flex-1 border-b border-dividerLight">
+            <label
+              class="flex items-center ml-4 text-secondaryLight min-w-[6rem]"
+            >
+              {{ t("authorization.token") }}
+            </label>
            <!-- Ensure a new object is assigned here to avoid reactivity issues -->
            <SmartEnvInput
              :model-value="auth.grantTypeInfo.token"
-              placeholder="Token"
+              placeholder="Your OAuth 2.0 Token (e.g. sk_live_abc123xyz789)"
              :envs="envs"
              @update:model-value="
                auth.grantTypeInfo = { ...auth.grantTypeInfo, token: $event }
--- a/packages/hoppscotch-common/src/components/http/authorization/ASAP.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/ASAP.vue
@ -1,32 +1,43 @@
 <template>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.asap.issuer") }}
+    </label>
    <SmartEnvInput
      v-model="auth.issuer"
      :auto-complete-env="true"
-      placeholder="Issuer"
+      placeholder="myapp.example.com"
      :envs="envs"
    />
  </div>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("config.saml.audience") }}
+    </label>
    <SmartEnvInput
      v-model="auth.audience"
      :auto-complete-env="true"
-      placeholder="Audience"
+      placeholder="api.example.com"
      :envs="envs"
    />
  </div>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.asap.key_id") }}
+    </label>
    <SmartEnvInput
      v-model="auth.keyId"
      :auto-complete-env="true"
-      placeholder="Key ID"
+      placeholder="myapp/rsa-key-1"
      :envs="envs"
    />
  </div>

  <div class="flex items-center border-b border-dividerLight">
    <span class="flex items-center">
-      <label class="ml-4 text-secondaryLight"> Algorithm </label>
+      <label class="ml-4 text-secondaryLight">
+        {{ t("authorization.digest.algorithm") }}
+      </label>
      <tippy
        interactive
        trigger="click"
@ -66,7 +77,9 @@
  </div>

  <div class="flex flex-1 border-b border-dividerLight items-center">
-    <label class="ml-4 text-secondaryLight"> Private Key </label>
+    <label class="ml-4 text-secondaryLight">
+      {{ t("authorization.jwt.private_key") }}
+    </label>
    <label :for="`attachment`" class="p-0">
      <input
        :id="`attachment`"
@ -87,15 +100,22 @@
  <div>
    <!-- label as advanced config here -->
    <div class="p-4">
-      <label class="text-secondaryLight"> Optional Configuration </label>
+      <label class="text-secondaryLight">
+        {{ t("authorization.asap.optional_config") }}
+      </label>
    </div>
    <div class="flex flex-1 border-b border-dividerLight h-[300px]">
-      <label class="ml-4 text-secondaryLight"> Additional Claims </label>
+      <label class="ml-4 text-secondaryLight">
+        {{ t("authorization.asap.additional_claims") }}
+      </label>
      <div class="h-full relative">
        <div ref="claimsRef" class="absolute inset-0"></div>
      </div>
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.asap.subject") }}
+      </label>
      <SmartEnvInput
        v-model="auth.subject"
        :auto-complete-env="true"
@ -104,10 +124,13 @@
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.asap.expires_in") }}
+      </label>
      <SmartEnvInput
        v-model="auth.expiresIn"
        :auto-complete-env="true"
-        placeholder="Expires In"
+        placeholder="3600 (seconds)"
        :envs="envs"
      />
    </div>
--- a/packages/hoppscotch-common/src/components/http/authorization/AWSSign.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/AWSSign.vue
@ -1,17 +1,23 @@
 <template>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.aws_signature.access_key") }}
+    </label>
    <SmartEnvInput
      v-model="auth.accessKey"
      :auto-complete-env="true"
-      :placeholder="t('authorization.aws_signature.access_key')"
+      placeholder="AKIAIOSFODNN7EXAMPLE"
      :envs="envs"
    />
  </div>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.aws_signature.secret_key") }}
+    </label>
    <SmartEnvInput
      v-model="auth.secretKey"
      :auto-complete-env="true"
-      :placeholder="t('authorization.aws_signature.secret_key')"
+      placeholder="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"
      :envs="envs"
    />
  </div>
@ -29,29 +35,35 @@
      </p>
    </div>
    <div class="flex flex-1">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.aws_signature.aws_region") }}
+      </label>
      <SmartEnvInput
        v-model="auth.region"
        :auto-complete-env="true"
-        :placeholder="`${t('authorization.aws_signature.aws_region')} (${t(
-          'app.default',
-          { value: 'us-east-1' }
-        )})`"
+        :placeholder="`${t('app.default', { value: 'us-east-1' })}`"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.aws_signature.service_name") }}
+      </label>
      <SmartEnvInput
        v-model="auth.serviceName"
        :auto-complete-env="true"
-        :placeholder="t('authorization.aws_signature.service_name')"
+        placeholder="s3"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.aws_signature.service_token") }}
+      </label>
      <SmartEnvInput
        v-model="auth.serviceToken"
        :auto-complete-env="true"
-        :placeholder="t('authorization.aws_signature.service_token')"
+        placeholder="session-token-here"
        :envs="envs"
      />
    </div>
--- a/packages/hoppscotch-common/src/components/http/authorization/AkamaiEG.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/AkamaiEG.vue
@ -1,25 +1,34 @@
 <template>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.token") }}
+    </label>
    <SmartEnvInput
      v-model="auth.accessToken"
      :auto-complete-env="true"
-      placeholder="Access Token"
+      placeholder="akzb-a1b2c3d4e5f6..."
      :envs="envs"
    />
  </div>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.client_token") }}
+    </label>
    <SmartEnvInput
      v-model="auth.clientToken"
      :auto-complete-env="true"
-      placeholder="Client Token"
+      placeholder="akab-c1i2e3n4t5t6..."
      :envs="envs"
    />
  </div>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.client_secret") }}
+    </label>
    <SmartEnvInput
      v-model="auth.clientSecret"
      :auto-complete-env="true"
-      placeholder="Client Secret"
+      placeholder="s3cr3tk3yh3r3..."
      :envs="envs"
    />
  </div>
@ -29,49 +38,65 @@
  <div>
    <!-- label as advanced config here -->
    <div class="p-4">
-      <label class="text-secondaryLight"> Advanced Configuration </label>
+      <label class="text-secondaryLight">{{
+        t("authorization.advance_config")
+      }}</label>
      <p>
-        Hoppscotch automatically assigns default values to certain fields if no
-        explicit value is provided.
+        {{ t("authorization.advance_config_description") }}
      </p>
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.digest.nonce") }}
+      </label>
      <SmartEnvInput
        v-model="auth.nonce"
        :auto-complete-env="true"
-        placeholder="Nonce"
+        placeholder="e.g. 12345678-abcd-1234-abcd-123456789abc"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.timestamp") }}
+      </label>
      <SmartEnvInput
        v-model="auth.timestamp"
        :auto-complete-env="true"
-        placeholder="Timestamp"
+        placeholder="e.g. 20230101T12:00:00+0000"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.host") }}
+      </label>
      <SmartEnvInput
        v-model="auth.host"
        :auto-complete-env="true"
-        placeholder="Host"
+        placeholder="api.example.com"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.akamai.headers_to_sign") }}
+      </label>
      <SmartEnvInput
        v-model="auth.headersToSign"
        :auto-complete-env="true"
-        placeholder="Headers to Sign"
+        placeholder="x-timestamp;content-type"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.akamai.max_body_size") }}
+      </label>
      <SmartEnvInput
        v-model="auth.maxBodySize"
        :auto-complete-env="true"
-        placeholder="Max Body Size"
+        placeholder="131072"
        :envs="envs"
      />
    </div>
@ -79,10 +104,13 @@
 </template>

 <script setup lang="ts">
+import { useI18n } from "@composables/i18n"
 import { HoppRESTAuthAkamaiEdgeGrid } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
 import { AggregateEnvironment } from "~/newstore/environments"

+const t = useI18n()
+
 const props = defineProps<{
  modelValue: HoppRESTAuthAkamaiEdgeGrid
  envs?: AggregateEnvironment[]
--- a/packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue
@ -1,17 +1,23 @@
 <template>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("agent.key") }}
+    </label>
    <SmartEnvInput
      v-model="auth.key"
      :auto-complete-env="true"
-      placeholder="Key"
+      placeholder="X-API-Key"
      :envs="envs"
    />
  </div>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("environment.value") }}
+    </label>
    <SmartEnvInput
      v-model="auth.value"
      :auto-complete-env="true"
-      placeholder="Value"
+      placeholder="sk_live_abc123xyz789"
      :envs="envs"
    />
  </div>
--- a/packages/hoppscotch-common/src/components/http/authorization/Basic.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/Basic.vue
@ -1,16 +1,22 @@
 <template>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.username") }}
+    </label>
    <SmartEnvInput
      v-model="auth.username"
-      :placeholder="t('authorization.username')"
+      placeholder="john_doe"
      :auto-complete-env="true"
      :envs="envs"
    />
  </div>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.password") }}
+    </label>
    <SmartEnvInput
      v-model="auth.password"
-      :placeholder="t('authorization.password')"
+      placeholder="Enter password"
      :auto-complete-env="true"
      :envs="envs"
    />
--- a/packages/hoppscotch-common/src/components/http/authorization/Digest.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/Digest.vue
@ -1,16 +1,22 @@
 <template>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.username") }}
+    </label>
    <SmartEnvInput
      v-model="auth.username"
-      :placeholder="t('authorization.username')"
+      placeholder="john_doe"
      :auto-complete-env="true"
      :envs="envs"
    />
  </div>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.password") }}
+    </label>
    <SmartEnvInput
      v-model="auth.password"
-      :placeholder="t('authorization.password')"
+      placeholder="Enter password"
      :auto-complete-env="true"
      :envs="envs"
    />
@ -31,21 +37,25 @@
    </div>

    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.digest.realm") }}
+      </label>
      <SmartEnvInput
        v-model="auth.realm"
        :auto-complete-env="true"
-        :placeholder="`${t(
-          'authorization.digest.realm'
-        )} (e.g. testrealm@example.com)`"
+        placeholder="testrealm@example.com"
        :envs="envs"
      />
    </div>

    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.digest.nonce") }}
+      </label>
      <SmartEnvInput
        v-model="auth.nonce"
        :auto-complete-env="true"
-        :placeholder="t('authorization.digest.nonce')"
+        placeholder="MTIzNDU2Nzg5MDEyMzQ1Njc4OTA="
        :envs="envs"
      />
    </div>
@ -94,37 +104,49 @@
    </div>

    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.digest.qop") }}
+      </label>
      <SmartEnvInput
        v-model="auth.qop"
        :auto-complete-env="true"
-        :placeholder="`${t('authorization.digest.qop')} (e.g. auth-int)`"
+        placeholder="auth-int"
        :envs="envs"
      />
    </div>

    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.digest.nonce_count") }}
+      </label>
      <SmartEnvInput
        v-model="auth.nc"
        :auto-complete-env="true"
-        :placeholder="`${t('authorization.digest.nonce_count')} (e.g. 00000001)`"
+        placeholder="00000001"
        :envs="envs"
      />
    </div>

    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.digest.client_nonce") }}
+      </label>
      <SmartEnvInput
        v-model="auth.cnonce"
        :auto-complete-env="true"
-        :placeholder="`${t('authorization.digest.client_nonce')} (e.g. Oa4f113b)`"
+        placeholder="Oa4f113b"
        :envs="envs"
      />
    </div>

    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.digest.opaque") }}
+      </label>
      <SmartEnvInput
        v-model="auth.opaque"
        :auto-complete-env="true"
-        :placeholder="t('authorization.digest.opaque')"
+        placeholder="5ccc069c403ebaf9f0171e9517f40e41"
        :envs="envs"
      />
    </div>
--- a/packages/hoppscotch-common/src/components/http/authorization/HAWK.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/HAWK.vue
@ -1,17 +1,23 @@
 <template>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.hawk.id") }}
+    </label>
    <SmartEnvInput
      v-model="auth.authId"
      :auto-complete-env="true"
-      placeholder="HAWK Auth ID"
+      placeholder="my-app-id"
      :envs="envs"
    />
  </div>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.hawk.key") }}
+    </label>
    <SmartEnvInput
      v-model="auth.authKey"
      :auto-complete-env="true"
-      placeholder="HAWK Auth Key"
+      placeholder="werxhqb98rpaxn39848xrunpaw3489ruxnpa98w4rxn"
      :envs="envs"
    />
  </div>
@ -72,50 +78,68 @@
      </p>
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.username") }}
+      </label>
      <SmartEnvInput
        v-model="auth.user"
        :auto-complete-env="true"
-        :placeholder="t('authorization.username')"
+        placeholder="john_doe"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.digest.nonce") }}
+      </label>
      <SmartEnvInput
        v-model="auth.nonce"
        :auto-complete-env="true"
-        placeholder="Nonce"
+        placeholder="j4h3g2"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.hawk.ext") }}
+      </label>
      <SmartEnvInput
        v-model="auth.ext"
        :auto-complete-env="true"
-        placeholder="ext"
+        placeholder="some-app-ext-data"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.hawk.app") }}
+      </label>
      <SmartEnvInput
        v-model="auth.app"
        :auto-complete-env="true"
-        placeholder="app"
+        placeholder="my-app-id"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.hawk.dlg") }}
+      </label>
      <SmartEnvInput
        v-model="auth.dlg"
        :auto-complete-env="true"
-        placeholder="dlg"
+        placeholder="user-delegation"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.timestamp") }}
+      </label>
      <SmartEnvInput
        v-model="auth.timestamp"
        :auto-complete-env="true"
-        placeholder="Timestamp"
+        placeholder="1353832234"
        :envs="envs"
      />
    </div>
@ -126,7 +150,7 @@
      :on="auth.includePayloadHash"
      @change="auth.includePayloadHash = !auth.includePayloadHash"
    >
-      Include Payload Hash
+      {{ t("authorization.hawk.include") }}
    </HoppSmartCheckbox>
  </div>
 </template>
--- a/packages/hoppscotch-common/src/components/http/authorization/JWT.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/JWT.vue
@ -1,7 +1,7 @@
 <template>
  <div class="flex items-center border-b border-dividerLight">
    <span class="flex items-center">
-      <label class="ml-4 text-secondaryLight">
+      <label class="ml-4 text-secondaryLight min-w-[6rem]">
        {{ t("authorization.digest.algorithm") }}
      </label>
      <tippy
@ -13,7 +13,7 @@
        <HoppSmartSelectWrapper>
          <HoppButtonSecondary
            :label="auth.algorithm"
-            class="ml-2 rounded-none pr-8"
+            class="rounded-none pr-8"
          />
        </HoppSmartSelectWrapper>
        <template #content="{ hide }">
@ -57,11 +57,15 @@
  <!-- Secret field for HMAC algorithms -->
  <div v-else>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.secret") }}
+      </label>
      <SmartEnvInput
        v-model="auth.secret"
        :auto-complete-env="true"
-        :placeholder="t('authorization.secret')"
+        placeholder="your_secret_key_here"
        :envs="envs"
+        class="px-4"
      />
    </div>

@ -95,7 +99,7 @@

    <div class="flex items-center border-b border-dividerLight">
      <span class="flex items-center">
-        <label class="ml-4 text-secondaryLight">
+        <label class="ml-4 text-secondaryLight min-w-[6rem]">
          {{ t("authorization.pass_key_by") }}
        </label>
        <tippy
@ -105,10 +109,7 @@
          :on-shown="() => authTippyActions?.focus()"
        >
          <HoppSmartSelectWrapper>
-            <HoppButtonSecondary
-              :label="passBy"
-              class="ml-2 rounded-none pr-8"
-            />
+            <HoppButtonSecondary :label="passBy" class="rounded-none pr-8" />
          </HoppSmartSelectWrapper>
          <template #content="{ hide }">
            <div
@ -140,20 +141,29 @@

    <!-- passby conditional prefix or name -->
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{
+          auth.addTo === "HEADERS"
+            ? t("authorization.jwt.header_prefix")
+            : t("authorization.jwt.param_name")
+        }}
+      </label>
      <SmartEnvInput
        v-if="auth.addTo === 'HEADERS'"
        v-model="auth.headerPrefix"
        :auto-complete-env="true"
-        :placeholder="t('authorization.jwt.placeholder_request_header')"
+        placeholder="Bearer"
        :envs="envs"
+        class="px-4"
      />

      <SmartEnvInput
        v-else
        v-model="auth.paramName"
        :auto-complete-env="true"
-        :placeholder="t('authorization.jwt.placeholder_request_param')"
+        placeholder="access_token"
        :envs="envs"
+        class="px-4"
      />
    </div>
  </div>
--- a/packages/hoppscotch-common/src/components/http/authorization/NTLM.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/NTLM.vue
@ -1,17 +1,23 @@
 <template>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.username") }}
+    </label>
    <SmartEnvInput
      v-model="auth.username"
      :auto-complete-env="true"
-      :placeholder="t('authorization.username')"
+      placeholder="DOMAIN\\username"
      :envs="envs"
    />
  </div>
  <div class="flex flex-1 border-b border-dividerLight">
+    <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+      {{ t("authorization.password") }}
+    </label>
    <input
      v-model="auth.password"
      name="password"
-      :placeholder="t('authorization.password')"
+      placeholder="Enter password"
      class="flex flex-1 bg-transparent px-4 py-2"
      type="password"
    />
@ -22,25 +28,32 @@
  <div>
    <!-- label as advanced config here -->
    <div class="p-4">
-      <label class="text-secondaryLight"> Advanced Configuration </label>
+      <label class="text-secondaryLight">{{
+        t("authorization.advance_config")
+      }}</label>
      <p>
-        Hoppscotch automatically assigns default values to certain fields if no
-        explicit value is provided.
+        {{ t("authorization.advance_config_description") }}
      </p>
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.ntlm.domain") }}
+      </label>
      <SmartEnvInput
        v-model="auth.domain"
        :auto-complete-env="true"
-        placeholder="Domain"
+        placeholder="CORPORATE"
        :envs="envs"
      />
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
+      <label class="flex items-center ml-4 text-secondaryLight min-w-[6rem]">
+        {{ t("authorization.ntlm.workstation") }}
+      </label>
      <SmartEnvInput
        v-model="auth.workstation"
        :auto-complete-env="true"
-        placeholder="Workstation"
+        placeholder="MY-COMPUTER"
        :envs="envs"
      />
    </div>
@ -50,7 +63,7 @@
        :on="auth.retryingRequest"
        @change="auth.retryingRequest = !auth.retryingRequest"
      >
-        Disable Retrying Request
+        {{ t("authorization.ntlm.disable_retrying_request") }}
      </HoppSmartCheckbox>
    </div>
  </div>
--- a/packages/hoppscotch-common/src/components/http/authorization/OAuth2.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/OAuth2.vue
@ -52,12 +52,19 @@
      :key="element.id"
      class="flex flex-1 border-b border-dividerLight"
    >
+      <label
+        v-if="element.type === 'text'"
+        class="flex items-center ml-4 text-secondaryLight min-w-[6rem]"
+      >
+        {{ element.label }}
+      </label>
      <SmartEnvInput
        v-if="element.type === 'text'"
        v-model="element.ref.value"
-        :placeholder="element.label"
+        :placeholder="getPlaceholderForField(element.id)"
        :envs="envs"
        :auto-complete-env="true"
+        class="px-4"
      />
      <div
        v-else-if="element.type === 'checkbox'"
@ -1109,6 +1116,19 @@ const generateOAuthToken = async () => {
  }
 }

+const getPlaceholderForField = (fieldId: string): string => {
+  const placeholders: Record<string, string> = {
+    authEndpoint: "https://example.com/oauth2/authorize",
+    tokenEndpoint: "https://example.com/oauth2/token",
+    clientId: "your_client_id_here",
+    clientSecret: "your_client_secret_here",
+    scopes: "read write",
+    username: "your_username",
+    password: "your_password",
+  }
+  return placeholders[fieldId] || t("authorization.oauth.enter_value")
+}
+
 const grantTypeTippyActions = ref<HTMLElement | null>(null)
 const pkceTippyActions = ref<HTMLElement | null>(null)
 const authTippyActions = ref<HTMLElement | null>(null)