fix: separate concerns

lnbits/static/js/components/lnbits-dialog.js

@@ -94,36 +94,12 @@ window.app.component('lnbits-dialog', {
       this.$emit('cancel')
     },
 
-    async handleAction() {
-      try {
-        if (this.action && typeof this.action.handler === 'function') {
-          await this.action.handler()
-        }
-
-        this.$emit('action')
-
-        if (this.action && this.action.closeOnClick) {
-          this.handleModelUpdate(false)
-        }
-      } catch (error) {
-        console.error('lnbits-dialog action handler failed', error)
-      }
+    handleAction() {
+      this.$emit('action')
     },
-    async handleSecondaryAction() {
-      try {
-        if (
-          this.secondaryAction &&
-          typeof this.secondaryAction.handler === 'function'
-        ) {
-          await this.secondaryAction.handler()
-        }
-        this.$emit('secondary-action')
-        if (this.secondaryAction && this.secondaryAction.closeOnClick) {
-          this.handleModelUpdate(false)
-        }
-      } catch (error) {
-        console.error('lnbits-dialog secondary action handler failed', error)
-      }
+
+    handleSecondaryAction() {
+      this.$emit('secondary-action')
     }
   }
 })

lnbits/templates/components/admin/exchange_providers.vue

@@ -203,11 +203,11 @@
     :show="exchangeData.showTickerConversion"
     :title="$t('create_ticker_converter')"
     :action="{
-      handler: () => addExchangeTickerConversion(),
       label: 'Add Ticker Conversion'
     }"
     :cancel-label="$t('close')"
-    @update:model-value="exchangeData.showTickerConversion = $event"
+    @update:show="exchangeData.showTickerConversion = $event"
+    @action="addExchangeTickerConversion()"
   >
     <div class="row">
       <div class="col-12 q-mb-md">

lnbits/templates/components/admin/funding_sources.vue

@@ -128,7 +128,7 @@
     <lnbits-dialog
       :show="showQRDialog"
       :position="'standard'"
-      @update:model-value="showQRDialog = $event"
+      @update:show="showQRDialog = $event"
     >
       <q-card-section>
         <lnbits-qrcode :value="qrValue"></lnbits-qrcode>

lnbits/templates/components/lnbits-dialog.vue

@@ -28,6 +28,7 @@
           flat
           :color="cancelColor"
           :label="cancelLabel"
+          @click="handleCancel"
         ></q-btn>
 
         <q-space></q-space>

lnbits/templates/components/lnbits-payment-list.vue

@@ -398,11 +398,11 @@
             :show="props.expand"
             :cancel-label="$t('close')"
             :action="{
-              handler: () => checkPayment(props.row.payment_hash),
               label: $t('check_payment'),
               icon: 'refresh'
             }"
             @update:show="props.expand = $event"
+            @action="checkPayment(props.row.payment_hash)"
           >
             <q-list bordered separator>
               <q-expansion-item
@@ -489,19 +489,18 @@
             :show="hodlInvoice.show"
             :cancel-label="$t('close')"
             :action="{
-              handler: () =>
-                cancelHoldInvoice(hodlInvoice.payment.payment_hash),
               label: $t('cancel_invoice'),
               color: 'grey',
               closePopup: true
             }"
             :secondary-action="{
-              handler: () => settleHoldInvoice(hodlInvoice.preimage),
               label: $t('settle_invoice'),
               color: 'grey',
               closePopup: true
             }"
             @update:show="hodlInvoice.show = $event"
+            @action="cancelHoldInvoice(hodlInvoice.payment.payment_hash)"
+            @secondary-action="settleHoldInvoice(hodlInvoice.preimage)"
           >
             <q-card-section>
               <q-item-label class="text-h6">

lnbits/templates/components/lnbits-wallet-icon.vue

@@ -11,11 +11,11 @@
   <lnbits-dialog
     :show="icon.show"
     :action="{
-      handler: setIcon,
       label: 'Save Icon',
       disable: !icon.data.icon
     }"
     @update:show="icon.show = $event"
+    @action="setIcon"
     @hide="icon.data = {}"
   >
     <q-form class="q-gutter-md">

