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="flex relative">
+      <div class="border-r border-dividerLight w-2/3">
+        <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"
-            placeholder=" "
+            class="bg-primary flex flex-1 py-2 px-4"
+            :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"
-            placeholder=" "
+            class="bg-primary flex flex-1 py-2 px-4"
+            :placeholder="$t('authorization.password')"
             name="http_basic_passwd"
             :type="passwordFieldType"
           />
-          <label for="http_basic_passwd">
-            {{ $t("authorization.password") }}
-          </label>
-          <ButtonSecondary
-            :icon="
-              passwordFieldType === 'text' ? 'visibility' : 'visibility_off'
-            "
-            outline
-            class="rounded ml-2"
-            @click.native="switchVisibility"
-          />
+          <span>
+            <ButtonSecondary
+              :icon="
+                passwordFieldType === 'text' ? 'visibility' : 'visibility_off'
+              "
+              @click.native="switchVisibility"
+            />
+          </span>
         </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="flex relative">
+      <div class="border-r border-dividerLight w-2/3">
+        <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"
-            placeholder=" "
+            class="bg-primary flex flex-1 py-2 px-4"
+            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="flex relative">
+      <div class="border-r border-dividerLight w-2/3">
+        <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"
-            placeholder=" "
+            class="bg-primary flex flex-1 py-2 px-4"
+            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 relative">
+  <div class="flex flex-col">
+    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
       <input
         id="oidcDiscoveryURL"
         v-model="oidcDiscoveryURL"
-        class="input floating-input"
-        placeholder=" "
+        class="bg-primary flex flex-1 py-2 px-4"
+        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"
-        placeholder=" "
+        class="bg-primary flex flex-1 py-2 px-4"
+        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"
-        placeholder=" "
+        class="bg-primary flex flex-1 py-2 px-4"
+        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"
-        placeholder=" "
+        class="bg-primary flex flex-1 py-2 px-4"
+        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"
-        placeholder=" "
+        class="bg-primary flex flex-1 py-2 px-4"
+        placeholder="Scope"
         name="scope"
       />
-      <label for="scope"> Scope </label>
     </div>
-    <div>
-      <ButtonPrimary
+    <div class="p-2">
+      <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