Use modal for showing errors

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>
 
@@ -76,8 +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 "../../shared/templates/error_modal"
     import cfDNS from "../../shared/utils/cfDNS"
     import Footer from "../../shared/templates/footer"
     import Header from "../../shared/templates/header"
@@ -107,6 +111,7 @@ limitations under the License.
             DODNS,
             RecordJumps,
             RecordSelectionModal,
+            ErrorModal,
             Footer,
             Header,
             Landing,
@@ -120,6 +125,7 @@ limitations under the License.
                 siteLoading: false,
                 registrar: "",
                 contentOpacity: 1,
+                errorMessage: "",
                 dnsTop,
                 dnsBottom,
             }
@@ -135,7 +141,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 +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("Invalid domain.")
+                    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("Invalid domain.")
+                    if (json.Status !== 0) return this.error(i18nShared.common.invalidDomain)
 
                     this.$data.firstSearch = false
                     this.$data.siteLoading = true

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}

src/shared/i18n/en/templates/error_modal.ts

@@ -0,0 +1,3 @@
+export default {
+    title: "Uh oh, something went wrong...",
+} as {[key: string]: string}

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}}

src/shared/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>

src/spf-explainer/templates/app.vue

@@ -80,18 +80,22 @@ 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"
     import NoSPFRecords from "./no_spf_records"
     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