📦 Added toast, Material Icon font

README.md

@@ -23,6 +23,8 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno
 
 **Chat here: _[Telegram](https://t.me/postwoman_app), [Discord](https://discord.gg/GAMWxmR)_**
 
+**Donate here: _[PayPal](https://www.paypal.me/liyascthomas), [Buy me a coffee](https://www.buymeacoffee.com/liyasthomas)_**
+
 <div align="center">
   <br>
   <img src="static/screenshot.gif" alt="postwoman" width="100%">

assets/css/fonts.scss

@@ -1,2 +1,2 @@
 // Poppins (Google Fonts)
-@import url("https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Material+Icons|Poppins:400,600&display=swap");

assets/css/styles.scss

@@ -295,8 +295,8 @@ ol li {
 
 .flex-wrap {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
 .show-on-small-screen {

components/history.vue

@@ -121,6 +121,11 @@
         this.filterText = '';
         this.disableHistoryClearing();
         updateOnLocalStorage('history', this.history);
+        this.$toast.error('History Deleted', {
+          icon: 'delete',
+          position: 'bottom-center',
+          duration: 1000,
+        });
       },
       useHistory(entry) {
         this.$emit('useHistory', entry);
@@ -137,6 +142,11 @@
           this.filterText = '';
         }
         updateOnLocalStorage('history', this.history);
+        this.$toast.error('Deleted', {
+          icon: 'delete',
+          position: 'bottom-center',
+          duration: 1000,
+        });
       },
       addEntry(entry) {
         this.history.push(entry);

layouts/default.vue

@@ -23,25 +23,25 @@
     <nuxt id="main" />
     <footer>
       <!-- Top section of footer: GitHub/install links -->
-      <div>
+      <div class="flex-wrap">
         <a href="https://github.com/liyasthomas/postwoman" target="_blank" rel="noopener">
           <button class="icon">
             <img id="imgGitHub" src="~static/icons/github.svg" alt="GitHub" :style="logoStyle()">
             <span>GitHub</span>
           </button>
         </a>
-        <button class="icon" onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-            <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
-          </svg>
-          <span>Tweet</span>
-        </button>
         <button class="icon" id="installPWA" @click.prevent="showInstallPrompt()">
           <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
             <path d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z"/>
           </svg>
           <span>Install PWA</span>
         </button>
+        <button class="icon" onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+            <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+          </svg>
+          <span>Tweet</span>
+        </button>
       </div>
       <!-- Bottom section of footer: version/author information -->
       <p class="align-center">

nuxt.config.js

@@ -235,7 +235,8 @@ export default {
         })([48, 72, 96, 144, 192, 512])
       }
     }],
-    ['@nuxtjs/axios']
+    ['@nuxtjs/axios'],
+    ['@nuxtjs/toast']
   ],
   /*
    ** Build configuration

package-lock.json

@@ -1596,6 +1596,14 @@
       "resolved": "https://registry.npmjs.org/@nuxtjs/pwa-utils/-/pwa-utils-3.0.0-beta.16.tgz",
       "integrity": "sha512-3sF8iAstLi/dbQ39S4Zdy/QsK5IArgJ2s/nuGxOTVuxz01m07VdMbJejzsdYbyz31mQP0w4IPFNYOCPZhcvVig=="
     },
+    "@nuxtjs/toast": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.2.1.tgz",
+      "integrity": "sha512-unMXSoTrrg6ql4slP41Zasui5UebK6wjSXPyCng4KfSMRnjyuDBODKyundQaMHl9whZYzIi4MZPbKNX376yeIw==",
+      "requires": {
+        "vue-toasted": "^1.1.27"
+      }
+    },
     "@nuxtjs/workbox": {
       "version": "3.0.0-beta.16",
       "resolved": "https://registry.npmjs.org/@nuxtjs/workbox/-/workbox-3.0.0-beta.16.tgz",
@@ -10127,6 +10135,11 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vue-toasted": {
+      "version": "1.1.27",
+      "resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.27.tgz",
+      "integrity": "sha512-GVbwInwnqkVxQ4GU/XYeQt1e0dAXL8sF5Hr1H/coCBbYUan5xP0G2mEz/HRDf1lt73rFQAN/bJcLTOKkqiM6tg=="
+    },
     "vue-virtual-scroll-list": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.2.tgz",

package.json

@@ -16,6 +16,7 @@
     "dependencies": {
         "@nuxtjs/axios": "^5.6.0",
         "@nuxtjs/pwa": "^3.0.0-0",
+        "@nuxtjs/toast": "^3.2.1",
         "highlight.js": "^9.15.10",
         "nuxt": "^2.9.2",
         "vue-virtual-scroll-list": "^1.4.2",

pages/index.vue

@@ -849,6 +849,11 @@
 
           this.response.status = error.message;
           this.response.body = "See JavaScript console (F12) for details.";
+          this.$toast.error('Something went wrong!', {
+            icon: 'delete',
+            position: 'bottom-center',
+            duration: 1000,
+          });
         }
       },
       getQueryStringFromPath() {
@@ -876,6 +881,11 @@
       },
       removeRequestHeader(index) {
         this.headers.splice(index, 1)
+        this.$toast.error('Deleted', {
+          icon: 'delete',
+          position: 'bottom-center',
+          duration: 1000,
+        });
       },
       addRequestParam() {
         this.params.push({
@@ -886,6 +896,11 @@
       },
       removeRequestParam(index) {
         this.params.splice(index, 1)
+        this.$toast.error('Deleted', {
+          icon: 'delete',
+          position: 'bottom-center',
+          duration: 1000,
+        });
       },
       addRequestBodyParam() {
         this.bodyParams.push({
@@ -896,6 +911,11 @@
       },
       removeRequestBodyParam(index) {
         this.bodyParams.splice(index, 1)
+        this.$toast.error('Deleted', {
+          icon: 'delete',
+          position: 'bottom-center',
+          duration: 1000,
+        });
       },
       formatRawParams(event) {
         if ((event.which !== 13 && event.which !== 9)) {
@@ -1052,8 +1072,8 @@
       switchVisibility() {
         this.passwordFieldType = this.passwordFieldType === 'password' ? 'text' : 'password'
       },
-      clearContent(name){
+      clearContent(name) {
-        switch(name){
+        switch(name) {
           case "auth":
             this.auth = 'None';
             this.httpUser = '';
@@ -1076,6 +1096,11 @@
             this.headers = [];
             this.params = [];
         }
+        this.$toast.error('Cleared', {
+          icon: 'delete',
+          position: 'bottom-center',
+          duration: 1000,
+        });
       }
     },
     mounted() {