Repository: louislam/uptime-kuma
File: src/components/notifications/NextcloudTalk.vue (Vue)

Code before:
<template>
    <div class="mb-3">
        <label for="nextcloud-host" class="form-label">{{ $t("Nextcloud host") }}<span style="color: red;"><sup>*</sup></span></label>
        <input id="nextcloud-host" v-model="$parent.notification.host" type="text" class="form-control">

        <label for="nextcloud-conversation-token" class="form-label">{{ $t("Conversation token") }}<span style="color: red;"><sup>*</sup></span></label>
        <input id="nextcloud-conversation-token" v-model="$parent.notification.conversationtoken" type="text" class="form-control">

        <label for="nextcloud-bot-secret" class="form-label">{{ $t("Bot secret") }}<span style="color: red;"><sup>*</sup></span></label>
        <HiddenInput id="nextcloud-bot-secret" v-model="$parent.notification.botsecret" :required="true" autocomplete="new-password"></HiddenInput>

        <div class="mb-3">
            <div class="form-check form-switch">
                <input v-model="$parent.notification.sendsilentup" class="form-check-input" type="checkbox">
                <label class="form-check-label">{{ $t("Send UP silently") }}</label>
            </div>
        </div>

        <div class="mb-3">
            <div class="form-check form-switch">
                <input v-model="$parent.notification.sendsilentdown" class="form-check-input" type="checkbox">
                <label class="form-check-label">{{ $t("Send DOWN silently") }}</label>
            </div>
        </div>
    </div>
</template>

<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {

Review comment (security):
Could you use `HiddenInput` for passwords instead?

Tokens are usually secret, or is this not a secret?

Code after:
<template>
    <div class="mb-3">
        <div class="mb-3">
            <label for="nextcloud-host" class="form-label">{{ $t("Nextcloud host") }}<span style="color: red;"><sup>*</sup></span></label>
            <input id="nextcloud-host" v-model="$parent.notification.host" type="text" class="form-control">
        </div>

        <div class="mb-3">
            <label for="nextcloud-conversation-token" class="form-label">{{ $t("Conversation token") }}<span style="color: red;"><sup>*</sup></span></label>
            <input id="nextcloud-conversation-token" v-model="$parent.notification.conversationToken" type="text" class="form-control">
        </div>

        <div class="mb-3">
            <label for="nextcloud-bot-secret" class="form-label">{{ $t("Bot secret") }}<span style="color: red;"><sup>*</sup></span></label>
            <HiddenInput id="nextcloud-bot-secret" v-model="$parent.notification.botSecret" :required="true" autocomplete="new-password"></HiddenInput>
        </div>

        <div class="mb-3">
            <div class="form-check form-switch">
                <input v-model="$parent.notification.sendSilentUp" class="form-check-input" type="checkbox">
                <label class="form-check-label">{{ $t("Send UP silently") }}</label>
            </div>
        </div>

        <div class="mb-3">
            <div class="form-check form-switch">
                <input v-model="$parent.notification.sendSilentDown" class="form-check-input" type="checkbox">
                <label class="form-check-label">{{ $t("Send DOWN silently") }}</label>
            </div>
        </div>

        <div class="mb-3">