From 725fa31e7759990350a6422daef50b392af7971a Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Thu, 9 Jan 2020 06:01:31 +0530
Subject: [PATCH] :art: Improved structure and format of the code

---
 README.md            |   9 ++--
 components/modal.vue |   7 ++-
 layouts/default.vue  |  25 +++++++---
 pages/index.vue      | 113 +++++++++++++++++++++++++++----------------
 4 files changed, 101 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index a125da8db..c27261def 100644
--- a/README.md
+++ b/README.md
@@ -89,8 +89,7 @@ _Customized themes are synced with local session storage_
 🔌 **WebSocket**: Establish full-duplex communication channels over a single TCP connection.
 
  - Send and receive data
- - Basic authentication using username and password
- - Token based authentication
+ - Basic and Bearer Token authentication
 
 📡 **Server Sent Events**: Receive a stream of updates from a server over a HTTP connection without resorting to polling.
 
@@ -106,8 +105,10 @@ _Customized themes are synced with local session storage_
 
 **Types:**
  - None
- - Basic authentication using username and password
- - Token based authentication
+ - Basic
+ - Bearer Token
+ - OAuth 2.0
+ - OIDC Access Token/PKCE (Proof Key for Code Exchange)
 
 📢 **Headers**: Describes the format the body of your request is being sent as.
 
diff --git a/components/modal.vue b/components/modal.vue
index 24a79dd23..c80b24be9 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -44,12 +44,17 @@
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  margin: 8px;
+  margin: 16px;
   padding: 16px;
   transition: all 0.2s ease;
   background-color: var(--bg-color);
   border-radius: 16px;
   box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5);
