Add CA file upload to the maria db ui

src/lang/en.json

@@ -6,6 +6,7 @@
     "setupDatabaseSQLite": "A simple database file, recommended for small-scale deployments. Prior to v2.0.0, Uptime Kuma used SQLite as the default database.",
     "settingUpDatabaseMSG": "Setting up the database. It may take a while, please be patient.",
     "dbName": "Database Name",
+    "caFile": "Database CA certificate",
     "Settings": "Settings",
     "Dashboard": "Dashboard",
     "Help": "Help",

src/pages/SetupDatabase.vue

@@ -90,8 +90,12 @@
                         <input id="floatingInput" v-model="dbConfig.dbName" type="text" class="form-control" required>
                         <label for="floatingInput">{{ $t("dbName") }}</label>
                     </div>
-                </template>
 
+                    <div class="mb2 mt-3 short">
+                        <label for="caInput" class="mb-2">{{ $t("caFile") }}</label>
+                        <input id="caInput" type="file" accept="application/x-pem-file, .pem" class="form-control" @change="onCaFileChange">
+                    </div>
+                </template>
                 <button class="btn btn-primary mt-4 short" type="submit" :disabled="disabledButton">
                     {{ $t("Next") }}
                 </button>
@@ -117,6 +121,7 @@ export default {
                 username: "",
                 password: "",
                 dbName: "kuma",
+                caFile: ""
             },
             info: {
                 needSetup: false,
@@ -178,6 +183,15 @@ export default {
             }
         },
 
+        onCaFileChange(e) {
+            const fileReader = new FileReader();
+            fileReader.onload = () => {
+                this.dbConfig.caFile = fileReader.result;
+                console.log(this.dbConfig.caFile);
+            };
+            fileReader.readAsDataURL(e.target.files[0]);
+        },
+
         test() {
             this.$root.toastError("not implemented");
         }
@@ -186,6 +200,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    #caInput {
+        &::file-selector-button {
+            color: $primary;
+            background-color: $dark-bg;
+        }
+
+        &:hover:not(:disabled):not([readonly])::file-selector-button {
+            color: $dark-font-color2;
+            background-color: $primary;
+        }
+    }
+}
+
 .form-container {
     display: flex;
     align-items: center;