From c316860570f39a15f55632fa2a33f57830a8b6d8 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Wed, 6 Nov 2019 11:57:59 +0000
Subject: [PATCH 1/2] Add error modal to DNS tool

---
 src/dns-lookup/i18n/en/templates/app.ts       |  1 +
 .../i18n/en/templates/error_modal.ts          |  3 ++
 src/dns-lookup/i18n/en/templates/index.ts     |  3 +-
 src/dns-lookup/templates/app.vue              | 12 +++--
 src/dns-lookup/templates/error_modal.vue      | 46 +++++++++++++++++++
 5 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 src/dns-lookup/i18n/en/templates/error_modal.ts
 create mode 100644 src/dns-lookup/templates/error_modal.vue

diff --git a/src/dns-lookup/i18n/en/templates/app.ts b/src/dns-lookup/i18n/en/templates/app.ts
index c5b7f66a..8f94702b 100644
--- a/src/dns-lookup/i18n/en/templates/app.ts
+++ b/src/dns-lookup/i18n/en/templates/app.ts
@@ -4,4 +4,5 @@ export default {
     searchButton: "Search DNS Records",
     textRecords: "Download/Copy Records",
     domain: "Domain name",
+    invalidDomain: "The domain you entered isn't valid.",
 } as {[key: string]: string}
diff --git a/src/dns-lookup/i18n/en/templates/error_modal.ts b/src/dns-lookup/i18n/en/templates/error_modal.ts
new file mode 100644
index 00000000..52e4a0b4
--- /dev/null
+++ b/src/dns-lookup/i18n/en/templates/error_modal.ts
@@ -0,0 +1,3 @@
+export default {
+    title: "Uh oh, something went wrong...",
+} as {[key: string]: string}
diff --git a/src/dns-lookup/i18n/en/templates/index.ts b/src/dns-lookup/i18n/en/templates/index.ts
index 064f96d1..a4ef5788 100644
--- a/src/dns-lookup/i18n/en/templates/index.ts
+++ b/src/dns-lookup/i18n/en/templates/index.ts
@@ -9,9 +9,10 @@ import recordSelectionModal from "./record_selection_modal"
 import dnsDiff from "./dns_diff"
 import clipboardModal from "./clipboard_modal"
 import dmarcExplainer from "./dmarc_explainer"
+import errorModal from "./error_modal"
 
 export default {
     app, dodns, mxBlacklist, records, truncatedRecord,
     whois, propagationModal, recordSelectionModal,
-    dnsDiff, clipboardModal, dmarcExplainer,
+    dnsDiff, clipboardModal, dmarcExplainer, errorModal,
 } as {[key: string]: {[key: string]: any}}
diff --git a/src/dns-lookup/templates/app.vue b/src/dns-lookup/templates/app.vue
index a2050b47..410db614 100644
--- a/src/dns-lookup/templates/app.vue
+++ b/src/dns-lookup/templates/app.vue
@@ -67,6 +67,8 @@ limitations under the License.
 
             <Footer></Footer>
         </div>
+
+        <ErrorModal ref="ErrorModal" :message="errorMessage"></ErrorModal>
     </div>
 </template>
 
@@ -78,6 +80,7 @@ limitations under the License.
     import i18n from "../i18n"
     import { reports } from "../plain_text_reports"
     import RecordSelectionModal from "./record_selection_modal"
+    import ErrorModal from "./error_modal"
     import cfDNS from "../../shared/utils/cfDNS"
     import Footer from "../../shared/templates/footer"
     import Header from "../../shared/templates/header"
@@ -107,6 +110,7 @@ limitations under the License.
             DODNS,
             RecordJumps,
             RecordSelectionModal,
+            ErrorModal,
             Footer,
             Header,
             Landing,
@@ -120,6 +124,7 @@ limitations under the License.
                 siteLoading: false,
                 registrar: "",
                 contentOpacity: 1,
+                errorMessage: "",
                 dnsTop,
                 dnsBottom,
             }
