Merge remote-tracking branch 'origin/master' into christopherpickering_master

# Conflicts:
#	package-lock.json
#	src/languages/en.js

src/pages/EditMonitor.vue

@@ -30,7 +30,7 @@
                                         Push
                                     </option>
                                     <option value="steam">
-                                        Steam Game Server
+                                        {{ $t("Steam Game Server") }}
                                     </option>
                                     <option value="mqtt">
                                         MQTT
@@ -97,6 +97,15 @@
                                     </div>
                                 </div>
 
+                                <!-- Port -->
+                                <div class="my-3">
+                                    <label for="port" class="form-label">{{ $t("Port") }}</label>
+                                    <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
+                                    <div class="form-text">
+                                        {{ $t("dnsPortDescription") }}
+                                    </div>
+                                </div>
+
                                 <div class="my-3">
                                     <label for="dns_resolve_type" class="form-label">{{ $t("Resource Record Type") }}</label>
 
@@ -484,6 +493,15 @@ export default {
                     this.monitor.pushToken = genSecret(10);
                 }
             }
+
+            // Set default port for DNS if not already defined
+            if (! this.monitor.port || this.monitor.port === "53") {
+                if (this.monitor.type === "dns") {
+                    this.monitor.port = "53";
+                } else {
+                    this.monitor.port = "";
+                }
+            }
         }
 
     },

src/pages/NotFound.vue

@@ -22,16 +22,17 @@
             </div>
 
             <div class="guide">
-                Most likely causes:
+                {{ $t("Most likely causes:") }}
                 <ul>
-                    <li>The resource is no longer available.</li>
-                    <li>There might be a typing error in the address.</li>
+                    <li>{{ $t("The resource is no longer available.") }}</li>
+                    <li>{{ $t("There might be a typing error in the address.") }}</li>
                 </ul>
 
-                What you can try:<br />
+                {{ $t("What you can try:") }}<br />
                 <ul>
-                    <li>Retype the address.</li>
-                    <li><a href="#" class="go-back" @click="goBack()">Go back to the previous page.</a></li>
+                    <li>{{ $t("Retype the address.") }}</li>
+                    <li><a href="#" class="go-back" @click="goBack()">{{ $t("Go back to the previous page.") }}</a></li>
+                    <li><a href="/" class="go-back">Go back to home page.</a></li>
                 </ul>
             </div>
         </div>

src/pages/StatusPage.vue

@@ -45,7 +45,7 @@
                 </div>
 
                 <div v-if="false" class="my-3">
-                    <label for="password" class="form-label">{{ $t("Password") }} <sup>Coming Soon</sup></label>
+                    <label for="password" class="form-label">{{ $t("Password") }} <sup>{{ $t("Coming Soon") }}</sup></label>
                     <input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
                 </div>
 
@@ -98,7 +98,7 @@
             <h1 class="mb-4 title-flex">
                 <!-- Logo -->
                 <span class="logo-wrapper" @click="showImageCropUploadMethod">
-                    <img :src="logoURL" alt class="logo me-2" :class="logoClass" @load="statusPageLogoLoaded" />
+                    <img :src="logoURL" alt class="logo me-2" :class="logoClass" />
                     <font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
                 </span>
 
@@ -538,7 +538,7 @@ export default {
             this.slug = "default";
         }
 
-        axios.get("/api/status-page/" + this.slug).then((res) => {
+        this.getData().then((res) => {
             this.config = res.data.config;
 
             if (!this.config.domainNameList) {
@@ -551,6 +551,11 @@ export default {
 
             this.incident = res.data.incident;
             this.$root.publicGroupList = res.data.publicGroupList;
+        }).catch( function (error) {
+            if (error.response.status === 404) {
+                location.href = "/page-not-found";
+            }
+            console.log(error);
         });
 
         // 5mins a loop
@@ -567,6 +572,21 @@ export default {
     },
     methods: {
 
+        /**
+         * Get status page data
+         * It should be preloaded in window.preloadData
+         * @returns {Promise<any>}
+         */
+        getData: function () {
+            if (window.preloadData) {
+                return new Promise(resolve => resolve({
+                    data: window.preloadData
+                }));
+            } else {
+                return axios.get("/api/status-page/" + this.slug);
+            }
+        },
+
         highlighter(code) {
             return highlight(code, languages.css);
         },
@@ -687,11 +707,6 @@ export default {
             }
         },
 
-        statusPageLogoLoaded(eventPayload) {
-            // Remark: may not work in dev, due to cros
-            favicon.image(eventPayload.target);
-        },
-
         createIncident() {
             this.enableEditIncidentMode = true;