fix: separate concerns

some need a bit more work

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

@@ -0,0 +1,105 @@
+window.app.component('lnbits-dialog', {
+  template: '#lnbits-dialog',
+
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    position: {
+      type: String,
+      default: 'top'
+    },
+    persistent: {
+      type: Boolean,
+      default: false
+    },
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+    cancelLabel: {
+      type: String,
+      default: 'Close'
+    },
+    cancelColor: {
+      type: String,
+      default: 'grey'
+    },
+    action: {
+      type: Object,
+      default: null
+    },
+    secondaryAction: {
+      type: Object,
+      default: null
+    }
+  },
+
+  emits: ['update:show', 'hide', 'cancel', 'action', 'secondary-action'],
+
+  computed: {
+    hasAction() {
+      return !!(this.action && this.action.label)
+    },
+    hasSecondaryAction() {
+      return !!(this.secondaryAction && this.secondaryAction.label)
+    },
+
+    actionProps() {
+      const action = this.action || {}
+      const obj = {
+        label: action.label || 'Action',
+        color: action.color || 'primary',
+        loading: !!action.loading,
+        disable: !!action.disable,
+        closePopup: !!action.closePopup
+      }
+      if (action.icon) {
+        obj.icon = action.icon
+      }
+      return obj
+    },
+    secondaryActionProps() {
+      const action = this.secondaryAction || {}
+      const obj = {
+        label: action.label || 'Secondary',
+        color: action.color || 'secondary',
+        loading: !!action.loading,
+        disable: !!action.disable,
+        closePopup: !!action.closePopup
+      }
+      if (action.icon) {
+        obj.icon = action.icon
+      }
+      return obj
+    }
+  },
+
+  methods: {
+    handleModelUpdate(value) {
+      this.$emit('update:show', value)
+    },
+
+    handleHide() {
+      this.handleModelUpdate(false)
+      this.$emit('hide')
+    },
+
+    handleCancel() {
+      this.$emit('cancel')
+    },
+
+    handleAction() {
+      this.$emit('action')
+    },
+
+    handleSecondaryAction() {
+      this.$emit('secondary-action')
+    }
+  }
+})

lnbits/static/vendor.json

@@ -70,6 +70,7 @@
     "js/components/admin/lnbits-admin-site-customisation.js",
     "js/components/admin/lnbits-admin-assets-config.js",
     "js/components/admin/lnbits-admin-audit.js",
+    "js/components/lnbits-dialog.js",
     "js/components/lnbits-wallet-charts.js",
     "js/components/lnbits-wallet-api-docs.js",
     "js/components/lnbits-wallet-icon.js",

lnbits/templates/components.vue

@@ -30,7 +30,8 @@ include('components/lnbits-wallet-share.vue') %} {%
 include('components/lnbits-wallet-charts.vue') %} {%
 include('components/lnbits-wallet-paylinks.vue') %} {%
 include('components/lnbits-wallet-extra.vue') %} {%
-include('components/lnbits-error.vue') %}
+include('components/lnbits-error.vue') %} {%
+include('components/lnbits-dialog.vue') %}
 
 <template id="lnbits-manage">
   <q-list v-if="g.user" dense class="lnbits-drawer__q-list">

lnbits/templates/components/admin/exchange_providers.vue

@@ -199,12 +199,16 @@
     </div>
     <div class="col-md-8 col-sm-12"></div>
   </div>
-
+  <lnbits-dialog
-  <q-dialog v-model="exchangeData.showTickerConversion" position="top">
+    :show="exchangeData.showTickerConversion"
-    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
+    :title="$t('create_ticker_converter')"
-      <div class="q-mb-md">
+    :action="{
-        <strong v-text="$t('create_ticker_converter')"></strong>
+      label: 'Add Ticker Conversion'
-      </div>
+    }"
+    :cancel-label="$t('close')"
+    @update:show="exchangeData.showTickerConversion = $event"
+    @action="addExchangeTickerConversion()"
+  >
     <div class="row">
       <div class="col-12 q-mb-md">
         <q-select
@@ -226,20 +230,5 @@
         </q-input>
       </div>
     </div>
