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

Code before:
                                    <label for="connectionString" class="form-label">{{ $t("Connection String") }}</label>
                                    <input id="connectionString" v-model="monitor.databaseConnectionString" type="text" class="form-control" required>
                                </div>
                            </template>

                            <template v-if="monitor.type === 'mysql'">
                                <div class="my-3">
                                    <label for="mysql-password" class="form-label">{{ $t("Password") }}</label>
                                    <!-- TODO: Rename monitor.radiusPassword to monitor.password for general use -->
                                    <HiddenInput id="mysql-password" v-model="monitor.radiusPassword" autocomplete="false"></HiddenInput>
                                </div>
                            </template>

                            <!-- SQL Server / PostgreSQL / MySQL -->
                            <template v-if="monitor.type === 'sqlserver' || monitor.type === 'postgres' || monitor.type === 'mysql'">
                                <div class="my-3">
                                    <label for="sqlQuery" class="form-label">{{ $t("Query") }}</label>
                                    <textarea id="sqlQuery" v-model="monitor.databaseQuery" class="form-control" :placeholder="$t('Example:', [ 'SELECT 1' ])"></textarea>
                                </div>
                            </template>

                            <!-- MongoDB -->
                            <template v-if="monitor.type === 'mongodb'">
                                <div class="my-3">
                                    <label for="mongodbCommand" class="form-label">{{ $t("Command") }}</label>
                                    <textarea id="mongodbCommand" v-model="monitor.databaseQuery" class="form-control" :placeholder="$t('Example:', [ '{ &quot;ping&quot;: 1 }' ])"></textarea>
                                </div>
                                <div 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">

                                    <i18n-t tag="div" class="form-text" keypath="jsonQueryDescription">
                                        <a href="https://jsonata.org/">jsonata.org</a>
                                        <a href="https://try.jsonata.org/">{{ $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">
                                </div>
                            </template>

                            <!-- Interval -->
                            <div class="my-3">
                                <label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [ monitor.interval ]) }})</label>
                                <input id="interval" v-model="monitor.interval" type="number" class="form-control" required :min="minInterval" step="1" :max="maxInterval" @blur="finishUpdateInterval">
                            </div>

                            <div class="my-3">
                                <label for="maxRetries" class="form-label">{{ $t("Retries") }}</label>
                                <input id="maxRetries" v-model="monitor.maxretries" type="number" class="form-control" required min="0" step="1">

Review comment (suggestion):
I think this should be required, or?

```suggestion
                                    <textarea id="mongodbCommand" v-model="monitor.databaseQuery" class="form-control" :placeholder="$t('Example:', [ '{ &quot;ping&quot;: 1 }' ])" required></textarea>
```

Code after:
                                    <label for="connectionString" class="form-label">{{ $t("Connection String") }}</label>
                                    <input id="connectionString" v-model="monitor.databaseConnectionString" type="text" class="form-control" required>
                                </div>
                            </template>

                            <template v-if="monitor.type === 'mysql'">
                                <div class="my-3">
                                    <label for="mysql-password" class="form-label">{{ $t("Password") }}</label>
                                    <!-- TODO: Rename monitor.radiusPassword to monitor.password for general use -->
                                    <HiddenInput id="mysql-password" v-model="monitor.radiusPassword" autocomplete="false"></HiddenInput>
                                </div>
                            </template>

                            <!-- SQL Server / PostgreSQL / MySQL -->
                            <template v-if="monitor.type === 'sqlserver' || monitor.type === 'postgres' || monitor.type === 'mysql'">
                                <div class="my-3">
                                    <label for="sqlQuery" class="form-label">{{ $t("Query") }}</label>
                                    <textarea id="sqlQuery" v-model="monitor.databaseQuery" class="form-control" :placeholder="$t('Example:', [ 'SELECT 1' ])"></textarea>
                                </div>
                            </template>

                            <!-- MongoDB -->
                            <template v-if="monitor.type === 'mongodb'">
                                <div class="my-3">
                                    <label for="mongodbCommand" class="form-label">{{ $t("Command") }}</label>
                                    <textarea id="mongodbCommand" v-model="monitor.databaseQuery" class="form-control" :placeholder="$t('Example:', [ '{ &quot;ping&quot;: 1 }' ])"></textarea>
                                    <i18n-t tag="div" class="form-text" keypath="mongodbCommandDescription">
                                        <template #documentation>
                                            <a href="https://www.mongodb.com/docs/manual/reference/command/">{{ $t('documentationOf', ['MongoDB']) }}</a>
                                        </template>
                                    </i18n-t>
                                </div>
                                <div 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">

                                    <i18n-t tag="div" class="form-text" keypath="jsonQueryDescription">
                                        <a href="https://jsonata.org/">jsonata.org</a>
                                        <a href="https://try.jsonata.org/">{{ $t('here') }}</a>
                                    </i18n-t>
                                </div>
                                <div class="my-3">
                                    <label for="expectedValue" class="form-label">{{ $t("Expected Value") }}</label>
                                    <input id="expectedValue" v-model="monitor.expectedValue" type="text" class="form-control">
                                </div>
                            </template>

                            <!-- Interval -->
                            <div class="my-3">
                                <label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [ monitor.interval ]) }})</label>
                                <input id="interval" v-model="monitor.interval" type="number" class="form-control" required :min="minInterval" step="1" :max="maxInterval" @blur="finishUpdateInterval">