Merge branch 'master' into notification_component

src/assets/app.scss

@@ -144,7 +144,9 @@ h2 {
     }
 
     .shadow-box {
-        background-color: $dark-bg;
+        &:not(.alert) {
+            background-color: $dark-bg;
+        }
     }
 
     .form-check-input {
@@ -255,6 +257,18 @@ h2 {
         background-color: $dark-bg;
     }
 
+    .monitor-list {
+        .item {
+            &:hover {
+                background-color: $dark-bg2;
+            }
+
+            &.active {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+
     @media (max-width: 550px) {
         .table-shadow-box {
             tbody {
@@ -268,6 +282,16 @@ h2 {
             }
         }
     }
+
+    .alert {
+        &.bg-info,
+        &.bg-warning,
+        &.bg-danger,
+        &.bg-light {
+            color: $dark-font-color2;
+        }
+    }
+
 }
 
 /*
@@ -288,3 +312,119 @@ h2 {
     transform: translateY(50px);
     opacity: 0;
 }
+
+.slide-fade-right-enter-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-right-leave-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-right-enter-from,
+.slide-fade-right-leave-to {
+    transform: translateX(50px);
+    opacity: 0;
+}
+
+.monitor-list {
+    &.scrollbar {
+        min-height: calc(100vh - 240px);
+        max-height: calc(100vh - 30px);
+        overflow-y: auto;
+        position: sticky;
+        top: 10px;
+    }
+
+    .item {
+        display: block;
+        text-decoration: none;
+        padding: 13px 15px 10px 15px;
+        border-radius: 10px;
+        transition: all ease-in-out 0.15s;
+
+        &.disabled {
+            opacity: 0.3;
+        }
+
+        .info {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &:hover {
+            background-color: $highlight-white;
+        }
+
+        &.active {
+            background-color: #cdf8f4;
+        }
+    }
+}
+
+.alert-success {
+    color: #122f21;
+    background-color: $primary;
+    border-color: $primary;
+}
+
+.alert-info {
+    color: #055160;
+    background-color: #cff4fc;
+    border-color: #cff4fc;
+}
+
+.alert-danger {
+    color: #842029;
+    background-color: #f8d7da;
+    border-color: #f8d7da;
+}
+
+.btn-success {
+    color: #fff;
+    background-color: #4caf50;
+    border-color: #4caf50;
+}
+
+[contenteditable=true] {
+    transition: all $easing-in 0.2s;
+    background-color: rgba(239, 239, 239, 0.7);
+    border-radius: 8px;
+
+    &:focus {
+        outline: 0 solid #eee;
+        background-color: rgba(245, 245, 245, 0.9);
+    }
+
+    &:hover {
+        background-color: rgba(239, 239, 239, 0.8);
+    }
+
+    .dark & {
+        background-color: rgba(239, 239, 239, 0.2);
+    }
+
+    /*
+    &::after {
+        margin-left: 5px;
+        content: "🖊️";
+        font-size: 13px;
+        color: #eee;
+    }
+    */
+
+}
+
+.action {
+    transition: all $easing-in 0.2s;
+
+    &:hover {
+        cursor: pointer;
+        transform: scale(1.2);
+    }
+}
+
+.vue-image-crop-upload .vicp-wrap {
+    border-radius: 10px !important;
+}

src/components/HeartbeatBar.vue

@@ -25,6 +25,10 @@ export default {
             type: Number,
             required: true,
         },
+        heartbeatList: {
+            type: Array,
+            default: null,
+        }
     },
     data() {
         return {
@@ -38,8 +42,15 @@ export default {
     },
     computed: {
 
+        /**
+         * If heartbeatList is null, get it from $root.heartbeatList
+         */
         beatList() {
-            return this.$root.heartbeatList[this.monitorId]
+            if (this.heartbeatList === null) {
+                return this.$root.heartbeatList[this.monitorId];
+            } else {
+                return this.heartbeatList;
+            }
         },
 
         shortBeatList() {
@@ -118,8 +129,10 @@ export default {
         window.removeEventListener("resize", this.resize);
     },
     beforeMount() {
-        if (! (this.monitorId in this.$root.heartbeatList)) {
-            this.$root.heartbeatList[this.monitorId] = [];
+        if (this.heartbeatList === null) {
+            if (! (this.monitorId in this.$root.heartbeatList)) {
+                this.$root.heartbeatList[this.monitorId] = [];
+            }
         }
     },
 

src/components/MonitorList.vue

@@ -12,7 +12,7 @@
                 <input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" />
             </div>
         </div>
-        <div class="list" :class="{ scrollbar: scrollbar }">
+        <div class="monitor-list" :class="{ scrollbar: scrollbar }">
             <div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
                 {{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
             </div>
@@ -163,56 +163,6 @@ export default {
     max-width: 15em;
 }
 
-.list {
-    &.scrollbar {
-        min-height: calc(100vh - 240px);
-        max-height: calc(100vh - 30px);
-        overflow-y: auto;
-        position: sticky;
-        top: 10px;
-    }
-
-    .item {
-        display: block;
-        text-decoration: none;
-        padding: 13px 15px 10px 15px;
-        border-radius: 10px;
-        transition: all ease-in-out 0.15s;
-
-        &.disabled {
-            opacity: 0.3;
-        }
-
-        .info {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        &:hover {
-            background-color: $highlight-white;
-        }
-
-        &.active {
-            background-color: #cdf8f4;
-        }
-    }
-}
-
-.dark {
-    .list {
-        .item {
-            &:hover {
-                background-color: $dark-bg2;
-            }
-
-            &.active {
-                background-color: $dark-bg2;
-            }
-        }
-    }
-}
-
 .monitorItem {
     width: 100%;
 }

src/components/PublicGroupList.vue

@@ -0,0 +1,144 @@
+<template>
+    <!-- Group List -->
+    <Draggable
+        v-model="$root.publicGroupList"
+        :disabled="!editMode"
+        item-key="id"
+        :animation="100"
+    >
+        <template #item="group">
+            <div class="mb-5 ">
+                <!-- Group Title -->
+                <h2 class="group-title">
+                    <font-awesome-icon v-if="editMode && showGroupDrag" icon="arrows-alt-v" class="action drag me-3" />
+                    <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeGroup(group.index)" />
+                    <Editable v-model="group.element.name" :contenteditable="editMode" tag="span" />
+                </h2>
+
+                <div class="shadow-box monitor-list mt-4 position-relative">
+                    <div v-if="group.element.monitorList.length === 0" class="text-center no-monitor-msg">
+                        {{ $t("No Monitors") }}
+                    </div>
+
+                    <!-- Monitor List -->
+                    <!-- animation is not working, no idea why -->
+                    <Draggable
+                        v-model="group.element.monitorList"
+                        class="monitor-list"
+                        group="same-group"
+                        :disabled="!editMode"
+                        :animation="100"
+                        item-key="id"
+                    >
+                        <template #item="monitor">
+                            <div class="item">
+                                <div class="row">
+                                    <div class="col-9 col-md-8 small-padding">
+                                        <div class="info">
+                                            <font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
+                                            <font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
+
+                                            <Uptime :monitor="monitor.element" type="24" :pill="true" />
+                                            {{ monitor.element.name }}
+                                        </div>
+                                    </div>
+                                    <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
+                                        <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </Draggable>
+                </div>
+            </div>
+        </template>
+    </Draggable>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import HeartbeatBar from "./HeartbeatBar.vue";
+import Uptime from "./Uptime.vue";
+
+export default {
+    components: {
+        Draggable,
+        HeartbeatBar,
+        Uptime,
+    },
+    props: {
+        editMode: {
+            type: Boolean,
+            required: true,
+        },
+    },
+    data() {
+        return {
+
+        };
+    },
+    computed: {
+        showGroupDrag() {
+            return (this.$root.publicGroupList.length >= 2);
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        removeGroup(index) {
+            this.$root.publicGroupList.splice(index, 1);
+        },
+
+        removeMonitor(groupIndex, index) {
+            this.$root.publicGroupList[groupIndex].monitorList.splice(index, 1);
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars";
+
+.no-monitor-msg {
+    position: absolute;
+    width: 100%;
+    top: 20px;
+    left: 0;
+}
+
+.monitor-list {
+    min-height: 46px;
+}
+
+.flip-list-move {
+    transition: transform 0.5s;
+}
+
+.no-move {
+    transition: transform 0s;
+}
+
+.drag {
+    color: #bbb;
+    cursor: grab;
+}
+
+.remove {
+    color: $danger;
+}
+
+.group-title {
+    span {
+        display: inline-block;
+        min-width: 15px;
+    }
+}
+
+.mobile {
+    .item {
+        padding: 13px 0 10px 0;
+    }
+}
+
+</style>

src/i18n.js

@@ -3,6 +3,7 @@ import daDK from "./languages/da-DK";
 import deDE from "./languages/de-DE";
 import en from "./languages/en";
 import esEs from "./languages/es-ES";
+import ptBR from "./languages/pt-BR";
 import etEE from "./languages/et-EE";
 import frFR from "./languages/fr-FR";
 import itIT from "./languages/it-IT";
@@ -24,6 +25,7 @@ const languageList = {
     "de-DE": deDE,
     "nl-NL": nlNL,
     "es-ES": esEs,
+    "pt-BR": ptBR,
     "fr-FR": frFR,
     "it-IT": itIT,
     "ja": ja,
@@ -43,6 +45,6 @@ export const i18n = createI18n({
     locale: localStorage.locale || "en",
     fallbackLocale: "en",
     silentFallbackWarn: true,
-    silentTranslationWarn: false,
+    silentTranslationWarn: true,
     messages: languageList,
 });

src/icon.js

@@ -1,4 +1,8 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+// Add Free Font Awesome Icons
+// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
 import {
     faArrowAltCircleUp,
     faCog,
@@ -12,13 +16,19 @@ import {
     faSearch,
     faTachometerAlt,
     faTimes,
-    faTrash
+    faTimesCircle,
+    faTrash,
+    faCheckCircle,
+    faStream,
+    faSave,
+    faExclamationCircle,
+    faBullhorn,
+    faArrowsAltV,
+    faUnlink,
+    faQuestionCircle,
+    faImages, faUpload,
 } from "@fortawesome/free-solid-svg-icons";
-//import { fa } from '@fortawesome/free-regular-svg-icons'
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-// Add Free Font Awesome Icons here
-// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
 library.add(
     faArrowAltCircleUp,
     faCog,
@@ -32,7 +42,18 @@ library.add(
     faSearch,
     faTachometerAlt,
     faTimes,
+    faTimesCircle,
     faTrash,
+    faCheckCircle,
+    faStream,
+    faSave,
+    faExclamationCircle,
+    faBullhorn,
+    faArrowsAltV,
+    faUnlink,
+    faQuestionCircle,
+    faImages,
+    faUpload,
 );
 
 export { FontAwesomeIcon };

src/languages/da-DK.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/de-DE.js

@@ -168,4 +168,14 @@ export default {
     "Export Backup": "Export Backup",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/en.js

@@ -168,6 +168,16 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
     "telegram": "Telegram",
     "webhook": "Webhook",
     "smtp": "Email (SMTP)",
@@ -185,4 +195,4 @@ export default {
     "pushbullet": "Pushbullet",
     "line": "Line Messenger",
     "mattermost": "Mattermost",
-}
+};

src/languages/es-ES.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/et-EE.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/fr-FR.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/it-IT.js

@@ -168,4 +168,14 @@ export default {
     "Search...": "Cerca...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/ja.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/ko-KR.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/nl-NL.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/pl.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Szukaj...",
     "Avg. Ping": "Średni ping",
     "Avg. Response": "Średnia odpowiedź",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/pt-BR.js

@@ -0,0 +1,182 @@
+export default {
+    languageName: "Português (Brasileiro)",
+    checkEverySecond: "Verificar cada {0} segundos.",
+    retryCheckEverySecond: "Tentar novamente a cada {0} segundos.",
+    retriesDescription: "Máximo de tentativas antes que o serviço seja marcado como inativo e uma notificação seja enviada",
+    ignoreTLSError: "Ignorar erros TLS/SSL para sites HTTPS",
+    upsideDownModeDescription: "Inverta o status de cabeça para baixo. Se o serviço estiver acessível, ele está OFFLINE.",
+    maxRedirectDescription: "Número máximo de redirecionamentos a seguir. Defina como 0 para desativar redirecionamentos.",
+    acceptedStatusCodesDescription: "Selecione os códigos de status que são considerados uma resposta bem-sucedida.",
+    passwordNotMatchMsg: "A senha repetida não corresponde.",
+    notificationDescription: "Atribua uma notificação ao (s) monitor (es) para que funcione.",
+    keywordDescription: "Pesquise a palavra-chave em html simples ou resposta JSON e diferencia maiúsculas de minúsculas",
+    pauseDashboardHome: "Pausar",
+    deleteMonitorMsg: "Tem certeza de que deseja excluir este monitor?",
+    deleteNotificationMsg: "Tem certeza de que deseja excluir esta notificação para todos os monitores?",
+    resoverserverDescription: "Cloudflare é o servidor padrão, você pode alterar o servidor resolvedor a qualquer momento.",
+    rrtypeDescription: "Selecione o RR-Type que você deseja monitorar",
+    pauseMonitorMsg: "Tem certeza que deseja fazer uma pausa?",
+    enableDefaultNotificationDescription: "Para cada novo monitor, esta notificação será habilitada por padrão. Você ainda pode desativar a notificação separadamente para cada monitor.",
+    clearEventsMsg: "Tem certeza de que deseja excluir todos os eventos deste monitor?",
+    clearHeartbeatsMsg: "Tem certeza de que deseja excluir todos os heartbeats deste monitor?",
+    confirmClearStatisticsMsg: "Tem certeza que deseja excluir TODAS as estatísticas?",
+    importHandleDescription: "Escolha 'Ignorar existente' se quiser ignorar todos os monitores ou notificações com o mesmo nome. 'Substituir' excluirá todos os monitores e notificações existentes.",
+    confirmImportMsg: "Tem certeza que deseja importar o backup? Certifique-se de que selecionou a opção de importação correta.",
+    twoFAVerifyLabel: "Digite seu token para verificar se 2FA está funcionando",
+    tokenValidSettingsMsg: "O token é válido! Agora você pode salvar as configurações 2FA.",
+    confirmEnableTwoFAMsg: "Tem certeza de que deseja habilitar 2FA?",
+    confirmDisableTwoFAMsg: "Tem certeza de que deseja desativar 2FA?",
+    Settings: "Configurações",
+    Dashboard: "Dashboard",
+    "New Update": "Nova Atualização",
+    Language: "Linguagem",
+    Appearance: "Aparência",
+    Theme: "Tema",
+    General: "Geral",
+    Version: "Versão",
+    "Check Update On GitHub": "Verificar atualização no Github",
+    List: "Lista",
+    Add: "Adicionar",
+    "Add New Monitor": "Adicionar novo monitor",
+    "Quick Stats": "Estatísticas rápidas",
+    Up: "On",
+    Down: "Off",
+    Pending: "Pendente",
+    Unknown: "Desconhecido",
+    Pause: "Pausar",
+    Name: "Nome",
+    Status: "Status",
+    DateTime: "Data hora",
+    Message: "Mensagem",
+    "No important events": "Nenhum evento importante",
+    Resume: "Resumo",
+    Edit: "Editar",
+    Delete: "Deletar",
+    Current: "Atual",
+    Uptime: "Tempo de atividade",
+    "Cert Exp.": "Cert Exp.",
+    days: "dias",
+    day: "dia",
+    "-day": "-dia",
+    hour: "hora",
+    "-hour": "-hora",
+    Response: "Resposta",
+    Ping: "Ping",
+    "Monitor Type": "Tipo de Monitor",
+    Keyword: "Palavra-Chave",
+    "Friendly Name": "Nome Amigável",
+    URL: "URL",
+    Hostname: "Hostname",
+    Port: "Porta",
+    "Heartbeat Interval": "Intervalo de Heartbeat",
+    Retries: "Novas tentativas",
+    "Heartbeat Retry Interval": "Intervalo de repetição de Heartbeat",
+    Advanced: "Avançado",
+    "Upside Down Mode": "Modo de cabeça para baixo",
+    "Max. Redirects": "Redirecionamento Máx.",
+    "Accepted Status Codes": "Status Code Aceitáveis",
+    Save: "Salvar",
+    Notifications: "Notificações",
+    "Not available, please setup.": "Não disponível, por favor configure.",
+    "Setup Notification": "Configurar Notificação",
+    Light: "Claro",
+    Dark: "Escuro",
+    Auto: "Auto",
+    "Theme - Heartbeat Bar": "Tema - Barra de Heartbeat",
+    Normal: "Normal",
+    Bottom: "Inferior",
+    None: "Nenhum",
+    Timezone: "Fuso horário",
+    "Search Engine Visibility": "Visibilidade do mecanismo de pesquisa",
+    "Allow indexing": "Permitir Indexação",
+    "Discourage search engines from indexing site": "Desencoraje os motores de busca de indexar o site",
+    "Change Password": "Mudar senha",
+    "Current Password": "Senha atual",
+    "New Password": "Nova Senha",
+    "Repeat New Password": "Repetir Nova Senha",
+    "Update Password": "Atualizar Senha",
+    "Disable Auth": "Desativar Autenticação",
+    "Enable Auth": "Ativar Autenticação",
+    Logout: "Deslogar",
+    Leave: "Sair",
+    "I understand, please disable": "Eu entendo, por favor desative.",
+    Confirm: "Confirmar",
+    Yes: "Sim",
+    No: "Não",
+    Username: "Usuário",
+    Password: "Senha",
+    "Remember me": "Lembre-me",
+    Login: "Autenticar",
+    "No Monitors, please": "Nenhum monitor, por favor",
+    "add one": "adicionar um",
+    "Notification Type": "Tipo de Notificação",
+    Email: "Email",
+    Test: "Testar",
+    "Certificate Info": "Info. do Certificado ",
+    "Resolver Server": "Resolver Servidor",
+    "Resource Record Type": "Tipo de registro de aplicação",
+    "Last Result": "Último resultado",
+    "Create your admin account": "Crie sua conta de admin",
+    "Repeat Password": "Repita a senha",
+    "Import Backup": "Importar Backup",
+    "Export Backup": "Exportar Backup",
+    Export: "Exportar",
+    Import: "Importar",
+    respTime: "Tempo de Resp. (ms)",
+    notAvailableShort: "N/A",
+    "Default enabled": "Padrão habilitado",
+    "Apply on all existing monitors": "Aplicar em todos os monitores existentes",
+    Create: "Criar",
+    "Clear Data": "Limpar Dados",
+    Events: "Eventos",
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Obter Automático",
+    backupDescription: "Você pode fazer backup de todos os monitores e todas as notificações em um arquivo JSON.",
+    backupDescription2: "OBS: Os dados do histórico e do evento não estão incluídos.",
+    backupDescription3: "Dados confidenciais, como tokens de notificação, estão incluídos no arquivo de exportação, mantenha-o com cuidado.",
+    alertNoFile: "Selecione um arquivo para importar.",
+    alertWrongFileType: "Selecione um arquivo JSON.",
+    "Clear all statistics": "Limpar todas as estatísticas",
+    "Skip existing": "Pular existente",
+    Overwrite: "Sobrescrever",
+    Options: "Opções",
+    "Keep both": "Manter os dois",
+    "Verify Token": "Verificar Token",
+    "Setup 2FA": "Configurar 2FA",
+    "Enable 2FA": "Ativar 2FA",
+    "Disable 2FA": "Desativar 2FA",
+    "2FA Settings": "Configurações do 2FA ",
+    "Two Factor Authentication": "Autenticação e Dois Fatores",
+    Active: "Ativo",
+    Inactive: "Inativo",
+    Token: "Token",
+    "Show URI": "Mostrar URI",
+    Tags: "Tag",
+    "Add New below or Select...": "Adicionar Novo abaixo ou Selecionar ...",
+    "Tag with this name already exist.": "Já existe uma etiqueta com este nome.",
+    "Tag with this value already exist.": "Já existe uma etiqueta com este valor.",
+    color: "cor",
+    "value (optional)": "valor (opcional)",
+    Gray: "Cinza",
+    Red: "Vermelho",
+    Orange: "Laranja",
+    Green: "Verde",
+    Blue: "Azul",
+    Indigo: "Índigo",
+    Purple: "Roxo",
+    Pink: "Rosa",
+    "Search...": "Buscar...",
+    "Avg. Ping": "Ping Médio.",
+    "Avg. Response": "Resposta Média. ",
+    "Status Page": "Página de Status",
+    "Entry Page": "Página de entrada",
+    "statusPageNothing": "Nada aqui, por favor, adicione um grupo ou monitor.",
+    "No Services": "Nenhum Serviço",
+    "All Systems Operational": "Todos os Serviços Operacionais",
+    "Partially Degraded Service": "Serviço parcialmente degradado",
+    "Degraded Service": "Serviço Degradado",
+    "Add Group": "Adicionar Grupo",
+    "Add a monitor": "Adicionar um monitor",
+    "Edit Status Page": "Editar Página de Status",
+    "Go to Dashboard": "Ir para a dashboard",
+};

src/languages/ru-RU.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Поиск...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/sr-latn.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/sr.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/sv-SE.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/tr-TR.js

@@ -168,4 +168,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/zh-CN.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/languages/zh-HK.js

@@ -169,4 +169,14 @@ export default {
     "Search...": "Search...",
     "Avg. Ping": "Avg. Ping",
     "Avg. Response": "Avg. Response",
-}
+    "Entry Page": "Entry Page",
+    "statusPageNothing": "Nothing here, please add a group or a monitor.",
+    "No Services": "No Services",
+    "All Systems Operational": "All Systems Operational",
+    "Partially Degraded Service": "Partially Degraded Service",
+    "Degraded Service": "Degraded Service",
+    "Add Group": "Add Group",
+    "Add a monitor": "Add a monitor",
+    "Edit Status Page": "Edit Status Page",
+    "Go to Dashboard": "Go to Dashboard",
+};

src/layouts/Layout.vue

@@ -18,7 +18,12 @@
             </a>
 
             <ul class="nav nav-pills">
-                <li class="nav-item">
+                <li class="nav-item me-2">
+                    <a href="/status-page" class="nav-link status-page">
+                        <font-awesome-icon icon="stream" /> {{ $t("Status Page") }}
+                    </a>
+                </li>
+                <li class="nav-item me-2">
                     <router-link to="/dashboard" class="nav-link">
                         <font-awesome-icon icon="tachometer-alt" /> {{ $t("Dashboard") }}
                     </router-link>
@@ -81,7 +86,7 @@ export default {
     },
 
     data() {
-        return {}
+        return {};
     },
 
     computed: {
@@ -105,29 +110,29 @@ export default {
     },
 
     watch: {
-        $route(to, from) {
-            this.init();
-        },
+
     },
 
     mounted() {
-        this.init();
+
     },
 
     methods: {
-        init() {
-            if (this.$route.name === "root") {
-                this.$router.push("/dashboard")
-            }
-        },
+
     },
 
-}
+};
 </script>
 
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
+.nav-link {
+    &.status-page {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
 .bottom-nav {
     z-index: 1000;
     position: fixed;

src/main.js

@@ -1,6 +1,7 @@
 import "bootstrap";
 import { createApp, h } from "vue";
 import Toast from "vue-toastification";
+import contenteditable from "vue-contenteditable"
 import "vue-toastification/dist/index.css";
 import App from "./App.vue";
 import "./assets/app.scss";
@@ -10,6 +11,8 @@ import datetime from "./mixins/datetime";
 import mobile from "./mixins/mobile";
 import socket from "./mixins/socket";
 import theme from "./mixins/theme";
+import publicMixin from "./mixins/public";
+
 import { router } from "./router";
 import { appName } from "./util.ts";
 
@@ -18,7 +21,8 @@ const app = createApp({
         socket,
         theme,
         mobile,
-        datetime
+        datetime,
+        publicMixin,
     ],
     data() {
         return {
@@ -36,7 +40,7 @@ const options = {
 };
 
 app.use(Toast, options);
+app.component("Editable", contenteditable);
+app.component("FontAwesomeIcon", FontAwesomeIcon);
 
-app.component("FontAwesomeIcon", FontAwesomeIcon)
-
-app.mount("#app")
+app.mount("#app");

src/mixins/mobile.js

@@ -3,23 +3,34 @@ export default {
     data() {
         return {
             windowWidth: window.innerWidth,
-        }
+        };
     },
 
     created() {
         window.addEventListener("resize", this.onResize);
+        this.updateBody();
     },
 
     methods: {
         onResize() {
             this.windowWidth = window.innerWidth;
+            this.updateBody();
         },
+
+        updateBody() {
+            if (this.isMobile) {
+                document.body.classList.add("mobile");
+            } else {
+                document.body.classList.remove("mobile");
+            }
+        }
+
     },
 
     computed: {
         isMobile() {
             return this.windowWidth <= 767.98;
         },
-    }
+    },
 
-}
+};

src/mixins/public.js

@@ -0,0 +1,40 @@
+import axios from "axios";
+
+const env = process.env.NODE_ENV || "production";
+
+// change the axios base url for development
+if (env === "development" || localStorage.dev === "dev") {
+    axios.defaults.baseURL = location.protocol + "//" + location.hostname + ":3001";
+}
+
+export default {
+    data() {
+        return {
+            publicGroupList: [],
+        };
+    },
+    computed: {
+        publicMonitorList() {
+            let result = {};
+
+            for (let group of this.publicGroupList) {
+                for (let monitor of group.monitorList) {
+                    result[monitor.id] = monitor;
+                }
+            }
+            return result;
+        },
+
+        publicLastHeartbeatList() {
+            let result = {};
+
+            for (let monitorID in this.publicMonitorList) {
+                if (this.lastHeartbeatList[monitorID]) {
+                    result[monitorID] = this.lastHeartbeatList[monitorID];
+                }
+            }
+
+            return result;
+        },
+    }
+};

src/mixins/socket.js

@@ -1,9 +1,14 @@
 import { io } from "socket.io-client";
 import { useToast } from "vue-toastification";
-const toast = useToast()
+const toast = useToast();
 
 let socket;
 
+const noSocketIOPages = [
+    "/status-page",
+    "/"
+];
+
 export default {
 
     data() {
@@ -14,6 +19,7 @@ export default {
                 firstConnect: true,
                 connected: false,
                 connectCount: 0,
+                initedSocketIO: false,
             },
             remember: (localStorage.remember !== "0"),
             allowLoginDialog: false,        // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
@@ -26,167 +32,186 @@ export default {
             certInfoList: {},
             notificationList: [],
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
-        }
+        };
     },
 
     created() {
         window.addEventListener("resize", this.onResize);
-
-        let protocol = (location.protocol === "https:") ? "wss://" : "ws://";
-
-        let wsHost;
-        const env = process.env.NODE_ENV || "production";
-        if (env === "development" || localStorage.dev === "dev") {
-            wsHost = protocol + location.hostname + ":3001";
-        } else {
-            wsHost = protocol + location.host;
-        }
-
-        socket = io(wsHost, {
-            transports: ["websocket"],
-        });
-
-        socket.on("info", (info) => {
-            this.info = info;
-        });
-
-        socket.on("setup", (monitorID, data) => {
-            this.$router.push("/setup")
-        });
-
-        socket.on("autoLogin", (monitorID, data) => {
-            this.loggedIn = true;
-            this.storage().token = "autoLogin";
-            this.allowLoginDialog = false;
-        });
-
-        socket.on("monitorList", (data) => {
-            // Add Helper function
-            Object.entries(data).forEach(([monitorID, monitor]) => {
-                monitor.getUrl = () => {
-                    try {
-                        return new URL(monitor.url);
-                    } catch (_) {
-                        return null;
-                    }
-                };
-            });
-            this.monitorList = data;
-        });
-
-        socket.on("notificationList", (data) => {
-            this.notificationList = data;
-        });
-
-        socket.on("heartbeat", (data) => {
-            if (! (data.monitorID in this.heartbeatList)) {
-                this.heartbeatList[data.monitorID] = [];
-            }
-
-            this.heartbeatList[data.monitorID].push(data)
-
-            // Add to important list if it is important
-            // Also toast
-            if (data.important) {
-
-                if (data.status === 0) {
-                    toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
-                        timeout: false,
-                    });
-                } else if (data.status === 1) {
-                    toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
-                        timeout: 20000,
-                    });
-                } else {
-                    toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
-                }
-
-                if (! (data.monitorID in this.importantHeartbeatList)) {
-                    this.importantHeartbeatList[data.monitorID] = [];
-                }
-
-                this.importantHeartbeatList[data.monitorID].unshift(data)
-            }
-        });
-
-        socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
-            if (! (monitorID in this.heartbeatList) || overwrite) {
-                this.heartbeatList[monitorID] = data;
-            } else {
-                this.heartbeatList[monitorID] = data.concat(this.heartbeatList[monitorID])
-            }
-        });
-
-        socket.on("avgPing", (monitorID, data) => {
-            this.avgPingList[monitorID] = data
-        });
-
-        socket.on("uptime", (monitorID, type, data) => {
-            this.uptimeList[`${monitorID}_${type}`] = data
-        });
-
-        socket.on("certInfo", (monitorID, data) => {
-            this.certInfoList[monitorID] = JSON.parse(data)
-        });
-
-        socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
-            if (! (monitorID in this.importantHeartbeatList) || overwrite) {
-                this.importantHeartbeatList[monitorID] = data;
-            } else {
-                this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID])
-            }
-        });
-
-        socket.on("connect_error", (err) => {
-            console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
-            this.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
-            this.socket.connected = false;
-            this.socket.firstConnect = false;
-        });
-
-        socket.on("disconnect", () => {
-            console.log("disconnect")
-            this.connectionErrorMsg = "Lost connection to the socket server. Reconnecting...";
-            this.socket.connected = false;
-        });
-
-        socket.on("connect", () => {
-            console.log("connect")
-            this.socket.connectCount++;
-            this.socket.connected = true;
-
-            // Reset Heartbeat list if it is re-connect
-            if (this.socket.connectCount >= 2) {
-                this.clearData()
-            }
-
-            let token = this.storage().token;
-
-            if (token) {
-                if (token !== "autoLogin") {
-                    this.loginByToken(token)
-                } else {
-
-                    // Timeout if it is not actually auto login
-                    setTimeout(() => {
-                        if (! this.loggedIn) {
-                            this.allowLoginDialog = true;
-                            this.$root.storage().removeItem("token");
-                        }
-                    }, 5000);
-
-                }
-            } else {
-                this.allowLoginDialog = true;
-            }
-
-            this.socket.firstConnect = false;
-        });
-
+        this.initSocketIO();
     },
 
     methods: {
 
+        initSocketIO(bypass = false) {
+            // No need to re-init
+            if (this.socket.initedSocketIO) {
+                return;
+            }
+
+            // No need to connect to the socket.io for status page
+            if (! bypass && noSocketIOPages.includes(location.pathname)) {
+                return;
+            }
+
+            this.socket.initedSocketIO = true;
+
+            let protocol = (location.protocol === "https:") ? "wss://" : "ws://";
+
+            let wsHost;
+            const env = process.env.NODE_ENV || "production";
+            if (env === "development" || localStorage.dev === "dev") {
+                wsHost = protocol + location.hostname + ":3001";
+            } else {
+                wsHost = protocol + location.host;
+            }
+
+            socket = io(wsHost, {
+                transports: ["websocket"],
+            });
+
+            socket.on("info", (info) => {
+                this.info = info;
+            });
+
+            socket.on("setup", (monitorID, data) => {
+                this.$router.push("/setup");
+            });
+
+            socket.on("autoLogin", (monitorID, data) => {
+                this.loggedIn = true;
+                this.storage().token = "autoLogin";
+                this.allowLoginDialog = false;
+            });
+
+            socket.on("monitorList", (data) => {
+                // Add Helper function
+                Object.entries(data).forEach(([monitorID, monitor]) => {
+                    monitor.getUrl = () => {
+                        try {
+                            return new URL(monitor.url);
+                        } catch (_) {
+                            return null;
+                        }
+                    };
+                });
+                this.monitorList = data;
+            });
+
+            socket.on("notificationList", (data) => {
+                this.notificationList = data;
+            });
+
+            socket.on("heartbeat", (data) => {
+                if (! (data.monitorID in this.heartbeatList)) {
+                    this.heartbeatList[data.monitorID] = [];
+                }
+
+                this.heartbeatList[data.monitorID].push(data);
+
+                if (this.heartbeatList[data.monitorID].length >= 150) {
+                    this.heartbeatList[data.monitorID].shift();
+                }
+
+                // Add to important list if it is important
+                // Also toast
+                if (data.important) {
+
+                    if (data.status === 0) {
+                        toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
+                            timeout: false,
+                        });
+                    } else if (data.status === 1) {
+                        toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
+                            timeout: 20000,
+                        });
+                    } else {
+                        toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
+                    }
+
+                    if (! (data.monitorID in this.importantHeartbeatList)) {
+                        this.importantHeartbeatList[data.monitorID] = [];
+                    }
+
+                    this.importantHeartbeatList[data.monitorID].unshift(data);
+                }
+            });
+
+            socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
+                if (! (monitorID in this.heartbeatList) || overwrite) {
+                    this.heartbeatList[monitorID] = data;
+                } else {
+                    this.heartbeatList[monitorID] = data.concat(this.heartbeatList[monitorID]);
+                }
+            });
+
+            socket.on("avgPing", (monitorID, data) => {
+                this.avgPingList[monitorID] = data;
+            });
+
+            socket.on("uptime", (monitorID, type, data) => {
+                this.uptimeList[`${monitorID}_${type}`] = data;
+            });
+
+            socket.on("certInfo", (monitorID, data) => {
+                this.certInfoList[monitorID] = JSON.parse(data);
+            });
+
+            socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
+                if (! (monitorID in this.importantHeartbeatList) || overwrite) {
+                    this.importantHeartbeatList[monitorID] = data;
+                } else {
+                    this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID]);
+                }
+            });
+
+            socket.on("connect_error", (err) => {
+                console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
+                this.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
+                this.socket.connected = false;
+                this.socket.firstConnect = false;
+            });
+
+            socket.on("disconnect", () => {
+                console.log("disconnect");
+                this.connectionErrorMsg = "Lost connection to the socket server. Reconnecting...";
+                this.socket.connected = false;
+            });
+
+            socket.on("connect", () => {
+                console.log("connect");
+                this.socket.connectCount++;
+                this.socket.connected = true;
+
+                // Reset Heartbeat list if it is re-connect
+                if (this.socket.connectCount >= 2) {
+                    this.clearData();
+                }
+
+                let token = this.storage().token;
+
+                if (token) {
+                    if (token !== "autoLogin") {
+                        this.loginByToken(token);
+                    } else {
+
+                        // Timeout if it is not actually auto login
+                        setTimeout(() => {
+                            if (! this.loggedIn) {
+                                this.allowLoginDialog = true;
+                                this.$root.storage().removeItem("token");
+                            }
+                        }, 5000);
+
+                    }
+                } else {
+                    this.allowLoginDialog = true;
+                }
+
+                this.socket.firstConnect = false;
+            });
+
+        },
+
         storage() {
             return (this.remember) ? localStorage : sessionStorage;
         },
