feat: ui for oauth

components/http/Authorization.vue

@@ -107,95 +107,145 @@
         reverse
       />
     </div>
-    <div v-if="authType === 'basic'" class="space-y-2 p-2">
-      <div class="flex relative">
-        <input
-          id="http_basic_user"
-          v-model="basicUsername"
-          class="input floating-input"
-          placeholder=" "
-          name="http_basic_user"
-        />
-        <label for="http_basic_user">
-          {{ $t("authorization.username") }}
-        </label>
-      </div>
-      <div class="flex relative">
-        <input
-          id="http_basic_passwd"
-          v-model="basicPassword"
-          class="input floating-input"
-          placeholder=" "
-          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"
-        />
-      </div>
-      <div class="p-2">
-        <div class="text-secondaryLight pb-2">
-          {{ $t("helpers.authorization") }}
+    <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">
+          <input
+            id="http_basic_user"
+            v-model="basicUsername"
+            class="input floating-input"
+            placeholder=" "
+            name="http_basic_user"
+          />
+          <label for="http_basic_user">
+            {{ $t("authorization.username") }}
+          </label>
+        </div>
+        <div class="flex relative">
+          <input
+            id="http_basic_passwd"
+            v-model="basicPassword"
+            class="input floating-input"
+            placeholder=" "
+            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"
+          />
+        </div>
+      </div>
+      <div
+        class="
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="p-2">
+          <div class="text-secondaryLight pb-2">
+            {{ $t("helpers.authorization") }}
+          </div>
+          <SmartAnchor
+            class="link"
+            :label="`${$t('authorization.learn')} \xA0 →`"
+            to="https://docs.hoppscotch.io/"
+            blank
+          />
         </div>
-        <SmartAnchor
-          class="link"
-          :label="$t('action.learn_more')"
-          to="https://docs.hoppscotch.io/"
-          blank
-        />
       </div>
     </div>
-    <div v-if="authType === 'bearer'" class="space-y-2 p-2">
-      <div class="flex relative">
-        <input
-          id="bearer_token"
-          v-model="bearerToken"
-          class="input floating-input"
-          placeholder=" "
-          name="bearer_token"
-        />
-        <label for="bearer_token"> Token </label>
-      </div>
-      <div class="p-2">
-        <div class="text-secondaryLight pb-2">
-          {{ $t("helpers.authorization") }}
+    <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">
+          <input
+            id="bearer_token"
+            v-model="bearerToken"
+            class="input floating-input"
+            placeholder=" "
+            name="bearer_token"
+          />
+          <label for="bearer_token"> Token </label>
+        </div>
+      </div>
+      <div
+        class="
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="p-2">
+          <div class="text-secondaryLight pb-2">
+            {{ $t("helpers.authorization") }}
+          </div>
+          <SmartAnchor
+            class="link"
+            :label="`${$t('authorization.learn')} \xA0 →`"
+            to="https://docs.hoppscotch.io/"
+            blank
+          />
         </div>
-        <SmartAnchor
-          class="link"
-          :label="$t('action.learn_more')"
-          to="https://docs.hoppscotch.io/"
-          blank
-        />
       </div>
     </div>
-    <div v-if="authType === 'oauth-2'" class="space-y-2 p-2">
-      <div class="flex relative">
-        <input
-          id="oauth2_token"
-          v-model="oauth2Token"
-          class="input floating-input"
-          placeholder=" "
-          name="oauth2_token"
-        />
-        <label for="oauth2_token"> Token </label>
-      </div>
-      <HttpOAuth2Authorization />
-      <div class="p-2">
-        <div class="text-secondaryLight pb-2">
-          {{ $t("helpers.authorization") }}
+    <div
+      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">
+          <input
+            id="oauth2_token"
+            v-model="oauth2Token"
+            class="input floating-input"
+            placeholder=" "
+            name="oauth2_token"
+          />
+          <label for="oauth2_token"> Token </label>
+        </div>
+        <HttpOAuth2Authorization />
+      </div>
+      <div
+        class="
+          h-full
+          top-upperTertiaryStickyFold
+          min-w-46
+          max-w-1/3
+          p-4
+          z-9
+          sticky
+          overflow-auto
+        "
+      >
+        <div class="p-2">
+          <div class="text-secondaryLight pb-2">
+            {{ $t("helpers.authorization") }}
+          </div>
+          <SmartAnchor
+            class="link"
+            :label="`${$t('authorization.learn')} \xA0 →`"
+            to="https://docs.hoppscotch.io/"
+            blank
+          />
         </div>
-        <SmartAnchor
-          class="link"
-          :label="$t('action.learn_more')"
-          to="https://docs.hoppscotch.io/"
-          blank
-        />
       </div>
     </div>
   </div>

components/http/OAuth2Authorization.vue

@@ -8,7 +8,7 @@
         placeholder=" "
         name="oidcDiscoveryURL"
       />
-      <label for="oidcDiscoveryURL">oidcDiscoveryURL </label>
+      <label for="oidcDiscoveryURL"> OpenID Connect Discovery URL </label>
     </div>
     <div class="flex relative">
       <input
@@ -18,7 +18,7 @@
         placeholder=" "
         name="authURL"
       />
-      <label for="authURL">authURL </label>
+      <label for="authURL"> Authentication URL </label>
     </div>
     <div class="flex relative">
       <input
@@ -28,7 +28,7 @@
         placeholder=" "
         name="accessTokenURL"
       />
-      <label for="accessTokenURL">accessTokenURL </label>
+      <label for="accessTokenURL"> Access Token URL </label>
     </div>
     <div class="flex relative">
       <input
@@ -38,7 +38,7 @@
         placeholder=" "
         name="clientID"
       />
-      <label for="clientID">clientID </label>
+      <label for="clientID"> Client ID </label>
     </div>
     <div class="flex relative">
       <input
@@ -48,11 +48,11 @@
         placeholder=" "
         name="scope"
       />
-      <label for="scope">scope </label>
+      <label for="scope"> Scope </label>
     </div>
     <div>
       <ButtonPrimary
-        label="Get request"
+        :label="$t('authorization.generate_token')"
         @click.native="handleAccessTokenRequest()"
       />
     </div>

locales/en.json

@@ -85,7 +85,9 @@
     "we_sent_magic_link_description": "Check your inbox - we sent an email to {email}. It contains a magic link that will log you in."
   },
   "authorization": {
+    "generate_token": "Generate Token",
     "include_in_url": "Include in URL",
+    "learn": "Learn how",
     "password": "Password",
     "token": "Token",
     "type": "Authorization Type",