From 90d347dc89c8a3680db786b797b00afea082ace0 Mon Sep 17 00:00:00 2001
From: Dmitry Yankowski <dmitry@snoculars.com>
Date: Tue, 25 Feb 2020 01:43:55 -0500
Subject: [PATCH] Disable spell check on input fields

---
 pages/graphql.vue  | 481 +++++++++++++++++++++++++--------------------
 pages/index.vue    |   3 +
 pages/realtime.vue |   1 +
 3 files changed, 270 insertions(+), 215 deletions(-)

diff --git a/pages/graphql.vue b/pages/graphql.vue
index 8a339792..a811cc17 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -6,7 +6,13 @@
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
-              <input id="url" type="url" v-model="url" @keyup.enter="getSchema()" />
+              <input
+                id="url"
+                type="url"
+                v-model="url"
+                spellcheck="false"
+                @keyup.enter="getSchema()"
+              />
             </li>
             <div>
               <li>
@@ -26,7 +32,11 @@
               <div class="flex-wrap">
                 <label for="headerList">{{ $t("header_list") }}</label>
                 <div>
-                  <button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
+                  <button
+                    class="icon"
+                    @click="headers = []"
+                    v-tooltip.bottom="$t('clear')"
+                  >
                     <i class="material-icons">clear_all</i>
                   </button>
                 </div>
@@ -51,7 +61,7 @@
                 @input="
                   $store.commit('setGQLHeaderKey', {
                     index,
-                    value: $event,
+                    value: $event
                   })
                 "
                 autofocus
@@ -65,7 +75,7 @@
                 @change="
                   $store.commit('setGQLHeaderValue', {
                     index,
-                    value: $event.target.value,
+                    value: $event.target.value
                   })
                 "
                 autofocus
@@ -103,7 +113,9 @@
                 @click="ToggleExpandResponse"
                 ref="ToggleExpandResponse"
                 v-tooltip="{
-                  content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+                  content: !expandResponse
+                    ? $t('expand_response')
+                    : $t('collapse_response')
                 }"
               >
                 <i class="material-icons">
@@ -138,7 +150,7 @@
               autoScrollEditorIntoView: true,
               readOnly: true,
               showPrintMargin: false,
-              useWorker: false,
+              useWorker: false
             }"
           />
         </pw-section>
@@ -169,7 +181,7 @@
               fontSize: '16px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
-              useWorker: false,
+              useWorker: false
             }"
           />
         </pw-section>
@@ -184,7 +196,7 @@
               fontSize: '16px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
-              useWorker: false,
+              useWorker: false
             }"
           />
         </pw-section>
@@ -213,7 +225,7 @@
               autoScrollEditorIntoView: true,
               readOnly: true,
               showPrintMargin: false,
-              useWorker: false,
+              useWorker: false
             }"
           />
         </pw-section>
@@ -233,7 +245,10 @@
             </label>
             <div v-if="queryFields.length > 0" class="tab">
               <div v-for="field in queryFields" :key="field.name">
-                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                <gql-field
+                  :gqlField="field"
+                  :jumpTypeCallback="handleJumpToType"
+                />
               </div>
             </div>
 
@@ -249,7 +264,10 @@
             </label>
             <div v-if="mutationFields.length > 0" class="tab">
               <div v-for="field in mutationFields" :key="field.name">
-                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                <gql-field
+                  :gqlField="field"
+                  :jumpTypeCallback="handleJumpToType"
+                />
               </div>
             </div>
 
@@ -265,7 +283,10 @@
             </label>
             <div v-if="subscriptionFields.length > 0" class="tab">
               <div v-for="field in subscriptionFields" :key="field.name">
-                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                <gql-field
+                  :gqlField="field"
+                  :jumpTypeCallback="handleJumpToType"
+                />
               </div>
             </div>
 
@@ -280,8 +301,15 @@
               {{ $t("types") }}
             </label>
             <div v-if="gqlTypes.length > 0" class="tab">
-              <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
-                <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
+              <div
+                v-for="type in gqlTypes"
+                :key="type.name"
+                :id="`type_${type.name}`"
+              >
+                <gql-type
+                  :gqlType="type"
+                  :jumpTypeCallback="handleJumpToType"
+                />
               </div>
             </div>
           </section>