@@ -210,7 +235,7 @@ export default {
                 token,
             }, (res) => {
                 if (res.tokenRequired) {
-                    callback(res)
+                    callback(res);
                 }
 
                 if (res.ok) {
@@ -219,11 +244,11 @@ export default {
                     this.loggedIn = true;
 
                     // Trigger Chrome Save Password
-                    history.pushState({}, "")
+                    history.pushState({}, "");
                 }
 
-                callback(res)
-            })
+                callback(res);
+            });
         },
 
         loginByToken(token) {
@@ -231,11 +256,11 @@ export default {
                 this.allowLoginDialog = true;
 
                 if (! res.ok) {
-                    this.logout()
+                    this.logout();
                 } else {
                     this.loggedIn = true;
                 }
-            })
+            });
         },
 
         logout() {
@@ -243,68 +268,68 @@ export default {
             this.socket.token = null;
             this.loggedIn = false;
 
-            this.clearData()
+            this.clearData();
         },
 
         prepare2FA(callback) {
-            socket.emit("prepare2FA", callback)
+            socket.emit("prepare2FA", callback);
         },
 
         save2FA(secret, callback) {
-            socket.emit("save2FA", callback)
+            socket.emit("save2FA", callback);
         },
 
         disable2FA(callback) {
-            socket.emit("disable2FA", callback)
+            socket.emit("disable2FA", callback);
         },
 
         verifyToken(token, callback) {
-            socket.emit("verifyToken", token, callback)
+            socket.emit("verifyToken", token, callback);
         },
 
         twoFAStatus(callback) {
-            socket.emit("twoFAStatus", callback)
+            socket.emit("twoFAStatus", callback);
         },
 
         getMonitorList(callback) {
-            socket.emit("getMonitorList", callback)
+            socket.emit("getMonitorList", callback);
         },
 
         add(monitor, callback) {
-            socket.emit("add", monitor, callback)
+            socket.emit("add", monitor, callback);
         },
 
         deleteMonitor(monitorID, callback) {
-            socket.emit("deleteMonitor", monitorID, callback)
+            socket.emit("deleteMonitor", monitorID, callback);
         },
 
         clearData() {
-            console.log("reset heartbeat list")
-            this.heartbeatList = {}
-            this.importantHeartbeatList = {}
+            console.log("reset heartbeat list");
+            this.heartbeatList = {};
+            this.importantHeartbeatList = {};
         },
 
         uploadBackup(uploadedJSON, importHandle, callback) {
-            socket.emit("uploadBackup", uploadedJSON, importHandle, callback)
+            socket.emit("uploadBackup", uploadedJSON, importHandle, callback);
         },
 
         clearEvents(monitorID, callback) {
-            socket.emit("clearEvents", monitorID, callback)
+            socket.emit("clearEvents", monitorID, callback);
         },
 
         clearHeartbeats(monitorID, callback) {
-            socket.emit("clearHeartbeats", monitorID, callback)
+            socket.emit("clearHeartbeats", monitorID, callback);
         },
 
         clearStatistics(callback) {
-            socket.emit("clearStatistics", callback)
+            socket.emit("clearStatistics", callback);
         },
     },
 
     computed: {
 
         lastHeartbeatList() {
-            let result = {}
+            let result = {};
 
             for (let monitorID in this.heartbeatList) {
                 let index = this.heartbeatList[monitorID].length - 1;
@@ -315,15 +340,15 @@ export default {
         },
 
         statusList() {
-            let result = {}
+            let result = {};
 
             let unknown = {
                 text: "Unknown",
                 color: "secondary",
-            }
+            };
 
             for (let monitorID in this.lastHeartbeatList) {
-                let lastHeartBeat = this.lastHeartbeatList[monitorID]
+                let lastHeartBeat = this.lastHeartbeatList[monitorID];
 
                 if (! lastHeartBeat) {
                     result[monitorID] = unknown;
@@ -356,14 +381,22 @@ export default {
         // Reload the SPA if the server version is changed.
         "info.version"(to, from) {
             if (from && from !== to) {
-                window.location.reload()
+                window.location.reload();
             }
         },
 
         remember() {
-            localStorage.remember = (this.remember) ? "1" : "0"
+            localStorage.remember = (this.remember) ? "1" : "0";
+        },
+
+        // Reconnect the socket io, if status-page to dashboard
+        "$route.fullPath"(newValue, oldValue) {
+            if (noSocketIOPages.includes(newValue)) {
+                return;
+            }
+            this.initSocketIO();
         },
 
     },
 
-}
+};

src/mixins/theme.js

@@ -5,6 +5,8 @@ export default {
             system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light",
             userTheme: localStorage.theme,
             userHeartbeatBar: localStorage.heartbeatBarTheme,
+            statusPageTheme: "light",
+            path: "",
         };
     },
 
@@ -25,14 +27,28 @@ export default {
 
     computed: {
         theme() {
-            if (this.userTheme === "auto") {
-                return this.system;
+
+            // Entry no need dark
+            if (this.path === "") {
+                return "light";
+            }
+
+            if (this.path === "/status-page") {
+                return this.statusPageTheme;
+            } else {
+                if (this.userTheme === "auto") {
+                    return this.system;
+                }
+                return this.userTheme;
             }
-            return this.userTheme;
         }
     },
 
     watch: {
+        "$route.fullPath"(path) {
+            this.path = path;
+        },
+
         userTheme(to, from) {
             localStorage.theme = to;
         },
@@ -62,5 +78,5 @@ export default {
             }
         }
     }
-}
+};
 

src/pages/EditMonitor.vue

@@ -50,7 +50,7 @@
                             <!-- TCP Port / Ping / DNS only -->
                             <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' " class="my-3">
                                 <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
-                                <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" :pattern="ipRegexPattern || hostnameRegexPattern" required>
+                                <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" :pattern="`${ipRegexPattern}|${hostnameRegexPattern}`" required>
                             </div>
 
                             <!-- For TCP Port Type -->
@@ -233,11 +233,9 @@ export default {
             dnsresolvetypeOptions: [],
 
             // Source: https://digitalfortress.tech/tips/top-15-commonly-used-regex/
-            // eslint-disable-next-line
-            ipRegexPattern: "((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))",
+            ipRegexPattern: "((^\\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\\s*$)|(^\\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?\\s*$))",
             // Source: https://stackoverflow.com/questions/106179/regular-expression-to-match-dns-hostname-or-ip-address
-            // eslint-disable-next-line
-            hostnameRegexPattern: "^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$"
+            hostnameRegexPattern: "^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9])\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\-]*[A-Za-z0-9])$"
         }
     },
 
