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

Code before:
                                            {{ $t("systemServiceDescriptionLinux", {service_name: monitor.system_service_name || 'nginx'}) }}
                                        </template>
                                        <template v-else-if="$root.info.runtime.platform === 'win32'">
                                            {{ $t("systemServiceDescriptionWindows", {service_name: monitor.system_service_name || 'Dnscache'}) }}
                                        </template>
                                        <template v-else>
                                            {{ $t("systemServiceDescription", {service_name: monitor.system_service_name || 'nginx'}) }}
                                        </template>

                                        <div v-if="$root.info.runtime.platform === 'linux'" class="mt-2">
                                            <div>
                                                <i18n-t keypath="systemServiceCommandHint" tag="span">
                                                    <template #command>
                                                        <code>systemctl is-active {{ monitor.system_service_name || 'nginx' }}</code>
                                                    </template>
                                                </i18n-t>
                                            </div>
                                            <div class="text-secondary small">
                                                {{ $t("systemServiceExpectedOutput", ["active"]) }}
                                            </div>
                                        </div>
                                        <div v-else-if="$root.info.runtime.platform === 'win32'" class="mt-2">
                                            <div>
                                                <i18n-t keypath="systemServiceCommandHint" tag="span">
                                                    <template #command>
                                                        <code>(Get-Service -Name '{{ monitor.system_service_name || 'Dnscache' }}').Status</code>
                                                    </template>
                                                </i18n-t>
                                            </div>
                                            <div class="text-secondary small">
                                                {{ $t("systemServiceExpectedOutput", ["Running"]) }}
                                            </div>
                                        </div>
                                    </div>
                                </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>

Review comment (security):
as I asked previously, please make sure this matches what we do on the backend.
This is not escaped.

-> `.replaceAll("'", "''")` (possibly escaped for vues' templates) needs to be added here.

Code after:
                                            {{ $t("systemServiceDescriptionLinux", {service_name: monitor.system_service_name || 'nginx'}) }}
                                        </template>
                                        <template v-else-if="$root.info.runtime.platform === 'win32'">
                                            {{ $t("systemServiceDescriptionWindows", {service_name: monitor.system_service_name || 'Dnscache'}) }}
                                        </template>
                                        <template v-else>
                                            {{ $t("systemServiceDescription", {service_name: monitor.system_service_name || 'nginx'}) }}
                                        </template>

                                        <template v-if="!monitor.system_service_name || /^[a-zA-Z0-9_\-\.\@\ ]+$/.test(monitor.system_service_name)">
                                            <div v-if="$root.info.runtime.platform === 'linux'" class="mt-2">
                                                <div>
                                                    <i18n-t keypath="systemServiceCommandHint" tag="span">
                                                        <template #command>
                                                            <code>systemctl is-active {{ monitor.system_service_name || 'nginx' }}</code>
                                                        </template>
                                                    </i18n-t>
                                                </div>
                                                <div class="text-secondary small">
                                                    {{ $t("systemServiceExpectedOutput", ["active"]) }}
                                                </div>
                                            </div>
                                            <div v-else-if="$root.info.runtime.platform === 'win32'" class="mt-2">
                                                <div>
                                                    <i18n-t keypath="systemServiceCommandHint" tag="span">
                                                        <template #command>
                                                            <code>(Get-Service -Name '{{ (monitor.system_service_name || 'Dnscache').replaceAll("'", "''") }}').Status</code>
                                                        </template>
                                                    </i18n-t>
                                                </div>
                                                <div class="text-secondary small">
                                                    {{ $t("systemServiceExpectedOutput", ["Running"]) }}
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </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>