@@ -314,17 +342,17 @@
 </style>
 
 <script>
-import axios from "axios"
-import * as gql from "graphql"
-import textareaAutoHeight from "../directives/textareaAutoHeight"
-import { commonHeaders } from "../functions/headers"
-import AceEditor from "../components/ace-editor"
-import QueryEditor from "../components/graphql/queryeditor"
-import { sendNetworkRequest } from "../functions/network"
+import axios from "axios";
+import * as gql from "graphql";
+import textareaAutoHeight from "../directives/textareaAutoHeight";
+import { commonHeaders } from "../functions/headers";
+import AceEditor from "../components/ace-editor";
+import QueryEditor from "../components/graphql/queryeditor";
+import { sendNetworkRequest } from "../functions/network";
 
 export default {
   directives: {
-    textareaAutoHeight,
+    textareaAutoHeight
   },
   components: {
     "pw-section": () => import("../components/section"),
@@ -332,7 +360,7 @@ export default {
     "gql-type": () => import("../components/graphql/type"),
     autocomplete: () => import("../components/autocomplete"),
     Editor: AceEditor,
-    QueryEditor: QueryEditor,
+    QueryEditor: QueryEditor
   },
   data() {
     return {
@@ -352,333 +380,356 @@ export default {
           typeof this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED !==
           "undefined"
             ? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
-            : true,
+            : true
       }
-    }
+    };
   },
 
   computed: {
     url: {
       get() {
-        return this.$store.state.gql.url
+        return this.$store.state.gql.url;
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "url" })
-      },
+        this.$store.commit("setGQLState", { value, attribute: "url" });
+      }
     },
     headers: {
       get() {
-        return this.$store.state.gql.headers
+        return this.$store.state.gql.headers;
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "headers" })
-      },
+        this.$store.commit("setGQLState", { value, attribute: "headers" });
+      }
     },
     gqlQueryString: {
       get() {
-        return this.$store.state.gql.query
+        return this.$store.state.gql.query;
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "query" })
-      },
+        this.$store.commit("setGQLState", { value, attribute: "query" });
+      }
     },
     response: {
       get() {
-        return this.$store.state.gql.response
+        return this.$store.state.gql.response;
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "response" })
-      },
+        this.$store.commit("setGQLState", { value, attribute: "response" });
+      }
     },
     schema: {
       get() {
-        return this.$store.state.gql.schema
+        return this.$store.state.gql.schema;
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "schema" })
-      },
+        this.$store.commit("setGQLState", { value, attribute: "schema" });
+      }
     },
     variableString: {
       get() {
-        return this.$store.state.gql.variablesJSONString
+        return this.$store.state.gql.variablesJSONString;
       },
       set(value) {
         this.$store.commit("setGQLState", {
           value,
-          attribute: "variablesJSONString",
-        })
-      },
+          attribute: "variablesJSONString"
+        });
+      }
     },
     headerString() {
       const result = this.headers
         .filter(({ key }) => !!key)
         .map(({ key, value }) => `${key}: ${value}`)
-        .join(",\n")
-      return result === "" ? "" : `${result}`
-    },
+        .join(",\n");
+      return result === "" ? "" : `${result}`;
+    }
   },
   methods: {
     handleJumpToType(type) {
-      const typesTab = document.getElementById("gqltypes-tab")
-      typesTab.checked = true
+      const typesTab = document.getElementById("gqltypes-tab");
+      typesTab.checked = true;
 
-      const rootTypeName = this.resolveRootType(type).name
+      const rootTypeName = this.resolveRootType(type).name;
 
-      const target = document.getElementById(`type_${rootTypeName}`)
+      const target = document.getElementById(`type_${rootTypeName}`);
       if (target && this.settings.SCROLL_INTO_ENABLED) {
         target.scrollIntoView({
-          behavior: "smooth",
-        })
+          behavior: "smooth"
+        });
       }
     },
     resolveRootType(type) {
-      let t = type
-      while (t.ofType != null) t = t.ofType
-      return t
+      let t = type;
+      while (t.ofType != null) t = t.ofType;
+      return t;
     },
     copySchema() {
-      this.$refs.copySchemaCode.innerHTML = this.doneButton
-      const aux = document.createElement("textarea")
-      aux.innerText = this.schema
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$refs.copySchemaCode.innerHTML = this.doneButton;
+      const aux = document.createElement("textarea");
+      aux.innerText = this.schema;
+      document.body.appendChild(aux);
+      aux.select();
+      document.execCommand("copy");
+      document.body.removeChild(aux);
       this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
-      setTimeout(() => (this.$refs.copySchemaCode.innerHTML = this.copyButton), 1000)
+        icon: "done"
+      });
+      setTimeout(
+        () => (this.$refs.copySchemaCode.innerHTML = this.copyButton),
+        1000
+      );
     },
     copyQuery() {
-      this.$refs.copyQueryButton.innerHTML = this.doneButton
-      const aux = document.createElement("textarea")
-      aux.innerText = this.gqlQueryString
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$refs.copyQueryButton.innerHTML = this.doneButton;
+      const aux = document.createElement("textarea");
+      aux.innerText = this.gqlQueryString;
+      document.body.appendChild(aux);
+      aux.select();
+      document.execCommand("copy");
+      document.body.removeChild(aux);
       this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
-      setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000)
+        icon: "done"
+      });
+      setTimeout(
+        () => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
+        1000
+      );
     },
     copyResponse() {
-      this.$refs.copyResponseButton.innerHTML = this.doneButton
-      const aux = document.createElement("textarea")
-      aux.innerText = this.response
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$refs.copyResponseButton.innerHTML = this.doneButton;
+      const aux = document.createElement("textarea");
+      aux.innerText = this.response;
+      document.body.appendChild(aux);
+      aux.select();
+      document.execCommand("copy");
+      document.body.removeChild(aux);
       this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
-      setTimeout(() => (this.$refs.copyResponseButton.innerHTML = this.copyButton), 1000)
+        icon: "done"
+      });
+      setTimeout(
+        () => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
+        1000
+      );
     },
     async runQuery() {
-      const startTime = Date.now()
-
-      this.$nuxt.$loading.start()
-      this.response = this.$t("loading")
-      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response")
-
-      try {
-        let headers = {}
-        this.headers.forEach(header => {
-          headers[header.key] = header.value
-        })
-
-        let variables = JSON.parse(this.variableString)
-
-        const gqlQueryString = this.gqlQueryString
-
-        const reqOptions = {
-          method: "post",
-          url: this.url,
-          headers: {
-            ...headers,
-            "content-type": "application/json",
-          },
-          data: JSON.stringify({ query: gqlQueryString, variables }),
-        }
-
-        const data = await sendNetworkRequest(reqOptions, this.$store)
-
-        this.response = JSON.stringify(data.data, null, 2)
-
-        this.$nuxt.$loading.finish()
-        const duration = Date.now() - startTime
-        this.$toast.info(this.$t("finished_in", { duration }), {
-          icon: "done",
-        })
-      } catch (error) {
-        this.$nuxt.$loading.finish()
-
-        this.$toast.error(`${error} ${this.$t("f12_details")}`, {
-          icon: "error",
-        })
-        console.log("Error", error)
-      }
-    },
-    async getSchema() {
-      const startTime = Date.now()
-      this.schema = this.$t("loading")
-      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema")
+      const startTime = Date.now();
 
       // Start showing the loading bar as soon as possible.
       // The nuxt axios module will hide it when the request is made.
-      this.$nuxt.$loading.start()
+      this.$nuxt.$loading.start();
+
+      this.response = this.$t("loading");
+      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("response");
 
       try {
-        const query = JSON.stringify({
-          query: gql.getIntrospectionQuery(),
-        })
-
-        let headers = {}
+        let headers = {};
         this.headers.forEach(header => {
-          headers[header.key] = header.value
-        })
+          headers[header.key] = header.value;
+        });
+
+        let variables = JSON.parse(this.variableString);
+
+        const gqlQueryString = this.gqlQueryString;
 
         const reqOptions = {
           method: "post",
           url: this.url,
           headers: {
             ...headers,
-            "content-type": "application/json",
+            "content-type": "application/json"
           },
-          data: query,
-        }
+          data: JSON.stringify({ query: gqlQueryString, variables })
+        };
+
+        const data = await sendNetworkRequest(reqOptions, this.$store);
+
+        this.response = JSON.stringify(data.data, null, 2);
+
+        this.$nuxt.$loading.finish();
+        const duration = Date.now() - startTime;
+        this.$toast.info(this.$t("finished_in", { duration }), {
+          icon: "done"
+        });
+      } catch (error) {
+        this.$nuxt.$loading.finish();
+
+        this.$toast.error(`${error} ${this.$t("f12_details")}`, {
+          icon: "error"
+        });
+        console.log("Error", error);
+      }
+    },
+    async getSchema() {
+      const startTime = Date.now();
+
+      // Start showing the loading bar as soon as possible.
+      // The nuxt axios module will hide it when the request is made.
+      this.$nuxt.$loading.start();
+
+      this.schema = this.$t("loading");
+      this.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema");
+
+      try {
+        const query = JSON.stringify({
+          query: gql.getIntrospectionQuery()
+        });
+
+        let headers = {};
+        this.headers.forEach(header => {
+          headers[header.key] = header.value;
+        });
+
+        const reqOptions = {
+          method: "post",
+          url: this.url,
+          headers: {
+            ...headers,
+            "content-type": "application/json"
+          },
+          data: query
+        };
 
         const reqConfig = this.$store.state.postwoman.settings.PROXY_ENABLED
           ? {
               method: "post",
               url:
-                this.$store.state.postwoman.settings.PROXY_URL || `https://postwoman.apollotv.xyz/`,
-              data: reqOptions,
+                this.$store.state.postwoman.settings.PROXY_URL ||
+                `https://postwoman.apollotv.xyz/`,
+              data: reqOptions
             }
-          : reqOptions
+          : reqOptions;
 
-        const res = await axios(reqConfig)
+        const res = await axios(reqConfig);
 
-        const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res
-        const schema = gql.buildClientSchema(data.data.data)
+        const data = this.$store.state.postwoman.settings.PROXY_ENABLED
+          ? res.data
+          : res;
+        const schema = gql.buildClientSchema(data.data.data);
         this.schema = gql.printSchema(schema, {
-          commentDescriptions: true,
-        })
+          commentDescriptions: true
+        });
 
         if (schema.getQueryType()) {
-          const fields = schema.getQueryType().getFields()
-          const qFields = []
+          const fields = schema.getQueryType().getFields();
+          const qFields = [];
           for (const field in fields) {
-            qFields.push(fields[field])
+            qFields.push(fields[field]);
           }
-          this.queryFields = qFields
+          this.queryFields = qFields;
         }
 
         if (schema.getMutationType()) {
-          const fields = schema.getMutationType().getFields()
-          const mFields = []
+          const fields = schema.getMutationType().getFields();
+          const mFields = [];
           for (const field in fields) {
-            mFields.push(fields[field])
+            mFields.push(fields[field]);
           }
-          this.mutationFields = mFields
+          this.mutationFields = mFields;
         }
 
         if (schema.getSubscriptionType()) {
-          const fields = schema.getSubscriptionType().getFields()
-          const sFields = []
+          const fields = schema.getSubscriptionType().getFields();
+          const sFields = [];
           for (const field in fields) {
-            sFields.push(fields[field])
+            sFields.push(fields[field]);
           }
-          this.subscriptionFields = sFields
+          this.subscriptionFields = sFields;
         }
 