@@ -333,6 +331,11 @@ export default {
                 this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
                     if (res.ok) {
                         this.monitor = res.monitor;
+
+                        // Handling for monitors that are created before 1.7.0
+                        if (this.monitor.retryInterval === 0) {
+                            this.monitor.retryInterval = this.monitor.interval;
+                        }
                     } else {
                         toast.error(res.msg)
                     }

src/pages/Entry.vue

@@ -0,0 +1,20 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+    async mounted() {
+        let entryPage = (await axios.get("/api/entry-page")).data;
+
+        if (entryPage === "statusPage") {
+            this.$router.push("/status-page");
+        } else {
+            this.$router.push("/dashboard");
+        }
+    },
+
+};
+</script>

src/pages/Settings.vue

@@ -83,6 +83,24 @@
                                 </div>
                             </div>
 
+                            <div class="mb-3">
+                                <label class="form-label">{{ $t("Entry Page") }}</label>
+
+                                <div class="form-check">
+                                    <input id="entryPageYes" v-model="settings.entryPage" class="form-check-input" type="radio" name="statusPage" value="dashboard" required>
+                                    <label class="form-check-label" for="entryPageYes">
+                                        {{ $t("Dashboard") }}
+                                    </label>
+                                </div>
+
+                                <div class="form-check">
+                                    <input id="entryPageNo" v-model="settings.entryPage" class="form-check-input" type="radio" name="statusPage" value="statusPage" required>
+                                    <label class="form-check-label" for="entryPageNo">
+                                        {{ $t("Status Page") }}
+                                    </label>
+                                </div>
+                            </div>
+
                             <div>
                                 <button class="btn btn-primary" type="submit">
                                     {{ $t("Save") }}
