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

Code before:
                                    <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>
                                    <input id="connectionString" v-model="monitor.databaseConnectionString" type="text" class="form-control" required>
                                </div>
                            </template>

                            <template v-if="monitor.type === 'system-service'">
                                <div class="my-3">
                                    <label for="system-service-name" class="form-label">{{ $t("Service Name") }}</label>
                                    <input id="system-service-name" v-model="monitor.system_service_name" type="text" class="form-control" required placeholder="nginx">

                                    <div class="form-text">
                                        <template v-if="$root.info.runtime.platform === 'linux'">
                                            {{ $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">

Review comment (security):
🤔 we should only show this block if the `system_service_name` matches the regex we validate on the backend.

This is a (if we are pedantic) security issue otherwise.

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

                            <template v-if="monitor.type === 'system-service'">
                                <div class="my-3">
                                    <label for="system-service-name" class="form-label">{{ $t("Service Name") }}</label>
                                    <input id="system-service-name" v-model="monitor.system_service_name" type="text" class="form-control" required placeholder="nginx">

                                    <div class="form-text">
                                        <template v-if="$root.info.runtime.platform === 'linux'">
                                            {{ $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>