feat: env variable support in authorization

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

components/http/Authorization.vue

@@ -108,39 +108,51 @@
       />
     </div>
     <div v-if="authType === 'basic'" class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight space-y-2 p-2 w-2/3">
+      <div class="border-r border-dividerLight w-2/3">
-        <div class="flex relative">
+        <div
+          class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        >
+          <SmartEnvInput
+            class="bg-primary flex flex-1 py-1 px-4"
+            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+            v-model="basicUsername"
+            :placeholder="$t('authorization.username')"
+          />
           <input
+            v-else
             id="http_basic_user"
             v-model="basicUsername"
-            class="input floating-input"
+            class="bg-primary flex flex-1 py-2 px-4"
-            placeholder=" "
+            :placeholder="$t('authorization.username')"
             name="http_basic_user"
           />
-          <label for="http_basic_user">
-            {{ $t("authorization.username") }}
-          </label>
         </div>
-        <div class="flex relative">
+        <div
+          class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        >
+          <SmartEnvInput
+            class="bg-primary flex flex-1 py-1 px-4"
+            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+            v-model="basicPassword"
+            :placeholder="$t('authorization.password')"
+          />
           <input
+            v-else
             id="http_basic_passwd"
             v-model="basicPassword"
-            class="input floating-input"
+            class="bg-primary flex flex-1 py-2 px-4"
-            placeholder=" "
+            :placeholder="$t('authorization.password')"
             name="http_basic_passwd"
             :type="passwordFieldType"
           />
-          <label for="http_basic_passwd">
+          <span>
-            {{ $t("authorization.password") }}
+            <ButtonSecondary
-          </label>
+              :icon="
-          <ButtonSecondary
+                passwordFieldType === 'text' ? 'visibility' : 'visibility_off'
-            :icon="
+              "
-              passwordFieldType === 'text' ? 'visibility' : 'visibility_off'
+              @click.native="switchVisibility"
-            "
+            />
-            outline
+          </span>
-            class="rounded ml-2"
-            @click.native="switchVisibility"
-          />
         </div>
       </div>
       <div
@@ -169,16 +181,24 @@
       </div>
     </div>
     <div v-if="authType === 'bearer'" class="border-b border-dividerLight flex">
-      <div class="border-r border-dividerLight space-y-2 p-2 w-2/3">
+      <div class="border-r border-dividerLight w-2/3">
-        <div class="flex relative">
+        <div
+          class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        >
+          <SmartEnvInput
+            class="bg-primary flex flex-1 py-1 px-4"
+            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+            v-model="bearerToken"
+            placeholder="Token"
+          />
           <input
+            v-else
             id="bearer_token"
             v-model="bearerToken"
-            class="input floating-input"
+            class="bg-primary flex flex-1 py-2 px-4"
-            placeholder=" "
+            placeholder="Token"
             name="bearer_token"
           />
-          <label for="bearer_token"> Token </label>
         </div>
       </div>
       <div
@@ -210,16 +230,24 @@
       v-if="authType === 'oauth-2'"
       class="border-b border-dividerLight flex"
     >
-      <div class="border-r border-dividerLight space-y-2 p-2 w-2/3">
+      <div class="border-r border-dividerLight w-2/3">
-        <div class="flex relative">
+        <div
+          class="divide-x divide-dividerLight border-b border-dividerLight flex"
+        >
+          <SmartEnvInput
+            class="bg-primary flex flex-1 py-1 px-4"
+            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+            v-model="oauth2Token"
+            placeholder="Token"
+          />
           <input
+            v-else
             id="oauth2_token"
             v-model="oauth2Token"
-            class="input floating-input"
+            class="bg-primary flex flex-1 py-2 px-4"
-            placeholder=" "
+            placeholder="Token"
             name="oauth2_token"
           />
-          <label for="oauth2_token"> Token </label>
         </div>
         <HttpOAuth2Authorization />
       </div>
@@ -316,6 +344,7 @@ export default defineComponent({
       passwordFieldType,
       clearContent,
       switchVisibility,
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
     }
   },
 })

components/http/OAuth2Authorization.vue

@@ -1,57 +1,53 @@
 <template>
-  <div class="flex flex-col space-y-2">
+  <div class="flex flex-col">
-    <div class="flex relative">
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
       <input
         id="oidcDiscoveryURL"
         v-model="oidcDiscoveryURL"
-        class="input floating-input"
+        class="bg-primary flex flex-1 py-2 px-4"
-        placeholder=" "
+        placeholder="OpenID Connect Discovery URL"
         name="oidcDiscoveryURL"
       />
-      <label for="oidcDiscoveryURL"> OpenID Connect Discovery URL </label>
     </div>
-    <div class="flex relative">
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
       <input
         id="authURL"
         v-model="authURL"
-        class="input floating-input"
+        class="bg-primary flex flex-1 py-2 px-4"
-        placeholder=" "
+        placeholder="Authentication URL"
         name="authURL"
       />
-      <label for="authURL"> Authentication URL </label>
     </div>
-    <div class="flex relative">
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
       <input
         id="accessTokenURL"
         v-model="accessTokenURL"
-        class="input floating-input"
+        class="bg-primary flex flex-1 py-2 px-4"
-        placeholder=" "
+        placeholder="Access Token URL"
         name="accessTokenURL"
       />
-      <label for="accessTokenURL"> Access Token URL </label>
     </div>
-    <div class="flex relative">
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
       <input
         id="clientID"
         v-model="clientID"
-        class="input floating-input"
+        class="bg-primary flex flex-1 py-2 px-4"
-        placeholder=" "
+        placeholder="Client ID"
         name="clientID"
       />
-      <label for="clientID"> Client ID </label>
     </div>
-    <div class="flex relative">
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
       <input
         id="scope"
         v-model="scope"
-        class="input floating-input"
+        class="bg-primary flex flex-1 py-2 px-4"
-        placeholder=" "
+        placeholder="Scope"
         name="scope"
       />
-      <label for="scope"> Scope </label>
     </div>
-    <div>
+    <div class="p-2">
-      <ButtonPrimary
+      <ButtonSecondary
+        filled
         :label="$t('authorization.generate_token')"
         @click.native="handleAccessTokenRequest()"
       />
@@ -101,7 +97,7 @@ export default {
         oidcDiscoveryURL.value === "" &&
         (authURL.value === "" || accessTokenURL.value === "")
       ) {
-        $toast.error($t("complete_config_urls"), {
+        $toast.error($t("complete_config_urls").toString(), {
           icon: "error",
         })
         return

helpers/utils/EffectiveURL.ts

@@ -80,12 +80,13 @@ export function getEffectiveRESTRequest(
   if (request.auth.authActive) {
     // TODO: Support a better b64 implementation than btoa ?
     if (request.auth.authType === "basic") {
+      const username = parseTemplateString(request.auth.username, envVariables)
+      const password = parseTemplateString(request.auth.password, envVariables)
+
       effectiveFinalHeaders.push({
         active: true,
         key: "Authorization",
-        value: `Basic ${btoa(
+        value: `Basic ${btoa(`${username}:${password}`)}`,
-          `${request.auth.username}:${request.auth.password}`
-        )}`,
       })
     } else if (
       request.auth.authType === "bearer" ||
@@ -94,7 +95,10 @@ export function getEffectiveRESTRequest(
       effectiveFinalHeaders.push({
         active: true,
         key: "Authorization",
-        value: `Bearer ${request.auth.token}`,
+        value: `Bearer ${parseTemplateString(
+          request.auth.token,
+          envVariables
+        )}`,
       })
     }
   }