@@ -207,18 +225,15 @@
                         <button class="btn btn-primary me-2" type="button" @click="$refs.notificationDialog.show()">
                             {{ $t("Setup Notification") }}
                         </button>
+
+                        <h2 class="mt-5">Info</h2>
+
+                        {{ $t("Version") }}: {{ $root.info.version }} <br />
+                        <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
                     </div>
                 </div>
             </div>
 
-            <footer>
-                <div class="container-fluid">
-                    Uptime Kuma -
-                    {{ $t("Version") }}: {{ $root.info.version }} -
-                    <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank" rel="noopener">{{ $t("Check Update On GitHub") }}</a>
-                </div>
-            </footer>
-
             <NotificationDialog ref="notificationDialog" />
             <TwoFADialog ref="TwoFADialog" />
 
@@ -229,6 +244,12 @@
                     <p>Por favor usar con cuidado.</p>
                 </template>
 
+                <template v-else-if="$i18n.locale === 'pt-BR' ">
+                    <p>Você tem certeza que deseja <strong>desativar a autenticação</strong>?</p>
+                    <p>Isso é para <strong>alguém que tem autenticação de terceiros</strong> na frente do 'UpTime Kuma' como o Cloudflare Access.</p>
+                    <p>Por favor, utilize isso com cautela.</p>
+                </template>
+
                 <template v-else-if="$i18n.locale === 'zh-HK' ">
                     <p>你是否確認<strong>取消登入認証</strong>？</p>
                     <p>這個功能是設計給已有<strong>第三方認証</strong>的用家，例如 Cloudflare Access。</p>