-        const typeMap = schema.getTypeMap()
-        const types = []
+        const typeMap = schema.getTypeMap();
+        const types = [];
 
-        const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : ""
-        const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : ""
+        const queryTypeName = schema.getQueryType()
+          ? schema.getQueryType().name
+          : "";
+        const mutationTypeName = schema.getMutationType()
+          ? schema.getMutationType().name
+          : "";
         const subscriptionTypeName = schema.getSubscriptionType()
           ? schema.getSubscriptionType().name
-          : ""
+          : "";
 
         for (const type in typeMap) {
           if (
             !typeMap[type].name.startsWith("__") &&
-            ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(typeMap[type].name) &&
+            ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
+              typeMap[type].name
+            ) &&
             typeMap[type] instanceof gql.GraphQLObjectType
           ) {
-            types.push(typeMap[type])
+            types.push(typeMap[type]);
           }
         }
-        this.gqlTypes = types
-        this.$refs.queryEditor.setValidationSchema(schema)
-        this.$nuxt.$loading.finish()
-        const duration = Date.now() - startTime
+        this.gqlTypes = types;
+        this.$refs.queryEditor.setValidationSchema(schema);
+        this.$nuxt.$loading.finish();
+        const duration = Date.now() - startTime;
         this.$toast.info(this.$t("finished_in", { duration }), {
-          icon: "done",
-        })
+          icon: "done"
+        });
       } catch (error) {
-        this.$nuxt.$loading.finish()
-        this.schema = `${error}. ${this.$t("check_console_details")}`
+        this.$nuxt.$loading.finish();
+        this.schema = `${error}. ${this.$t("check_console_details")}`;
         this.$toast.error(`${error} ${this.$t("f12_details")}`, {
-          icon: "error",
-        })
-        console.log("Error", error)
+          icon: "error"
+        });
+        console.log("Error", error);
       }
     },
     ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+      this.expandResponse = !this.expandResponse;
