Merge branch 'louislam:master' into feat/add-auth-header-to-webhook-notification-#1919

2025-08-21 11:35:15 +08:00 · 2022-11-14 20:17:36 +01:00
parent b879428a03 cb4e512dc6
commit 258ff56962
87 changed files with 6942 additions and 2464 deletions
--- a/src/components/Datetime.vue
+++ b/src/components/Datetime.vue
@@ -3,14 +3,6 @@
 </template>

 <script>
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import timezone from "dayjs/plugin/timezone"; // dependent on utc plugin
-import utc from "dayjs/plugin/utc";
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(relativeTime);
-
 export default {
    props: {
        /** Value of date time */
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -5,7 +5,7 @@
                v-for="(beat, index) in shortBeatList"
                :key="index"
                class="beat"
-                :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }"
+                :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2), 'maintenance' : (beat.status === 3) }"
                :style="beatStyle"
                :title="getBeatTitle(beat)"
            />
@@ -211,6 +211,10 @@ export default {
            background-color: $warning;
        }

+        &.maintenance {
+            background-color: $maintenance;
+        }
+
        &:not(.empty):hover {
            transition: all ease-in-out 0.15s;
            opacity: 0.8;
--- a/src/components/HiddenInput.vue
+++ b/src/components/HiddenInput.vue
@@ -42,7 +42,7 @@ export default {
        /** Should the field auto complete */
        autocomplete: {
            type: String,
-            default: undefined,
+            default: "new-password",
        },
        /** Is the input required? */
        required: {
--- a/src/components/MaintenanceTime.vue
+++ b/src/components/MaintenanceTime.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div v-if="maintenance.strategy === 'manual'" class="timeslot">
+            {{ $t("Manual") }}
+        </div>
+        <div v-else-if="maintenance.timeslotList.length > 0" class="timeslot">
+            {{ maintenance.timeslotList[0].startDateServerTimezone }}
+            <span class="to">-</span>
+            {{ maintenance.timeslotList[0].endDateServerTimezone }}
+            (UTC{{ maintenance.timeslotList[0].serverTimezoneOffset }})
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        maintenance: {
+            type: Object,
+            required: true
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.timeslot {
+    margin-top: 5px;
+    display: inline-block;
+    font-size: 14px;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 20px;
+    padding: 0 10px;
+
+    .to {
+        margin: 0 6px;
+    }
+
+    .dark & {
+        color: white;
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+</style>
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -16,18 +16,14 @@
    </div>
 </template>

-<script lang="ts">
+<script lang="js">
 import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
 import "chartjs-adapter-dayjs";
 import dayjs from "dayjs";
-import timezone from "dayjs/plugin/timezone";
-import utc from "dayjs/plugin/utc";
 import { LineChart } from "vue-chart-3";
 import { useToast } from "vue-toastification";
-import { DOWN, log } from "../util.ts";
+import { DOWN, PENDING, MAINTENANCE, log } from "../util.ts";

-dayjs.extend(utc);
-dayjs.extend(timezone);
 const toast = useToast();

 Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
@@ -163,7 +159,8 @@ export default {
        },
        chartData() {
            let pingData = [];  // Ping Data for Line Chart, y-axis contains ping time
-            let downData = [];  // Down Data for Bar Chart, y-axis is 1 if target is down, 0 if target is up
+            let downData = [];  // Down Data for Bar Chart, y-axis is 1 if target is down (red color), under maintenance (blue color) or pending (orange color), 0 if target is up
+            let colorData = []; // Color Data for Bar Chart

            let heartbeatList = this.heartbeatList ||
             (this.monitorId in this.$root.heartbeatList && this.$root.heartbeatList[this.monitorId]) ||
@@ -185,8 +182,9 @@ export default {
                    });
                    downData.push({
                        x,
-                        y: beat.status === DOWN ? 1 : 0,
+                        y: (beat.status === DOWN || beat.status === MAINTENANCE || beat.status === PENDING) ? 1 : 0,
                    });
+                    colorData.push((beat.status === MAINTENANCE) ? "rgba(23,71,245,0.41)" : ((beat.status === PENDING) ? "rgba(245,182,23,0.41)" : "#DC354568"));
                });

            return {
@@ -205,7 +203,7 @@ export default {
                        type: "bar",
                        data: downData,
                        borderColor: "#00000000",
-                        backgroundColor: "#DC354568",
+                        backgroundColor: colorData,
                        yAxisID: "y1",
                        barThickness: "flex",
                        barPercentage: 1,
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -225,4 +225,8 @@ export default {
    }
 }

+.bg-maintenance {
+    background-color: $maintenance;
+}
+
 </style>
--- a/src/components/Status.vue
+++ b/src/components/Status.vue
@@ -26,6 +26,10 @@ export default {
                return "warning";
            }

+            if (this.status === 3) {
+                return "maintenance";
+            }
+
            return "secondary";
        },

@@ -42,6 +46,10 @@ export default {
                return this.$t("Pending");
            }

+            if (this.status === 3) {
+                return this.$t("statusMaintenance");
+            }
+
            return this.$t("Unknown");
        },
    },
--- a/src/components/Uptime.vue
+++ b/src/components/Uptime.vue
@@ -25,6 +25,10 @@ export default {
    computed: {
        uptime() {

+            if (this.type === "maintenance") {
+                return this.$t("statusMaintenance");
+            }
+
            let key = this.monitor.id + "_" + this.type;

            if (this.$root.uptimeList[key] !== undefined) {
@@ -35,6 +39,10 @@ export default {
        },

        color() {
+            if (this.type === "maintenance" || this.monitor.maintenance) {
+                return "maintenance";
+            }
+
            if (this.lastHeartBeat.status === 0) {
                return "danger";
            }
--- a/src/components/notifications/ClickSendSMS.vue
+++ b/src/components/notifications/ClickSendSMS.vue
@@ -6,7 +6,7 @@
        </i18n-t>
        <input id="clicksendsms-login" v-model="$parent.notification.clicksendsmsLogin" type="text" class="form-control" required>
        <label for="clicksendsms-key" class="form-label">{{ $t("API Key") }}</label>
-        <HiddenInput id="clicksendsms-key" v-model="$parent.notification.clicksendsmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="clicksendsms-key" v-model="$parent.notification.clicksendsmsPassword" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <div class="mb-3">
        <div class="form-text">
--- a/src/components/notifications/GoAlert.vue
+++ b/src/components/notifications/GoAlert.vue
@@ -11,7 +11,7 @@

    <div class="mb-3">
        <label for="goalert-token" class="form-label">{{ $t("Token") }}</label>
-        <HiddenInput id="goalert-token" v-model="$parent.notification.goAlertToken" autocomplete="one-time-code" :required="true"></HiddenInput>
+        <HiddenInput id="goalert-token" v-model="$parent.notification.goAlertToken" autocomplete="new-password" :required="true"></HiddenInput>

        <div class="form-text">
            {{ $t("goAlertIntegrationKeyInfo") }}
--- a/src/components/notifications/Gotify.vue
+++ b/src/components/notifications/Gotify.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="mb-3">
        <label for="gotify-application-token" class="form-label">{{ $t("Application Token") }}</label>
-        <HiddenInput id="gotify-application-token" v-model="$parent.notification.gotifyapplicationToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="gotify-application-token" v-model="$parent.notification.gotifyapplicationToken" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="gotify-server-url" class="form-label">{{ $t("Server URL") }}</label>
--- a/src/components/notifications/HomeAssistant.vue
+++ b/src/components/notifications/HomeAssistant.vue
@@ -18,7 +18,7 @@
        <input id="notificationService" v-model="$parent.notification.notificationService" type="text" :placeholder="$t('default: notify all devices')" class="form-control">

        <div class="form-text">
-            <p>{{ $t("A list of Notification Services can be found in Home Assistant under \"Developer Tools > Services\" search for \"notification\" to find your device/phone name.") }}</p>
+            <p>{{ $t('A list of Notification Services can be found in Home Assistant under "Developer Tools > Services" search for "notification" to find your device/phone name.') }}</p>
            <p>{{ $t("Automations can optionally be triggered in Home Assistant:") }}</p>
            <p>
                {{ $t("Trigger type:") }} <code>Event</code><br />
--- a/src/components/notifications/Line.vue
+++ b/src/components/notifications/Line.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="mb-3">
        <label for="line-channel-access-token" class="form-label">{{ $t("Channel access token") }}</label>
-        <HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="line-channel-access-token" v-model="$parent.notification.lineChannelAccessToken" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <i18n-t tag="div" keypath="lineDevConsoleTo" class="form-text">
        <b>{{ $t("Basic Settings") }}</b>
--- a/src/components/notifications/Matrix.vue
+++ b/src/components/notifications/Matrix.vue
@@ -9,7 +9,7 @@
    </div>
    <div class="mb-3">
        <label for="access-token" class="form-label">{{ $t("Access Token") }}</label><span style="color: red;"><sup>*</sup></span>
-        <HiddenInput id="access-token" v-model="$parent.notification.accessToken" :required="true" autocomplete="one-time-code" :maxlength="500"></HiddenInput>
+        <HiddenInput id="access-token" v-model="$parent.notification.accessToken" :required="true" autocomplete="new-password" :maxlength="500"></HiddenInput>
    </div>

    <div class="form-text">
--- a/src/components/notifications/Ntfy.vue
+++ b/src/components/notifications/Ntfy.vue
@@ -18,7 +18,7 @@
    <div class="mb-3">
        <label for="ntfy-username" class="form-label">{{ $t("Username") }} ({{ $t("Optional") }})</label>
        <div class="input-group mb-3">
-            <input id="ntfy-username" v-model="$parent.notification.ntfyusername" type="text" class="form-control" required>
+            <input id="ntfy-username" v-model="$parent.notification.ntfyusername" type="text" class="form-control">
        </div>
    </div>
    <div class="mb-3">
@@ -27,6 +27,10 @@
            <HiddenInput id="ntfy-password" v-model="$parent.notification.ntfypassword" autocomplete="new-password"></HiddenInput>
        </div>
    </div>
+    <div class="mb-3">
+        <label for="ntfy-icon" class="form-label">{{ $t("IconUrl") }}</label>
+        <input id="ntfy-icon" v-model="$parent.notification.ntfyIcon" type="text" class="form-control">
+    </div>
 </template>

 <script>
--- a/src/components/notifications/Octopush.vue
+++ b/src/components/notifications/Octopush.vue
@@ -11,7 +11,7 @@
    </div>
    <div class="mb-3">
        <label for="octopush-key" class="form-label">{{ $t("octopushAPIKey") }}</label>
-        <HiddenInput id="octopush-key" v-model="$parent.notification.octopushAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="octopush-key" v-model="$parent.notification.octopushAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
        <label for="octopush-login" class="form-label">{{ $t("octopushLogin") }}</label>
        <input id="octopush-login" v-model="$parent.notification.octopushLogin" type="text" class="form-control" required>
    </div>
--- a/src/components/notifications/PromoSMS.vue
+++ b/src/components/notifications/PromoSMS.vue
@@ -3,7 +3,7 @@
        <label for="promosms-login" class="form-label">{{ $t("promosmsLogin") }}</label>
        <input id="promosms-login" v-model="$parent.notification.promosmsLogin" type="text" class="form-control" required>
        <label for="promosms-key" class="form-label">{{ $t("promosmsPassword") }}</label>
-        <HiddenInput id="promosms-key" v-model="$parent.notification.promosmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="promosms-key" v-model="$parent.notification.promosmsPassword" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="promosms-type-sms" class="form-label">{{ $t("SMS Type") }}</label>
--- a/src/components/notifications/PushDeer.vue
+++ b/src/components/notifications/PushDeer.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="mb-3">
        <label for="pushdeer-key" class="form-label">{{ $t("PushDeer Key") }}</label>
-        <HiddenInput id="pushdeer-key" v-model="$parent.notification.pushdeerKey" :required="true" autocomplete="one-time-code" placeholder="PDUxxxx"></HiddenInput>
+        <HiddenInput id="pushdeer-key" v-model="$parent.notification.pushdeerKey" :required="true" autocomplete="new-password" placeholder="PDUxxxx"></HiddenInput>
    </div>

    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
--- a/src/components/notifications/Pushbullet.vue
+++ b/src/components/notifications/Pushbullet.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="mb-3">
        <label for="pushbullet-access-token" class="form-label">{{ $t("Access Token") }}</label>
-        <HiddenInput id="pushbullet-access-token" v-model="$parent.notification.pushbulletAccessToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="pushbullet-access-token" v-model="$parent.notification.pushbulletAccessToken" :required="true" autocomplete="new-password"></HiddenInput>
    </div>

    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
--- a/src/components/notifications/Pushover.vue
+++ b/src/components/notifications/Pushover.vue
@@ -1,9 +1,9 @@
 <template>
    <div class="mb-3">
        <label for="pushover-user" class="form-label">{{ $t("User Key") }}<span style="color: red;"><sup>*</sup></span></label>
-        <HiddenInput id="pushover-user" v-model="$parent.notification.pushoveruserkey" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="pushover-user" v-model="$parent.notification.pushoveruserkey" :required="true" autocomplete="new-password"></HiddenInput>
        <label for="pushover-app-token" class="form-label">{{ $t("Application Token") }}<span style="color: red;"><sup>*</sup></span></label>
-        <HiddenInput id="pushover-app-token" v-model="$parent.notification.pushoverapptoken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="pushover-app-token" v-model="$parent.notification.pushoverapptoken" :required="true" autocomplete="new-password"></HiddenInput>
        <label for="pushover-device" class="form-label">{{ $t("Device") }}</label>
        <input id="pushover-device" v-model="$parent.notification.pushoverdevice" type="text" class="form-control">
        <label for="pushover-device" class="form-label">{{ $t("Message Title") }}</label>
--- a/src/components/notifications/Pushy.vue
+++ b/src/components/notifications/Pushy.vue
@@ -1,13 +1,13 @@
 <template>
    <div class="mb-3">
        <label for="pushy-app-token" class="form-label">{{ $t("pushyAPIKey") }}</label>
-        <HiddenInput id="pushy-app-token" v-model="$parent.notification.pushyAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="pushy-app-token" v-model="$parent.notification.pushyAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
    </div>

    <div class="mb-3">
        <label for="pushy-user-key" class="form-label">{{ $t("pushyToken") }}</label>
        <div class="input-group mb-3">
-            <HiddenInput id="pushy-user-key" v-model="$parent.notification.pushyToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+            <HiddenInput id="pushy-user-key" v-model="$parent.notification.pushyToken" :required="true" autocomplete="new-password"></HiddenInput>
        </div>
    </div>
    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
--- a/src/components/notifications/SMSEagle.vue
+++ b/src/components/notifications/SMSEagle.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="mb-3">
+        <label for="smseagle-url" class="form-label">{{ $t("smseagleUrl") }}</label>
+        <input id="smseagle-url" v-model="$parent.notification.smseagleUrl" type="text" minlength="7" class="form-control" placeholder="http://127.0.0.1" required>
+    </div>
+    <div class="mb-3">
+        <label for="smseagle-token" class="form-label">{{ $t("smseagleToken") }}</label>
+        <HiddenInput id="smseagle-token" v-model="$parent.notification.smseagleToken" :required="true"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <label for="smseagle-recipient-type" class="form-label">{{ $t("smseagleRecipientType") }}</label>
+        <select id="smseagle-recipient-type" v-model="$parent.notification.smseagleRecipientType" class="form-select">
+            <option value="smseagle-to" selected>{{ $t("smseagleTo") }}</option>
+            <option value="smseagle-group">{{ $t("smseagleGroup") }}</option>
+            <option value="smseagle-contact">{{ $t("smseagleContact") }}</option>
+        </select>
+    </div>
+    <div class="mb-3">
+        <label for="smseagle-recipient" class="form-label">{{ $t("smseagleRecipient") }}</label>
+        <input id="smseagle-recipient" v-model="$parent.notification.smseagleRecipient" type="text" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="smseagle-priority" class="form-label">{{ $t("smseaglePriority") }}</label>
+        <input id="smseagle-priority" v-model="$parent.notification.smseaglePriority" type="number" class="form-control" min="0" max="9" step="1" placeholder="0">
+    </div>
+    <div class="mb-3 form-check form-switch">
+        <label for="smseagle-encoding" class="form-label">{{ $t("smseagleEncoding") }}</label>
+        <input id="smseagle-encoding" v-model="$parent.notification.smseagleEncoding" type="checkbox" class="form-check-input">
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>
--- a/src/components/notifications/SMSManager.vue
+++ b/src/components/notifications/SMSManager.vue
@@ -2,7 +2,7 @@
    <div class="mb-3">
        <label for="smsmanager-key" class="form-label">API Key</label>
        <div class="form-text">
-            {{ $t("SMSManager API Docs ") }}
+            {{ $t("SMSManager API Docs") }}
            <a href="https://smsmanager.cz/api/http#send" target="_blank">{{ $t("here") }}</a>
        </div>
        <input id="smsmanager-key" v-model="$parent.notification.smsmanagerApiKey" type="text" class="form-control">
--- a/src/components/notifications/SMTP.vue
+++ b/src/components/notifications/SMTP.vue
@@ -34,7 +34,7 @@

        <div class="mb-3">
            <label for="password" class="form-label">{{ $t("Password") }}</label>
-            <HiddenInput id="password" v-model="$parent.notification.smtpPassword" :required="false" autocomplete="one-time-code"></HiddenInput>
+            <HiddenInput id="password" v-model="$parent.notification.smtpPassword" :required="false" autocomplete="new-password"></HiddenInput>
        </div>

        <div class="mb-3">
--- a/src/components/notifications/ServerChan.vue
+++ b/src/components/notifications/ServerChan.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="mb-3">
        <label for="serverchan-sendkey" class="form-label">{{ $t("SendKey") }}</label>
-        <HiddenInput id="serverchan-sendkey" v-model="$parent.notification.serverChanSendKey" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="serverchan-sendkey" v-model="$parent.notification.serverChanSendKey" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
 </template>

--- a/src/components/notifications/SerwerSMS.vue
+++ b/src/components/notifications/SerwerSMS.vue
@@ -5,7 +5,7 @@
    </div>
    <div class="mb-3">
        <label for="serwersms-key" class="form-label">{{ $t('serwersmsAPIPassword') }}</label>
-        <HiddenInput id="serwersms-key" v-model="$parent.notification.serwersmsPassword" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="serwersms-key" v-model="$parent.notification.serwersmsPassword" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="serwersms-phone-number" class="form-label">{{ $t("serwersmsPhoneNumber") }}</label>
--- a/src/components/notifications/TechulusPush.vue
+++ b/src/components/notifications/TechulusPush.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="mb-3">
        <label for="push-api-key" class="form-label">{{ $t("API Key") }}</label>
-        <HiddenInput id="push-api-key" v-model="$parent.notification.pushAPIKey" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="push-api-key" v-model="$parent.notification.pushAPIKey" :required="true" autocomplete="new-password"></HiddenInput>
    </div>

    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
--- a/src/components/notifications/Telegram.vue
+++ b/src/components/notifications/Telegram.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="mb-3">
        <label for="telegram-bot-token" class="form-label">{{ $t("Bot Token") }}</label>
-        <HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+        <HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="new-password"></HiddenInput>
        <i18n-t tag="div" keypath="wayToGetTelegramToken" class="form-text">
            <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>
        </i18n-t>
--- a/src/components/notifications/index.js
+++ b/src/components/notifications/index.js
@@ -33,6 +33,7 @@ import Signal from "./Signal.vue";
 import SMSManager from "./SMSManager.vue";
 import Slack from "./Slack.vue";
 import Squadcast from "./Squadcast.vue";
+import SMSEagle from "./SMSEagle.vue";
 import Stackfield from "./Stackfield.vue";
 import STMP from "./SMTP.vue";
 import Teams from "./Teams.vue";
@@ -83,6 +84,7 @@ const NotificationFormList = {
    "SMSManager": SMSManager,
    "slack": Slack,
    "squadcast": Squadcast,
+    "SMSEagle": SMSEagle,
    "smtp": STMP,
    "stackfield": Stackfield,
    "teams": Teams,
--- a/src/components/settings/General.vue
+++ b/src/components/settings/General.vue
@@ -1,10 +1,10 @@
 <template>
    <div>
-        <form class="my-4" @submit.prevent="saveGeneral">
-            <!-- Timezone -->
+        <form class="my-4" autocomplete="off" @submit.prevent="saveGeneral">
+            <!-- Client side Timezone -->
            <div class="mb-4">
                <label for="timezone" class="form-label">
-                    {{ $t("Timezone") }}
+                    {{ $t("Display Timezone") }}
                </label>
                <select id="timezone" v-model="$root.userTimezone" class="form-select">
                    <option value="auto">
@@ -20,6 +20,23 @@
                </select>
            </div>

+            <!-- Server Timezone -->
+            <div class="mb-4">
+                <label for="timezone" class="form-label">
+                    {{ $t("Server Timezone") }}
+                </label>
+                <select id="timezone" v-model="settings.serverTimezone" class="form-select">
+                    <option value="UTC">UTC</option>
+                    <option
+                        v-for="(timezone, index) in timezoneList"
+                        :key="index"
+                        :value="timezone.value"
+                    >
+                        {{ timezone.name }}
+                    </option>
+                </select>
+            </div>
+
            <!-- Search Engine -->
            <div class="mb-4">
                <label class="form-label">
@@ -105,6 +122,7 @@
                        name="primaryBaseURL"
                        placeholder="https://"
                        pattern="https?://.+"
+                        autocomplete="new-password"
                    />
                    <button class="btn btn-outline-primary" type="button" @click="autoGetPrimaryBaseURL">
                        {{ $t("Auto Get") }}
@@ -122,7 +140,7 @@
                <HiddenInput
                    id="steamAPIKey"
                    v-model="settings.steamAPIKey"
-                    autocomplete="one-time-code"
+                    autocomplete="new-password"
                />
                <div class="form-text">
                    {{ $t("steamApiKeyDescription") }}
@@ -145,11 +163,7 @@
 <script>
 import HiddenInput from "../../components/HiddenInput.vue";
 import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
 import { timezoneList } from "../../util-frontend";
-dayjs.extend(utc);
-dayjs.extend(timezone);

 export default {
    components: {
--- a/src/components/settings/ReverseProxy.vue
+++ b/src/components/settings/ReverseProxy.vue
@@ -41,7 +41,7 @@
                <HiddenInput
                    id="cloudflareTunnelToken"
                    v-model="cloudflareTunnelToken"
-                    autocomplete="one-time-code"
+                    autocomplete="new-password"
                    :readonly="running"
                />
                <div class="form-text">