lnbits/templates/components/lnbits-wallet-new.vue

@@ -3,14 +3,12 @@
     :show="showNewWalletDialog"
     :title="$t('add_new_wallet')"
     :action="{
-      handler: submitAddWallet,
       label: $t('add_wallet'),
       closePopup: true
     }"
     :secondary-action="
       isLightningShared
         ? {
-            handler: submitRejectWalletInvitation,
             label: $t('reject_wallet'),
             color: 'negative',
             closePopup: true
@@ -18,6 +16,8 @@
         : null
     "
     @update:show="showNewWalletDialog = $event"
+    @action="submitAddWallet"
+    @secondary-action="submitRejectWalletInvitation"
   >
     <q-card-section v-if="g.user.walletInvitesCount">
       <q-badge

lnbits/templates/pages/account.vue

@@ -1235,10 +1235,10 @@
     :show="apiAcl.showPasswordDialog"
     title="Password Required"
     :action="{
-      handler: () => runPasswordGuardedFunction(),
       label: $t('ok')
     }"
-    @update:model-value="apiAcl.showPasswordDialog = $event"
+    @update:show="apiAcl.showPasswordDialog = $event"
+    @action="runPasswordGuardedFunction()"
   >
     <div class="row q-col-gutter-md">
       <div class="col-12">
@@ -1259,11 +1259,11 @@
     :show="apiAcl.showNewAclDialog"
     title="New API Access Control List"
     :action="{
-      handler: () => addApiACL(),
       label: 'Create'
     }"
     :cancel-label="$t('close')"
-    @update:model-value="apiAcl.showNewAclDialog = $event"
+    @update:show="apiAcl.showNewAclDialog = $event"
+    @action="addApiACL()"
   >
     <div class="row q-col-gutter-md">
       <div class="col-12">
@@ -1277,11 +1277,11 @@
     :show="apiAcl.showNewTokenDialog"
     title="New API Token"
     :action="{
-      handler: () => generateApiToken(),
       label: 'Create'
     }"
     :cancel-label="$t('close')"
-    @update:model-value="apiAcl.showNewTokenDialog = $event"
+    @update:show="apiAcl.showNewTokenDialog = $event"
+    @action="generateApiToken()"
   >
     <div class="row q-col-gutter-md">
       <div class="col-12">
@@ -1340,10 +1340,6 @@
     :show="labelsDialog.show"
     :title="$t('label')"
     :action="{
-      handler: () =>
-        g.user.extra.labels.some(label => label.name === labelsDialog.data.name)
-          ? updateUserLabel()
-          : addUserLabel(),
       label: g.user.extra.labels.some(
         label => label.name === labelsDialog.data.name
       )
@@ -1352,7 +1348,12 @@
       disable: !labelsDialog.data.name || !labelsDialog.data.color
     }"
     :cancel-label="$t('cancel')"
-    @update:model-value="labelsDialog.show = $event"
+    @update:show="labelsDialog.show = $event"
+    @action="
+      g.user.extra.labels.some(label => label.name === labelsDialog.data.name)
+        ? updateUserLabel()
+        : addUserLabel()
+    "
   >
     <div class="row q-col-gutter-md">
       <div class="col-12">

lnbits/templates/pages/audit.vue

@@ -174,12 +174,12 @@
     :show="auditDetailsDialog.show"
     :title="$t('http_request_details')"
     :action="{
-      handler: () => utils.copyText(auditDetailsDialog.data),
       label: $t('copy'),
       icon: 'content_copy'
     }"
     :cancel-label="$t('close')"
-    @update:model-value="auditDetailsDialog.show = $event"
+    @update:show="auditDetailsDialog.show = $event"
+    @action="utils.copyText(auditDetailsDialog.data)"
   >
     <q-input
       filled

lnbits/templates/pages/extensions.vue

@@ -370,11 +370,11 @@
     :show="showUninstallDialog"
     :title="$t('warning')"
     :action="{
-      handler: () => uninstallExtension(),
       label: $t('uninstall_confirm')
     }"
     :cancel-label="$t('cancel')"
