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

Code before:
                            v-model="dbConfig.hostname"
                            type="text"
                            class="form-control"
                            required
                            :disabled="!disabledButtonMariaDBSocket"
                        />
                        <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
                            :disabled="!disabledButtonMariaDBSocket"
                        />
                        <label for="floatingInput">{{ $t("Port") }}</label>
                    </div>

                    <div class="mt-1 short text-start" :hidden="hiddenHelptextMariaDBSocket">
                        <div class="form-text">
                            <code>UPTIME_KUMA_DB_SOCKET</code>
                            {{ $t("mariadbSocketPathDetectedHelptext") }}
                        </div>
                    </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>
                    </div>

Review comment (suggestion):
please use `<i18n-t` instead. this way, this is translatable for our translators.

https://vue-i18n.intlify.dev/guide/advanced/component

Code after:
                            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>

                    <div class="mt-3 short text-start">
                        <div class="form-check form-switch ps-0" style="height: auto; display: block; padding: 0">
                            <div class="d-flex align-items-center">