refactor: improved input validations

This commit is contained in:
liyasthomas
2021-08-08 12:01:36 +05:30
parent fee19f3d7a
commit 4d76c83328
18 changed files with 105 additions and 68 deletions

View File

@@ -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

View File

@@ -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 {

View File

@@ -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" />

View File

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

View File

@@ -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()
},

View File

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

View File

@@ -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()
},

View File

@@ -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()
},

View File

@@ -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()
},

View File

@@ -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

View File

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

View File

@@ -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' }"

View File

@@ -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>

View File

@@ -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

View File

@@ -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

View File

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

View File

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

View File

@@ -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="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')"
/>
>
{{ $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>