Merge branch 'master' into feature/pre-request-script

README.md

@@ -44,12 +44,12 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno
 
 **Methods:**
  - `GET` - Retrieve information about the REST API resource
- - `HEAD` - Asks for a response identical to that of a GET request, but without the response body.
+ - `HEAD` - Retrieve response headers identical to those of a GET request, but without the response body.
  - `POST` - Create a REST API resource
  - `PUT` - Update a REST API resource
  - `DELETE` - Delete a REST API resource or related component
  - `OPTIONS` - Describe the communication options for the target resource
- - `PATCH` - Applies partial modifications to a REST API resource
+ - `PATCH` - Apply partial modifications to a REST API resource
 
 _History entries are synced with local session storage_
 
@@ -118,7 +118,7 @@ _HTML responses have "Preview HTML" feature_
 
 ⏰ **History**: Request entries are synced with local session storage to reuse with a single click.
 
-**Field:s**
+**Fields:**
  - Label
  - Timestamp
  - Method
@@ -140,7 +140,7 @@ _Export, import and replace collections with JSON files_
 
 _Collections are synced with local session storage_
 
-📁 **Proxy**: Enable Proxy Mode from Settings to access blocked APIs
+🌐 **Proxy**: Enable Proxy Mode from Settings to access blocked APIs
 
 **Features:**
  - Hide your IP address
@@ -292,9 +292,9 @@ Support this project with your organization. Your logo will show up here with a
 
 This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.
 
-## Acknowledgments 🙏
+## Acknowledgements 🙏
 
-* Hat tip to anyone who's code was used
+* Hat tip to anyone whose code was used
 * Inspirations:
 	* [Dribbble](https://dribbble.com)
 

components/collections/collection.vue

@@ -61,7 +61,7 @@
 
   ul li {
     display: flex;
-    padding-left: 16px;
+    margin-left: 32px;
     border-left: 1px solid var(--brd-color);
   }
 </style>

components/collections/folder.vue

@@ -46,7 +46,7 @@
 
   ul li {
     display: flex;
-    padding-left: 16px;
+    margin-left: 32px;
     border-left: 1px solid var(--brd-color);
   }
 </style>

layouts/default.vue

@@ -230,6 +230,7 @@
       if (process.client) {
         document.body.classList.add("afterLoad");
       }
+      document.querySelector('meta[name=theme-color]').setAttribute('content', this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#252628");
 
       // Initializes the PWA code - checks if the app is installed,
       // etc.

pages/index.vue

@@ -1421,9 +1421,9 @@ export default {
         "url",
         "path",
         !this.urlExcludes.auth ? "auth" : null,
-        "httpUser",
+        !this.urlExcludes.httpUser ? "httpUser" : null,
-        "httpPassword",
+        !this.urlExcludes.httpPassword ? "httpPassword" : null,
-        "bearerToken",
+        !this.urlExcludes.bearerToken ? "bearerToken" : null,
         "contentType"
       ].filter((item) => item !== null).map(item => flat(item));
       let deeps = ["headers", "params"].map(item => deep(item));
@@ -1571,8 +1571,15 @@ export default {
       this.editRequest = {};
     },
     setExclude (excludedField, excluded) {
+      if (excludedField === "auth") {
+        this.urlExcludes.auth = excluded;
+        this.urlExcludes.httpUser = excluded;
+        this.urlExcludes.httpPassword = excluded;
+        this.urlExcludes.bearerToken = excluded;
+      } else {
         this.urlExcludes[excludedField] = excluded;
-        this.setRouteQueryState();
+      }
+      this.setRouteQueryState();
     },
     methodChange() {
       // this.$store.commit('setState', { 'value': ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '', 'attribute': 'contentType' })
@@ -1585,7 +1592,10 @@ export default {
   created() {
     this.urlExcludes = this.$store.state.postwoman.settings.URL_EXCLUDES || {
         // Exclude authentication by default for security reasons.
-        auth: true
+        auth: true,
+        httpUser: true,
+        httpPassword: true,
+        bearerToken: true
     };
 
     if (Object.keys(this.$route.query).length)

pages/settings.vue

@@ -5,7 +5,7 @@
         <li>
           <h3 class="title">Background</h3>
           <div class="backgrounds">
-            <span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
+            <span :key="theme.class" @click="applyTheme(theme.class, theme.color)" v-for="theme in themes">
               <swatch
                 :active="settings.THEME_CLASS === theme.class"
                 :class="{ vibrant: theme.vibrant }"
@@ -176,6 +176,7 @@
         settings: {
           THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || "",
           THEME_COLOR: "",
+          THEME_TAB_COLOR: "",
           THEME_COLOR_VIBRANT: true,
 
           FRAME_COLORS_ENABLED:
@@ -199,8 +200,10 @@
     },
 
     methods: {
-      applyTheme(name) {
+      applyTheme(name, color) {
         this.applySetting("THEME_CLASS", name);
+        document.querySelector('meta[name=theme-color]').setAttribute('content', color)
+        this.applySetting("THEME_TAB_COLOR", color);
         document.documentElement.className = name;
         let imgGitHub = document.getElementById("imgGitHub");
         imgGitHub.style["filter"] = "";

store/postwoman.js

@@ -12,6 +12,11 @@ export const SETTINGS_KEYS = [
    */
   "THEME_COLOR",
 
+  /**
+   * The hex color code for browser tab color.
+   */
+  "THEME_TAB_COLOR",
+
   /**
    * Whether or not THEME_COLOR is considered 'vibrant'.
    *