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

Code before:
                            </div>

                            <div class="my-3">
                                <label for="resend-interval" class="form-label">
                                    {{ $t("Resend Notification if Down X times consecutively") }}
                                    <span v-if="monitor.resendInterval > 0">({{ $t("resendEveryXTimes", [ monitor.resendInterval ]) }})</span>
                                    <span v-else>({{ $t("resendDisabled") }})</span>
                                </label>
                                <input id="resend-interval" v-model="monitor.resendInterval" type="number" class="form-control" required min="0" step="1">
                            </div>

                            <h2 v-if="monitor.type !== 'push'" class="mt-5 mb-2">{{ $t("Advanced") }}</h2>

                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' " class="my-3 form-check" :title="monitor.ignoreTls ? $t('ignoredTLSError') : ''">
                                <input id="expiry-notification" v-model="monitor.expiryNotification" class="form-check-input" type="checkbox" :disabled="monitor.ignoreTls">
                                <label class="form-check-label" for="expiry-notification">
                                    {{ $t("Certificate Expiry Notification") }}
                                </label>
                                <div class="form-text">
                                </div>
                            </div>

                            <div v-if="monitor.type === 'websocket' " class="my-3 form-check">
                                <input id="ws-ignore-headers" v-model="monitor.wsIgnoreHeaders" class="form-check-input" type="checkbox">
                                <label class="form-check-label" for="ws-ignore-headers">
                                    {{ $t("Ignore Server Headers") }}
                                </label>
                                <div class="form-text">
                                    {{ $t("wsIgnoreHeadersDescription") }}
                                </div>
                            </div>

                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' || monitor.type === 'redis' " class="my-3 form-check">
                                <input id="ignore-tls" v-model="monitor.ignoreTls" class="form-check-input" type="checkbox" value="">
                                <label class="form-check-label" for="ignore-tls">
                                    {{ monitor.type === "redis" ? $t("ignoreTLSErrorGeneral") : $t("ignoreTLSError") }}
                                </label>
                            </div>

                            <div v-if="monitor.type === 'http' || monitor.type === 'keyword' || monitor.type === 'json-query' " class="my-3 form-check">
                                <input id="cache-bust" v-model="monitor.cacheBust" class="form-check-input" type="checkbox" value="">
                                <label class="form-check-label" for="cache-bust">
                                    <i18n-t tag="label" keypath="cacheBusterParam" class="form-check-label" for="cache-bust">
                                        <code>uptime_kuma_cachebuster</code>
                                    </i18n-t>
                                </label>
                                <div class="form-text">
                                    {{ $t("cacheBusterParamDescription") }}
                                </div>
                            </div>


Review comment (suggestion):
please make sure that every translation key is in `en.json`. Else, our awsome translators kannot do so.

Code after:

                                <!-- Json Query -->
                                <div v-if="monitor.mqttCheckType === 'json-query'" class="my-3">
                                    <label for="jsonPath" class="form-label">{{ $t("Json Query") }}</label>
                                    <input id="jsonPath" v-model="monitor.jsonPath" type="text" class="form-control" required>

                                    <i18n-t tag="div" class="form-text" keypath="jsonQueryDescription">
                                        <a href="https://jsonata.org/" target="_blank" rel="noopener noreferrer">jsonata.org</a>
                                        <a href="https://try.jsonata.org/" target="_blank" rel="noopener noreferrer">{{ $t('here') }}</a>
                                    </i18n-t>
                                    <br>

                                    <label for="expectedValue" class="form-label">{{ $t("Expected Value") }}</label>
                                    <input id="expectedValue" v-model="monitor.expectedValue" type="text" class="form-control" required>
                                </div>
                            </template>

                            <template v-if="monitor.type === 'radius'">
                                <div class="my-3">
                                    <label for="radius_username" class="form-label">Radius {{ $t("Username") }}</label>
                                    <input id="radius_username" v-model="monitor.radiusUsername" type="text" class="form-control" required />
                                </div>

                                <div class="my-3">
                                    <label for="radius_password" class="form-label">Radius {{ $t("Password") }}</label>
                                    <input id="radius_password" v-model="monitor.radiusPassword" type="password" class="form-control" required />
                                </div>

                                <div class="my-3">
                                    <label for="radius_secret" class="form-label">{{ $t("RadiusSecret") }}</label>
                                    <input id="radius_secret" v-model="monitor.radiusSecret" type="password" class="form-control" required />
                                    <div class="form-text"> {{ $t( "RadiusSecretDescription") }} </div>
                                </div>

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

                                <div class="my-3">
                                    <label for="radius_calling_station_id" class="form-label">{{ $t("RadiusCallingStationId") }}</label>
                                    <input id="radius_calling_station_id" v-model="monitor.radiusCallingStationId" type="text" class="form-control" required />
                                    <div class="form-text"> {{ $t( "RadiusCallingStationIdDescription") }} </div>
                                </div>
                            </template>

                            <!-- SQL Server / PostgreSQL / MySQL / Redis / MongoDB -->
                            <template v-if="monitor.type === 'sqlserver' || monitor.type === 'postgres' || monitor.type === 'mysql' || monitor.type === 'redis' || monitor.type === 'mongodb'">
                                <div class="my-3">
                                    <label for="connectionString" class="form-label">{{ $t("Connection String") }}</label>