From 77ea9dfac9f165956c9e700b7143142b7faa0946 Mon Sep 17 00:00:00 2001
From: Jacob Anavisca <jacobanavisca@gmail.com>
Date: Tue, 25 Feb 2020 01:35:15 -0500
Subject: [PATCH] Added regex to handle url parts

---
 pages/index.vue | 334 +++++++++++++++++++++++++-----------------------
 1 file changed, 172 insertions(+), 162 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 15a9461d2..53c75e54b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -42,143 +42,145 @@
 
         <pw-section class="blue" :label="$t('request')" ref="request">
           <ul>
-            <li>
-              <label for="method">{{ $t("method") }}</label>
-              <span class="select-wrapper">
-                <v-popover>
-                  <input
-                    id="method"
-                    class="method"
-                    v-if="!customMethod"
-                    v-model="method"
-                    readonly
-                  />
-                  <input v-else v-model="method" placeholder="CUSTOM" />
-                  <template slot="popover">
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false;
-                          method = 'GET';
-                        "
-                        v-close-popover
-                      >
-                        GET
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false;
-                          method = 'HEAD';
-                        "
-                        v-close-popover
-                      >
-                        HEAD
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false;
-                          method = 'POST';
-                        "
-                        v-close-popover
-                      >
-                        POST
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false;
-                          method = 'PUT';
-                        "
-                        v-close-popover
-                      >
-                        PUT
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false;
-                          method = 'DELETE';
-                        "
-                        v-close-popover
-                      >
-                        DELETE
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false;
-                          method = 'CONNECT';
-                        "
-                        v-close-popover
-                      >
-                        CONNECT
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false;
-                          method = 'OPTIONS';
-                        "
-                        v-close-popover
-                      >
-                        OPTIONS
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false;
-                          method = 'TRACE';
-                        "
-                        v-close-popover
-                      >
-                        TRACE
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = false;
-                          method = 'PATCH';
-                        "
-                        v-close-popover
-                      >
-                        PATCH
-                      </button>
-                    </div>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="
-                          customMethod = true;
-                          method = 'CUSTOM';
-                        "
-                        v-close-popover
-                      >
-                        CUSTOM
-                      </button>
-                    </div>
-                  </template>
-                </v-popover>
-              </span>
-            </li>
+            <div>
+              <li>
+                <label for="method">{{ $t("method") }}</label>
+                <span class="select-wrapper">
+                  <v-popover>
+                    <input
+                      id="method"
+                      class="method"
+                      v-if="!customMethod"
+                      v-model="method"
+                      readonly
+                    />
+                    <input v-else v-model="method" placeholder="CUSTOM" />
+                    <template slot="popover">
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false;
+                            method = 'GET';
+                          "
+                          v-close-popover
+                        >
+                          GET
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false;
+                            method = 'HEAD';
+                          "
+                          v-close-popover
+                        >
+                          HEAD
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false;
+                            method = 'POST';
+                          "
+                          v-close-popover
+                        >
+                          POST
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false;
+                            method = 'PUT';
+                          "
+                          v-close-popover
+                        >
+                          PUT
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false;
+                            method = 'DELETE';
+                          "
+                          v-close-popover
+                        >
+                          DELETE
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false;
+                            method = 'CONNECT';
+                          "
+                          v-close-popover
+                        >
+                          CONNECT
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false;
+                            method = 'OPTIONS';
+                          "
+                          v-close-popover
+                        >
+                          OPTIONS
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false;
+                            method = 'TRACE';
+                          "
+                          v-close-popover
+                        >
+                          TRACE
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = false;
+                            method = 'PATCH';
+                          "
+                          v-close-popover
+                        >
+                          PATCH
+                        </button>
+                      </div>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="
+                            customMethod = true;
+                            method = 'CUSTOM';
+                          "
+                          v-close-popover
+                        >
+                          CUSTOM
+                        </button>
+                      </div>
+                    </template>
+                  </v-popover>
+                </span>
+              </li>
+            </div>
             <li>
               <label for="url">{{ $t("url") }}</label>
               <input
@@ -187,19 +189,27 @@
                 id="url"
                 name="url"
                 type="url"
-                v-model="url"
-              />
-            </li>
-            <li>
-              <label for="path">{{ $t("path") }}</label>
-              <input
-                @keyup.enter="isValidURL ? sendRequest() : null"
-                id="path"
-                name="path"
-                v-model="path"
-                @input="pathInputHandler"
+                v-model="uri"
               />
             </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>
               <label for="label">{{ $t("label") }}</label>
               <input
@@ -210,20 +220,6 @@
                 :placeholder="$t('optional')"
               />
             </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>
           <div
             class="blue"
@@ -1617,6 +1613,20 @@ export default {
     }
   },
   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: {
       get() {
         return this.$store.state.request.url;