refactor: improved input validations

.env.example

@@ -12,8 +12,7 @@ PROJECT_ID=postwoman-api
 STORAGE_BUCKET=postwoman-api.appspot.com
 MESSAGING_SENDER_ID=421993993223
 APP_ID=1:421993993223:web:ec0baa8ee8c02ffa1fc6a2
-MEASUREMENT_ID=G-ERJ6025CEB
+MEASUREMENT_ID=G-BBJ3R80PJT
-FB_MEASUREMENT_ID=G-BBJ3R80PJT
 
 # Base URL
 BASE_URL=https://hoppscotch.io

assets/scss/styles.scss

@@ -206,15 +206,17 @@ button {
   @apply rounded;
   @apply transition;
   @apply absolute;
+  @apply origin-top-left;
 }
 
 .floating-input:focus-within ~ label,
 .floating-input:not(:placeholder-shown) ~ label {
   @apply bg-primary;
   @apply transform;
-  @apply origin-center;
+  @apply origin-top-left;
   @apply scale-75;
-  @apply -translate-y-6;
+  @apply -translate-y-5;
+  @apply translate-x-1;
 }
 
 .floating-input:focus-within ~ label {

components/app/Header.vue

@@ -1,10 +1,7 @@
 <template>
   <header class="flex flex-1 py-2 px-4 items-center justify-between">
-    <div
+    <div class="font-bold flex-shrink-0 inline-flex items-center">
-      class="font-bold space-x-4 flex-shrink-0 text-sm inline-flex items-center"
-    >
       <AppLogo />
-      <span>Hoppscotch</span>
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">
       <AppGitHubStarButton class="flex mx-2 mt-1" />

components/app/Shortcuts.vue

@@ -41,7 +41,7 @@
           :key="`map-${mapIndex}`"
           class="space-y-4 py-4 px-6"
         >
-          <h5 class="font-bold text-secondaryDark text-sm">
+          <h5 class="font-bold text-secondaryDark">
             {{ map.section }}
           </h5>
           <div
@@ -82,6 +82,15 @@ export default {
       mappings: [
         {
           section: "General",
+          shortcuts: [
+            {
+              keys: ["?"],
+              label: this.$t("shortcut.show_all"),
+            },
+          ],
+        },
+        {
+          section: "Request",
           shortcuts: [
             {
               keys: [getPlatformSpecialKey(), "G"],
@@ -99,11 +108,6 @@ export default {
               keys: [getPlatformSpecialKey(), "I"],
               label: this.$t("shortcut.reset_request"),
             },
-          ],
-        },
-        {
-          section: "Request",
-          shortcuts: [
             {
               keys: [getPlatformAlternateKey(), "↑"],
               label: this.$t("shortcut.next_method"),

components/collections/Add.vue

@@ -40,6 +40,10 @@ export default {
   },
   methods: {
     addNewCollection() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name"))
+        return
+      }
       this.$emit("submit", this.name)
       this.hideModal()
     },

components/collections/AddFolder.vue

@@ -43,6 +43,10 @@ export default {
   },
   methods: {
     addFolder() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name"))
+        return
+      }
       this.$emit("add-folder", {
         name: this.name,
         folder: this.folder,

components/collections/Edit.vue

@@ -41,6 +41,10 @@ export default {
   },
   methods: {
     saveCollection() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name"))
+        return
+      }
       this.$emit("submit", this.name)
       this.hideModal()
     },

components/collections/EditFolder.vue

@@ -40,6 +40,10 @@ export default {
   },
   methods: {
     editFolder() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name"))
+        return
+      }
       this.$emit("submit", this.name)
       this.hideModal()
     },

components/collections/EditRequest.vue

@@ -43,6 +43,10 @@ export default {
   },
   methods: {
     saveRequest() {
+      if (!this.requestUpdateData.name) {
+        this.$toast.info(this.$t("collection.invalid_name"))
+        return
+      }
       this.$emit("submit", this.requestUpdateData)
       this.hideModal()
     },

components/collections/SaveRequest.vue

@@ -107,14 +107,14 @@ export default defineComponent({
       this.picked = picked
     },
     saveRequestAs() {
-      if (this.picked == null) {
+      if (!this.requestName) {
-        this.$toast.error(this.$t("collection.select"), {
+        this.$toast.error(this.$t("empty_req_name"), {
           icon: "error",
         })
         return
       }
-      if (this.$data.requestData.name.length === 0) {
+      if (this.picked == null) {
-        this.$toast.error(this.$t("empty_req_name"), {
+        this.$toast.error(this.$t("collection.select"), {
           icon: "error",
         })
         return

components/collections/index.vue

@@ -21,8 +21,8 @@
             py-2
             pr-2
             pl-9
-            focus:outline-none
             truncate
+            focus:outline-none
           "
         />
       </div>
@@ -312,10 +312,6 @@ export default {
     },
     // Intented to be called by the CollectionAdd modal submit event
     addNewRootCollection(name) {
-      if (!name) {
-        this.$toast.info(this.$t("collection.invalid_name"))
-        return
-      }
       if (this.collectionsType.type === "my-collections") {
         addRESTCollection({
           name,

components/environments/Edit.vue

@@ -6,6 +6,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
+        <div class="flex relative">
           <input
             id="selectLabelEnvEdit"
             v-model="name"
@@ -17,6 +18,7 @@
           <label for="selectLabelEnvEdit">
             {{ $t("label") }}
           </label>
+        </div>
         <div class="flex flex-1 justify-between items-center">
           <label for="variableList" class="font-semibold px-4 pt-4 pb-4">
             {{ $t("env_variable_list") }}
@@ -26,7 +28,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
               :icon="clearIcon"
-              @click.native="clearContent($event)"
+              @click.native="clearContent()"
             />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"

components/http/ImportCurl.vue

@@ -9,11 +9,14 @@
         <textarea
           id="import-curl"
           v-model="curl"
-          class="textarea"
+          class="font-mono textarea floating-input"
           autofocus
           rows="8"
-          :placeholder="$t('enter_curl')"
+          placeholder=" "
         ></textarea>
+        <label for="import-curl">
+          {{ $t("enter_curl") }}
+        </label>
       </div>
     </template>
     <template #footer>

components/smart/Modal.vue

@@ -34,7 +34,6 @@
             class="
               bg-primary
               rounded-lg
-              m-4
               shadow-lg
               text-left
               w-full
@@ -45,12 +44,22 @@
               align-bottom
               overflow-hidden
               sm:max-w-md sm:align-middle
+              md:m-4
             "
           >
             <div class="flex pl-2 items-center justify-between">
               <slot name="header"></slot>
             </div>
-            <div class="flex flex-col my-4">
+            <div
+              class="
+                flex flex-col
+                max-h-md
+                my-4
+                py-2
+                overflow-y-auto
+                hide-scrollbar
+              "
+            >
               <slot name="body"></slot>
             </div>
             <div

helpers/fb/index.ts

@@ -14,7 +14,7 @@ const firebaseConfig = {
   storageBucket: process.env.STORAGE_BUCKET,
   messagingSenderId: process.env.MESSAGING_SENDER_ID,
   appId: process.env.APP_ID,
-  measurementId: process.env.FB_MEASUREMENT_ID,
+  measurementId: process.env.MEASUREMENT_ID,
 }
 
 let initialized = false

lang/en-US.json

@@ -383,6 +383,7 @@
   "enter_curl": "Enter cURL",
   "extensions": "Extensions",
   "extensions_use_toggle": "Use the browser extension to send requests (if present)",
+  "proxy_use_toggle": "Use the proxy middleware to send requests",
   "extension_version": "Extension Version",
   "extension_ver_not_reported": "Not Reported",
   "extensions_info1": "Browser extension simplifies access to Hoppscotch, fix CORS issues, etc.",

pages/documentation.vue

@@ -10,7 +10,7 @@
               </label>
               <span
                 class="
-                  bg-accentLight
+                  bg-accentDark
                   rounded
                   font-semibold
                   text-accentContrast

pages/settings.vue

@@ -18,7 +18,7 @@
           <div v-else class="space-y-8">
             <section>
               <h4 class="font-bold text-secondaryDark">User</h4>
-              <div class="space-y-4 mt-4">
+              <div class="space-y-4 py-4">
                 <div class="flex items-start">
                   <div class="flex items-center">
                     <img
@@ -58,7 +58,7 @@
               <div class="mt-1 text-secondaryLight">
                 These settings are synced to cloud.
               </div>
-              <div class="space-y-4 mt-4">
+              <div class="space-y-4 py-4">
                 <div class="flex items-center">
                   <SmartToggle
                     :on="SYNC_COLLECTIONS"
@@ -163,7 +163,7 @@
                 {{ $t("contact_us") }} </SmartLink
               >.
             </div>
-            <div class="space-y-4 mt-4">
+            <div class="space-y-4 py-4">
               <div class="flex items-center">
                 <SmartToggle
                   :on="EXPERIMENTAL_URL_BAR_ENABLED"
@@ -256,7 +256,7 @@
                 />
               </span>
             </div>
-            <div class="space-y-4 mt-4">
+            <div class="space-y-4 py-4">
               <div class="flex items-center">
                 <SmartToggle
                   :on="EXTENSIONS_ENABLED"
@@ -281,12 +281,17 @@
                 {{ $t("proxy_privacy_policy") }} </SmartLink
               >.
             </div>
-            <div class="space-y-4 mt-4">
+            <div class="space-y-4 py-4">
-              <div class="flex space-x-2 items-center">
+              <div class="flex items-center">
                 <SmartToggle
                   :on="PROXY_ENABLED"
                   @change="toggleSetting('PROXY_ENABLED')"
-                />
+                >
+                  {{ $t("proxy_use_toggle") }}
+                </SmartToggle>
+              </div>
+            </div>
+            <div class="flex space-x-2 py-4 items-center">
               <div class="flex flex-1 items-center relative">
                 <input
                   id="url"
@@ -308,7 +313,6 @@
                 @click.native="resetProxy"
               />
             </div>
-            </div>
           </section>
         </div>
       </div>