@@ -261,8 +282,8 @@
 
                 <template v-else-if="$i18n.locale === 'tr-TR' ">
                     <p><strong>Şifreli girişi devre dışı bırakmak istediğinizden</strong>emin misiniz?</p>
-                     <p>Bu, Uptime Kuma'nın önünde Cloudflare Access gibi <strong>üçüncü taraf yetkilendirmesi olan</strong> kişiler içindir.</p>
-                     <p>Lütfen dikkatli kullanın.</p>
+                    <p>Bu, Uptime Kuma'nın önünde Cloudflare Access gibi <strong>üçüncü taraf yetkilendirmesi olan</strong> kişiler içindir.</p>
+                    <p>Lütfen dikkatli kullanın.</p>
                 </template>
 
                 <template v-else-if="$i18n.locale === 'ko-KR' ">
@@ -316,16 +337,16 @@
 <script>
 import Confirm from "../components/Confirm.vue";
 import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc"
-import timezone from "dayjs/plugin/timezone"
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
 import NotificationDialog from "../components/NotificationDialog.vue";
 import TwoFADialog from "../components/TwoFADialog.vue";
-dayjs.extend(utc)
-dayjs.extend(timezone)
+dayjs.extend(utc);
+dayjs.extend(timezone);
 
 import { timezoneList } from "../util-frontend";