@@ -135,7 +140,8 @@ limitations under the License.
                 return domainQuery || ""
             },
             error(message) {
-                alert(message)
+                this.$data.errorMessage = `<p>${message}</p>`
+                this.$refs.ErrorModal.open()
                 this.$data.contentOpacity = 1
             },
             async searchWait() {
@@ -164,13 +170,13 @@ limitations under the License.
 
                     const regexpExec = stripHttps.exec(domainInput.value.toLowerCase())
                     const text = regexpExec[2] ? regexpExec[2].replace(/\//g, "") : ""
-                    if (!text.match(isHostname)) return this.error("Invalid domain.")
+                    if (!text.match(isHostname)) return this.error(i18n.templates.app.invalidDomain)
 
                     if (this.$data.data === text) this.$data.data = ""
 
                     const domainLookup = await cfDNS(text, "NULL")
                     const json = await domainLookup.json()
-                    if (json.Status !== 0) return this.error("Invalid domain.")
+                    if (json.Status !== 0) return this.error(i18n.templates.app.invalidDomain)
 
                     this.$data.firstSearch = false
                     this.$data.siteLoading = true
diff --git a/src/dns-lookup/templates/error_modal.vue b/src/dns-lookup/templates/error_modal.vue
new file mode 100644
index 00000000..b2395362
--- /dev/null
+++ b/src/dns-lookup/templates/error_modal.vue
@@ -0,0 +1,46 @@
+<!--
+Copyright 2019 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<template>
+    <Modal ref="Modal" :title="i18n.templates.errorModal.title">
+        <div v-html="$props.message"></div>
+    </Modal>
+</template>
+
+<script>
+    import i18n from "../i18n"
+    import Modal from "do-vue/src/templates/modal"
+
+    export default {
+        name: "ErrorModal",
+        components: {
+            Modal,
+        },
+        props: {
+            message: String,
+        },
+        data() {
+            return {
+                i18n,
+            }
+        },
+        methods: {
+            open() {
+                this.$refs.Modal.open()
+            },
+        },
+    }
+</script>

From 7ca2f267cccbc9c93c3be9176606fa608aaa909e Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Wed, 6 Nov 2019 12:04:39 +0000
Subject: [PATCH 2/2] Use shared error modal in SPF

---
 src/dns-lookup/i18n/en/templates/app.ts           |  1 -
 src/dns-lookup/i18n/en/templates/index.ts         |  3 +--
 src/dns-lookup/templates/app.vue                  |  7 ++++---
 src/shared/i18n/en/common.ts                      |  1 +
 .../i18n/en/templates/error_modal.ts              |  0
 src/shared/i18n/en/templates/index.ts             |  3 ++-
 .../templates/error_modal.vue                     |  0
 src/spf-explainer/templates/app.vue               | 15 +++++++++++----
 8 files changed, 19 insertions(+), 11 deletions(-)
 rename src/{dns-lookup => shared}/i18n/en/templates/error_modal.ts (100%)
 rename src/{dns-lookup => shared}/templates/error_modal.vue (100%)

diff --git a/src/dns-lookup/i18n/en/templates/app.ts b/src/dns-lookup/i18n/en/templates/app.ts
index 8f94702b..c5b7f66a 100644
--- a/src/dns-lookup/i18n/en/templates/app.ts
+++ b/src/dns-lookup/i18n/en/templates/app.ts
@@ -4,5 +4,4 @@ export default {
     searchButton: "Search DNS Records",
     textRecords: "Download/Copy Records",
     domain: "Domain name",
-    invalidDomain: "The domain you entered isn't valid.",
 } as {[key: string]: string}
diff --git a/src/dns-lookup/i18n/en/templates/index.ts b/src/dns-lookup/i18n/en/templates/index.ts
index a4ef5788..064f96d1 100644
--- a/src/dns-lookup/i18n/en/templates/index.ts
+++ b/src/dns-lookup/i18n/en/templates/index.ts
@@ -9,10 +9,9 @@ import recordSelectionModal from "./record_selection_modal"
 import dnsDiff from "./dns_diff"
 import clipboardModal from "./clipboard_modal"
 import dmarcExplainer from "./dmarc_explainer"
-import errorModal from "./error_modal"
 
 export default {
     app, dodns, mxBlacklist, records, truncatedRecord,
     whois, propagationModal, recordSelectionModal,
-    dnsDiff, clipboardModal, dmarcExplainer, errorModal,
+    dnsDiff, clipboardModal, dmarcExplainer,
 } as {[key: string]: {[key: string]: any}}
diff --git a/src/dns-lookup/templates/app.vue b/src/dns-lookup/templates/app.vue
index 410db614..b5f7a887 100644
--- a/src/dns-lookup/templates/app.vue
+++ b/src/dns-lookup/templates/app.vue
@@ -78,9 +78,10 @@ limitations under the License.
     import RecordBase from "./record_base"
     import RecordJumps from "./record_jumps"
     import i18n from "../i18n"
+    import i18nShared from "../../shared/i18n"
     import { reports } from "../plain_text_reports"
     import RecordSelectionModal from "./record_selection_modal"
-    import ErrorModal from "./error_modal"
+    import ErrorModal from "../../shared/templates/error_modal"
     import cfDNS from "../../shared/utils/cfDNS"
     import Footer from "../../shared/templates/footer"
     import Header from "../../shared/templates/header"
@@ -170,13 +171,13 @@ limitations under the License.
 
                     const regexpExec = stripHttps.exec(domainInput.value.toLowerCase())
                     const text = regexpExec[2] ? regexpExec[2].replace(/\//g, "") : ""
-                    if (!text.match(isHostname)) return this.error(i18n.templates.app.invalidDomain)
+                    if (!text.match(isHostname)) return this.error(i18nShared.common.invalidDomain)
 
                     if (this.$data.data === text) this.$data.data = ""
 
                     const domainLookup = await cfDNS(text, "NULL")
                     const json = await domainLookup.json()
-                    if (json.Status !== 0) return this.error(i18n.templates.app.invalidDomain)
+                    if (json.Status !== 0) return this.error(i18nShared.common.invalidDomain)
 
                     this.$data.firstSearch = false
                     this.$data.siteLoading = true
diff --git a/src/shared/i18n/en/common.ts b/src/shared/i18n/en/common.ts
index fce62803..cc5c1418 100644
--- a/src/shared/i18n/en/common.ts
+++ b/src/shared/i18n/en/common.ts
@@ -2,4 +2,5 @@ export default {
     close: "close",
     searchButton: "Search",
     searchPlaceholder: "Enter a domain to get started",
+    invalidDomain: "The domain you entered isn't valid.",
 } as {[key: string]: string}
diff --git a/src/dns-lookup/i18n/en/templates/error_modal.ts b/src/shared/i18n/en/templates/error_modal.ts
similarity index 100%
rename from src/dns-lookup/i18n/en/templates/error_modal.ts
rename to src/shared/i18n/en/templates/error_modal.ts
diff --git a/src/shared/i18n/en/templates/index.ts b/src/shared/i18n/en/templates/index.ts
index e20ae0f6..17815fed 100644
--- a/src/shared/i18n/en/templates/index.ts
+++ b/src/shared/i18n/en/templates/index.ts
@@ -1,3 +1,4 @@
 import footer from "./footer"
+import errorModal from "./error_modal"
 
-export default { footer } as {[key: string]: {[key: string]: string}}
+export default { footer, errorModal } as {[key: string]: {[key: string]: string}}
diff --git a/src/dns-lookup/templates/error_modal.vue b/src/shared/templates/error_modal.vue
similarity index 100%
rename from src/dns-lookup/templates/error_modal.vue
rename to src/shared/templates/error_modal.vue
diff --git a/src/spf-explainer/templates/app.vue b/src/spf-explainer/templates/app.vue
index 86e561ad..93dee555 100644
--- a/src/spf-explainer/templates/app.vue
+++ b/src/spf-explainer/templates/app.vue
@@ -80,11 +80,14 @@ limitations under the License.
         <div v-if="!firstSearch">
             <Footer></Footer>
         </div>
+
+        <ErrorModal ref="ErrorModal" :message="errorMessage"></ErrorModal>
     </div>
 </template>
 
 <script>
     import i18n from "../i18n"
+    import i18nShared from "../../shared/i18n"
     import cfDNS from "../../shared/utils/cfDNS"
     import SPFBase from "./spf_base"
     import { spawnLine } from "../utils/line_spawn"
@@ -92,6 +95,7 @@ limitations under the License.
     import SPFSandbox from "../utils/spf_sandbox"
     import EvalNotif from "./eval_notif"
     import AllPartExplanations from "./all_part_explanations"
+    import ErrorModal from "../../shared/templates/error_modal"
     import Footer from "../../shared/templates/footer"
     import Header from "../../shared/templates/header"
     import Landing from "../../shared/templates/landing"
@@ -111,6 +115,7 @@ limitations under the License.
             NoSPFRecords,
             EvalNotif,
             AllPartExplanations,
+            ErrorModal,
             Footer,
             Header,
             Landing,
@@ -125,6 +130,7 @@ limitations under the License.
                 loading: false,
                 records: [],
                 ipEval: "",
+                errorMessage: "",
                 spfTop,
                 spfBottom,
             }
@@ -147,21 +153,22 @@ limitations under the License.
                 this.$refs.EvalNotif.open()
             },
             error(message) {
-                alert(message)
+                this.$data.errorMessage = `<p>${message}</p>`
+                this.$refs.ErrorModal.open()
             },
             async cfPart(domain) {
                 const res = await cfDNS(domain, "TXT")
-                if (!res.ok) return this.error("Invalid domain.")
+                if (!res.ok) return this.error(i18nShared.common.invalidDomain)
                 let json
                 try {
                     json = await res.json()
                 } catch(_) {
                     // Sometimes Cloudflare's DNS sends invalid JSON in the event that it is invalid.
                     // That has happened here.
-                    return this.error("Invalid domain.")
+                    return this.error(i18nShared.common.invalidDomain)
                 }
 
-                if (json.Status !== 0) return this.error("Invalid domain.")
+                if (json.Status !== 0) return this.error(i18nShared.common.invalidDomain)
                 if (!json.Answer) {
                     this.$refs.NoSPFRecords.toggle()
                     return false