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

Code before:
                                <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>
                                        <input v-if="monitor.snmpCondition !== 'contains' && monitor.snmpCondition !== '=='" id="snmp_control_value" v-model="monitor.snmpControlValue" type="number" class="form-control" required step=".01">
                                        <input v-else id="snmp_control_value" v-model="monitor.snmpControlValue" type="text" class="form-control" required>
                                    </div>
                                </div>
                            </div>

                            <div v-if="monitor.type === 'snmp'" class="my-3">
                                <label for="snmp_version" class="form-label">{{ $t("SNMP Version") }}</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('snmpOIDHelptext') }}</div>
```

Code after:
                                <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>
                                            <option value="!=">&#33;=</option>
                                            <option value="==">==</option>
                                            <option value="contains">contains</option>
                                        </select>
                                    </div>
                                    <div class="flex-grow-1">
                                        <label for="expectedValue" class="form-label">{{ $t("Expected Value") }}</label>
                                        <input v-if="monitor.jsonPathOperator !== 'contains' && monitor.jsonPathOperator !== '==' && monitor.jsonPathOperator !== '!='" id="expectedValue" v-model="monitor.expectedValue" type="number" class="form-control" required step=".01">