Added support for headers

assets/css/styles.scss

@@ -172,6 +172,14 @@ fieldset.purple legend {
   color: #C198FB;
 }
 
+fieldset.orange {
+  border-color: #FF9800;
+}
+
+fieldset.orange legend {
+  color: #FF9800;
+}
+
 .collapsible.hidden {
   display: none;
 }

pages/index.vue

@@ -34,6 +34,7 @@
           <label>Content Type</label>
           <select v-model="contentType">
             <option>application/json</option>
+            <option>application/graphql</option>
             <option>www-form/urlencoded</option>
           </select>
           <span>
@@ -103,7 +104,36 @@
       </ul>
     </pw-section>
 
-    <pw-section class="cyan" label="Parameters" collapsed>
+    <pw-section class="cyan" label="Headers" collapsed>
+      <ol v-for="(header, index) in headers">
+        <li>
+          <label :for="'header'+index">Key {{index + 1}}</label>
+          <input :name="'header'+index" v-model="header.key">
+        </li>
+        <li>
+          <label :for="'value'+index">Value {{index + 1}}</label>
+          <input :name="'value'+index" v-model="header.value">
+        </li>
+        <li>
+          <label for="header">&nbsp;</label>
+          <button name="header" @click="removeRequestHeader(index)">Remove</button>
+        </li>
+      </ol>
+      <ul>
+        <li>
+          <label for="add">Action</label>
+          <button name="add" @click="addRequestHeader">Add</button>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <label for="request">Header List</label>
+          <textarea name="request" rows="1" readonly>{{headerString || '(add at least one header)'}}</textarea>
+        </li>
+      </ul>
+    </pw-section>
+
+    <pw-section class="purple" label="Parameters" collapsed>
       <ol v-for="(param, index) in params">
         <li>
           <label :for="'param'+index">Key {{index + 1}}</label>
@@ -132,7 +162,7 @@
       </ul>
     </pw-section>
 
-    <pw-section class="purple" label="Response" id="response" ref="response">
+    <pw-section class="orange" label="Response" id="response" ref="response">
       <ul>
         <li>
           <label for="status">status</label>
@@ -235,6 +265,7 @@
               httpUser: '',
               httpPassword: '',
               bearerToken: '',
+              headers: [],
               params: [],
               bodyParams: [],
               rawParams: '',
@@ -287,6 +318,17 @@
                             }) => `${key}=${encodeURIComponent(value)}`).join('&')
               }
           },
+          headerString() {
+              const result = this.headers
+                  .filter(({
+                               key
+                           }) => !!key)
+                  .map(({
+                            key,
+                            value
+                        }) => `${key}: ${value}`).join(',\n')
+              return result == '' ? '' : `${result}`
+          },
           queryString() {
               const result = this.params
                   .filter(({
@@ -339,6 +381,11 @@
               if (this.auth === 'Bearer Token') {
                   xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
               }
+              if (this.headers) {
+                  this.headers.forEach(function (element) {
+                      xhr.setRequestHeader(element.key, element.value)
+                  })
+              }
               if (this.method === 'POST' || this.method === 'PUT') {
                   const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
                   xhr.setRequestHeader('Content-Length', requestBody.length)
@@ -375,6 +422,16 @@
                   this.response.body = xhr.statusText
               }
           },
+          addRequestHeader() {
+              this.headers.push({
+                  key: '',
+                  value: ''
+              })
+              return false
+          },
+          removeRequestHeader(index) {
+              this.headers.splice(index, 1)
+          },
           addRequestParam() {
               this.params.push({
                   key: '',