btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Added regex to handle url parts

Browse Source
This commit is contained in:
Jacob Anavisca
2020-02-25 01:35:15 -05:00
parent 09d98cff7d
commit 77ea9dfac9
1 changed files with 172 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
pages/index.vue
View File

@@ -42,143 +42,145 @@
<pw-section class="blue" :label="$t('request')" ref="request"> <pw-section class="blue" :label="$t('request')" ref="request">
<ul> <ul>
<li> <div>
<label for="method">{{ $t("method") }}</label> <li>
<span class="select-wrapper"> <label for="method">{{ $t("method") }}</label>
<v-popover> <span class="select-wrapper">
<input <v-popover>
id="method" <input
class="method" id="method"
v-if="!customMethod" class="method"
v-model="method" v-if="!customMethod"
readonly v-model="method"
/> readonly
<input v-else v-model="method" placeholder="CUSTOM" /> />
<template slot="popover"> <input v-else v-model="method" placeholder="CUSTOM" />
<div> <template slot="popover">
<button <div>
class="icon" <button
@click=" class="icon"
customMethod = false; @click="
method = 'GET'; customMethod = false;
" method = 'GET';
v-close-popover "
> v-close-popover
GET >
</button> GET
</div> </button>
<div> </div>
<button <div>
class="icon" <button
@click=" class="icon"
customMethod = false; @click="
method = 'HEAD'; customMethod = false;
" method = 'HEAD';
v-close-popover "
> v-close-popover
HEAD >
</button> HEAD
</div> </button>
<div> </div>
<button <div>
class="icon" <button
@click=" class="icon"
customMethod = false; @click="
method = 'POST'; customMethod = false;
" method = 'POST';
v-close-popover "
> v-close-popover
POST >
</button> POST
</div> </button>
<div> </div>
<button <div>
class="icon" <button
@click=" class="icon"
customMethod = false; @click="
method = 'PUT'; customMethod = false;
" method = 'PUT';
v-close-popover "
> v-close-popover
PUT >
</button> PUT
</div> </button>
<div> </div>
<button <div>
class="icon" <button
@click=" class="icon"
customMethod = false; @click="
method = 'DELETE'; customMethod = false;
" method = 'DELETE';
v-close-popover "
> v-close-popover
DELETE >
</button> DELETE
</div> </button>
<div> </div>
<button <div>
class="icon" <button
@click=" class="icon"
customMethod = false; @click="
method = 'CONNECT'; customMethod = false;
" method = 'CONNECT';
v-close-popover "
> v-close-popover
CONNECT >
</button> CONNECT
</div> </button>
<div> </div>
<button <div>
class="icon" <button
@click=" class="icon"
customMethod = false; @click="
method = 'OPTIONS'; customMethod = false;
" method = 'OPTIONS';
v-close-popover "
> v-close-popover
OPTIONS >
</button> OPTIONS
</div> </button>
<div> </div>
<button <div>
class="icon" <button
@click=" class="icon"
customMethod = false; @click="
method = 'TRACE'; customMethod = false;
" method = 'TRACE';
v-close-popover "
> v-close-popover
TRACE >
</button> TRACE
</div> </button>
<div> </div>
<button <div>
class="icon" <button
@click=" class="icon"
customMethod = false; @click="
method = 'PATCH'; customMethod = false;
" method = 'PATCH';
v-close-popover "
> v-close-popover
PATCH >
</button> PATCH
</div> </button>
<div> </div>
<button <div>
class="icon" <button
@click=" class="icon"
customMethod = true; @click="
method = 'CUSTOM'; customMethod = true;
" method = 'CUSTOM';
v-close-popover "
> v-close-popover
CUSTOM >
</button> CUSTOM
</div> </button>
</template> </div>
</v-popover> </template>
</span> </v-popover>
</li> </span>
</li>
</div>
<li> <li>
<label for="url">{{ $t("url") }}</label> <label for="url">{{ $t("url") }}</label>
<input <input
@@ -187,19 +189,27 @@
id="url" id="url"
name="url" name="url"
type="url" type="url"
v-model="url" v-model="uri"
/>
</li>
<li>
<label for="path">{{ $t("path") }}</label>
<input
@keyup.enter="isValidURL ? sendRequest() : null"
id="path"
name="path"
v-model="path"
@input="pathInputHandler"
/> />
</li> </li>
<div>
<li>
<label class="hide-on-small-screen" for="send">&nbsp;</label>
<button
:disabled="!isValidURL"
@click="sendRequest"
id="send"
ref="sendButton"
>
{{ $t("send") }}
<span>
<i class="material-icons">send</i>
</span>
</button>
</li>
</div>
</ul>
<ul>
<li> <li>
<label for="label">{{ $t("label") }}</label> <label for="label">{{ $t("label") }}</label>
<input <input
@@ -210,20 +220,6 @@
:placeholder="$t('optional')" :placeholder="$t('optional')"
/> />
</li> </li>
<li>
<label class="hide-on-small-screen" for="send">&nbsp;</label>
<button
:disabled="!isValidURL"
@click="sendRequest"
id="send"
ref="sendButton"
>
{{ $t("send") }}
<span>
<i class="material-icons">send</i>
</span>
</button>
</li>
</ul> </ul>
<div <div
class="blue" class="blue"
@@ -1617,6 +1613,20 @@ export default {
} }
}, },
computed: { computed: {
uri: {
get() {
return this.url + this.path;
},
set(value) {
let uriRegex = value.match(
/^((http[s]?:\/\/)?(<<[^\/]+>>)?[^\/]*|)(\/?.*)$/
);
let url = uriRegex[1];
let path = uriRegex[4];
this.url = url;
this.path = path;
}
},
url: { url: {
get() { get() {
return this.$store.state.request.url; return this.$store.state.request.url;