fix: (#704) Confirmation buttons (#707)

frontend/resources/vue/views/ArgumentForm.vue

@@ -7,7 +7,7 @@
       <form @submit="handleSubmit">
         <template v-if="actionArguments.length > 0">
 
-          <template v-for="arg in actionArguments" :key="arg.name" class="argument-group">
+          <template v-for="arg in actionArguments" :key="arg.name">
               <label :for="arg.name">
                 {{ formatLabel(arg.title) }}
               </label>
@@ -96,18 +96,27 @@ async function setup() {
 
   // Initialize values from query params or defaults
   actionArguments.value.forEach(arg => {
-    const paramValue = getQueryParamValue(arg.name)
-    argValues.value[arg.name] = paramValue !== null ? paramValue : arg.defaultValue || ''
-
     if (arg.type === 'confirmation') {
       hasConfirmation.value = true
+      const paramValue = getQueryParamValue(arg.name)
+      let checkedValue = false
+      if (paramValue !== null) {
+        checkedValue = paramValue === '1' || paramValue === 'true' || paramValue === true
+      } else if (arg.defaultValue !== undefined && arg.defaultValue !== '') {
+        checkedValue = arg.defaultValue === '1' || arg.defaultValue === 'true' || arg.defaultValue === true
+      }
+      argValues.value[arg.name] = checkedValue
+      confirmationChecked.value = checkedValue
+    } else {
+      const paramValue = getQueryParamValue(arg.name)
+      argValues.value[arg.name] = paramValue !== null ? paramValue : arg.defaultValue || ''
     }
   })
 
   // Run initial validation on all fields after DOM is updated
   await nextTick()
   for (const arg of actionArguments.value) {
-    if (arg.type && !arg.type.startsWith('regex:') && arg.type !== 'select' && arg.type !== '') {
+    if (arg.type && !arg.type.startsWith('regex:') && arg.type !== 'select' && arg.type !== '' && arg.type !== 'confirmation') {
       await validateArgument(arg, argValues.value[arg.name])
     }
   }
@@ -143,7 +152,11 @@ function getInputType(arg) {
     return undefined
   }
 
-  if (arg.type === 'ascii_identifier') {
+  if (arg.type === 'confirmation') {
+    return 'checkbox'
+  }
+
+  if (arg.type === 'ascii_identifier' || arg.type === 'ascii') {
     return 'text'
   }
 
@@ -158,8 +171,8 @@ function getPattern(arg) {
 }
 
 function getArgumentValue(arg) {
-  if (arg.type === 'checkbox') {
-    return argValues.value[arg.name] === '1' || argValues.value[arg.name] === true
+  if (arg.type === 'checkbox' || arg.type === 'confirmation') {
+    return argValues.value[arg.name] === '1' || argValues.value[arg.name] === true || argValues.value[arg.name] === 'true'
   }
   return argValues.value[arg.name] || ''
 }
@@ -240,7 +253,7 @@ function getArgumentValues() {
   for (const arg of actionArguments.value) {
     let value = argValues.value[arg.name] || ''
 
-    if (arg.type === 'checkbox') {
+    if (arg.type === 'checkbox' || arg.type === 'confirmation') {
       value = value ? '1' : '0'
     }
 
@@ -348,22 +361,6 @@ form {
   grid-template-columns: max-content auto auto;
 }
 
-.argument-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.argument-group label {
-  font-weight: 500;
-  color: #333;
-}
-
-.argument-group input:invalid,
-.argument-group select:invalid,
-.argument-group textarea:invalid {
-  border-color: #dc3545;
-}
 
 .argument-description {
   font-size: 0.875rem;