Added label field for requests

pages/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="page">
+      <input :class="{ error: !requestName }" @keyup.enter="requestName ? validRequestName() : null" id="label" name="label" type="label" v-model="label">
     <pw-modal v-if="showModal" @close="showModal = false">
       <div slot="header">
         <ul>
@@ -416,6 +417,7 @@
     },
     data() {
       return {
+        label:'Enter request name',
         showModal: false,
         copyButton: '<i class="material-icons">file_copy</i>',
         copiedButton: '<i class="material-icons">done</i>',
@@ -520,6 +522,9 @@
       }
     },
     computed: {
+      requestName() {
+        return this.label.match(/^([^?]*)\??/)[1]
+      },
       statusCategory() {
         return findStatusGroup(this.response.status);
       },
@@ -686,6 +691,13 @@
           behavior: 'smooth'
         });
       },
+      async validRequestName() {
+        if (!this.requestName) {
+          this.$toast.error('Request Name is not valid', {
+            icon: 'error'
+          });
+          return;
+        }},
       async sendRequest() {
         if (!this.isValidURL) {
           this.$toast.error('URL is not formatted properly', {
@@ -773,6 +785,7 @@
 
             // Addition of an entry to the history component.
             const entry = {
+              label: this.requestName,
               status,
               date,
               time,
@@ -790,6 +803,7 @@
 
             // Addition of an entry to the history component.
             const entry = {
+              label: this.requestName,
               status: this.response.status,
               date: new Date().toLocaleDateString(),
               time: new Date().toLocaleTimeString(),
@@ -1043,6 +1057,7 @@
             this.params = [];
             break;
           default:
+            this.label = '',
             this.method= 'GET',
             this.url = 'https://reqres.in',
             this.auth = 'None',
@@ -1066,6 +1081,7 @@
     created() {
       if (Object.keys(this.$route.query).length) this.setRouteQueries(this.$route.query);
       this.$watch(vm => [
+        vm.label,
         vm.method,
         vm.url,
         vm.auth,