From 931ca6a3ef05483d28cf137212afc14e1eac44a9 Mon Sep 17 00:00:00 2001
From: Patrick Hafner <patrick.hafner@allgeier-it.de>
Date: Tue, 21 Dec 2021 03:27:05 +0100
Subject: [PATCH 1/7] Add: customize status page (css and poweredby)

---
 src/pages/StatusPage.vue | 36 +++++++++++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 0dc49518e..213a9fbd6 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -88,6 +88,11 @@
                         {{ $t("Show Tags") }}
                     </template>
                 </button>
+
+                <button class="btn btn-primary me-2" @click="customizeStatusPage">
+                    <font-awesome-icon icon="cog" />
+                    {{ $t("Customize") }}
+                </button>
             </div>
         </div>
 
@@ -144,6 +149,15 @@
             </div>
         </div>
 
+        <!-- Customize -->
+        <div v-if="editMode && enableEditCustomizeMode" class="mb-4 p-4 alert shadow-box customize" role="alert">
+            <strong v-if="enableEditCustomizeMode">{{ $t("Custom CSS") }}:</strong>
+            <Editable v-model="config.customCSS" tag="div" :contenteditable="enableEditCustomizeMode" class="content p-2" />
+            <br />
+            <strong v-if="enableEditCustomizeMode">{{ $t("Custom Footer") }}:</strong>
+            <Editable v-model="config.poweredBy" tag="h4" :contenteditable="enableEditCustomizeMode" :noNL="true" class="alert-heading p-2" />
+        </div>
+
         <!-- Overall Status -->
         <div class="shadow-box list  p-4 overall-status mb-4">
             <div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
@@ -208,9 +222,14 @@
         </div>
 
         <footer class="mt-5 mb-4">
-            {{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
+            <p v-if="config.poweredBy">{{ config.poweredBy }}</p>
+            <p v-else>{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a></p>
         </footer>
     </div>
+
+    <component is="style" v-if="config.customCSS" type="text/css">
+        {{ config.customCSS }}
+    </component>
 </template>
 
 <script>
@@ -249,6 +268,7 @@ export default {
         return {
             enableEditMode: false,
             enableEditIncidentMode: false,
+            enableEditCustomizeMode: false,
             hasToken: false,
             config: {},
             selectedMonitor: null,
@@ -304,7 +324,7 @@ export default {
         },
 
         tagsVisible() {
-            return this.config.statusPageTags
+            return this.config.statusPageTags;
         },
 
         logoClass() {
@@ -501,9 +521,9 @@ export default {
                         return {
                             ...monitor,
                             tags: newState ? this.$root.monitorList[monitor.id].tags : []
-                        }
+                        };
                     })
-                }
+                };
             });
         },
 
@@ -580,6 +600,12 @@ export default {
             return dayjs.utc(date).fromNow();
         },
 
+        /** customize status page */
+        customizeStatusPage() {
+            // toggle modal
+            this.enableEditCustomizeMode = !this.enableEditCustomizeMode;
+        },
+
     }
 };
 </script>
@@ -659,7 +685,7 @@ footer {
     }
 }
 
