Feat: Add YAML validation for compose content in deployment flows

.env.example

@@ -1 +1 @@
-VITE_API_URL=http://localhost:8080
+VITE_API_URL=http://localhost:8090/api

package.json

@@ -37,7 +37,8 @@
     "primevue": "^3.50.0",
     "vue": "^3.4.21",
     "vue-codemirror": "^6.1.1",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "@pinia/testing": "^0.1.6",

src/components/NewDeploymentModal.vue

@@ -754,24 +754,38 @@
                                 Password
                                 <span v-if="form.database.mode === 'create'" class="required">*</span>
                               </label>
-                              <input
-                                id="dbPassword"
-                                v-model="form.database.dbPassword"
-                                type="password"
-                                placeholder="••••••••"
-                              />
+                              <div class="input-wrapper">
+                                <input
+                                  id="dbPassword"
+                                  v-model="form.database.dbPassword"
+                                  :type="showDbPassword ? 'text' : 'password'"
+                                  placeholder="••••••••"
+                                />
+                                <button type="button" class="input-icon-btn" @click="showDbPassword = !showDbPassword">
+                                  <i :class="showDbPassword ? 'pi pi-eye-slash' : 'pi pi-eye'" />
+                                </button>
+                              </div>
                             </div>
                           </div>
 
                           <Transition name="expand">
                             <div v-if="form.database.mode === 'create'" class="form-field">
                               <label for="dbRootPassword">Root Password</label>
-                              <input
-                                id="dbRootPassword"
-                                v-model="form.database.dbRootPassword"
-                                type="password"
-                                placeholder="Leave empty to use same as password"
-                              />
+                              <div class="input-wrapper">
+                                <input
+                                  id="dbRootPassword"
+                                  v-model="form.database.dbRootPassword"
+                                  :type="showDbRootPassword ? 'text' : 'password'"
+                                  placeholder="Leave empty to use same as password"
+                                />
+                                <button
+                                  type="button"
+                                  class="input-icon-btn"
+                                  @click="showDbRootPassword = !showDbRootPassword"
+                                >
+                                  <i :class="showDbRootPassword ? 'pi pi-eye-slash' : 'pi pi-eye'" />
+                                </button>
+                              </div>
                               <span class="field-hint">Admin password for new database</span>
                             </div>
                           </Transition>
@@ -1345,6 +1359,7 @@ import BaseModal from "@/components/base/BaseModal.vue";
 import { deploymentsApi, templatesApi, settingsApi, containersApi, composeApi, credentialsApi } from "@/services/api";
 import type { RegistryCredential } from "@/types";
 import { useNotificationsStore } from "@/stores/notifications";
+import { validateComposeYaml } from "@/utils/yaml";
 
 interface TemplateMount {
   id: string;
@@ -1407,6 +1422,8 @@ const extensions = shallowRef([yaml(), oneDark]);
 
 const deploymentMode = ref<"" | "easy" | "compose" | "image">("");
 const showRegistryPassword = ref(false);
+const showDbPassword = ref(false);
+const showDbRootPassword = ref(false);
 const existingCredentials = ref<RegistryCredential[]>([]);
 const loadingCredentials = ref(false);
 
@@ -2331,6 +2348,12 @@ const validate = () => {
   if (!form.composeContent.trim()) {
     errors.composeContent = "Compose configuration is required";
     valid = false;
+  } else {
+    const yamlResult = validateComposeYaml(form.composeContent);
+    if (!yamlResult.valid) {
+      errors.composeContent = yamlResult.error;
+      valid = false;
+    }
   }
 
   return valid;

src/utils/yaml.ts

@@ -0,0 +1,21 @@
+import { parse } from "yaml";
+
+export type ComposeYamlValidation = { valid: true } | { valid: false; error: string };
+
+/**
+ * This function validates that a string is valid YAML. It is used before sending compose content
+ * to the API (e.g.during a deployment update or create).
+ */
+export function validateComposeYaml(content: string): ComposeYamlValidation {
+  const trimmed = content.trim();
+  if (!trimmed) {
+    return { valid: false, error: "Compose content is empty" };
+  }
+  try {
+    parse(trimmed);
+    return { valid: true };
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : "Invalid YAML syntax";
+    return { valid: false, error: message };
+  }
+}

src/views/DeploymentDetailView.vue

@@ -1391,8 +1391,9 @@
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { Codemirror } from "vue-codemirror";
-import { yaml } from "@codemirror/lang-yaml";
+import { yaml as yamlLang } from "@codemirror/lang-yaml";
 import { oneDark } from "@codemirror/theme-one-dark";
+import { validateComposeYaml } from "@/utils/yaml";
 import {
   deploymentsApi,
   proxyApi,
@@ -1526,7 +1527,7 @@ const composeFilename = ref("docker-compose.yml");
 const isEditingConfig = ref(false);
 const serviceConfig = ref("");
 const isEditingServiceConfig = ref(false);
-const configExtensions = [yaml(), oneDark];
+const configExtensions = [yamlLang(), oneDark];
 const activeConfigTab = ref<"compose" | "service">("compose");
 
 const showOperationModal = ref(false);
@@ -2331,6 +2332,11 @@ const cancelServiceConfigEdit = () => {
 };
 
 const saveConfig = async () => {
+  const result = validateComposeYaml(composeConfig.value);
+  if (!result.valid) {
+    notifications.error("Invalid YAML", result.error);
+    return;
+  }
   try {
     await deploymentsApi.update(route.params.name as string, {
       compose_content: composeConfig.value,