feat: ui for oauth

components/http/Authorization.vue

@@ -107,7 +107,8 @@
         reverse
       />
     </div>
-    <div v-if="authType === 'basic'" class="space-y-2 p-2">
+    <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"
@@ -133,25 +134,42 @@
             {{ $t("authorization.password") }}
           </label>
           <ButtonSecondary
-          :icon="passwordFieldType === 'text' ? 'visibility' : 'visibility_off'"
+            :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('action.learn_more')"
+            :label="`${$t('authorization.learn')} \xA0 →`"
             to="https://docs.hoppscotch.io/"
             blank
           />
         </div>
       </div>
-    <div v-if="authType === 'bearer'" class="space-y-2 p-2">
+    </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">
           <input
             id="bearer_token"
@@ -162,19 +180,37 @@
           />
           <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('action.learn_more')"
+            :label="`${$t('authorization.learn')} \xA0 →`"
             to="https://docs.hoppscotch.io/"
             blank
           />
         </div>
       </div>
-    <div v-if="authType === 'oauth-2'" class="space-y-2 p-2">
+    </div>
+    <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"
@@ -186,19 +222,33 @@
           <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('action.learn_more')"
+            :label="`${$t('authorization.learn')} \xA0 →`"
             to="https://docs.hoppscotch.io/"
             blank
           />
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">

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