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

Code before:
                </div>

                <div v-if="dbConfig.type === 'sqlite'" class="mt-3 short">
                    {{ $t("setupDatabaseSQLite") }}
                </div>

                <template v-if="dbConfig.type === 'mariadb'">
                    <div 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 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 class="form-floating mt-3 short">
                        <input id="floatingInput" v-model="dbConfig.socketPath" type="text" class="form-control" />
                        <label for="floatingInput">{{ $t("socketPath") }} ({{ $t("Optional") }})</label>
                    </div>

                    <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">

Review comment (suggestion):
Socketpath "disables" using hostname and port, right?
I would like to not have all options be visible in this case.

I think the most elegant option (if you disagree, I would like to hear that, not a hard oppion) is to have a helptext under the socketpath and hostname/port a la "Click here to use a local socket instead to (insert half-sentence why you want this)" using `i18n-t`.


Code after:
                </div>

                <div v-if="dbConfig.type === 'sqlite'" class="mt-3 short">
                    {{ $t("setupDatabaseSQLite") }}
                </div>

                <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>