-      <div class="row q-mt-lg">
+  </lnbits-dialog>
-        <q-btn
-          @click="addExchangeTickerConversion()"
-          label="Add Ticker Conversion"
-          color="primary"
-        ></q-btn>
-        <q-btn
-          v-close-popup
-          flat
-          color="grey"
-          class="q-ml-auto"
-          v-text="$t('close')"
-        ></q-btn>
-      </div>
-    </q-card>
-  </q-dialog>
 </template>

lnbits/templates/components/admin/funding_sources.vue

@@ -125,15 +125,14 @@
         </q-expansion-item>
       </div>
     </q-list>
-    <q-dialog v-model="showQRDialog">
+    <lnbits-dialog
-      <q-card class="q-pa-md">
+      :show="showQRDialog"
+      :position="'standard'"
+      @update:show="showQRDialog = $event"
+    >
       <q-card-section>
         <lnbits-qrcode :value="qrValue"></lnbits-qrcode>
       </q-card-section>
-        <q-card-actions align="right">
+    </lnbits-dialog>
-          <q-btn flat :label="$t('close')" v-close-popup />
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
   </div>
 </template>

lnbits/templates/components/lnbits-dialog.vue

@@ -0,0 +1,61 @@
+<template id="lnbits-dialog">
+  <q-dialog
+    :model-value="show"
+    :position="position"
+    :persistent="persistent"
+    @update:model-value="handleModelUpdate"
+    @hide="handleHide"
+  >
+    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+      <!-- Header with optional title -->
+      <q-card-section v-if="title">
+        <div class="text-h6" v-text="title"></div>
+      </q-card-section>
+
+      <!-- Main content slot -->
+      <q-card-section>
+        <slot></slot>
+      </q-card-section>
+
+      <q-card-actions
+        v-if="showCancel || hasAction || hasSecondaryAction"
+        class="q-mt-lg"
+        align="right"
+      >
+        <q-btn
+          v-if="showCancel"
+          v-close-popup
+          flat
+          :color="cancelColor"
+          :label="cancelLabel"
+          @click="handleCancel"
+        ></q-btn>
+
+        <q-space></q-space>
+
+        <q-btn
+          v-if="hasSecondaryAction"
+          :icon="secondaryActionProps.icon"
+          :color="secondaryActionProps.color"
+          :label="secondaryActionProps.label"
+          :loading="secondaryActionProps.loading"
+          :disable="secondaryActionProps.disable"
+          @click="handleSecondaryAction"
+          v-close-popup="secondaryActionProps.closePopup"
+          class="q-mr-sm"
+        ></q-btn>
+
+        <q-btn
+          v-if="hasAction"
+          :icon="actionProps.icon"
+          :color="actionProps.color"
+          :label="actionProps.label"
+          :loading="actionProps.loading"
+          :disable="actionProps.disable"
+          @click="handleAction"
+          v-close-popup="actionProps.closePopup"
+        ></q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

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

@@ -394,9 +394,16 @@
               ></span>
             </i>
           </q-td>
-          <q-dialog v-model="props.expand" :props="props" position="top">
+          <lnbits-dialog
-            <q-card class="q-pa-sm q-pt-xl lnbits__dialog-card">
+            :show="props.expand"
-              <q-card-section>
+            :cancel-label="$t('close')"
+            :action="{
+              label: $t('check_payment'),
+              icon: 'refresh'
+            }"
+            @update:show="props.expand = $event"
+            @action="checkPayment(props.row.payment_hash)"
+          >
             <q-list bordered separator>
               <q-expansion-item
                 expand-separator
@@ -461,9 +468,7 @@
             </q-list>
 
             <div
-                  v-if="
+              v-if="props.row.isIn && props.row.isPending && props.row.bolt11"
-                    props.row.isIn && props.row.isPending && props.row.bolt11
-                  "
             >
               <div v-if="props.row.extra.fiat_payment_request">
                 <lnbits-qrcode
@@ -479,27 +484,24 @@
                 ></lnbits-qrcode>
               </div>
             </div>