-import { useToast } from "vue-toastification"
-const toast = useToast()
+import { useToast } from "vue-toastification";
+const toast = useToast();
 
 export default {
     components: {
@@ -351,7 +372,7 @@ export default {
             importAlert: null,
             importHandle: "skip",
             processing: false,
-        }
+        };
     },
     watch: {
         "password.repeatNewPassword"() {
@@ -379,13 +400,13 @@ export default {
                 this.invalidPassword = true;
             } else {
                 this.$root.getSocket().emit("changePassword", this.password, (res) => {
-                    this.$root.toastRes(res)
+                    this.$root.toastRes(res);
                     if (res.ok) {
-                        this.password.currentPassword = ""
-                        this.password.newPassword = ""
-                        this.password.repeatNewPassword = ""
+                        this.password.currentPassword = "";
+                        this.password.newPassword = "";
+                        this.password.repeatNewPassword = "";
                     }
-                })
+                });
             }
         },
 
@@ -397,15 +418,19 @@ export default {
                     this.settings.searchEngineIndex = false;
                 }
 
+                if (this.settings.entryPage === undefined) {
+                    this.settings.entryPage = "dashboard";
+                }
+
                 this.loaded = true;
-            })
+            });
         },
 
         saveSettings() {
             this.$root.getSocket().emit("setSettings", this.settings, (res) => {
                 this.$root.toastRes(res);
                 this.loadSettings();
-            })
+            });
         },
 
         confirmDisableAuth() {
@@ -439,7 +464,7 @@ export default {
                 version: this.$root.info.version,
                 notificationList: this.$root.notificationList,
                 monitorList: monitorList,
-            }
+            };
             exportData = JSON.stringify(exportData, null, 4);
             let downloadItem = document.createElement("a");
             downloadItem.setAttribute("href", "data:application/json;charset=utf-8," + encodeURIComponent(exportData));
