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

Code before:
                                        {{ $t("remoteBrowserToggle") }}
                                    </div>
                                </div>

                                <div v-if="remoteBrowsersToggle">
                                    <label for="remote-browser" class="form-label">{{ $t("Remote Browser") }}</label>
                                    <ActionSelect
                                        v-model="monitor.remote_browser"
                                        :options="remoteBrowsersOptions"
                                        icon="plus"
                                        :action="() => $refs.remoteBrowserDialog.show()"
                                    />
                                </div>

                                <!-- Screenshot Delay -->
                                <div class="my-3">
                                    <label for="screenshot-delay" class="form-label">
                                        {{ $t("Screenshot Delay") }} ({{ $t("seconds") }})
                                    </label>
                                    <input
                                        id="screenshot-delay"
                                        v-model="monitor.screenshot_delay"
                                        type="number"
                                        class="form-control"
                                        min="0"
                                        max="30"
                                        step="1"
                                    />
                                    <div class="form-text text-warning">
                                        {{ $t("screenshotDelayDescription") }}
                                    </div>
                                </div>
                            </div>

                            <!-- Game -->
                            <!-- GameDig only -->
                            <div v-if="monitor.type === 'gamedig'" class="my-3">
                                <label for="game" class="form-label">{{ $t("Game") }}</label>
                                <select id="game" v-model="monitor.game" class="form-select" required>
                                    <option v-for="game in gameList" :key="game.keys[0]" :value="game.keys[0]">
                                        {{ game.pretty }}
                                    </option>
                                </select>
                            </div>

                            <template v-if="monitor.type === 'kafka-producer'">
                                <!-- Kafka Brokers List -->
                                <div class="my-3">
                                    <label for="kafkaProducerBrokers" class="form-label">
                                        {{ $t("Kafka Brokers") }}
                                    </label>

Review comment (refactor):
this is currently a clientside only control.
Please duplicate all validation on the server side validation handler too ^^

Code after:
                                        {{ $t("remoteBrowserToggle") }}
                                    </div>
                                </div>

                                <div v-if="remoteBrowsersToggle">
                                    <label for="remote-browser" class="form-label">{{ $t("Remote Browser") }}</label>
                                    <ActionSelect
                                        v-model="monitor.remote_browser"
                                        :options="remoteBrowsersOptions"
                                        icon="plus"
                                        :action="() => $refs.remoteBrowserDialog.show()"
                                    />
                                </div>
                            </div>

                            <!-- Game -->
                            <!-- GameDig only -->
                            <div v-if="monitor.type === 'gamedig'" class="my-3">
                                <label for="game" class="form-label">{{ $t("Game") }}</label>
                                <select id="game" v-model="monitor.game" class="form-select" required>
                                    <option v-for="game in gameList" :key="game.keys[0]" :value="game.keys[0]">
                                        {{ game.pretty }}
                                    </option>
                                </select>
                            </div>

                            <template v-if="monitor.type === 'kafka-producer'">
                                <!-- Kafka Brokers List -->
                                <div class="my-3">
                                    <label for="kafkaProducerBrokers" class="form-label">
                                        {{ $t("Kafka Brokers") }}
                                    </label>
                                    <VueMultiselect
                                        id="kafkaProducerBrokers"
                                        v-model="monitor.kafkaProducerBrokers"
                                        :multiple="true"
                                        :options="[]"
                                        :placeholder="$t('Enter the list of brokers')"
                                        :tag-placeholder="$t('Press Enter to add broker')"
                                        :max-height="500"
                                        :taggable="true"
                                        :show-no-options="false"
                                        :close-on-select="false"
                                        :clear-on-select="false"
                                        :preserve-search="false"
                                        :preselect-first="false"
                                        @tag="addKafkaProducerBroker"
                                    ></VueMultiselect>
                                </div>

                                <!-- Kafka Topic Name -->