-                <div class="row q-mt-md">
+          </lnbits-dialog>
-                  <q-btn
+          <lnbits-dialog
-                    outline
+            :show="hodlInvoice.show"
-                    color="grey"
+            :cancel-label="$t('close')"
-                    @click="checkPayment(props.row.payment_hash)"
+            :action="{
-                    icon="refresh"
+              label: $t('cancel_invoice'),
-                    :label="$t('payment_check')"
+              color: 'grey',
-                  ></q-btn>
+              closePopup: true
-                  <q-btn
+            }"
-                    v-close-popup
+            :secondary-action="{
-                    flat
+              label: $t('settle_invoice'),
-                    color="grey"
+              color: 'grey',
-                    class="q-ml-auto"
+              closePopup: true
-                    :label="$t('close')"
+            }"
-                  ></q-btn>
+            @update:show="hodlInvoice.show = $event"
-                </div>
+            @action="cancelHoldInvoice(hodlInvoice.payment.payment_hash)"
-              </q-card-section>
+            @secondary-action="settleHoldInvoice(hodlInvoice.preimage)"
-            </q-card>
+          >
-          </q-dialog>
-          <q-dialog v-model="hodlInvoice.show" position="top">
-            <q-card class="q-pa-sm q-pt-xl lnbits__dialog-card">
             <q-card-section>
               <q-item-label class="text-h6">
                 <span v-text="$t('hold_invoice')"></span>
@@ -520,33 +522,7 @@
               >
               </q-input>
             </q-card-section>
-              <q-card-section class="row q-gutter-x-sm">
+          </lnbits-dialog>
-                <q-btn
-                  @click="settleHoldInvoice(hodlInvoice.preimage)"
-                  outline
-                  v-close-popup
-                  color="grey"
-                  :label="$t('settle_invoice')"
-                >
-                </q-btn>
-                <q-btn
-                  v-close-popup
-                  outline
-                  color="grey"
-                  class="q-ml-sm"
-                  @click="cancelHoldInvoice(hodlInvoice.payment.payment_hash)"
-                  :label="$t('cancel_invoice')"
-                ></q-btn>
-                <q-btn
-                  v-close-popup
-                  flat
-                  color="grey"
-                  class="q-ml-auto"
-                  :label="$t('close')"
-                ></q-btn>
-              </q-card-section>
-            </q-card>
-          </q-dialog>
         </q-tr>
       </template>
     </q-table>

lnbits/templates/components/lnbits-qrcode-scanner.vue

@@ -1,6 +1,10 @@
 <template id="lnbits-qrcode-scanner">
-  <q-dialog v-model="showScanner" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-lg q-pt-xl">
+    :show="showScanner"
+    :cancel-label="$t('cancel')"
+    @update:show="showScanner = $event"
+    @cancel="reset"
+  >
     <div class="text-center q-mb-lg">
       <qrcode-stream
         @detect="detect"
@@ -8,15 +12,5 @@
         class="rounded-borders"
       ></qrcode-stream>
     </div>
-      <div class="row q-mt-lg">
+  </lnbits-dialog>
-        <q-btn
-          @click="reset"
-          flat
-          color="grey"
-          class="q-ml-auto"
-          :label="$t('cancel')"
-        ></q-btn>
-      </div>
-    </q-card>
-  </q-dialog>
 </template>

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

@@ -8,9 +8,17 @@
     icon="edit"
     style="position: relative; left: -15px; bottom: -10px"
   ></q-btn>
-  <q-dialog v-model="icon.show" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+    :show="icon.show"
-      <q-form @submit="setIcon" class="q-gutter-md">
+    :action="{
+      label: 'Save Icon',
+      disable: !icon.data.icon
+    }"
+    @update:show="icon.show = $event"
+    @action="setIcon"
+    @hide="icon.data = {}"
+  >
+    <q-form class="q-gutter-md">
       <div class="q-gutter-sm q-pa-sm flex flex-wrap justify-center">
         <q-btn
           v-for="(thisIcon, index) in icon.options"
@@ -41,16 +49,7 @@
             class="q-mr-xs"
           ></q-btn>
         </div>
-          <q-btn
-            unelevated
-            color="primary"
-            :disable="!icon.data.icon"
-            type="submit"
-          >
-            Save Icon
-          </q-btn>
       </div>
     </q-form>
-    </q-card>
+  </lnbits-dialog>
-  </q-dialog>
 </template>

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