@@ -453,12 +478,12 @@ export default {
 
             if (uploadItem.length <= 0) {
                 this.processing = false;
-                return this.importAlert = this.$t("alertNoFile")
+                return this.importAlert = this.$t("alertNoFile");
             }
 
             if (uploadItem.item(0).type !== "application/json") {
                 this.processing = false;
-                return this.importAlert = this.$t("alertWrongFileType")
+                return this.importAlert = this.$t("alertWrongFileType");
             }
 
             let fileReader = new FileReader();
@@ -473,8 +498,8 @@ export default {
                     } else {
                         toast.error(res.msg);
                     }
-                })
-            }
+                });
+            };
         },
 
         clearStatistics() {
@@ -484,10 +509,10 @@ export default {
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/pages/StatusPage.vue

@@ -0,0 +1,653 @@
+<template>
+    <div v-if="loadedTheme" class="container mt-3">
+        <!-- Logo & Title -->
+        <h1 class="mb-4">
+            <!-- Logo -->
+            <span class="logo-wrapper" @click="showImageCropUploadMethod">
+                <img :src="logoURL" alt class="logo me-2" :class="logoClass" />
+                <font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
+            </span>
+
+            <!-- Uploader -->
+            <!--    url="/api/status-page/upload-logo" -->
+            <ImageCropUpload v-model="showImageCropUpload"
+                             field="img"
+                             :width="128"
+                             :height="128"
+                             :langType="$i18n.locale"
+                             img-format="png"
+                             :noCircle="true"
+                             :noSquare="false"
+                             @crop-success="cropSuccess"
+            />
+
+            <!-- Title -->
+            <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
+        </h1>
+
+        <!-- Admin functions -->
+        <div v-if="hasToken" class="mb-4">
+            <div v-if="!enableEditMode">
+                <button class="btn btn-info me-2" @click="edit">
+                    <font-awesome-icon icon="edit" />
+                    {{ $t("Edit Status Page") }}
+                </button>
+
+                <a href="/dashboard" class="btn btn-info">
+                    <font-awesome-icon icon="tachometer-alt" />
+                    {{ $t("Go to Dashboard") }}
+                </a>
+            </div>
+
+            <div v-else>
+                <button class="btn btn-success me-2" @click="save">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Save") }}
+                </button>
+
+                <button class="btn btn-danger me-2" @click="discard">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Discard") }}
+                </button>
+
+                <button class="btn btn-primary btn-add-group me-2" @click="createIncident">
+                    <font-awesome-icon icon="bullhorn" />
+                    {{ $t("Create Incident") }}
+                </button>
+
+                <!--
+                <button v-if="isPublished" class="btn btn-light me-2" @click="">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Unpublish") }}
+                </button>
+
+                <button v-if="!isPublished" class="btn btn-info me-2" @click="">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Publish") }}
+                </button>-->
+
+                <!-- Set Default Language -->
+                <!-- Set theme -->
+                <button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Switch to Light Theme") }}
+                </button>
+
+                <button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Switch to Dark Theme") }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Incident -->
+        <div v-if="incident !== null" class="shadow-box alert mb-4 p-4 incident" role="alert" :class="incidentClass">
+            <strong v-if="editIncidentMode">{{ $t("Title") }}:</strong>
+            <Editable v-model="incident.title" tag="h4" :contenteditable="editIncidentMode" :noNL="true" class="alert-heading" />
+
+            <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
+            <Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
+
+            <!-- Incident Date -->
+            <div class="date mt-3">
+                Created: {{ incident.createdDate }} ({{ createdDateFromNow }})<br />
+                <span v-if="incident.lastUpdatedDate">
+                    Last Updated: {{ incident.lastUpdatedDate }} ({{ lastUpdatedDateFromNow }})
+                </span>
+            </div>
+
+            <div v-if="editMode" class="mt-3">
+                <button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident">
+                    <font-awesome-icon icon="bullhorn" />
+                    {{ $t("Post") }}
+                </button>
+
+                <button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="editIncident">
+                    <font-awesome-icon icon="edit" />
+                    {{ $t("Edit") }}
+                </button>
+
+                <button v-if="editIncidentMode" class="btn btn-light me-2" @click="cancelIncident">
+                    <font-awesome-icon icon="times" />
+                    {{ $t("Cancel") }}
+                </button>
+
+                <div v-if="editIncidentMode" class="dropdown d-inline-block me-2">
+                    <button id="dropdownMenuButton1" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        Style: {{ incident.style }}
+                    </button>
+                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'info'">info</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'warning'">warning</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'danger'">danger</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'primary'">primary</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'light'">light</a></li>
+                        <li><a class="dropdown-item" href="#" @click="incident.style = 'dark'">dark</a></li>
+                    </ul>
+                </div>
+
+                <button v-if="!editIncidentMode && incident.id" class="btn btn-light me-2" @click="unpinIncident">
+                    <font-awesome-icon icon="unlink" />
+                    {{ $t("Unpin") }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Overall Status -->
+        <div class="shadow-box list  p-4 overall-status mb-4">
+            <div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
+                <font-awesome-icon icon="question-circle" class="ok" />
+                {{ $t("No Services") }}
+            </div>
+
+            <template v-else>
+                <div v-if="allUp">
+                    <font-awesome-icon icon="check-circle" class="ok" />
+                    {{ $t("All Systems Operational") }}
+                </div>
+
+                <div v-else-if="partialDown">
+                    <font-awesome-icon icon="exclamation-circle" class="warning" />
+                    {{ $t("Partially Degraded Service") }}
+                </div>
+
+                <div v-else-if="allDown">
+                    <font-awesome-icon icon="times-circle" class="danger" />
+                    {{ $t("Degraded Service") }}
+                </div>
+
+                <div v-else>
+                    <font-awesome-icon icon="question-circle" style="color: #efefef" />
+                </div>
+            </template>
+        </div>
+
+        <!-- Description -->
+        <strong v-if="editMode">{{ $t("Description") }}:</strong>
+        <Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mb-4 description" />
+
+        <div v-if="editMode" class="mb-4">
+            <div>
+                <button class="btn btn-primary btn-add-group me-2" @click="addGroup">
+                    <font-awesome-icon icon="plus" />
+                    {{ $t("Add Group") }}
+                </button>
+            </div>
+
+            <div class="mt-3">
+                <div v-if="allMonitorList.length > 0 && loadedData">
+                    <label>{{ $t("Add a monitor") }}:</label>
+                    <select v-model="selectedMonitor" class="form-control">
+                        <option v-for="monitor in allMonitorList" :key="monitor.id" :value="monitor">{{ monitor.name }}</option>
+                    </select>
+                </div>
+                <div v-else class="text-center">
+                    {{ $t("No monitors available.") }}  <router-link to="/add">{{ $t("Add one") }}</router-link>
+                </div>
+            </div>
+        </div>
+
+        <div class="mb-4">
+            <div v-if="$root.publicGroupList.length === 0 && loadedData" class="text-center">
+                <!-- 👀 Nothing here, please add a group or a monitor. -->
+                👀 {{ $t("statusPageNothing") }}
+            </div>
+
+            <PublicGroupList :edit-mode="enableEditMode" />
+        </div>
+
+        <footer class="mt-5 mb-4">
+            Powered by <a target="_blank" href="https://github.com/louislam/uptime-kuma">Uptime Kuma</a>
+        </footer>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import PublicGroupList from "../components/PublicGroupList.vue";
+import ImageCropUpload from "vue-image-crop-upload";
+import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_PARTIAL_DOWN, UP } from "../util.ts";
+import { useToast } from "vue-toastification";
+import dayjs from "dayjs";
+const toast = useToast();
+
+const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
+
+let feedInterval;
+
+export default {
+    components: {
+        PublicGroupList,
+        ImageCropUpload
+    },
+
+    // Leave Page for vue route change
+    beforeRouteLeave(to, from, next) {
+        if (this.editMode) {
+            const answer = window.confirm(leavePageMsg);
+            if (answer) {
+                next();
+            } else {
+                next(false);
+            }
+        }
+        next();
+    },
+
+    data() {
+        return {
+            enableEditMode: false,
+            enableEditIncidentMode: false,
+            hasToken: false,
+            config: {},
+            selectedMonitor: null,
+            incident: null,
+            previousIncident: null,
+            showImageCropUpload: false,
+            imgDataUrl: "/icon.svg",
+            loadedTheme: false,
+            loadedData: false,
+            baseURL: "",
+        };
+    },
+    computed: {
+
+        logoURL() {
+            if (this.imgDataUrl.startsWith("data:")) {
+                return this.imgDataUrl;
+            } else {
+                return this.baseURL + this.imgDataUrl;
+            }
+        },
+
+        /**
+         * If the monitor is added to public list, which will not be in this list.
+         */
+        allMonitorList() {
+            let result = [];
+
+            for (let id in this.$root.monitorList) {
+                if (this.$root.monitorList[id] && ! (id in this.$root.publicMonitorList)) {
+                    let monitor = this.$root.monitorList[id];
+                    result.push(monitor);
+                }
+            }
+
+            return result;
+        },
+
+        editMode() {
+            return this.enableEditMode && this.$root.socket.connected;
+        },
+
+        editIncidentMode() {
+            return this.enableEditIncidentMode;
+        },
+
+        isPublished() {
+            return this.config.statusPagePublished;
+        },
+
+        theme() {
+            return this.config.statusPageTheme;
+        },
+
+        logoClass() {
+            if (this.editMode) {
+                return {
+                    "edit-mode": true,
+                };
+            }
+            return {};
+        },
+
+        incidentClass() {
+            return "bg-" + this.incident.style;
+        },
+
+        overallStatus() {
+
+            if (Object.keys(this.$root.publicLastHeartbeatList).length === 0) {
+                return -1;
+            }
+
+            let status = STATUS_PAGE_ALL_UP;
+            let hasUp = false;
+
+            for (let id in this.$root.publicLastHeartbeatList) {
+                let beat = this.$root.publicLastHeartbeatList[id];
+
+                if (beat.status === UP) {
+                    hasUp = true;
+                } else {
+                    status = STATUS_PAGE_PARTIAL_DOWN;
+                }
+            }
+
+            if (! hasUp) {
+                status = STATUS_PAGE_ALL_DOWN;
+            }
+
+            return status;
+        },
+
+        allUp() {
+            return this.overallStatus === STATUS_PAGE_ALL_UP;
+        },
+
+        partialDown() {
+            return this.overallStatus === STATUS_PAGE_PARTIAL_DOWN;
+        },
+
+        allDown() {
+            return this.overallStatus === STATUS_PAGE_ALL_DOWN;
+        },
+
+        createdDateFromNow() {
+            return dayjs.utc(this.incident.createdDate).fromNow();
+        },
+
+        lastUpdatedDateFromNow() {
+            return dayjs.utc(this.incident. lastUpdatedDate).fromNow();
+        }
+
+    },
+    watch: {
+
+        /**
+         * Selected a monitor and add to the list.
+         */
+        selectedMonitor(monitor) {
+            if (monitor) {
+                if (this.$root.publicGroupList.length === 0) {
+                    this.addGroup();
+                }
+
+                const firstGroup = this.$root.publicGroupList[0];
+
+                firstGroup.monitorList.push(monitor);
+                this.selectedMonitor = null;
+            }
+        },
+
+        // Set Theme
+        "config.statusPageTheme"() {
+            this.$root.statusPageTheme = this.config.statusPageTheme;
+            this.loadedTheme = true;
+        },
+
+        "config.title"(title) {
+            document.title = title;
+        }
+
+    },
+    async created() {
+        this.hasToken = ("token" in this.$root.storage());
+
+        // Browser change page
+        // https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
+        window.addEventListener("beforeunload", (e) => {
+            if (this.editMode) {
+                (e || window.event).returnValue = leavePageMsg;
+                return leavePageMsg;
+            } else {
+                return null;
+            }
+        });
+
+        // Special handle for dev
+        const env = process.env.NODE_ENV;
+        if (env === "development" || localStorage.dev === "dev") {
+            this.baseURL = location.protocol + "//" + location.hostname + ":3001";
+        }
+    },
+    async mounted() {
+        axios.get("/api/status-page/config").then((res) => {
+            this.config = res.data;
+
+            if (this.config.logo) {
+                this.imgDataUrl = this.config.logo;
+            }
+        });
+
+        axios.get("/api/status-page/incident").then((res) => {
+            if (res.data.ok) {
+                this.incident = res.data.incident;
+            }
+        });
+
+        axios.get("/api/status-page/monitor-list").then((res) => {
+            this.$root.publicGroupList = res.data;
+        });
+
+        // 5mins a loop
+        this.updateHeartbeatList();
+        feedInterval = setInterval(() => {
+            this.updateHeartbeatList();
+        }, (300 + 10) * 1000);
+    },
+    methods: {
+
+        updateHeartbeatList() {
+            // If editMode, it will use the data from websocket.
+            if (! this.editMode) {
+                axios.get("/api/status-page/heartbeat").then((res) => {
+                    this.$root.heartbeatList = res.data.heartbeatList;
+                    this.$root.uptimeList = res.data.uptimeList;
+                    this.loadedData = true;
+                });
+            }
+        },
+
+        edit() {
+            this.$root.initSocketIO(true);
+            this.enableEditMode = true;
+        },
+
+        save() {
+            this.$root.getSocket().emit("saveStatusPage", this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
+                if (res.ok) {
+                    this.enableEditMode = false;
+                    this.$root.publicGroupList = res.publicGroupList;
+                    location.reload();
+                } else {
+                    toast.error(res.msg);
+                }
+            });
+        },
+
+        monitorSelectorLabel(monitor) {
+            return `${monitor.name}`;
+        },
+
+        addGroup() {
+            let groupName = "Untitled Group";
+
+            if (this.$root.publicGroupList.length === 0) {
+                groupName = "Services";
+            }
+
+            this.$root.publicGroupList.push({
+                name: groupName,
+                monitorList: [],
+            });
+        },
+
+        discard() {
+            location.reload();
+        },
+
+        changeTheme(name) {
+            this.config.statusPageTheme = name;
+        },
+
+        /**
+         * Crop Success
+         */
+        cropSuccess(imgDataUrl) {
+            this.imgDataUrl = imgDataUrl;
+        },
+
+        showImageCropUploadMethod() {
+            if (this.editMode) {
+                this.showImageCropUpload = true;
+            }
+        },
+
+        createIncident() {
+            this.enableEditIncidentMode = true;
+
+            if (this.incident) {
+                this.previousIncident = this.incident;
+            }
+
+            this.incident = {
+                title: "",
+                content: "",
+                style: "primary",
+            };
+        },
+
+        postIncident() {
+            if (this.incident.title == "" || this.incident.content == "") {
+                toast.error("Please input title and content.");
+                return;
+            }
+
+            this.$root.getSocket().emit("postIncident", this.incident, (res) => {
+
+                if (res.ok) {
+                    this.enableEditIncidentMode = false;
+                    this.incident = res.incident;
+                } else {
+                    toast.error(res.msg);
+                }
+
+            });
+
+        },
+
+        /**
+         * Click Edit Button
+         */
+        editIncident() {
+            this.enableEditIncidentMode = true;
+            this.previousIncident = Object.assign({}, this.incident);
+        },
+
+        cancelIncident() {
+            this.enableEditIncidentMode = false;
+
+            if (this.previousIncident) {
+                this.incident = this.previousIncident;
+                this.previousIncident = null;
+            }
+        },
+
+        unpinIncident() {
+            this.$root.getSocket().emit("unpinIncident", () => {
+                this.incident = null;
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.overall-status {
+    font-weight: bold;
+    font-size: 25px;
+
+    .ok {
+        color: $primary;
+    }
+
+    .warning {
+        color: $warning;
+    }
+
+    .danger {
+        color: $danger;
+    }
+}
+
+h1 {
+    font-size: 30px;
+
+    img {
+        vertical-align: middle;
+        height: 60px;
+        width: 60px;
+    }
+}
+
+footer {
+    text-align: center;
+    font-size: 14px;
+}
+
+.description span {
+    min-width: 50px;
+}
+
+.logo-wrapper {
+    display: inline-block;
+    position: relative;
+
+    &:hover {
+        .icon-upload {
+            transform: scale(1.2);
+        }
+    }
+
+    .icon-upload {
+        transition: all $easing-in 0.2s;
+        position: absolute;
+        bottom: 6px;
+        font-size: 20px;
+        left: -14px;
+        background-color: white;
+        padding: 5px;
+        border-radius: 10px;
+        cursor: pointer;
+        box-shadow: 0 15px 70px rgba(0, 0, 0, 0.9);
+    }
+}
+
+.logo {
+    transition: all $easing-in 0.2s;
+
+    &.edit-mode {
+        cursor: pointer;
+
+        &:hover {
+            transform: scale(1.2);
+        }
+    }
+}
+
+.incident {
+    .content {
+        &[contenteditable=true] {
+            min-height: 60px;
+        }
+    }
+
+    .date {
+        font-size: 12px;
+    }
+}
+
+.mobile {
+    h1 {
+        font-size: 22px;
+    }
+
+    .overall-status {
+        font-size: 20px;
+    }
+}
+
+</style>

src/router.js

@@ -8,14 +8,22 @@ import EditMonitor from "./pages/EditMonitor.vue";
 import List from "./pages/List.vue";
 import Settings from "./pages/Settings.vue";
 import Setup from "./pages/Setup.vue";
+import StatusPage from "./pages/StatusPage.vue";
+import Entry from "./pages/Entry.vue";
 
 const routes = [
     {
         path: "/",
+        component: Entry,
+    },
+    {
+        // If it is "/dashboard", the active link is not working
+        // If it is "", it overrides the "/" unexpectedly
+        // Give a random name to solve the problem.
+        path: "/empty",
         component: Layout,
         children: [
             {
-                name: "root",
                 path: "",
                 component: Dashboard,
                 children: [
@@ -54,15 +62,17 @@ const routes = [
                     },
                 ],
             },
-
         ],
-
     },
     {
         path: "/setup",
         component: Setup,
     },
-]
+    {
+        path: "/status-page",
+        component: StatusPage,
+    },
+];
 
 export const router = createRouter({
     linkActiveClass: "active",

src/util-frontend.js

@@ -3,8 +3,8 @@ import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import timezones from "timezones-list";
 
-dayjs.extend(utc)
-dayjs.extend(timezone)
+dayjs.extend(utc);
+dayjs.extend(timezone);
 
 function getTimezoneOffset(timeZone) {
     const now = new Date();
@@ -28,7 +28,7 @@ export function timezoneList() {
                 name: `(UTC${display}) ${timezone.tzCode}`,
                 value: timezone.tzCode,
                 time: getTimezoneOffset(timezone.tzCode),
-            })
+            });
         } catch (e) {
             console.log("Skip Timezone: " + timezone.tzCode);
         }
@@ -44,7 +44,7 @@ export function timezoneList() {
         }
 
         return 0;
-    })
+    });
 
     return result;
 }