+  max-height: calc(100vh - 32px);
+}
+
+.modal-body {
+  overflow: auto;
 }
 
 /*
diff --git a/layouts/default.vue b/layouts/default.vue
index 62bee0068..7587f416b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -418,27 +418,22 @@
         </ul>
       </div>
       <div slot="body">
-        <br />
         <div>
           <label>{{ $t("send_request") }}</label>
           <kbd>⌘ G</kbd>
         </div>
-        <br />
         <div>
           <label>{{ $t("save_to_collections") }}</label>
           <kbd>⌘ S</kbd>
         </div>
-        <br />
         <div>
           <label>{{ $t("copy_request_link") }}</label>
           <kbd>⌘ K</kbd>
         </div>
-        <br />
         <div>
           <label>{{ $t("reset_request") }}</label>
           <kbd>⌘ L</kbd>
         </div>
-        <br />
       </div>
       <div slot="footer"></div>
     </modal>
@@ -458,11 +453,19 @@
         </ul>
       </div>
       <div slot="body">
+        <p class="info">
+          If you have enjoyed the productivity of using Postwoman, consider
+          donating as a sign of appreciation.
+        </p>
+        <p class="info">
+          You can support Postwoman development via the following methods:
+        </p>
         <div>
           <a
             href="https://opencollective.com/postwoman"
             target="_blank"
             rel="noopener"
+            v-tooltip.right="'One-time or recurring'"
           >
             <button class="icon">
               <i class="material-icons">donut_large</i>
@@ -475,6 +478,7 @@
             href="https://www.paypal.me/liyascthomas"
             target="_blank"
             rel="noopener"
+            v-tooltip.right="'One-time'"
           >
             <button class="icon">
               <i class="material-icons">payment</i>
@@ -487,6 +491,7 @@
             href="https://www.patreon.com/liyasthomas"
             target="_blank"
             rel="noopener"
+            v-tooltip.right="'Recurring'"
           >
             <button class="icon">
               <i class="material-icons">local_parking</i>
@@ -607,8 +612,14 @@ export default {
       });
     });
 
-    console.log("%cWe ❤︎ open source!", "background-color:white;padding:8px 16px;border-radius:8px;font-size:32px;color:red;")
-    console.log("%cContribute: https://github.com/liyasthomas/postwoman", "background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;")
+    console.log(
+      "%cWe ❤︎ open source!",
+      "background-color:white;padding:8px 16px;border-radius:8px;font-size:32px;color:red;"
+    );
+    console.log(
+      "%cContribute: https://github.com/liyasthomas/postwoman",
+      "background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;"
+    );
   },
 
   watch: {
diff --git a/pages/index.vue b/pages/index.vue
index c2af4dd4b..422b6ade5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -394,7 +394,7 @@
                       name="bearer_token"
                       v-model="bearerToken"
                     />
-                    <button 
+                    <button
                       v-if="auth === 'OAuth 2.0'"
                       class="icon"
                       @click="showTokenList = !showTokenList"
@@ -458,7 +458,7 @@
                   </div>
                   <input
                     id="token-name"
-                    placeholder="Enter a token name..."
+                    placeholder="(optional)"
                     name="token_name"
                     v-model="accessTokenName"
                     type="text"
@@ -467,9 +467,13 @@
               </ul>
               <ul>
                 <li>
-                  <label for="oidc-discovery-url">{{ $t("oidc_discovery_url") }}</label>
+                  <label for="oidc-discovery-url">
+                    {{ $t("oidc_discovery_url") }}
+                  </label>
                   <input
-                    :disabled="this.authUrl !== '' || this.accessTokenUrl !== ''"
+                    :disabled="
+                      this.authUrl !== '' || this.accessTokenUrl !== ''
+                    "
                     id="oidc-discovery-url"
                     name="oidc_discovery_url"
                     type="url"
@@ -493,7 +497,9 @@
               </ul>
               <ul>
                 <li>
-                  <label for="access-token-url">{{ $t("access_token_url") }}</label>
+                  <label for="access-token-url">
+                    {{ $t("access_token_url") }}
+                  </label>
                   <input
                     :disabled="this.oidcDiscoveryUrl !== ''"
                     id="access-token-url"
@@ -808,9 +814,11 @@
                   <i class="material-icons">
                     {{ !previewEnabled ? "visibility" : "visibility_off" }}
                   </i>
-                  <span>{{
-                    previewEnabled ? $t("hide_preview") : $t("preview_html")
-                  }}</span>
+                  <span>
+                    {{
+                      previewEnabled ? $t("hide_preview") : $t("preview_html")
+                    }}
+                  </span>
                 </button>
               </div>
             </li>
@@ -959,7 +967,7 @@
             <li>
               <div class="flex-wrap">
                 <label for="token-list">{{ $t("token_list") }}</label>
-                <div>
+                <div v-if="tokens.length != 0">
                   <button
                     class="icon"
                     @click="clearContent('tokens', $event)"
@@ -985,7 +993,7 @@
               />
             </li>
             <li>
-              <input :value="token.value" readonly>
+              <input :value="token.value" readonly />
             </li>
             <div class="flex-wrap">
               <li>
@@ -1008,11 +1016,17 @@
               </li>
             </div>
           </ul>
+          <p v-if="tokens.length === 0" class="info">
+            Empty
+          </p>
         </div>
         <div slot="footer"></div>
       </pw-modal>
 
-      <pw-modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
+      <pw-modal
+        v-if="showTokenRequestList"
+        @close="showTokenRequestList = false"
+      >
         <div slot="header">
           <ul>
             <li>
@@ -1041,27 +1055,30 @@
                   >
                     <i class="material-icons">input</i>
                   </button>
-                  <button 
-                    :disabled="this.tokenReqs.length === 0" 
-                    class="icon" 
+                  <button
+                    :disabled="this.tokenReqs.length === 0"
+                    class="icon"
                     @click="removeOAuthTokenReq"
+                    v-tooltip.bottom="'Delete'"
                   >
                     <i class="material-icons">delete</i>
                   </button>
                 </div>
               </div>
               <span class="select-wrapper">
-                <select 
-                  id="token-req-list" 
+                <select
+                  id="token-req-list"
                   v-model="tokenReqSelect"
                   :disabled="this.tokenReqs.length === 0"
-                  @change="tokenReqChange($event)">
-                  <option 
-                    v-for="(req, index) in tokenReqs" 
-                    :key="index" 
-                    :value="req.name">
+                  @change="tokenReqChange($event)"
+                >
+                  <option
+                    v-for="(req, index) in tokenReqs"
+                    :key="index"
+                    :value="req.name"
+                  >
                     {{ req.name }}
-                    </option>
+                  </option>
                 </select>
               </span>
             </li>
@@ -1069,12 +1086,14 @@
           <ul>
             <li>
               <label for="token-req-name">{{ $t("token_req_name") }}</label>
-              <input v-model="tokenReqName">
-            </li>            
+              <input v-model="tokenReqName" />
+            </li>
           </ul>
           <ul>
             <li>
-              <label for="token-req-details">{{ $t("token_req_details") }}</label>
+              <label for="token-req-details">
+                {{ $t("token_req_details") }}
+              </label>
               <textarea
                 id="token-req-details"
                 readonly
@@ -1095,7 +1114,6 @@
           </div>
         </div>
       </pw-modal>
-
     </div>
   </div>
 </template>
@@ -1540,7 +1558,10 @@ export default {
         return this.$store.state.oauth2.accessTokenName;
       },
       set(value) {
-        this.$store.commit("setOAuth2", { value, attribute: "accessTokenName" });
+        this.$store.commit("setOAuth2", {
+          value,
+          attribute: "accessTokenName"
+        });
       }
     },
     oidcDiscoveryUrl: {
@@ -1548,7 +1569,10 @@ export default {
         return this.$store.state.oauth2.oidcDiscoveryUrl;
       },
       set(value) {
-        this.$store.commit("setOAuth2", { value, attribute: "oidcDiscoveryUrl" });
+        this.$store.commit("setOAuth2", {
+          value,
+          attribute: "oidcDiscoveryUrl"
+        });
       }
     },
     authUrl: {
@@ -2572,7 +2596,10 @@ export default {
       }
     },
     async handleAccessTokenRequest() {
-      if (this.oidcDiscoveryUrl === "" && (this.authUrl === "" || this.accessTokenUrl === "")) {
+      if (
+        this.oidcDiscoveryUrl === "" &&
+        (this.authUrl === "" || this.accessTokenUrl === "")
+      ) {
         this.$toast.error("Please complete configuration urls.", {
           icon: "error"
         });
@@ -2596,15 +2623,15 @@ export default {
     },
     async oauthRedirectReq() {
       let tokenInfo = await oauthRedirect();
-      if(tokenInfo.hasOwnProperty('access_token')) {
+      if (tokenInfo.hasOwnProperty("access_token")) {
         this.bearerToken = tokenInfo.access_token;
-        this.addOAuthToken({ 
-          name: this.accessTokenName, 
-          value: tokenInfo.access_token 
+        this.addOAuthToken({
+          name: this.accessTokenName,
+          value: tokenInfo.access_token
         });
       }
     },
-    addOAuthToken({name, value}) {
+    addOAuthToken({ name, value }) {
       this.$store.commit("addOAuthToken", {
         name,
         value
@@ -2647,7 +2674,9 @@ export default {
     },
     removeOAuthTokenReq(index) {
       const oldTokenReqs = this.tokenReqs.slice();
-      let targetReqIndex = this.tokenReqs.findIndex(tokenReq => tokenReq.name === this.tokenReqName);
+      let targetReqIndex = this.tokenReqs.findIndex(
+        tokenReq => tokenReq.name === this.tokenReqName
+      );
       if (targetReqIndex < 0) return;
       this.$store.commit("removeOAuthTokenReq", targetReqIndex);
       this.$toast.error("Deleted", {
@@ -2662,12 +2691,14 @@ export default {
       });
     },
     tokenReqChange(event) {
-      let targetReq = this.tokenReqs.find(tokenReq => tokenReq.name === event.target.value);
-      let { 
-        oidcDiscoveryUrl, 
-        authUrl, 
-        accessTokenUrl, 
-        clientId, 
+      let targetReq = this.tokenReqs.find(
+        tokenReq => tokenReq.name === event.target.value
+      );
+      let {
+        oidcDiscoveryUrl,
+        authUrl,
+        accessTokenUrl,
+        clientId,
         scope
       } = targetReq.details;
       this.tokenReqName = targetReq.name;