@@ -1,11 +1,24 @@
 <template id="lnbits-wallet-new">
-  <q-dialog v-model="showNewWalletDialog" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-lg q-pt-md lnbits__dialog-card">
+    :show="showNewWalletDialog"
-      <q-card-section>
+    :title="$t('add_new_wallet')"
-        <div class="text-h6">
+    :action="{
-          <span v-text="$t('add_new_wallet')"></span>
+      label: $t('add_wallet'),
-        </div>
+      closePopup: true
-      </q-card-section>
+    }"
+    :secondary-action="
+      isLightningShared
+        ? {
+            label: $t('reject_wallet'),
+            color: 'negative',
+            closePopup: true
+          }
+        : null
+    "
+    @update:show="showNewWalletDialog = $event"
+    @action="submitAddWallet"
+    @secondary-action="submitRejectWalletInvitation"
+  >
     <q-card-section v-if="g.user.walletInvitesCount">
       <q-badge
         @click="g.newWalletType = 'lightning-shared'"
@@ -55,40 +68,5 @@
         <span v-text="$t('shared_wallet_desc')" class="q-mt-lg"></span>
       </div>
     </q-card-section>
-
+  </lnbits-dialog>
-      <q-card-actions class="text-primary">
-        <div class="row full-width">
-          <div class="col-md-4">
-            <q-btn
-              flat
-              :label="$t('cancel')"
-              class="float-left"
-              v-close-popup
-            ></q-btn>
-          </div>
-          <div class="col-md-4">
-            <q-btn
-              v-if="isLightningShared"
-              :disabled="!wallet.sharedWalletId"
-              flat
-              :label="$t('reject_wallet')"
-              v-close-popup
-              color="negative"
-              @click="submitRejectWalletInvitation()"
-            ></q-btn>
-            <span v-else></span>
-          </div>
-          <div class="col-md-4">
-            <q-btn
-              flat
-              :label="$t('add_wallet')"
-              v-close-popup
-              @click="submitAddWallet()"
-              class="float-right"
-            ></q-btn>
-          </div>
-        </div>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
 </template>

lnbits/templates/pages/account.vue

@@ -1231,10 +1231,16 @@
     </div>
   </div>
 
-  <q-dialog v-model="apiAcl.showPasswordDialog" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
+    :show="apiAcl.showPasswordDialog"
-      <strong>User Password</strong>
+    title="Password Required"
-      <div class="row q-mt-md q-col-gutter-md">
+    :action="{
+      label: $t('ok')
+    }"
+    @update:show="apiAcl.showPasswordDialog = $event"
+    @action="runPasswordGuardedFunction()"
+  >
+    <div class="row q-col-gutter-md">
       <div class="col-12">
         <q-input
           v-model="apiAcl.password"
@@ -1247,55 +1253,39 @@
         </q-input>
       </div>
     </div>
-      <div class="row q-mt-lg">
+  </lnbits-dialog>
-        <q-btn
-          v-close-popup
-          flat
-          color="grey"
-          class="q-ml-auto"
-          v-text="$t('cancel')"
-        ></q-btn>
-        <q-btn
-          @click="runPasswordGuardedFunction()"
-          :label="$t('ok')"
-          color="primary"
-        ></q-btn>
-      </div>
-    </q-card>
-  </q-dialog>
 
-  <q-dialog v-model="apiAcl.showNewAclDialog" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
+    :show="apiAcl.showNewAclDialog"
-      <strong>New API Access Control List</strong>
+    title="New API Access Control List"
-      <div class="row q-mt-md q-col-gutter-md">
+    :action="{
+      label: 'Create'
+    }"
+    :cancel-label="$t('close')"
+    @update:show="apiAcl.showNewAclDialog = $event"
+    @action="addApiACL()"
+  >
+    <div class="row q-col-gutter-md">
       <div class="col-12">
         <q-input v-model="apiAcl.newAclName" dense filled label="ACL Name">
         </q-input>
       </div>
     </div>