-    @update:model-value="showUninstallDialog = $event"
+    @update:show="showUninstallDialog = $event"
+    @action="uninstallExtension()"
   >
     <p>
       <span v-text="$t('extension_uninstall_warning')"></span><br />
@@ -399,13 +399,13 @@
     :show="showDropDbDialog"
     :title="$t('warning')"
     :action="{
-      handler: () => dropExtensionDb(),
       label: $t('confirm'),
       color: 'red',
       disable: dropDbExtensionId !== selectedExtension.id
     }"
     :cancel-label="$t('cancel')"
-    @update:model-value="showDropDbDialog = $event"
+    @update:show="showDropDbDialog = $event"
+    @action="dropExtensionDb()"
   >
     <p><span v-text="$t('extension_db_drop_warning')"></span><br /></p>
     <q-input
@@ -1247,7 +1247,7 @@
   <lnbits-dialog
     :show="paymentDialog.show"
     :cancel-label="$t('close')"
-    @update:model-value="paymentDialog.show = $event"
+    @update:show="paymentDialog.show = $event"
   >
     <q-responsive :ratio="1" class="q-mx-xl q-mb-xl">
       <lnbits-qrcode
@@ -1262,11 +1262,11 @@
     :show="showUpdateAllDialog"
     :title="$t('update')"
     :action="{
-      handler: () => updateSelectedExtensions(),
       label: $t('update')
     }"
     :cancel-label="$t('cancel')"
-    @update:model-value="showUpdateAllDialog = $event"
+    @update:show="showUpdateAllDialog = $event"
+    @action="updateSelectedExtensions()"
   >
     <div v-if="updatableExtensions?.length > 1" class="row">
       <div class="col-12 q-mb-md">

lnbits/templates/pages/node.vue

@@ -106,11 +106,11 @@
               <lnbits-dialog
                 :show="connectPeerDialog.show"
                 :action="{
-                  label: $t('connect'),
-                  handler: connectPeer
+                  label: $t('connect')
                 }"
                 :cancel-label="$t('cancel')"
-                @update:model-value="connectPeerDialog.show = $event"
+                @update:show="connectPeerDialog.show = $event"
+                @action="connectPeer"
               >
                 <q-form class="q-gutter-md">
                   <q-input
@@ -128,11 +128,11 @@
                 :show="setFeeDialog.show"
                 title="Set Channel Fee"
                 :action="{
-                  label: $t('set'),
-                  handler: () => setChannelFee(setFeeDialog.channel_id)
+                  label: $t('set')
                 }"
                 :cancel-label="$t('cancel')"
-                @update:model-value="setFeeDialog.show = $event"
+                @update:show="setFeeDialog.show = $event"
+                @action="setChannelFee(setFeeDialog.channel_id)"
               >
                 <p class="text-caption" v-text="setFeeDialog.channel_id"></p>
                 <q-separator></q-separator>
@@ -157,11 +157,11 @@
               <lnbits-dialog
                 :show="openChannelDialog.show"
                 :action="{
-                  label: $t('open'),
-                  handler: openChannel
+                  label: $t('open')
                 }"
                 :cancel-label="$t('cancel')"
-                @update:model-value="openChannelDialog.show = $event"
+                @update:show="openChannelDialog.show = $event"
+                @action="openChannel"
               >
                 <q-form class="q-gutter-md">
                   <q-input
@@ -209,11 +209,11 @@
                 :show="closeChannelDialog.show"
                 title="Close Channel"
                 :action="{
-                  label: $t('close'),
-                  handler: closeChannel
+                  label: $t('close')
                 }"
                 :cancel-label="$t('cancel')"
-                @update:model-value="closeChannelDialog.show = $event"
+                @update:show="closeChannelDialog.show = $event"
+                @action="closeChannel"
               >
                 <q-form class="q-gutter-md">
                   <div>

lnbits/templates/pages/users.vue

@@ -451,11 +451,11 @@
           title="Create Wallet"
           :action="{
             label: 'Create',
-            handler: createWallet,
             closePopup: true
           }"
           cancel-label="Cancel"
-          @update:model-value="createWalletDialog.show = $event"
+          @update:show="createWalletDialog.show = $event"
+          @action="createWallet"
         >
           <div class="row">
             <div class="col-12">