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

Code before:
                <template v-if="dbConfig.type === 'mariadb'">
                    <div class="form-floating mt-3 short" :hidden="isProvidedMariaDBSocket">
                        <input
                            id="floatingInput"
                            v-model="dbConfig.hostname"
                            type="text"
                            class="form-control"
                            required
                        />
                        <label for="floatingInput">{{ $t("Hostname") }}</label>
                    </div>

                    <div class="form-floating mt-3 short" :hidden="isProvidedMariaDBSocket">
                        <input
                            id="floatingInput"
                            v-model="dbConfig.port"
                            type="text"
                            class="form-control"
                            required
                        />
                        <label for="floatingInput">{{ $t("Port") }}</label>
                    </div>

                    <div class="mt-1 short text-start" :hidden="!isProvidedMariaDBSocket">
                        <i18n-t keypath="mariadbSocketPathDetectedHelptext" tag="div" class="form-text">
                            <code>{{ $t("mariadbSocketEnvVariable") }}</code>
                        </i18n-t>
                    </div>

                    <hr class="mt-3 short" />

                    <div class="form-floating mt-2 short">
                        <input
                            id="floatingInput"
                            v-model="dbConfig.username"
                            type="text"
                            class="form-control"
                            required
                        />
                        <label for="floatingInput">{{ $t("Username") }}</label>
                    </div>

                    <div class="form-floating mt-3 short">
                        <input
                            id="floatingInput"
                            v-model="dbConfig.password"
                            type="password"
                            class="form-control"
                            required
                        />
                        <label for="floatingInput">{{ $t("Password") }}</label>

Review comment (suggestion):
```suggestion
                            <code>UPTIME_KUMA_DB_SOCKET</code>
```

Code after:
                <template v-if="dbConfig.type === 'mariadb'">
                    <div v-if="!isProvidedMariaDBSocket" class="form-floating mt-3 short">
                        <input
                            id="floatingInput"
                            v-model="dbConfig.hostname"
                            type="text"
                            class="form-control"
                            required
                        />
                        <label for="floatingInput">{{ $t("Hostname") }}</label>
                    </div>

                    <div v-if="!isProvidedMariaDBSocket" class="form-floating mt-3 short">
                        <input id="floatingInput" v-model="dbConfig.port" type="text" class="form-control" required />
                        <label for="floatingInput">{{ $t("Port") }}</label>
                    </div>

                    <div v-if="isProvidedMariaDBSocket" class="mt-1 short text-start">
                        <i18n-t keypath="mariadbSocketPathDetectedHelptext" tag="div" class="form-text">
                            <code>UPTIME_KUMA_DB_SOCKET</code>
                        </i18n-t>
                    </div>

                    <hr v-if="isProvidedMariaDBSocket" class="mt-3 mb-2 short" />

                    <div class="form-floating mt-3 short">
                        <input
                            id="floatingInput"
                            v-model="dbConfig.username"
                            type="text"
                            class="form-control"
                            required
                        />
                        <label for="floatingInput">{{ $t("Username") }}</label>
                    </div>

                    <div class="form-floating mt-3 short">
                        <input
                            id="floatingInput"
                            v-model="dbConfig.password"
                            type="password"
                            class="form-control"
                            required
                        />
                        <label for="floatingInput">{{ $t("Password") }}</label>
                    </div>

                    <div class="form-floating mt-3 short">
                        <input id="floatingInput" v-model="dbConfig.dbName" type="text" class="form-control" required />
                        <label for="floatingInput">{{ $t("dbName") }}</label>
                    </div>