-      <div class="row q-mt-lg">
+  </lnbits-dialog>
-        <q-btn @click="addApiACL()" label="Create" color="primary"></q-btn>
+
-        <q-btn
+  <lnbits-dialog
-          v-close-popup
+    :show="apiAcl.showNewTokenDialog"
-          flat
+    title="New API Token"
-          color="grey"
+    :action="{
-          class="q-ml-auto"
+      label: 'Create'
-          v-text="$t('close')"
+    }"
-        ></q-btn>
+    :cancel-label="$t('close')"
-      </div>
+    @update:show="apiAcl.showNewTokenDialog = $event"
-    </q-card>
+    @action="generateApiToken()"
-  </q-dialog>
-  <q-dialog v-model="apiAcl.showNewTokenDialog" position="top">
-    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
-      <strong>New API Token</strong>
-      <div class="row q-col-gutter-md q-mt-md">
-        <div class="col-12">
-          <q-input
-            v-model="apiAcl.newTokenName"
-            dense
-            filled
-            label="Token Name"
   >
+    <div class="row q-col-gutter-md">
+      <div class="col-12">
+        <q-input v-model="apiAcl.newTokenName" dense filled label="Token Name">
         </q-input>
       </div>
       <div class="col-12">
@@ -1313,10 +1303,7 @@
                 transition-show="scale"
                 transition-hide="scale"
               >
-                  <q-date
+                <q-date v-model="apiAcl.newTokenExpiry" mask="YYYY-MM-DD HH:mm">
-                    v-model="apiAcl.newTokenExpiry"
-                    mask="YYYY-MM-DD HH:mm"
-                  >
                   <div class="row items-center justify-end">
                     <q-btn v-close-popup label="Close" color="primary" flat />
                   </div>
@@ -1347,26 +1334,28 @@
         </q-input>
       </div>
     </div>
-      <div class="row q-mt-lg">
+  </lnbits-dialog>
-        <q-btn
+
-          @click="generateApiToken()"
+  <lnbits-dialog
-          label="Create"
+    :show="labelsDialog.show"
-          color="primary"
+    :title="$t('label')"
-        ></q-btn>
+    :action="{
-        <q-btn
+      label: g.user.extra.labels.some(
-          v-close-popup
+        label => label.name === labelsDialog.data.name
-          flat
+      )
-          color="grey"
+        ? $t('update_label')
-          class="q-ml-auto"
+        : $t('add_label'),
-          v-text="$t('close')"
+      disable: !labelsDialog.data.name || !labelsDialog.data.color
-        ></q-btn>
+    }"
-      </div>
+    :cancel-label="$t('cancel')"
-    </q-card>
+    @update:show="labelsDialog.show = $event"
-  </q-dialog>
+    @action="
-  <q-dialog v-model="labelsDialog.show" position="top">
+      g.user.extra.labels.some(label => label.name === labelsDialog.data.name)
-    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
+        ? updateUserLabel()
-      <strong v-text="$t('label')"></strong>
+        : addUserLabel()
-      <div class="row q-mt-md q-col-gutter-md">
+    "
+  >
+    <div class="row q-col-gutter-md">
       <div class="col-12">
         <q-input
           v-model="labelsDialog.data.name"
@@ -1411,33 +1400,5 @@
         </q-input>
       </div>
     </div>
-      <div class="row q-mt-lg">
+  </lnbits-dialog>
-        <q-btn
-          v-close-popup
-          flat
-          color="grey"
-          class="q-ml-auto"
-          v-text="$t('cancel')"
-        ></q-btn>
-        <q-btn
-          v-if="
-            g.user.extra.labels.some(
-              label => label.name === labelsDialog.data.name
-            )
-          "
-          @click="updateUserLabel()"
-          :disable="!labelsDialog.data.name || !labelsDialog.data.color"
-          :label="$t('update_label')"
-          color="primary"
-        ></q-btn>
-        <q-btn
-          v-else
-          @click="addUserLabel()"
-          :disable="!labelsDialog.data.name || !labelsDialog.data.color"
-          :label="$t('add_label')"
-          color="primary"
-        ></q-btn>
-      </div>
-    </q-card>
-  </q-dialog>
 </template>

lnbits/templates/pages/audit.vue

@@ -170,9 +170,17 @@
     </div>
   </div>
 
