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

Code before:
                                        {{ $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="public">

                                <!-- eslint-disable-next-line vue/no-v-html -->
                                <div class="form-text" v-html="$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>

                                <!-- eslint-disable-next-line vue/no-v-html -->
                                <div class="form-text" v-html="$t('snmpOIDHelptext')"></div>
                            </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>
                                            <option value="contains">contains</option>
                                        </select>
                                    </div>
                                    <div class="flex-grow-1">
                                        <label for="snmp_control_value" class="form-label">{{ $t("Control Value") }}</label>

Review comment (security):
Not allowing v-html has the reason that otherwise we would allow our translators to XSS their language.

=> we use the following instead

```suggestion
                                <div class="form-text">{{ $t('snmpCommunityStringHelptext')
 }}</div>
```

Code after:
                                <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>
                                    <input id="jsonPath" v-model="monitor.jsonPath" type="text" class="form-control" placeholder="$" required>
                                </div>

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