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

Code before:
                                <div class="my-3 form-check">
                                    <input id="kafkaProducerSsl" v-model="monitor.kafkaProducerSsl" class="form-check-input" type="checkbox">
                                    <label class="form-check-label" for="kafkaProducerSsl">
                                        {{ $t("Enable Kafka SSL") }}
                                    </label>
                                </div>

                                <!-- Kafka SSL -->
                                <div class="my-3 form-check">
                                    <input id="kafkaProducerAllowAutoTopicCreation" v-model="monitor.kafkaProducerAllowAutoTopicCreation" class="form-check-input" type="checkbox">
                                    <label class="form-check-label" for="kafkaProducerAllowAutoTopicCreation">
                                        {{ $t("Enable Kafka Producer Auto Topic Creation") }}
                                    </label>
                                </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>
                            </div>

                            <!-- Port -->
                            <!-- For TCP Port / Steam / MQTT / Radius Type / SNMP -->
                            <div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'gamedig' || monitor.type === 'mqtt' || monitor.type === 'radius' || monitor.type === 'snmp'" class="my-3">
                                <label for="port" class="form-label">{{ $t("Port") }}</label>
                                <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
                            </div>

                            <!-- SNMP Monitor Type -->
                            <div v-if="monitor.type === 'snmp'" class="my-3">
                                <label for="snmp_community_string" class="form-label">{{ $t("Community String") }}</label>
                                <input id="snmp_community_string" v-model="monitor.snmpCommunityString" type="text" class="form-control" required placeholder="Example: public">
                            </div>

                            <div v-if="monitor.type === 'snmp'" class="my-3">
                                <label for="snmp_oid" class="form-label">{{ $t("OID (Object Identifier)") }}</label>
                                <input id="snmp_oid" v-model="monitor.snmpOid" type="text" class="form-control" required pattern="^([0-2])((\.0)|(\.[1-9][0-9]*))*$" title="Please enter a valid OID, e.g. 1.3.6.1.4.1.9.6.1.101" placeholder="Example: 1.3.6.1.4.1.9.6.1.101">
                            </div>

                            <div v-if="monitor.type === 'snmp'" class="my-3">
                                <div class="d-flex align-items-start">
                                    <div class="me-2">
                                        <label for="snmp_condition" class="form-label">{{ $t("Condition") }}</label>
                                        <select id="snmp_condition" v-model="monitor.snmpCondition" class="form-select me-3" required>
                                            <option value=">">&gt;</option>
                                            <option value=">=">&gt;=</option>
                                            <option value="<">&lt;</option>
                                            <option value="<=">&lt;=</option>
                                            <option value="==">==</option>

Review comment (suggestion):
Please make sure that all translations are in `src/lang/en.json`.
If they are not, our awesome translators cannot translate this string.

Code after:

                            <!-- 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>
                            </div>

                            <!-- Port -->
                            <!-- For TCP Port / Steam / MQTT / Radius Type / SNMP -->
                            <div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'gamedig' || monitor.type === 'mqtt' || monitor.type === 'radius' || monitor.type === 'snmp'" class="my-3">
                                <label for="port" class="form-label">{{ $t("Port") }}</label>
                                <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
                            </div>

                            <!-- SNMP Monitor Type -->
                            <div v-if="monitor.type === 'snmp'" class="my-3">
                                <label for="snmp_community_string" class="form-label">{{ $t("Community String") }}</label>
                                <!-- TODO: Rename monitor.radiusPassword to monitor.password for general use -->
                                <HiddenInput id="snmp_community_string" v-model="monitor.radiusPassword" autocomplete="false" required="true" placeholder="public"></HiddenInput>

                                <div class="form-text">{{ $t('snmpCommunityStringHelptext') }}</div>
                            </div>

                            <div v-if="monitor.type === 'snmp'" class="my-3">
                                <label for="snmp_oid" class="form-label">{{ $t("OID (Object Identifier)") }}</label>
                                <input id="snmp_oid" v-model="monitor.snmpOid" :title="$t('Please enter a valid OID.') + ' ' + $t('Example:', ['1.3.6.1.4.1.9.6.1.101'])" type="text" class="form-control" pattern="^([0-2])((\.0)|(\.[1-9][0-9]*))*$" placeholder="1.3.6.1.4.1.9.6.1.101" required>
                                <div class="form-text">{{ $t('snmpOIDHelptext') }} </div>
                            </div>

                            <div v-if="monitor.type === 'snmp'" class="my-3">
                                <label for="snmp_version" class="form-label">{{ $t("SNMP Version") }}</label>
                                <select id="snmp_version" v-model="monitor.snmpVersion" class="form-select">
                                    <option value="1">
                                        SNMPv1
                                    </option>
                                    <option value="2c">
                                        SNMPv2c
                                    </option>
                                </select>
                            </div>

                            <!-- Json Query -->
                            <!-- For Json Query / SNMP -->
                            <div v-if="monitor.type === 'json-query' || monitor.type === 'snmp'" class="my-3">
                                <div class="my-2">
                                    <label for="jsonPath" class="form-label mb-0">{{ $t("Json Query Expression") }}</label>
                                    <i18n-t tag="div" class="form-text mb-2" keypath="jsonQueryDescription">
                                        <a href="https://jsonata.org/">jsonata.org</a>
                                        <a href="https://try.jsonata.org/">{{ $t('playground') }}</a>
                                    </i18n-t>