-  <q-dialog v-model="auditDetailsDialog.show" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
+    :show="auditDetailsDialog.show"
-      <strong v-text="$t('http_request_details')"></strong>
+    :title="$t('http_request_details')"
+    :action="{
+      label: $t('copy'),
+      icon: 'content_copy'
+    }"
+    :cancel-label="$t('close')"
+    @update:show="auditDetailsDialog.show = $event"
+    @action="utils.copyText(auditDetailsDialog.data)"
+  >
     <q-input
       filled
       dense
@@ -180,23 +188,5 @@
       type="textarea"
       rows="25"
     ></q-input>
-
+  </lnbits-dialog>
-      <div class="row q-mt-lg">
-        <q-btn
-          @click="utils.copyText(auditDetailsDialog.data)"
-          icon="content_copy"
-          color="grey"
-          flat
-          v-text="$t('copy')"
-        ></q-btn>
-        <q-btn
-          v-close-popup
-          flat
-          color="grey"
-          class="q-ml-auto"
-          v-text="$t('close')"
-        ></q-btn>
-      </div>
-    </q-card>
-  </q-dialog>
 </template>

lnbits/templates/pages/extensions.vue

@@ -366,9 +366,16 @@
     </div>
   </div>
 
-  <q-dialog v-model="showUninstallDialog" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-lg">
+    :show="showUninstallDialog"
-      <h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
+    :title="$t('warning')"
+    :action="{
+      label: $t('uninstall_confirm')
+    }"
+    :cancel-label="$t('cancel')"
+    @update:show="showUninstallDialog = $event"
+    @action="uninstallExtension()"
+  >
     <p>
       <span v-text="$t('extension_uninstall_warning')"></span><br />
       <span v-text="$t('confirm_continue')"></span>
@@ -385,27 +392,21 @@
         </q-tooltip>
       </q-checkbox>
     </div>
-      <div class="row q-mt-lg">
+  </lnbits-dialog>
-        <q-btn
-          outline
-          color="grey"
-          @click="uninstallExtension()"
-          v-text="$t('uninstall_confirm')"
-        ></q-btn>
-        <q-btn
-          v-close-popup
-          flat
-          color="grey"
-          class="q-ml-auto"
-          v-text="$t('cancel')"
-        ></q-btn>
-      </div>
-    </q-card>
-  </q-dialog>
 
-  <q-dialog v-model="showDropDbDialog" position="top">
+  <lnbits-dialog
-    <q-card v-if="selectedExtension" class="q-pa-lg">
+    v-if="selectedExtension"
-      <h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
+    :show="showDropDbDialog"
+    :title="$t('warning')"
+    :action="{
+      label: $t('confirm'),
+      color: 'red',
+      disable: dropDbExtensionId !== selectedExtension.id
+    }"
+    :cancel-label="$t('cancel')"
+    @update:show="showDropDbDialog = $event"
+    @action="dropExtensionDb()"
+  >
     <p><span v-text="$t('extension_db_drop_warning')"></span><br /></p>
     <q-input
       v-model="dropDbExtensionId"
@@ -430,8 +431,7 @@
         v-text="$t('cancel')"
       ></q-btn>
     </div>
-    </q-card>
+  </lnbits-dialog>
-  </q-dialog>
 
   <q-dialog v-model="showManageExtensionDialog" position="top">
     <q-card v-if="selectedRelease" class="q-pa-lg lnbits__dialog-card">
@@ -1244,9 +1244,11 @@
       </q-card-section>
     </q-card>
   </q-dialog>
-  <q-dialog v-model="paymentDialog.show" position="top">
+  <lnbits-dialog
-    <q-card class="q-pa-md lnbits__dialog-card">
+    :show="paymentDialog.show"
-      <q-card-section>
+    :cancel-label="$t('close')"
+    @update:show="paymentDialog.show = $event"
+  >
     <q-responsive :ratio="1" class="q-mx-xl q-mb-xl">
       <lnbits-qrcode
         :value="paymentDialog.invoice"
@@ -1254,21 +1256,20 @@
         class="rounded-borders"
       ></lnbits-qrcode>
     </q-responsive>
