From 4d76c833288c8b5b07eeee636b04a929cfbf7de8 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 8 Aug 2021 12:01:36 +0530
Subject: [PATCH] refactor: improved input validations

---
 .env.example                           |  3 +-
 assets/scss/styles.scss                |  6 ++-
 components/app/Header.vue              |  5 +--
 components/app/Shortcuts.vue           | 16 ++++---
 components/collections/Add.vue         |  4 ++
 components/collections/AddFolder.vue   |  4 ++
 components/collections/Edit.vue        |  4 ++
 components/collections/EditFolder.vue  |  4 ++
 components/collections/EditRequest.vue |  4 ++
 components/collections/SaveRequest.vue |  8 ++--
 components/collections/index.vue       |  6 +--
 components/environments/Edit.vue       | 26 ++++++------
 components/http/ImportCurl.vue         |  7 +++-
 components/smart/Modal.vue             | 13 +++++-
 helpers/fb/index.ts                    |  2 +-
 lang/en-US.json                        |  1 +
 pages/documentation.vue                |  2 +-
 pages/settings.vue                     | 58 ++++++++++++++------------
 18 files changed, 105 insertions(+), 68 deletions(-)

diff --git a/.env.example b/.env.example
index fab8d26ec..7c67ad4b6 100644
--- a/.env.example
+++ b/.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
-FB_MEASUREMENT_ID=G-BBJ3R80PJT
+MEASUREMENT_ID=G-BBJ3R80PJT
 
 # Base URL
 BASE_URL=https://hoppscotch.io
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 2e07608e7..96da0afa8 100644
--- a/assets/scss/styles.scss
+++ b/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 {
diff --git a/components/app/Header.vue b/components/app/Header.vue
index d5925e796..489c4be33 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -1,10 +1,7 @@
 <template>
   <header class="flex flex-1 py-2 px-4 items-center justify-between">
-    <div
-      class="font-bold space-x-4 flex-shrink-0 text-sm inline-flex items-center"
-    >
+    <div class="font-bold flex-shrink-0 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" />
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 8d06c608f..7ec5c55bf 100644
--- a/components/app/Shortcuts.vue
+++ b/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"),
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index efa177c44..eeab5dcb6 100644
--- a/components/collections/Add.vue
+++ b/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()
     },
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index dcb6a24f0..7c76ac6c0 100644
--- a/components/collections/AddFolder.vue
+++ b/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,
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index b1b590f94..c3c066359 100644
--- a/components/collections/Edit.vue
+++ b/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()
     },
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index 0b8d3f210..ce9c37cef 100644
--- a/components/collections/EditFolder.vue
+++ b/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()
     },
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index 4c7fe93fc..fca64ba86 100644
--- a/components/collections/EditRequest.vue
+++ b/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()
     },
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index a4dfcacc3..09d4c9bca 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -107,14 +107,14 @@ export default defineComponent({
       this.picked = picked
     },
     saveRequestAs() {
-      if (this.picked == null) {
-        this.$toast.error(this.$t("collection.select"), {
+      if (!this.requestName) {
+        this.$toast.error(this.$t("empty_req_name"), {
           icon: "error",
         })
         return
       }
-      if (this.$data.requestData.name.length === 0) {
-        this.$toast.error(this.$t("empty_req_name"), {
+      if (this.picked == null) {
+        this.$toast.error(this.$t("collection.select"), {
           icon: "error",
         })
         return
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 1bae2246b..90adb7dd3 100644
--- a/components/collections/index.vue
+++ b/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,
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 59a11e50a..903809a58 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -6,17 +6,19 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <input
-          id="selectLabelEnvEdit"
-          v-model="name"
-          class="input floating-input"
-          placeholder=" "
-          type="text"
-          @keyup.enter="saveEnvironment"
-        />
-        <label for="selectLabelEnvEdit">
-          {{ $t("label") }}
-        </label>
+        <div class="flex relative">
+          <input
+            id="selectLabelEnvEdit"
+            v-model="name"
+            class="input floating-input"
+            placeholder=" "
+            type="text"
+            @keyup.enter="saveEnvironment"
+          />
+          <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' }"
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index ca27fea4b..461a0341e 100644
--- a/components/http/ImportCurl.vue
+++ b/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>
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 7606d0b5f..60be73897 100644
--- a/components/smart/Modal.vue
+++ b/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
diff --git a/helpers/fb/index.ts b/helpers/fb/index.ts
index 7b90baa17..68cacb1f8 100644
--- a/helpers/fb/index.ts
+++ b/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
diff --git a/lang/en-US.json b/lang/en-US.json
index e401c80b5..6751e917a 100644
--- a/lang/en-US.json
+++ b/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.",
diff --git a/pages/documentation.vue b/pages/documentation.vue
index 10695b4f4..a036e6d5f 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -10,7 +10,7 @@
               </label>
               <span
                 class="
-                  bg-accentLight
+                  bg-accentDark
                   rounded
                   font-semibold
                   text-accentContrast
diff --git a/pages/settings.vue b/pages/settings.vue
index 9a703a481..8f7e9597f 100644
--- a/pages/settings.vue
+++ b/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,34 +281,38 @@
                 {{ $t("proxy_privacy_policy") }} </SmartLink
               >.
             </div>
-            <div class="space-y-4 mt-4">
-              <div class="flex space-x-2 items-center">
+            <div class="space-y-4 py-4">
+              <div class="flex items-center">
                 <SmartToggle
                   :on="PROXY_ENABLED"
                   @change="toggleSetting('PROXY_ENABLED')"
-                />
-                <div class="flex flex-1 items-center relative">
-                  <input
-                    id="url"
-                    v-model="PROXY_URL"
-                    class="input floating-input"
-                    placeholder=" "
-                    type="url"
-                    :disabled="!PROXY_ENABLED"
-                  />
-                  <label for="url">
-                    {{ `${$t("proxy")} ${$t("url")}` }}
-                  </label>
-                </div>
-                <ButtonSecondary
-                  v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('reset_default')"
-                  :icon="clearIcon"
-                  outline
-                  @click.native="resetProxy"
-                />
+                >
+                  {{ $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"
+                  v-model="PROXY_URL"
+                  class="input floating-input"
+                  placeholder=" "
+                  type="url"
+                  :disabled="!PROXY_ENABLED"
+                />
+                <label for="url">
+                  {{ `${$t("proxy")} ${$t("url")}` }}
+                </label>
+              </div>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('reset_default')"
+                :icon="clearIcon"
+                outline
+                @click.native="resetProxy"
+              />
+            </div>
           </section>
         </div>
       </div>