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

Code before:
                                <div class="my-3">
                                    <label for="rabbitmqNodes" class="form-label">{{ $t("RabbitMQ Nodes") }}</label>
                                    <VueMultiselect
                                        id="rabbitmqNodes"
                                        v-model="monitor.rabbitmqNodes"
                                        :required="true"
                                        :multiple="true"
                                        :options="[]"
                                        :placeholder="$t('Enter the list of nodes')"
                                        :tag-placeholder="$t('Press Enter to add node')"
                                        :max-height="500"
                                        :taggable="true"
                                        :show-no-options="false"
                                        :close-on-select="false"
                                        :clear-on-select="false"
                                        :preserve-search="false"
                                        :preselect-first="false"
                                        @tag="addRabbitmqNode"
                                    ></VueMultiselect>
                                    <div class="form-text">
                                        {{ $t("rabbitmqNodesDescription") }}
                                    </div>
                                </div>

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

                                <div class="my-3">
                                    <label for="rabbitmqPassword" class="form-label">RabbitMQ {{ $t("Password") }}</label>
                                    <HiddenInput id="rabbitmqPassword" v-model="monitor.rabbitmqPassword" autocomplete="false" required="true"></HiddenInput>
                                </div>
                            </template>

                            <!-- Hostname -->
                            <!-- TCP Port / Ping / DNS / Steam / MQTT / Radius / Tailscale Ping / SNMP only -->
                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam' || monitor.type === 'gamedig' || monitor.type === 'mqtt' || monitor.type === 'radius' || monitor.type === 'tailscale-ping' || monitor.type === 'snmp'" class="my-3">
                                <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
                                <input
                                    id="hostname"
                                    v-model="monitor.hostname"
                                    type="text"
                                    class="form-control"
                                    :pattern="`${monitor.type === 'mqtt' ? mqttIpOrHostnameRegexPattern : ipOrHostnameRegexPattern}`"
                                    required
                                    data-testid="hostname-input"
                                >
                            </div>

                            <!-- Port -->

Review comment (suggestion):
please make this (and Password) translatable as well. There are languages, which are RTL.

```suggestion
                                    <label for="rabbitmqUsername" class="form-label">{{ $t("RabbitMQ Username") }}</label>
```

Code after:
                                        {{ $t("Enable Kafka Producer Auto Topic Creation") }}
                                    </label>
                                </div>
                            </template>

                            <template v-if="monitor.type === 'rabbitmq'">
                                <!-- RabbitMQ Nodes List -->
                                <div class="my-3">
                                    <label for="rabbitmqNodes" class="form-label">{{ $t("RabbitMQ Nodes") }}</label>
                                    <VueMultiselect
                                        id="rabbitmqNodes"
                                        v-model="monitor.rabbitmqNodes"
                                        :required="true"
                                        :multiple="true"
                                        :options="[]"
                                        :placeholder="$t('Enter the list of nodes')"
                                        :tag-placeholder="$t('Press Enter to add node')"
                                        :max-height="500"
                                        :taggable="true"
                                        :show-no-options="false"
                                        :close-on-select="false"
                                        :clear-on-select="false"
                                        :preserve-search="false"
                                        :preselect-first="false"
                                        @tag="addRabbitmqNode"
                                    ></VueMultiselect>
                                    <div class="form-text">
                                        {{ $t("rabbitmqNodesDescription", ["https://node1.rabbitmq.com:15672"]) }}
                                    </div>
                                </div>

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

                                <div class="my-3">
                                    <label for="rabbitmqPassword" class="form-label">{{ $t("RabbitMQ Password") }}</label>
                                    <HiddenInput id="rabbitmqPassword" v-model="monitor.rabbitmqPassword" autocomplete="false" required="true"></HiddenInput>
                                </div>
                            </template>

                            <!-- Hostname -->
                            <!-- TCP Port / Ping / DNS / Steam / MQTT / Radius / Tailscale Ping / SNMP only -->
                            <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam' || monitor.type === 'gamedig' || monitor.type === 'mqtt' || monitor.type === 'radius' || monitor.type === 'tailscale-ping' || monitor.type === 'snmp'" class="my-3">
                                <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
                                <input
                                    id="hostname"
                                    v-model="monitor.hostname"
                                    type="text"
                                    class="form-control"