-      </q-card-section>
+  </lnbits-dialog>
-      <q-card-actions align="between">
+
-        <q-btn v-close-popup flat color="grey" :label="$t('close')"></q-btn>
+  <lnbits-dialog
-      </q-card-actions>
+    :show="showUpdateAllDialog"
-    </q-card>
+    :title="$t('update')"
-  </q-dialog>
+    :action="{
-  <q-dialog v-model="showUpdateAllDialog" position="top">
+      label: $t('update')
-    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
+    }"
-      <div class="row">
+    :cancel-label="$t('cancel')"
-        <div class="col-12">
+    @update:show="showUpdateAllDialog = $event"
-          <h6 class="q-my-md" v-text="$t('update')"></h6>
+    @action="updateSelectedExtensions()"
-        </div>
+  >
-      </div>
     <div v-if="updatableExtensions?.length > 1" class="row">
-        <div class="col-12">
+      <div class="col-12 q-mb-md">
         <q-btn
           outline
           color="grey"
@@ -1299,21 +1300,5 @@
         </div>
       </template>
     </q-virtual-scroll>
-      <div class="row q-mt-lg">
+  </lnbits-dialog>
-        <q-btn
-          @click="updateSelectedExtensions()"
-          outline
-          color="grey"
-          v-text="$t('update')"
-        ></q-btn>
-        <q-btn
-          v-close-popup
-          flat
-          color="grey"
-          class="q-ml-auto"
-          v-text="$t('cancel')"
-        ></q-btn>
-      </div>
-    </q-card>
-  </q-dialog>
 </template>

lnbits/templates/pages/node.vue

@@ -103,8 +103,15 @@
               </q-card-section>
             </q-tab-panel>
             <q-tab-panel name="channels">
-              <q-dialog v-model="connectPeerDialog.show" position="top">
+              <lnbits-dialog
-                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+                :show="connectPeerDialog.show"
+                :action="{
+                  label: $t('connect')
+                }"
+                :cancel-label="$t('cancel')"
+                @update:show="connectPeerDialog.show = $event"
+                @action="connectPeer"
+              >
                 <q-form class="q-gutter-md">
                   <q-input
                     dense
@@ -114,28 +121,19 @@
                     label="Node URI"
                     hint="pubkey@host:port"
                   ></q-input>
-
-                    <div class="row q-mt-lg">
-                      <q-btn
-                        :label="$t('connect')"
-                        color="primary"
-                        @click="connectPeer"
-                      ></q-btn>
-                      <q-btn
-                        v-close-popup
-                        flat
-                        color="grey"
-                        class="q-ml-auto"
-                        :label="$t('cancel')"
-                      ></q-btn>
-                    </div>
                 </q-form>
-                </q-card>
+              </lnbits-dialog>
-              </q-dialog>
 
-              <q-dialog v-model="setFeeDialog.show">
+              <lnbits-dialog
-                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+                :show="setFeeDialog.show"
-                  <label class="text-h6">Set Channel Fee</label>
+                title="Set Channel Fee"
+                :action="{
+                  label: $t('set')
+                }"
+                :cancel-label="$t('cancel')"
+                @update:show="setFeeDialog.show = $event"
+                @action="setChannelFee(setFeeDialog.channel_id)"
+              >
                 <p class="text-caption" v-text="setFeeDialog.channel_id"></p>
                 <q-separator></q-separator>
                 <q-form class="q-gutter-md">
@@ -153,27 +151,18 @@
                     v-model.number="setFeeDialog.data.fee_base_msat"
                     label="Fee Base msat"
                   ></q-input>
-
-                    <div class="row q-mt-lg">
-                      <q-btn
-                        :label="$t('set')"
-                        color="primary"
-                        @click="setChannelFee(setFeeDialog.channel_id)"
-                      ></q-btn>
-                      <q-btn
-                        v-close-popup
-                        flat
-                        color="grey"
-                        class="q-ml-auto"
-                        :label="$t('cancel')"
-                      ></q-btn>
-                    </div>
                 </q-form>
-                </q-card>
+              </lnbits-dialog>
-              </q-dialog>
 
