Repository: louislam/uptime-kuma
File: src/pages/EditMonitor.vue (Vue)

Code before:
                            <!-- MQTT -->
                            <!-- For MQTT Type -->
                            <template v-if="monitor.type === 'mqtt'">
                                <div class="my-3">
                                    <label for="mqttUsername" class="form-label">MQTT {{ $t("Username") }}</label>
                                    <input id="mqttUsername" v-model="monitor.mqttUsername" type="text" class="form-control">
                                </div>

                                <div class="my-3">
                                    <label for="mqttPassword" class="form-label">MQTT {{ $t("Password") }}</label>
                                    <input id="mqttPassword" v-model="monitor.mqttPassword" type="password" class="form-control">
                                </div>

                                <div class="my-3">
                                    <label for="mqttTopic" class="form-label">MQTT {{ $t("Topic") }}</label>
                                    <input id="mqttTopic" v-model="monitor.mqttTopic" type="text" class="form-control" required>
                                    <div class="form-text">
                                        {{ $t("topicExplanation") }}
                                    </div>
                                </div>

                                <div class="my-3">
                                    <label for="mqttWebsocketPath" class="form-label">Websocket {{ $t("Path") }}</label>
                                    <input id="mqttWebsocketPath" v-model="monitor.mqttWebsocketPath" type="text" class="form-control">
                                    <div class="form-text">
                                        {{ $t("mqttWebsocketPathExplanation") }}
                                    </div>
                                </div>

                                <div class="my-3">
                                    <label for="mqttCheckType" class="form-label">MQTT {{ $t("Check Type") }}</label>
                                    <select id="mqttCheckType" v-model="monitor.mqttCheckType" class="form-select" required>
                                        <option value="keyword">{{ $t("Keyword") }}</option>
                                        <option value="json-query">{{ $t("Json Query") }}</option>
                                    </select>
                                </div>

                                <div v-if="monitor.mqttCheckType === 'keyword'" class="my-3">
                                    <label for="mqttSuccessKeyword" class="form-label">MQTT {{ $t("successKeyword") }}</label>
                                    <input id="mqttSuccessKeyword" v-model="monitor.mqttSuccessMessage" type="text" class="form-control">
                                    <div class="form-text">
                                        {{ $t("successKeywordExplanation") }}
                                    </div>
                                </div>

                                <!-- Json Query -->
                                <div v-if="monitor.mqttCheckType === 'json-query'" class="my-3">
                                    <label for="jsonPath" class="form-label">{{ $t("Json Query") }}</label>
                                    <input id="jsonPath" v-model="monitor.jsonPath" type="text" class="form-control" required>

                                    <i18n-t tag="div" class="form-text" keypath="jsonQueryDescription">

Review comment (suggestion):
given that this is only effective for websockets, lets hide this option if the hostname is not `wss?://.+`

Code after:
                                    />
                                </div>
                            </div>

                            <!-- MQTT -->
                            <!-- For MQTT Type -->
                            <template v-if="monitor.type === 'mqtt'">
                                <div class="my-3">
                                    <label for="mqttUsername" class="form-label">MQTT {{ $t("Username") }}</label>
                                    <input id="mqttUsername" v-model="monitor.mqttUsername" type="text" class="form-control">
                                </div>

                                <div class="my-3">
                                    <label for="mqttPassword" class="form-label">MQTT {{ $t("Password") }}</label>
                                    <input id="mqttPassword" v-model="monitor.mqttPassword" type="password" class="form-control">
                                </div>

                                <div class="my-3">
                                    <label for="mqttTopic" class="form-label">MQTT {{ $t("Topic") }}</label>
                                    <input id="mqttTopic" v-model="monitor.mqttTopic" type="text" class="form-control" required>
                                    <div class="form-text">
                                        {{ $t("topicExplanation") }}
                                    </div>
                                </div>

                                <div class="my-3">
                                    <label for="mqttWebsocketPath" class="form-label">{{ $t("mqttWebSocketPath") }}</label>
                                    <input
                                        v-if="/wss?:\/\/.+/.test(monitor.hostname)"
                                        id="mqttWebsocketPath"
                                        v-model="monitor.mqttWebsocketPath"
                                        type="text"
                                        class="form-control"
                                    >
                                    <input v-else type="text" class="form-control" disabled>
                                    <div class="form-text">
                                        {{ $t("mqttWebsocketPathExplanation") }}
                                    </div>
                                </div>

                                <div class="my-3">
                                    <label for="mqttCheckType" class="form-label">MQTT {{ $t("Check Type") }}</label>
                                    <select id="mqttCheckType" v-model="monitor.mqttCheckType" class="form-select" required>
                                        <option value="keyword">{{ $t("Keyword") }}</option>
                                        <option value="json-query">{{ $t("Json Query") }}</option>
                                    </select>
                                </div>

                                <div v-if="monitor.mqttCheckType === 'keyword'" class="my-3">
                                    <label for="mqttSuccessKeyword" class="form-label">MQTT {{ $t("successKeyword") }}</label>
                                    <input id="mqttSuccessKeyword" v-model="monitor.mqttSuccessMessage" type="text" class="form-control">