-.incident {
+.incident, .customize {
     .content {
         &[contenteditable=true] {
             min-height: 60px;

From 2c2a824f97f012146548a2fb7cf479b2288b78cd Mon Sep 17 00:00:00 2001
From: Patrick Hafner <patrick.hafner@allgeier-it.de>
Date: Tue, 21 Dec 2021 03:31:09 +0100
Subject: [PATCH 2/7] Add: en & de-DE language

---
 src/languages/de-DE.js | 5 ++++-
 src/languages/en.js    | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/languages/de-DE.js b/src/languages/de-DE.js
index 6c2dd1f19..1b500267d 100644
--- a/src/languages/de-DE.js
+++ b/src/languages/de-DE.js
@@ -348,5 +348,8 @@ export default {
     serwersmsAPIPassword: "API Passwort",
     serwersmsPhoneNumber: "Telefonnummer",
     serwersmsSenderName: "Name des SMS-Absenders (über Kundenportal registriert)",
-    "stackfield": "Stackfield",
+    stackfield: "Stackfield",
+    Customize: "Anpassen",
+    "Custom Footer": "Eigener Footer (Leerlassen für Standard)",
+    "Custom CSS": "Eigenes CSS",
 };
diff --git a/src/languages/en.js b/src/languages/en.js
index fee80a760..97a88f50c 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -351,5 +351,8 @@ export default {
     serwersmsAPIPassword: "API Password",
     serwersmsPhoneNumber: "Phone number",
     serwersmsSenderName: "SMS Sender Name (registered via customer portal)",
-    "stackfield": "Stackfield",
+    stackfield: "Stackfield",
+    Customize: "Customize",
+    "Custom Footer": "Custom Footer (empty string for default)",
+    "Custom CSS": "Custom CSS",
 };

From 3a12e209da1207fb16b4012ec8ff01a7f08f5c0b Mon Sep 17 00:00:00 2001
From: Patrick Hafner <patrick.hafner@allgeier-it.de>
Date: Tue, 21 Dec 2021 03:55:25 +0100
Subject: [PATCH 3/7] Edit: editMode check before toggle

---
 src/pages/StatusPage.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 213a9fbd6..2d264054f 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -602,8 +602,10 @@ export default {
 
         /** customize status page */
         customizeStatusPage() {
-            // toggle modal
-            this.enableEditCustomizeMode = !this.enableEditCustomizeMode;
+            if (this.editMode) {
+                // toggle modal
+                this.enableEditCustomizeMode = !this.enableEditCustomizeMode;
+            }
         },
 
     }

From 9ee591417da3fb5e7ad402be97677b2f79385605 Mon Sep 17 00:00:00 2001
From: Patrick Hafner <patrick.hafner@allgeier-it.de>
Date: Sat, 25 Dec 2021 04:09:41 +0100
Subject: [PATCH 4/7] Footer HTML support, updated german translation

---
 src/languages/de-DE.js   | 2 +-
 src/pages/StatusPage.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/languages/de-DE.js b/src/languages/de-DE.js
index 1b500267d..585d00639 100644
--- a/src/languages/de-DE.js
+++ b/src/languages/de-DE.js
@@ -335,7 +335,7 @@ export default {
     "Hide Tags": "Tags ausblenden",
     Description: "Beschreibung",
     "No monitors available.": "Keine Monitore verfügbar.",
-    "Add one": "Füge eins hinzu",
+    "Add one": "Hinzufügen",
     "No Monitors": "Keine Monitore",
     "Untitled Group": "Gruppe ohne Titel",
     Services: "Dienste",
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 2d264054f..d1835e21c 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -222,7 +222,7 @@
         </div>
 
         <footer class="mt-5 mb-4">
-            <p v-if="config.poweredBy">{{ config.poweredBy }}</p>
+            <p v-if="config.poweredBy" v-html="config.poweredBy"></p>
             <p v-else>{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a></p>
         </footer>
     </div>

From 81de2eedfb596031ba4a74feb9db629f7b8c4e04 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Tue, 12 Apr 2022 20:23:11 +0800
Subject: [PATCH 5/7] Fix template can contain one tag only, disable
 vue/require-component-is eslint rule

---
 .eslintrc.js             | 1 +
 src/pages/StatusPage.vue | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b0934d6d8..67a80d245 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -39,6 +39,7 @@ module.exports = {
         "vue/max-attributes-per-line": "off",
         "vue/singleline-html-element-content-newline": "off",
         "vue/html-self-closing": "off",
+        "vue/require-component-is": "off",      // not allow is="style" https://github.com/vuejs/eslint-plugin-vue/issues/462#issuecomment-430234675
         "vue/attribute-hyphenation": "off",     // This change noNL to "no-n-l" unexpectedly
         "no-multi-spaces": ["error", {
             ignoreEOLComments: true,
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index b1b2e9802..381162546 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -261,11 +261,11 @@
         <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteStatusPage">
             {{ $t("deleteStatusPageMsg") }}
         </Confirm>
-    </div>
 
-    <component is="style" v-if="config.customCSS" type="text/css">
-        {{ config.customCSS }}
-    </component>
+        <component is="style" v-if="config.customCSS" type="text/css">
+            {{ config.customCSS }}
+        </component>
+    </div>
 </template>
 
 <script>

From 8eb83394f74d661c51f235776255c94e17ab315f Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sun, 17 Apr 2022 14:53:13 +0800
Subject: [PATCH 6/7] Refine UI/UX for custom css / footer text. Add switch for
 show/hide powered by

---
 db/patch-status-page-footer-css.sql           |  6 ++
 package.json                                  |  2 +
 server/database.js                            |  1 +
 server/model/status_page.js                   |  6 ++
 .../status-page-socket-handler.js             |  3 +
 src/assets/app.scss                           |  4 +
 src/languages/de-DE.js                        |  2 +-
 src/languages/en.js                           |  2 +-
 src/pages/StatusPage.vue                      | 89 +++++++++++++------
 9 files changed, 87 insertions(+), 28 deletions(-)
 create mode 100644 db/patch-status-page-footer-css.sql

diff --git a/db/patch-status-page-footer-css.sql b/db/patch-status-page-footer-css.sql
new file mode 100644
index 000000000..413918f11
--- /dev/null
+++ b/db/patch-status-page-footer-css.sql
@@ -0,0 +1,6 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+ALTER TABLE status_page ADD footer_text TEXT;
+ALTER TABLE status_page ADD custom_css TEXT;
+ALTER TABLE status_page ADD show_powered_by BOOLEAN NOT NULL DEFAULT 1;
+COMMIT;
diff --git a/package.json b/package.json
index 730359221..305d79b81 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
         "password-hash": "~1.2.2",
         "postcss-rtlcss": "~3.4.1",
         "postcss-scss": "~4.0.3",
+        "prismjs": "^1.27.0",
         "prom-client": "~13.2.0",
         "prometheus-api-metrics": "~3.2.1",
         "qrcode": "~1.5.0",
@@ -110,6 +111,7 @@
         "vue-i18n": "~9.1.9",
         "vue-image-crop-upload": "~3.0.3",
         "vue-multiselect": "~3.0.0-alpha.2",
+        "vue-prism-editor": "^2.0.0-alpha.2",
         "vue-qrcode": "~1.0.0",
         "vue-router": "~4.0.14",
         "vue-toastification": "~2.0.0-rc.5",
diff --git a/server/database.js b/server/database.js
index b398101e0..330c24369 100644
--- a/server/database.js
+++ b/server/database.js
@@ -56,6 +56,7 @@ class Database {
         "patch-status-page.sql": true,
         "patch-proxy.sql": true,
         "patch-monitor-expiry-notification.sql": true,
+        "patch-status-page-footer-css.sql": true,
     }
 
     /**
diff --git a/server/model/status_page.js b/server/model/status_page.js
index 1383d3b00..b1befc258 100644
--- a/server/model/status_page.js
+++ b/server/model/status_page.js
@@ -92,6 +92,9 @@ class StatusPage extends BeanModel {
             published: !!this.published,
             showTags: !!this.show_tags,
             domainNameList: this.getDomainNameList(),
+            customCSS: this.custom_css,
+            footerText: this.footer_text,
+            showPoweredBy: !!this.show_powered_by,
         };
     }
 
@@ -104,6 +107,9 @@ class StatusPage extends BeanModel {
             theme: this.theme,
             published: !!this.published,
             showTags: !!this.show_tags,
+            customCSS: this.custom_css,
+            footerText: this.footer_text,
+            showPoweredBy: !!this.show_powered_by,
         };
     }
 
diff --git a/server/socket-handlers/status-page-socket-handler.js b/server/socket-handlers/status-page-socket-handler.js
index 36e90fb93..a06271da5 100644
--- a/server/socket-handlers/status-page-socket-handler.js
+++ b/server/socket-handlers/status-page-socket-handler.js
@@ -155,6 +155,9 @@ module.exports.statusPageSocketHandler = (socket) => {
             //statusPage.search_engine_index = ;
             statusPage.show_tags = config.showTags;
             //statusPage.password = null;
+            statusPage.footer_text = config.footerText;
+            statusPage.custom_css = config.customCSS;
+            statusPage.show_powered_by = config.showPoweredBy;
             statusPage.modified_date = R.isoDateTime();
 
             await R.store(statusPage);
diff --git a/src/assets/app.scss b/src/assets/app.scss
index 0b27c6a6e..c3f2fa798 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -469,6 +469,10 @@ textarea.form-control {
     color: $primary;
 }
 
+.prism-editor__textarea {
+    outline: none !important;
+}
+
 // Localization
 
 @import "localization.scss";
diff --git a/src/languages/de-DE.js b/src/languages/de-DE.js
index 63531dfaf..1dd86e23a 100644
--- a/src/languages/de-DE.js
+++ b/src/languages/de-DE.js
@@ -443,6 +443,6 @@ export default {
     "Fingerprint:": "Fingerabdruck:",
     "No status pages": "Keine Status-Seiten",
     Customize: "Anpassen",
-    "Custom Footer": "Eigener Footer (Leerlassen für Standard)",
+    "Custom Footer": "Eigener Footer",
     "Custom CSS": "Eigenes CSS",
 };
diff --git a/src/languages/en.js b/src/languages/en.js
index 957a13560..1061f426c 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -355,7 +355,7 @@ export default {
     serwersmsSenderName: "SMS Sender Name (registered via customer portal)",
     stackfield: "Stackfield",
     Customize: "Customize",
-    "Custom Footer": "Custom Footer (empty string for default)",
+    "Custom Footer": "Custom Footer",
     "Custom CSS": "Custom CSS",
     smtpDkimSettings: "DKIM Settings",
     smtpDkimDesc: "Please refer to the Nodemailer DKIM {0} for usage.",
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 1b842c3d5..da0bafb5e 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -16,11 +16,18 @@
                     <input id="title" v-model="config.title" type="text" class="form-control">
                 </div>
 
+                <!-- Description -->
                 <div class="my-3">
                     <label for="description" class="form-label">{{ $t("Description") }}</label>
                     <textarea id="description" v-model="config.description" class="form-control"></textarea>
                 </div>
 
+                <!-- Footer Text -->
+                <div class="my-3">
+                    <label for="footer-text" class="form-label">{{ $t("Footer Text") }}</label>
+                    <textarea id="footer-text" v-model="config.footerText" class="form-control"></textarea>
+                </div>
+
                 <div class="my-3 form-check form-switch">
                     <input id="switch-theme" v-model="config.theme" class="form-check-input" type="checkbox" true-value="dark" false-value="light">
                     <label class="form-check-label" for="switch-theme">{{ $t("Switch to Dark Theme") }}</label>
@@ -31,6 +38,12 @@
                     <label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
                 </div>
 
+                <!-- Show Powered By -->
+                <div class="my-3 form-check form-switch">
+                    <input id="show-powered-by" v-model="config.showPoweredBy" class="form-check-input" type="checkbox">
+                    <label class="form-check-label" for="show-powered-by">{{ $t("Show Powered By") }}</label>
+                </div>
+
                 <div v-if="false" class="my-3">
                     <label for="password" class="form-label">{{ $t("Password") }} <sup>Coming Soon</sup></label>
                     <input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
@@ -51,6 +64,12 @@
                     </ul>
                 </div>
 
+                <!-- Custom CSS -->
+                <div class="my-3">
+                    <div class="mb-1">{{ $t("Custom CSS") }}</div>
+                    <prism-editor v-model="config.customCSS" class="css-editor" :highlight="highlighter" line-numbers></prism-editor>
+                </div>
+
                 <div class="danger-zone">
                     <button class="btn btn-danger me-2" @click="deleteDialog">
                         <font-awesome-icon icon="trash" />
@@ -119,11 +138,6 @@
                         <font-awesome-icon icon="bullhorn" />
                         {{ $t("Create Incident") }}
                     </button>
-
-                    <button class="btn btn-primary me-2" @click="customizeStatusPage">
-                        <font-awesome-icon icon="cog" />
-                        {{ $t("Customize") }}
-                    </button>
                 </div>
             </div>
 
@@ -180,15 +194,6 @@
                 </div>
             </div>
 
-            <!-- Customize -->
-            <div v-if="editMode && enableEditCustomizeMode" class="mb-4 p-4 alert shadow-box customize" role="alert">
-                <strong v-if="enableEditCustomizeMode">{{ $t("Custom CSS") }}:</strong>
-                <Editable v-model="config.customCSS" tag="div" :contenteditable="enableEditCustomizeMode" class="content p-2" />
-                <br />
-                <strong v-if="enableEditCustomizeMode">{{ $t("Custom Footer") }}:</strong>
-                <Editable v-model="config.poweredBy" tag="h4" :contenteditable="enableEditCustomizeMode" :noNL="true" class="alert-heading p-2" />
-            </div>
-
             <!-- Overall Status -->
             <div class="shadow-box list  p-4 overall-status mb-4">
                 <div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
@@ -253,8 +258,14 @@
             </div>
 
             <footer class="mt-5 mb-4">
-                <p v-if="config.poweredBy" v-html="config.poweredBy"></p>
-                <p v-else>{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a></p>
+                <div class="custom-footer-text text-start">
+                    <strong v-if="enableEditMode">{{ $t("Custom Footer") }}:</strong>
+                </div>
+                <Editable v-model="config.footerText" tag="div" :contenteditable="enableEditMode" :noNL="false" class="alert-heading p-2" />
+
+                <p v-if="config.showPoweredBy">
+                    {{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
+                </p>
             </footer>
         </div>
 
@@ -278,6 +289,14 @@ import dayjs from "dayjs";
 import Favico from "favico.js";
 import { getResBaseURL } from "../util-frontend";
 import Confirm from "../components/Confirm.vue";
+// import Prism Editor
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
+
+// import highlighting library (you can use any library you want just return html string)
+import { highlight, languages } from "prismjs/components/prism-core";
+import "prismjs/components/prism-css";
+import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
 
 const toast = useToast();
 
@@ -296,6 +315,7 @@ export default {
         PublicGroupList,
         ImageCropUpload,
         Confirm,
+        PrismEditor,
     },
 
     // Leave Page for vue route change
@@ -324,7 +344,6 @@ export default {
             slug: null,
             enableEditMode: false,
             enableEditIncidentMode: false,
-            enableEditCustomizeMode: false,
             hasToken: false,
             config: {},
             selectedMonitor: null,
@@ -439,6 +458,13 @@ export default {
                 this.$root.getSocket().emit("getStatusPage", this.slug, (res) => {
                     if (res.ok) {
                         this.config = res.config;
+
+                        if (!this.config.customCSS) {
+                            this.config.customCSS = "body {\n" +
+                                "  \n" +
+                                "}\n";
+                        }
+
                     } else {
                         toast.error(res.msg);
                     }
@@ -541,6 +567,10 @@ export default {
     },
     methods: {
 
+        highlighter(code) {
+            return highlight(code, languages.css);
+        },
+
         updateHeartbeatList() {
             // If editMode, it will use the data from websocket.
             if (! this.editMode) {
@@ -726,14 +756,6 @@ export default {
             this.config.domainNameList.splice(index, 1);
         },
 
-        /** customize status page */
-        customizeStatusPage() {
-            if (this.editMode) {
-                // toggle modal
-                this.enableEditCustomizeMode = !this.enableEditCustomizeMode;
-            }
-        },
-
     }
 };
 </script>
@@ -863,7 +885,7 @@ footer {
     }
 }
 
-.incident, .customize {
+.incident {
     .content {
         &[contenteditable="true"] {
             min-height: 60px;
@@ -922,4 +944,19 @@ footer {
     }
 }
 
+/* required class */
+.css-editor {
+    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
+
+    border-radius: 1rem;
+    padding: 10px 5px;
+    border: 1px solid #ced4da;
+
+    .dark & {
+        background: $dark-bg;
+        border: 1px solid $dark-border-color;
+    }
+
+}
+
 </style>

From 572f2b983827b7f49cb5a3e5db68dbee5d6d0877 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sun, 17 Apr 2022 14:57:31 +0800
Subject: [PATCH 7/7] eslint

---
 src/pages/StatusPage.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index da0bafb5e..4b94289cd 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -956,7 +956,6 @@ footer {
         background: $dark-bg;
         border: 1px solid $dark-border-color;
     }
-
 }
 
 </style>