-              <q-dialog v-model="openChannelDialog.show">
+              <lnbits-dialog
-                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+                :show="openChannelDialog.show"
+                :action="{
+                  label: $t('open')
+                }"
+                :cancel-label="$t('cancel')"
+                @update:show="openChannelDialog.show = $event"
+                @action="openChannel"
+              >
                 <q-form class="q-gutter-md">
                   <q-input
                     dense
@@ -197,9 +186,7 @@
                             dense
                             type="number"
                             filled
-                              v-model.number="
+                            v-model.number="openChannelDialog.data.push_amount"
-                                openChannelDialog.data.push_amount
-                              "
                             label="Push Amount"
                             hint="This gifts sats to the other side!"
                           ></q-input>
@@ -215,27 +202,19 @@
                       </q-card-section>
                     </q-card>
                   </q-expansion-item>
-
-                    <div class="row q-mt-lg">
-                      <q-btn
-                        :label="$t('open')"
-                        color="primary"
-                        @click="openChannel"
-                      ></q-btn>
-                      <q-btn
-                        v-close-popup
-                        flat
-                        color="grey"
-                        class="q-ml-auto"
-                        :label="$t('cancel')"
-                      ></q-btn>
-                    </div>
                 </q-form>
-                </q-card>
+              </lnbits-dialog>
-              </q-dialog>
 
-              <q-dialog v-model="closeChannelDialog.show" position="top">
+              <lnbits-dialog
-                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+                :show="closeChannelDialog.show"
+                title="Close Channel"
+                :action="{
+                  label: $t('close')
+                }"
+                :cancel-label="$t('cancel')"
+                @update:show="closeChannelDialog.show = $event"
+                @action="closeChannel"
+              >
                 <q-form class="q-gutter-md">
                   <div>
                     <q-checkbox
@@ -243,24 +222,8 @@
                       label="Force"
                     />
                   </div>
-
-                    <div class="row q-mt-lg">
-                      <q-btn
-                        :label="$t('close')"
-                        color="primary"
-                        @click="closeChannel"
-                      ></q-btn>
-                      <q-btn
-                        v-close-popup
-                        flat
-                        color="grey"
-                        class="q-ml-auto"
-                        :label="$t('cancel')"
-                      ></q-btn>
-                    </div>
                 </q-form>
-                </q-card>
+              </lnbits-dialog>
-              </q-dialog>
 
               <q-card-section class="q-pa-none">
                 <div class="row q-col-gutter-lg">

lnbits/templates/pages/users.vue

@@ -446,9 +446,17 @@
         </div>
       </div>
       <div v-else-if="activeWallet.show">
-        <q-dialog v-model="createWalletDialog.show" position="top">
+        <lnbits-dialog
-          <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
+          :show="createWalletDialog.show"
-            <strong>Create Wallet</strong>
+          title="Create Wallet"
+          :action="{
+            label: 'Create',
+            closePopup: true
+          }"
+          cancel-label="Cancel"
+          @update:show="createWalletDialog.show = $event"
+          @action="createWallet"
+        >
           <div class="row">
             <div class="col-12">
               <div class="row q-mt-lg">
@@ -469,27 +477,13 @@
                     filled
                     dense
                     v-model="createWalletDialog.data.currency"
-                      :options="{{ currencies | safe }}"
+                    :options="g.allowedCurrencies"
                   ></q-select>
                 </div>
               </div>
-                <div class="row q-mt-lg">
-                  <q-btn
-                    v-close-popup
-                    @click="createWallet()"
-                    unelevated
-                    color="primary"
-                    type="submit"
-                    >Create</q-btn
-                  >
-                  <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-                    >Cancel</q-btn
-                  >
             </div>
           </div>
-            </div>
+        </lnbits-dialog>
-          </q-card>
-        </q-dialog>
       </div>
       <div v-else>
         <div class="row q-col-gutter-md q-mb-md">

package.json

@@ -123,6 +123,7 @@
       "js/components/admin/lnbits-admin-site-customisation.js",
       "js/components/admin/lnbits-admin-assets-config.js",
       "js/components/admin/lnbits-admin-audit.js",
+      "js/components/lnbits-dialog.js",
       "js/components/lnbits-wallet-charts.js",
       "js/components/lnbits-wallet-api-docs.js",
       "js/components/lnbits-wallet-icon.js",