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

Code before:
                        <div class="form-floating mt-3 short">
                            <textarea
                                id="caInput"
                                v-model="dbConfig.ca"
                                class="form-control"
                                placeholder="-----BEGIN CERTIFICATE-----"
                                style="height: 120px; font-family: monospace; font-size: 11px"
                            ></textarea>
                            <label for="caInput">{{ $t("caCertificate") }}</label>
                        </div>

                        <div class="short text-start mt-1">
                            <div
                                class="alert alert-secondary py-2 px-3 mb-0"
                                role="alert"
                                style="font-size: 0.8rem; line-height: 1.3"
                            >
                                <font-awesome-icon icon="info-circle" class="me-1" />
                                <strong>{{ $t("selfSigned") }}?</strong>
                                {{ $t("caFormatInstruction") }}
                                <br />
                                <strong>{{ $t("trusted") }} ?</strong>
                                {{ $t("caBlankInstruction") }}
                            </div>
                        </div>
                    </template>
                </template>

                <button class="btn btn-primary mt-4 short" type="submit" :disabled="disabledButton">
                    {{ $t("Next") }}
                </button>
            </template>
        </form>
    </div>
</template>

<script>
import axios from "axios";
import { useToast } from "vue-toastification";
import { sleep } from "../util.ts";
const toast = useToast();

export default {
    data() {
        return {
            show: false,
            dbConfig: {
                type: undefined,
                port: 3306,
                hostname: "",
                username: "",

Review comment (refactor):
Lets simplify like this

```suggestion
                    <div class="form-floating mt-3 short"  v-if="dbConfig.ssl">
                        <textarea
                            id="caInput"
                            v-model="dbConfig.ca"
                            class="form-control"
                            placeholder="-----BEGIN CERTIFICATE-----"
                            style="height: 120px"
                        ></textarea>
                        <label for="caInput">{{ $t("mariadbCaCertificateLabel") }}</label>
                        <div class="form-text">{{ $t("mariadbCaCertificateHelptext") }}</div>
                    </div>
```

Code after:

                    <div v-if="dbConfig.ssl" class="form-floating mt-3 short">
                        <textarea
                            id="caInput"
                            v-model="dbConfig.ca"
                            class="form-control"
                            placeholder="-----BEGIN CERTIFICATE-----"
                            style="height: 120px"
                        ></textarea>
                        <label for="caInput">{{ $t("mariadbCaCertificateLabel") }}</label>
                        <div class="form-text">{{ $t("mariadbCaCertificateHelptext") }}</div>
                    </div>
                </template>

                <button class="btn btn-primary mt-4 short" type="submit" :disabled="disabledButton">
                    {{ $t("Next") }}
                </button>
            </template>
        </form>
    </div>
</template>

<script>
import axios from "axios";
import { useToast } from "vue-toastification";
import { sleep } from "../util.ts";
const toast = useToast();

export default {
    data() {
        return {
            show: false,
            dbConfig: {
                type: undefined,
                port: 3306,
                hostname: "",
                username: "",
                password: "",
                dbName: "kuma",
                ssl: false,
                ca: "",
            },
            info: {
                needSetup: false,
                runningSetup: false,
                isEnabledEmbeddedMariaDB: false,
            },
        };
    },
    computed: {
        disabledButton() {