Merge remote-tracking branch 'origin/master' into ntfy-auth-support

src/components/DockerHostDialog.vue

@@ -0,0 +1,177 @@
+<template>
+    <form @submit.prevent="submit">
+        <div ref="modal" class="modal fade" tabindex="-1" data-bs-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 id="exampleModalLabel" class="modal-title">
+                            {{ $t("Setup Docker Host") }}
+                        </h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label for="docker-name" class="form-label">{{ $t("Friendly Name") }}</label>
+                            <input id="docker-name" v-model="dockerHost.name" type="text" class="form-control" required>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="docker-type" class="form-label">{{ $t("Connection Type") }}</label>
+                            <select id="docker-type" v-model="dockerHost.dockerType" class="form-select">
+                                <option v-for="type in connectionTypes" :key="type" :value="type">{{ $t(type) }}</option>
+                            </select>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="docker-daemon" class="form-label">{{ $t("Docker Daemon") }}</label>
+                            <input id="docker-daemon" v-model="dockerHost.dockerDaemon" type="text" class="form-control" required>
+
+                            <div class="form-text">
+                                {{ $t("Examples") }}:
+                                <ul>
+                                    <li>/var/run/docker.sock</li>
+                                    <li>tcp://localhost:2375</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button v-if="id" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
+                            {{ $t("Delete") }}
+                        </button>
+                        <button type="button" class="btn btn-warning" :disabled="processing" @click="test">
+                            {{ $t("Test") }}
+                        </button>
+                        <button type="submit" class="btn btn-primary" :disabled="processing">
+                            <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
+                            {{ $t("Save") }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+
+    <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteDockerHost">
+        {{ $t("deleteDockerHostMsg") }}
+    </Confirm>
+</template>
+
+<script lang="ts">
+import { Modal } from "bootstrap";
+import Confirm from "./Confirm.vue";
+import { useToast } from "vue-toastification";
+const toast = useToast();
+
+export default {
+    components: {
+        Confirm,
+    },
+    props: {},
+    emits: [ "added" ],
+    data() {
+        return {
+            model: null,
+            processing: false,
+            id: null,
+            connectionTypes: [ "socket", "tcp" ],
+            dockerHost: {
+                name: "",
+                dockerDaemon: "",
+                dockerType: "",
+                // Do not set default value here, please scroll to show()
+            }
+        };
+    },
+
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+
+        deleteConfirm() {
+            this.modal.hide();
+            this.$refs.confirmDelete.show();
+        },
+
+        show(dockerHostID) {
+            if (dockerHostID) {
+                let found = false;
+
+                this.id = dockerHostID;
+
+                for (let n of this.$root.dockerHostList) {
+                    if (n.id === dockerHostID) {
+                        this.dockerHost = n;
+                        found = true;
+                        break;
+                    }
+                }
+
+                if (!found) {
+                    toast.error("Docker Host not found!");
+                }
+
+            } else {
+                this.id = null;
+                this.dockerHost = {
+                    name: "",
+                    dockerType: "socket",
+                    dockerDaemon: "/var/run/docker.sock",
+                };
+            }
+
+            this.modal.show();
+        },
+
+        submit() {
+            this.processing = true;
+            this.$root.getSocket().emit("addDockerHost", this.dockerHost, this.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.modal.hide();
+
+                    // Emit added event, doesn't emit edit.
+                    if (! this.id) {
+                        this.$emit("added", res.id);
+                    }
+
+                }
+            });
+        },
+
+        test() {
+            this.processing = true;
+            this.$root.getSocket().emit("testDockerHost", this.dockerHost, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+            });
+        },
+
+        deleteDockerHost() {
+            this.processing = true;
+            this.$root.getSocket().emit("deleteDockerHost", this.id, (res) => {
+                this.$root.toastRes(res);
+                this.processing = false;
+
+                if (res.ok) {
+                    this.modal.hide();
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>

src/components/Login.vue

@@ -54,6 +54,15 @@ export default {
             tokenRequired: false,
         };
     },
+
+    mounted() {
+        document.title += " - Login";
+    },
+
+    unmounted() {
+        document.title = document.title.replace(" - Login", "");
+    },
+
     methods: {
         /** Submit the user details and attempt to log in */
         submit() {

src/components/PublicGroupList.vue

@@ -44,6 +44,7 @@
                                                 :href="monitor.element.url"
                                                 class="item-name"
                                                 target="_blank"
+                                                rel="noopener noreferrer"
                                             >
                                                 {{ monitor.element.name }}
                                             </a>

src/components/notifications/Bark.vue

@@ -2,9 +2,6 @@
     <div class="mb-3">
         <label for="Bark Endpoint" class="form-label">{{ $t("Bark Endpoint") }}<span style="color: red;"><sup>*</sup></span></label>
         <input id="Bark Endpoint" v-model="$parent.notification.barkEndpoint" type="text" class="form-control" required>
-        <div class="form-text">
-            <p><span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}</p>
-        </div>
         <i18n-t tag="div" keypath="wayToGetTeamsURL" class="form-text">
             <a
                 href="https://github.com/Finb/Bark"
@@ -12,4 +9,45 @@
             >{{ $t("here") }}</a>
         </i18n-t>
     </div>
+    <div class="mb-3">
+        <label for="Bark Group" class="form-label">{{ $t("Bark Group") }}</label>
+        <input id="Bark Group" v-model="$parent.notification.barkGroup" type="text" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="Bark Sound" class="form-label">{{ $t("Bark Sound") }}</label>
+        <select id="Bark Sound" v-model="$parent.notification.barkSound" class="form-select" required>
+            <option value="alarm">alarm</option>
+            <option value="anticipate">anticipate</option>
+            <option value="bell">bell</option>
+            <option value="birdsong">birdsong</option>
+            <option value="bloom">bloom</option>
+            <option value="calypso">calypso</option>
+            <option value="chime">chime</option>
+            <option value="choo">choo</option>
+            <option value="descent">descent</option>
+            <option value="electronic">electronic</option>
+            <option value="fanfare">fanfare</option>
+            <option value="glass">glass</option>
+            <option value="gotosleep">gotosleep</option>
+            <option value="healthnotification">healthnotification</option>
+            <option value="horn">horn</option>
+            <option value="ladder">ladder</option>
+            <option value="mailsent">mailsent</option>
+            <option value="minuet">minuet</option>
+            <option value="multiwayinvitation">multiwayinvitation</option>
+            <option value="newmail">newmail</option>
+            <option value="newsflash">newsflash</option>
+            <option value="noir">noir</option>
+            <option value="paymentsuccess">paymentsuccess</option>
+            <option value="shake">shake</option>
+            <option value="sherwoodforest">sherwoodforest</option>
+            <option value="silence">silence</option>
+            <option value="spell">spell</option>
+            <option value="suspense">suspense</option>
+            <option value="telegraph">telegraph</option>
+            <option value="tiptoes">tiptoes</option>
+            <option value="typewriters">typewriters</option>
+            <option value="update">update</option>
+        </select>
+    </div>
 </template>

src/components/notifications/GoAlert.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="mb-3">
+        <label for="goalert-base-url" class="form-label">{{ $t("Base URL") }}</label>
+        <div class="input-group mb-3">
+            <input id="goalert-base-url" v-model="$parent.notification.goAlertBaseURL" type="text" class="form-control" required>
+        </div>
+        <i18n-t tag="div" keypath="goAlertInfo" class="form-text">
+            <a href="https://goalert.me" target="_blank">https://goalert.me</a>
+        </i18n-t>
+    </div>
+
+    <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>
+
+        <div class="form-text">
+            {{ $t("goAlertIntegrationKeyInfo") }}
+        </div>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/HomeAssistant.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="mb-3">
+        <label for="homeAssistantUrl" class="form-label">{{ $t("Home Assistant URL") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="homeAssistantUrl" v-model="$parent.notification.homeAssistantUrl" type="url" class="form-control" required>
+    </div>
+
+    <div class="mb-3">
+        <label for="longLivedAccessToken" class="form-label">{{ $t("Long-Lived Access Token") }}<span style="color: red;"><sup>*</sup></span></label>
+        <input id="longLivedAccessToken" v-model="$parent.notification.longLivedAccessToken" type="text" class="form-control" required>
+
+        <div class="form-text">
+            <p>{{ $t("Long-Lived Access Token can be created by clicking on your profile name (bottom left) and scrolling to the bottom then click Create Token. ") }}</p>
+        </div>
+    </div>
+
+    <div class="mb-3">
+        <label for="notificationService" class="form-label">{{ $t("Notification Service") }}</label>
+        <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("Automations can optionally be triggered in Home Assistant:") }}</p>
+            <p>
+                {{ $t("Trigger type:") }} <code>Event</code><br />
+                {{ $t("Event type:") }} <code>call_service</code><br />
+                {{ $t("Event data:") }}
+            </p>
+            <pre>domain: notify
+service: mobile_app_my_phone # change to your device name
+service_data:
+  title: Uptime Kuma
+  data:
+    status: 0 # 0=down 1=up
+    # name: Optional Uptime Kuma Monitor Name to filter by</pre>
+            <p>
+                {{ $t("Then choose an action, for example switch the scene to where an RGB light is red.") }}
+            </p>
+        </div>
+    </div>
+</template>

src/components/notifications/LineNotify.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="mb-3">
+        <label for="line-notify-access-token" class="form-label">{{ $t("Access Token") }}</label>
+        <input id="line-notify-access-token" v-model="$parent.notification.lineNotifyAccessToken" type="text" class="form-control" :required="true">
+    </div>
+    <i18n-t tag="div" keypath="wayToGetLineNotifyToken" class="form-text" style="margin-top: 8px;">
+        <a href="https://notify-bot.line.me/" target="_blank">https://notify-bot.line.me/</a>
+    </i18n-t>
+</template>

src/components/notifications/SMSManager.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="mb-3">
+        <label for="smsmanager-key" class="form-label">API Key</label>
+        <div class="form-text">
+            {{ $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">
+    </div>
+    <div class="mb-3">
+        <label for="smsmanager-numbers" class="form-label"> {{ $t("Recipients") }}</label>
+        <div class="form-text">
+            {{ $t("You can divide numbers with") }} <b>,</b> {{ $t("or") }} <b>;</b>
+        </div>
+        <input id="smsmanager-numbers" v-model="$parent.notification.numbers" type="text" class="form-control">
+    </div>
+    <div class="mb-3">
+        <label for="smsmanager-messageType" class="form-label">{{ $t("Gateway Type") }}</label>
+        <select id="smsmanager-messageType" v-model="$parent.notification.messageType" class="form-select">
+            <option value="economy">Economy</option>
+            <option value="lowcost">Lowcost</option>
+            <option value="high" selected>High</option>
+        </select>
+    </div>
+    <div class="mb-3">
+        <div class="form-text">
+            {{ $t("checkPrice", [$t("SMSManager")]) }}
+            <a href="https://smsmanager.cz/rozesilani-sms/ceny/ceska-republika/" target="_blank">{{ $t("here") }}</a>
+        </div>
+    </div>
+</template>

src/components/notifications/ServerChan.vue

@@ -0,0 +1,16 @@
+<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>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/index.js

@@ -10,7 +10,9 @@ import Feishu from "./Feishu.vue";
 import GoogleChat from "./GoogleChat.vue";
 import Gorush from "./Gorush.vue";
 import Gotify from "./Gotify.vue";
+import HomeAssistant from "./HomeAssistant.vue";
 import Line from "./Line.vue";
+import LineNotify from "./LineNotify.vue";
 import LunaSea from "./LunaSea.vue";
 import Matrix from "./Matrix.vue";
 import Mattermost from "./Mattermost.vue";
@@ -24,8 +26,10 @@ import PushDeer from "./PushDeer.vue";
 import Pushover from "./Pushover.vue";
 import Pushy from "./Pushy.vue";
 import RocketChat from "./RocketChat.vue";
+import ServerChan from "./ServerChan.vue";
 import SerwerSMS from "./SerwerSMS.vue";
 import Signal from "./Signal.vue";
+import SMSManager from "./SMSManager.vue";
 import Slack from "./Slack.vue";
 import Stackfield from "./Stackfield.vue";
 import STMP from "./SMTP.vue";
@@ -34,6 +38,7 @@ import TechulusPush from "./TechulusPush.vue";
 import Telegram from "./Telegram.vue";
 import Webhook from "./Webhook.vue";
 import WeCom from "./WeCom.vue";
+import GoAlert from "./GoAlert.vue";
 
 /**
  * Manage all notification form.
@@ -53,7 +58,9 @@ const NotificationFormList = {
     "GoogleChat": GoogleChat,
     "gorush": Gorush,
     "gotify": Gotify,
+    "HomeAssistant": HomeAssistant,
     "line": Line,
+    "LineNotify": LineNotify,
     "lunasea": LunaSea,
     "matrix": Matrix,
     "mattermost": Mattermost,
@@ -70,6 +77,7 @@ const NotificationFormList = {
     "rocket.chat": RocketChat,
     "serwersms": SerwerSMS,
     "signal": Signal,
+    "SMSManager": SMSManager,
     "slack": Slack,
     "smtp": STMP,
     "stackfield": Stackfield,
@@ -77,6 +85,8 @@ const NotificationFormList = {
     "telegram": Telegram,
     "webhook": Webhook,
     "WeCom": WeCom,
+    "GoAlert": GoAlert,
+    "ServerChan": ServerChan,
 };
 
 export default NotificationFormList;

src/components/settings/Backup.vue

@@ -1,6 +1,12 @@
 <template>
     <div>
         <div class="my-4">
+            <div class="alert alert-warning" role="alert" style="border-radius: 15px;">
+                {{ $t("backupOutdatedWarning") }}<br />
+                <br />
+                {{ $t("backupRecommend") }}
+            </div>
+
             <h4 class="mt-4 mb-2">{{ $t("Export Backup") }}</h4>
 
             <p>

src/components/settings/Docker.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <div class="dockerHost-list my-4">
+            <p v-if="$root.dockerHostList.length === 0">
+                {{ $t("Not available, please setup.") }}
+            </p>
+
+            <ul class="list-group mb-3" style="border-radius: 1rem;">
+                <li v-for="(dockerHost, index) in $root.dockerHostList" :key="index" class="list-group-item">
+                    {{ dockerHost.name }}<br>
+                    <a href="#" @click="$refs.dockerHostDialog.show(dockerHost.id)">{{ $t("Edit") }}</a>
+                </li>
+            </ul>
+
+            <button class="btn btn-primary me-2" type="button" @click="$refs.dockerHostDialog.show()">
+                {{ $t("Setup Docker Host") }}
+            </button>
+        </div>
+
+        <DockerHostDialog ref="dockerHostDialog" />
+    </div>
+</template>
+
+<script>
+import DockerHostDialog from "../../components/DockerHostDialog.vue";
+
+export default {
+    components: {
+        DockerHostDialog,
+    },
+
+    data() {
+        return {};
+    },
+
+    computed: {
+        settings() {
+            return this.$parent.$parent.$parent.settings;
+        },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
+    }
+};
+</script>

src/components/settings/ReverseProxy.vue

@@ -91,6 +91,51 @@
             {{ $t("For example: nginx, Apache and Traefik.") }} <br />
             {{ $t("Please read") }} <a href="https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy" target="_blank">https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy</a>.
         </div>
+
+        <h4 class="my-4">{{ $t("HTTP Headers") }}</h4>
+        <div class="my-3">
+            <label class="form-label">
+                {{ $t("Trust Proxy") }}
+            </label>
+            <div class="form-check">
+                <input
+                    id="trustProxyYes"
+                    v-model="settings.trustProxy"
+                    class="form-check-input"
+                    type="radio"
+                    name="trustProxyYes"
+                    :value="true"
+                    required
+                />
+                <label class="form-check-label" for="trustProxyYes">
+                    {{ $t("Yes") }}
+                </label>
+            </div>
+            <div class="form-check">
+                <input
+                    id="trustProxyNo"
+                    v-model="settings.trustProxy"
+                    class="form-check-input"
+                    type="radio"
+                    name="flexRadioDefault"
+                    :value="false"
+                    required
+                />
+                <label class="form-check-label" for="trustProxyNo">
+                    {{ $t("No") }}
+                </label>
+            </div>
+
+            <div class="form-text">
+                {{ $t("trustProxyDescription") }}
+            </div>
+        </div>
+
+        <div>
+            <button class="btn btn-primary" type="submit" @click="saveSettings()">
+                {{ $t("Save") }}
+            </button>
+        </div>
     </div>
 </template>
 
@@ -113,6 +158,12 @@ export default {
         settings() {
             return this.$parent.$parent.$parent.settings;
         },
+        saveSettings() {
+            return this.$parent.$parent.$parent.saveSettings;
+        },
+        settingsLoaded() {
+            return this.$parent.$parent.$parent.settingsLoaded;
+        },
     },
     watch: {