src/util.js

@@ -1,70 +1,104 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isDev = void 0;
-const _dayjs = require("dayjs");
-const dayjs = _dayjs;
-exports.isDev = process.env.NODE_ENV === "development";
-exports.appName = "Uptime Kuma";
-exports.DOWN = 0;
-exports.UP = 1;
-exports.PENDING = 2;
-function flipStatus(s) {
-    if (s === exports.UP) {
-        return exports.DOWN;
-    }
-    if (s === exports.DOWN) {
-        return exports.UP;
-    }
-    return s;
-}
-exports.flipStatus = flipStatus;
-function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-exports.sleep = sleep;
-function ucfirst(str) {
-    if (!str) {
-        return str;
-    }
-    const firstLetter = str.substr(0, 1);
-    return firstLetter.toUpperCase() + str.substr(1);
-}
-exports.ucfirst = ucfirst;
-function debug(msg) {
-    if (exports.isDev) {
-        console.log(msg);
-    }
-}
-exports.debug = debug;
-function polyfill() {
-    if (!String.prototype.replaceAll) {
-        String.prototype.replaceAll = function (str, newStr) {
-            if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
-                return this.replace(str, newStr);
-            }
-            return this.replace(new RegExp(str, "g"), newStr);
-        };
-    }
-}
-exports.polyfill = polyfill;
-class TimeLogger {
-    constructor() {
-        this.startTime = dayjs().valueOf();
-    }
-    print(name) {
-        if (exports.isDev) {
-            console.log(name + ": " + (dayjs().valueOf() - this.startTime) + "ms");
-        }
-    }
-}
-exports.TimeLogger = TimeLogger;
-function getRandomArbitrary(min, max) {
-    return Math.random() * (max - min) + min;
-}
-exports.getRandomArbitrary = getRandomArbitrary;
-function getRandomInt(min, max) {
-    min = Math.ceil(min);
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-exports.getRandomInt = getRandomInt;
+"use strict";
+// Common Util for frontend and backend
+//
+// DOT NOT MODIFY util.js!
+// Need to run "tsc" to compile if there are any changes.
+//
+// Backend uses the compiled file util.js
+// Frontend uses util.ts
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.STATUS_PAGE_PARTIAL_DOWN = exports.STATUS_PAGE_ALL_UP = exports.STATUS_PAGE_ALL_DOWN = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isDev = void 0;
+const _dayjs = require("dayjs");
+const dayjs = _dayjs;
+exports.isDev = process.env.NODE_ENV === "development";
+exports.appName = "Uptime Kuma";
+exports.DOWN = 0;
+exports.UP = 1;
+exports.PENDING = 2;
+exports.STATUS_PAGE_ALL_DOWN = 0;
+exports.STATUS_PAGE_ALL_UP = 1;
+exports.STATUS_PAGE_PARTIAL_DOWN = 2;
+function flipStatus(s) {
+    if (s === exports.UP) {
+        return exports.DOWN;
+    }
+    if (s === exports.DOWN) {
+        return exports.UP;
+    }
+    return s;
+}
+exports.flipStatus = flipStatus;
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+exports.sleep = sleep;
+/**
+ * PHP's ucfirst
+ * @param str
+ */
+function ucfirst(str) {
+    if (!str) {
+        return str;
+    }
+    const firstLetter = str.substr(0, 1);
+    return firstLetter.toUpperCase() + str.substr(1);
+}
+exports.ucfirst = ucfirst;
+function debug(msg) {
+    if (exports.isDev) {
+        console.log(msg);
+    }
+}
+exports.debug = debug;
+function polyfill() {
+    /**
+     * String.prototype.replaceAll() polyfill
+     * https://gomakethings.com/how-to-replace-a-section-of-a-string-with-another-one-with-vanilla-js/
+     * @author Chris Ferdinandi
+     * @license MIT
+     */
+    if (!String.prototype.replaceAll) {
+        String.prototype.replaceAll = function (str, newStr) {
+            // If a regex pattern
+            if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
+                return this.replace(str, newStr);
+            }
+            // If a string
+            return this.replace(new RegExp(str, "g"), newStr);
+        };
+    }
+}
+exports.polyfill = polyfill;
+class TimeLogger {
+    constructor() {
+        this.startTime = dayjs().valueOf();
+    }
+    print(name) {
+        if (exports.isDev) {
+            console.log(name + ": " + (dayjs().valueOf() - this.startTime) + "ms");
+        }
+    }
+}
+exports.TimeLogger = TimeLogger;
+/**
+ * Returns a random number between min (inclusive) and max (exclusive)
+ */
+function getRandomArbitrary(min, max) {
+    return Math.random() * (max - min) + min;
+}
+exports.getRandomArbitrary = getRandomArbitrary;
+/**
+ * From: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
+ *
+ * Returns a random integer between min (inclusive) and max (inclusive).
+ * The value is no lower than min (or the next integer greater than min
+ * if min isn't an integer) and no greater than max (or the next integer
+ * lower than max if max isn't an integer).
+ * Using Math.round() will give you a non-uniform distribution!
+ */
+function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+exports.getRandomInt = getRandomInt;

src/util.ts

@@ -1,7 +1,10 @@
 // Common Util for frontend and backend
+//
+// DOT NOT MODIFY util.js!
+// Need to run "tsc" to compile if there are any changes.
+//
 // Backend uses the compiled file util.js
 // Frontend uses util.ts
-// Need to run "tsc" to compile if there are any changes.
 
 import * as _dayjs from "dayjs";
 const dayjs = _dayjs;
@@ -12,6 +15,11 @@ export const DOWN = 0;
 export const UP = 1;
 export const PENDING = 2;
 
+export const STATUS_PAGE_ALL_DOWN = 0;
+export const STATUS_PAGE_ALL_UP = 1;
+export const STATUS_PAGE_PARTIAL_DOWN = 2;
+
+
 export function flipStatus(s: number) {
     if (s === UP) {
         return DOWN;
@@ -59,7 +67,6 @@ export function polyfill() {
      */
     if (!String.prototype.replaceAll) {
         String.prototype.replaceAll = function (str: string, newStr: string) {
-
             // If a regex pattern
             if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
                 return this.replace(str, newStr);
@@ -67,7 +74,6 @@ export function polyfill() {
 
             // If a string
             return this.replace(new RegExp(str, "g"), newStr);
-
         };
     }
 }