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

Code before:
                            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">
                                <input
                                    id="sslCheck"
                                    v-model="dbConfig.ssl"
                                    type="checkbox"
                                    role="switch"
                                    class="form-check-input ms-0 me-2"
                                    style="float: none"
                                />
                                <label class="form-check-label fw-bold" for="sslCheck">
                                    {{ $t("enableSSL") }}
                                    <span class="fw-normal text-muted" style="font-size: 0.9em">(Optional)</span>
                                </label>
                            </div>
                            <div class="form-text mt-1">
                                {{ $t("mariadbUseSSLHelptext") }}
                            </div>
                        </div>
                    </div>

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

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

Review comment (suggestion):
forgot this one, should be translated

```suggestion
                                    <span class="fw-normal text-muted" style="font-size: 0.9em">({{ $t("Optional") }})</span>
```

Code after:
                            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">
                                <input
                                    id="sslCheck"
                                    v-model="dbConfig.ssl"
                                    type="checkbox"
                                    role="switch"
                                    class="form-check-input ms-0 me-2"
                                    style="float: none"
                                />
                                <label class="form-check-label fw-bold" for="sslCheck">
                                    {{ $t("enableSSL") }}
                                    <span class="fw-normal text-muted" style="font-size: 0.9em">
                                        ({{ $t("Optional") }})
                                    </span>
                                </label>
                            </div>
                            <div class="form-text mt-1">
                                {{ $t("mariadbUseSSLHelptext") }}
                            </div>
                        </div>
                    </div>

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