+      this.responseBodyMaxLines =
+        this.responseBodyMaxLines == Infinity ? 16 : Infinity;
     },
     downloadResponse() {
-      const dataToWrite = JSON.stringify(this.schema, null, 2)
-      const file = new Blob([dataToWrite], { type: "application/json" })
-      const a = document.createElement("a")
-      const url = URL.createObjectURL(file)
-      a.href = url
-      a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]")
-      document.body.appendChild(a)
-      a.click()
-      this.$refs.downloadResponse.innerHTML = this.doneButton
+      const dataToWrite = JSON.stringify(this.schema, null, 2);
+      const file = new Blob([dataToWrite], { type: "application/json" });
+      const a = document.createElement("a");
+      const url = URL.createObjectURL(file);
+      a.href = url;
+      a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]");
+      document.body.appendChild(a);
+      a.click();
+      this.$refs.downloadResponse.innerHTML = this.doneButton;
       this.$toast.success(this.$t("download_started"), {
-        icon: "done",
-      })
+        icon: "done"
+      });
       setTimeout(() => {
-        document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
-        this.$refs.downloadResponse.innerHTML = this.downloadButton
-      }, 1000)
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+        this.$refs.downloadResponse.innerHTML = this.downloadButton;
+      }, 1000);
     },
     addRequestHeader(index) {
       this.$store.commit("addGQLHeader", {
         key: "",
-        value: "",
-      })
-      return false
+        value: ""
+      });
+      return false;
     },
     removeRequestHeader(index) {
       // .slice() is used so we get a separate array, rather than just a reference
-      const oldHeaders = this.headers.slice()
+      const oldHeaders = this.headers.slice();
 
-      this.$store.commit("removeGQLHeader", index)
+      this.$store.commit("removeGQLHeader", index);
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
         action: {
           text: this.$t("undo"),
           duration: 4000,
           onClick: (e, toastObject) => {
-            this.headers = oldHeaders
-            toastObject.remove()
-          },
-        },
-      })
+            this.headers = oldHeaders;
+            toastObject.remove();
+          }
+        }
+      });
     },
     scrollInto(view) {
       this.$refs[view].$el.scrollIntoView({
-        behavior: "smooth",
-      })
-    },
-  },
-}
+        behavior: "smooth"
+      });
+    }
+  }
+};
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 47ac184d..35249904 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -187,6 +187,7 @@
                 id="url"
                 name="url"
                 type="url"
+                spellcheck="false"
                 v-model="url"
               />
             </li>
@@ -197,6 +198,7 @@
                 id="path"
                 name="path"
                 v-model="path"
+                spellcheck="false"
                 @input="pathInputHandler"
               />
             </li>
@@ -207,6 +209,7 @@
                 name="label"
                 type="text"
                 v-model="label"
+                spellcheck="false"
                 :placeholder="$t('optional')"
               />
             </li>
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 9e97c4d0..2acc9a62 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -11,6 +11,7 @@
               <input
                 id="url"
                 type="url"
+                spellcheck="false"
                 :class="{ error: !urlValid }"
                 v-model="url"
                 @keyup.enter="urlValid ? toggleConnection() : null"