Merge pull request #200 from NBTX/master

Fix CORS and Mixed-Content issue & Bug Fixes

assets/css/fonts.scss

@@ -1,2 +1,52 @@
-// Poppins (Google Fonts)
-@import url('https://fonts.googleapis.com/css?family=Material+Icons|Poppins:500,700|Roboto+Mono:400&display=swap');
+/* Material Design Icons */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(~@/assets/fonts/material-icons-v48.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Roboto Mono 400 */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'),
+  url('~@/assets/fonts/roboto-mono-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+  url('~@/assets/fonts/roboto-mono-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* Poppins 500 */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Poppins Medium'), local('Poppins-Medium'),
+  url('~@/assets/fonts/poppins-v9-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+  url('~@/assets/fonts/poppins-v9-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-700 - latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Poppins Bold'), local('Poppins-Bold'),
+  url('~@/assets/fonts/poppins-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+  url('~@/assets/fonts/poppins-v9-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

assets/css/styles.scss

@@ -1,7 +1,15 @@
 $responsiveWidth: 720px;
 
+// Make theme transition smoother.
+body.afterLoad {
+  &, & * {
+    transition: background-color 0.2s ease-in-out,
+                border 0.2s ease-in-out;
+  }
+}
+
 ::selection {
-  background-color: var(--ac-color);
+  background-color: var(--ac-sel-color);
   color: var(--act-color);
 }
 
@@ -577,3 +585,16 @@ input[type="radio"]:checked + label {
 input[type="radio"]:checked + label + div.tab {
   display: block;
 }
+
+.toasted-container .toasted {
+  justify-content: start !important;
+}
+
+.toasted.info {
+  background-color: var(--ac-color) !important;
+  color: var(--act-color) !important;
+}
+
+.toasted.bubble .action {
+  color: inherit !important;
+}

assets/css/themes.scss

@@ -8,7 +8,7 @@
  */
 
 // Dark is the default theme variant.
-:root {
+@mixin darkTheme {
   // Dark Background color
   --bg-dark-color: rgb(41, 42, 45);
   // Background color
@@ -25,11 +25,21 @@
   --err-color: rgb(41, 42, 45);
   // Acent color
   --ac-color: #50fa7b;
+  --ac-sel-color: rgb(80, 250, 123, 0.8);
   // Active text color
   --act-color: rgb(37, 38, 40);
 }
 
-:root.light {
+:root {
+  @include darkTheme;
+}
+@media(prefers-color-scheme: dark) {
+  :root.auto {
+    @include darkTheme;
+  }
+}
+
+@mixin lightTheme {
   // Dark Background color
   --bg-dark-color: #f6f6f6;
   // Background color
@@ -46,11 +56,21 @@
   --err-color: #f6f6f6;
   // Acent color
   --ac-color: #57b5f9;
+  --ac-sel-color: #57b5f9;
   // Active text color
   --act-color: #ffffff;
 }
 
-:root.black {
+:root.light {
+  @include lightTheme;
+}
+@media(prefers-color-scheme: light) {
+  :root.auto {
+    @include lightTheme;
+  }
+}
+
+@mixin blackTheme {
   // Dark Background color
   --bg-dark-color: rgb(8, 8, 8);
   // Background color
@@ -67,52 +87,10 @@
   --err-color: rgb(8, 8, 8);
   // Acent color
   --ac-color: #50fa7b;
+  --ac-sel-color: rgb(80, 250, 123, 0.8);
   // Active text color
   --act-color: #000000;
 }
-
-@media(prefers-color-scheme: light) {
-  :root.auto {
-    // Dark Background color
-    --bg-dark-color: #f6f6f6;
-    // Background color
-    --bg-color: #ffffff;
-    // Auto-complete color
-    --atc-color: #ebebeb;
-    // Text color
-    --fg-color: #525252;
-    // Light Text color
-    --fg-light-color: rgb(150, 155, 160);
-    // Border color
-    --brd-color: #eeeeed;
-    // Error color
-    --err-color: #f6f6f6;
-    // Acent color
-    --ac-color: #57b5f9;
-    // Active text color
-    --act-color: #ffffff;
-  }
-}
-
-@media(prefers-color-scheme: dark) {
-  :root.auto {
-    // Dark Background color
-    --bg-dark-color: rgb(41, 42, 45);
-    // Background color
-    --bg-color: rgb(37, 38, 40);
-    // Auto-complete color
-    --atc-color: rgb(49, 49, 55);
-    // Text color
-    --fg-color: rgb(247, 248, 248);
-    // Light Text color
-    --fg-light-color: rgb(150, 155, 160);
-    // Border color
-    --brd-color: rgb(48, 47, 55);
-    // Error color
-    --err-color: rgb(41, 42, 45);
-    // Acent color
-    --ac-color: #50fa7b;
-    // Active text color
-    --act-color: rgb(37, 38, 40);
-  }
+:root.black {
+  @include blackTheme;
 }

layouts/default.vue

@@ -9,9 +9,13 @@
           <h3>API request builder</h3>
         </div>
         <nav>
-          <nuxt-link to="/">HTTP</nuxt-link>
-          <nuxt-link to="/websocket">WebSocket</nuxt-link>
-          <nuxt-link v-tooltip="'Settings'" to="/settings" aria-label="Settings">
+          <!--
+           We're using manual checks for linkActive because the query string
+           seems to mess up the nuxt-link active class.
+         -->
+          <nuxt-link to="/" :class="linkActive('/')">HTTP</nuxt-link>
+          <nuxt-link to="/websocket" :class="linkActive('/websocket')">WebSocket</nuxt-link>
+          <nuxt-link to="/settings" :class="linkActive('/settings')" v-tooltip="'Settings'" aria-label="Settings">
             <!-- Settings cog -->
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
               <path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/>
@@ -147,6 +151,15 @@
       logo
     },
 
+    methods: {
+      linkActive (path) {
+        return {
+            'nuxt-link-exact-active': this.$route.path === path,
+            'nuxt-link-active': this.$route.path === path
+        };
+      }
+    },
+
     data() {
       return {
         // Once the PWA code is initialized, this holds a method
@@ -179,6 +192,10 @@
     },
 
     mounted() {
+      if(process.client){
+          document.body.classList.add('afterLoad');
+      }
+
       // Initializes the PWA code - checks if the app is installed,
       // etc.
       (async () => {
@@ -201,6 +218,12 @@
           });
         }
       })();
+    },
+
+    watch: {
+      $route () {
+        this.$toast.clear();
+      }
     }
   }
 

nuxt.config.js

@@ -265,8 +265,9 @@ export default {
   },
   toast: {
     position: 'bottom-center',
-    duration: 2000,
-    theme: 'bubble'
+    duration: 3000,
+    theme: 'bubble',
+    keepOnHover: true
   },
   googleAnalytics: {
     id: process.env.GA_ID || 'UA-61422507-2'

pages/index.vue

@@ -72,8 +72,8 @@
         </li>
         <li>
           <label class="hide-on-small-screen" for="send">&nbsp;</label>
-          <button :disabled="!isValidURL" @click="sendRequest" class="show" id="send" ref="sendButton">
-            Send <span id="hidden-message">Again</span>
+          <button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
+            Send<span id="hidden-message"> Again</span>
             <span><i class="material-icons">send</i></span>
           </button>
         </li>
@@ -491,9 +491,9 @@
             responseText.removeAttribute("class");
             responseText.innerHTML = null;
             responseText.innerText = this.response.body;
-          } else if (responseText && this.response.body != "(waiting to send request)" && this.response.body !=
-            "Loading..." && this.response.body != "See JavaScript console (F12) for details.") {
-            responseText.innerText = this.responseType == 'application/json' || 'application/hal+json' ? JSON.stringify(this.response.body,
+          } else if (responseText && this.response.body !== "(waiting to send request)" && this.response.body !==
+            "Loading..." && this.response.body !== "See JavaScript console (F12) for details.") {
+            responseText.innerText = this.responseType === 'application/json' || this.responseType === 'application/hal+json' ? JSON.stringify(this.response.body,
               null, 2) : this.response.body;
             hljs.highlightBlock(document.querySelector("div#response-details-wrapper pre code"));
           } else {
@@ -600,7 +600,7 @@
         return (this.response.headers['content-type'] || '').split(';')[0].toLowerCase();
       },
       requestCode() {
-        if (this.requestType == 'JavaScript XHR') {
+        if (this.requestType === 'JavaScript XHR') {
           var requestString = []
           requestString.push('const xhr = new XMLHttpRequest()');
           const user = this.auth === 'Basic' ? this.httpUser : null
@@ -659,7 +659,7 @@
           requestString.push('  error.message\n')
           requestString.push(')}')
           return requestString.join('');
-        } else if (this.requestType == 'cURL') {
+        } else if (this.requestType === 'cURL') {
           var requestString = [];
           requestString.push('curl -X ' + this.method + ' \\\n')
           requestString.push("  '" + this.url + this.path + this.queryString + "' \\\n")
@@ -701,28 +701,26 @@
         });
       },
       async makeRequest(auth, headers, requestBody) {
-        const config = this.$store.state.postwoman.settings.PROXY_ENABLED ? {
-            method: 'POST',
-            url: '/proxy',
-            data: {
-              method: this.method,
-              url: this.url + this.pathName + this.queryString,
-              auth,
-              headers,
-              data: requestBody ? requestBody.toString() : null
-            }
-          } : {
+        const requestOptions = {
             method: this.method,
             url: this.url + this.pathName + this.queryString,
             auth,
             headers,
             data: requestBody ? requestBody.toString() : null
-          };
+        };
+
+        const config = this.$store.state.postwoman.settings.PROXY_ENABLED ? {
+            method: 'POST',
+            url: '/proxy',
+            data: requestOptions
+          } : requestOptions;
 
         const response = await this.$axios(config);
         return this.$store.state.postwoman.settings.PROXY_ENABLED ? response.data : response;
       },
       async sendRequest() {
+        this.$toast.clear();
+
         if (!this.isValidURL) {
           this.$toast.error('URL is not formatted properly', {
             icon: 'error'
@@ -845,11 +843,10 @@
               icon: 'error'
             });
             if(!this.$store.state.postwoman.settings.PROXY_ENABLED) {
-              this.$toast.info('Turn on the proxy', {
-                dontClose : true,
+              this.$toast.info('Enable proxy mode?', {
                 action: {
-                  text: 'Go to settings',
-                  onClick : (e, toastObject) => {
+                  text: 'Settings',
+                  onClick: (e, toastObject) => {
                     this.$router.push({ path: '/settings' });
                   }
                 }
@@ -1037,7 +1034,10 @@
         const sendButtonElement = this.$refs.sendButton;
         const observer = new IntersectionObserver((entries, observer) => {
           entries.forEach(entry => {
-            sendButtonElement.classList.toggle('show');
+            if(entry.isIntersecting) sendButtonElement.classList.remove('show');
+            // The button should float when it is no longer visible on screen.
+            // This is done by adding the show class to the button.
+            else sendButtonElement.classList.add('show');
           });
         }, {
           rootMargin: '0px',

proxy/index.js

@@ -8,11 +8,13 @@ app.use(bodyParser.json());
 
 app.use((req, res, next) => {
   res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Headers', '*');
   next();
 });
 
-app.post('/', async function(req, res) {
+app.post('/', async (req, res) => {
   const {method, url, auth, headers, data} = req.body;
+
   try {
     const payload = await axios({
       method,
@@ -20,9 +22,9 @@ app.post('/', async function(req, res) {
       auth,
       headers,
       data
-    })
+    });
 
-    return res.json({
+    return await res.json({
         data: payload.data,
         status: payload.status,
         statusText: payload.statusText,
@@ -32,7 +34,7 @@ app.post('/', async function(req, res) {
   } catch(error) {
     if(error.response) {
       const errorResponse = error.response;
-      return res.json({
+      return await res.json({
         data: errorResponse.data,
         status: errorResponse.status,
         statusText: errorResponse.statusText,