chore: update to version v1.5.2 (#3891)

Co-authored-by: dni ⚡ <office@dnilabs.com>

docker/boltzclient/Dockerfile

@@ -18,7 +18,7 @@ RUN uv sync --all-extras
 ENV LNBITS_PORT="5000"
 ENV LNBITS_HOST="0.0.0.0"
 ENV LNBITS_BACKEND_WALLET_CLASS="BoltzWallet"
-ENV FUNDING_SOURCE_MAX_RETRIES=10
+ENV FUNDING_SOURCE_MAX_RETRIES="10"
 
 # Boltzd
 ENV BOLTZ_CLIENT_ENDPOINT="127.0.0.1:9002"

docker/sparkl2/Dockerfile

@@ -2,15 +2,17 @@ ARG LNBITS_TAG=latest
 
 FROM lnbits/lnbits:${LNBITS_TAG}
 
+RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
+
 RUN apt-get update && apt-get -y upgrade
-RUN apt-get install -y netcat-openbsd npm nodejs git
+RUN apt-get install -y ca-certificates curl gnupg netcat-openbsd git nodejs
 
 RUN curl -LsSf https://astral.sh/uv/install.sh | sh
 ENV PATH="/root/.local/bin:$PATH"
 
 # install sparksidecar
 RUN git clone https://github.com/lnbits/spark_sidecar
-RUN cd spark_sidecar && npm install
+RUN cd spark_sidecar && npm ci
 
 # Reinstall dependencies for lnbits just in case (needed for CMD usage)
 RUN uv sync --all-extras
@@ -22,7 +24,7 @@ ENV LNBITS_BACKEND_WALLET_CLASS="SparkL2Wallet"
 ENV LNBITS_RESERVE_FEE_MIN="20000"
 ENV LNBITS_RESERVE_FEE_PERCENT="1"
 ENV LNBITS_FUNDING_SOURCE_PAY_INVOICE_WAIT_SECONDS="20"
-ENV FUNDING_SOURCE_MAX_RETRIES=10
+ENV FUNDING_SOURCE_MAX_RETRIES="10"
 
 # spark sidecar
 ENV SPARK_NETWORK="MAINNET"

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

@@ -1,105 +0,0 @@
-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,7 +70,6 @@
     "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,8 +30,7 @@ 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,36 +199,47 @@
     </div>
     <div class="col-md-8 col-sm-12"></div>
   </div>
-  <lnbits-dialog
+
-    :show="exchangeData.showTickerConversion"
+  <q-dialog v-model="exchangeData.showTickerConversion" position="top">
-    :title="$t('create_ticker_converter')"
+    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
-    :action="{
+      <div class="q-mb-md">
-      label: 'Add Ticker Conversion'
+        <strong v-text="$t('create_ticker_converter')"></strong>
-    }"
-    :cancel-label="$t('close')"
-    @update:show="exchangeData.showTickerConversion = $event"
-    @action="addExchangeTickerConversion()"
-  >
-    <div class="row">
-      <div class="col-12 q-mb-md">
-        <q-select
-          filled
-          dense
-          v-model="exchangeData.convertFromTicker"
-          label="From Currency"
-          :options="currencies"
-        ></q-select>
       </div>
-      <div class="col-12">
+      <div class="row">
-        <q-input
+        <div class="col-12 q-mb-md">
-          v-model="exchangeData.convertToTicker"
+          <q-select
-          dense
+            filled
-          filled
+            dense
-          label="New Ticker"
+            v-model="exchangeData.convertFromTicker"
-          hint="This ticker will be used for the exchange API calls."
+            label="From Currency"
-        >
+            :options="currencies"
-        </q-input>
+          ></q-select>
+        </div>
+        <div class="col-12">
+          <q-input
+            v-model="exchangeData.convertToTicker"
+            dense
+            filled
+            label="New Ticker"
+            hint="This ticker will be used for the exchange API calls."
+          >
+          </q-input>
+        </div>
       </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,14 +125,15 @@
         </q-expansion-item>
       </div>
     </q-list>
-    <lnbits-dialog
+    <q-dialog v-model="showQRDialog">
-      :show="showQRDialog"
+      <q-card class="q-pa-md">
-      :position="'standard'"
+        <q-card-section>
-      @update:show="showQRDialog = $event"
+          <lnbits-qrcode :value="qrValue"></lnbits-qrcode>
-    >
+        </q-card-section>
-      <q-card-section>
+        <q-card-actions align="right">
-        <lnbits-qrcode :value="qrValue"></lnbits-qrcode>
+          <q-btn flat :label="$t('close')" v-close-popup />
-      </q-card-section>
+        </q-card-actions>
-    </lnbits-dialog>
+      </q-card>
+    </q-dialog>
   </div>
 </template>

lnbits/templates/components/lnbits-dialog.vue

@@ -1,61 +0,0 @@
-<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,135 +394,159 @@
               ></span>
             </i>
           </q-td>
-          <lnbits-dialog
+          <q-dialog v-model="props.expand" :props="props" position="top">
-            :show="props.expand"
+            <q-card class="q-pa-sm q-pt-xl lnbits__dialog-card">
-            :cancel-label="$t('close')"
+              <q-card-section>
-            :action="{
+                <q-list bordered separator>
-              label: $t('check_payment'),
+                  <q-expansion-item
-              icon: 'refresh'
+                    expand-separator
-            }"
+                    :default-opened="!(props.row.isIn && props.row.isPending)"
-            @update:show="props.expand = $event"
+                  >
-            @action="checkPayment(props.row.payment_hash)"
+                    <template v-slot:header>
-          >
+                      <q-item-section avatar>
-            <q-list bordered separator>
+                        <q-icon
-              <q-expansion-item
+                          :color="
-                expand-separator
+                            props.row.isPaid && props.row.isIn
-                :default-opened="!(props.row.isIn && props.row.isPending)"
+                              ? 'green'
-              >
-                <template v-slot:header>
-                  <q-item-section avatar>
-                    <q-icon
-                      :color="
-                        props.row.isPaid && props.row.isIn
-                          ? 'green'
-                          : props.row.isPaid && props.row.isOut
-                            ? 'pink'
-                            : props.row.isFailed
-                              ? 'yellow'
-                              : 'grey'
-                      "
-                      :name="
-                        props.row.isPaid && props.row.isIn
-                          ? 'call_received'
-                          : props.row.isPaid && props.row.isOut
-                            ? 'call_made'
-                            : props.row.isFailed
-                              ? 'warning'
-                              : 'settings_ethernet'
-                      "
-                    />
-                  </q-item-section>
-
-                  <q-item-section>
-                    <q-item-label
-                      v-text="
-                        props.row.isIn && props.row.isPending
-                          ? $t('invoice_waiting')
-                          : props.row.isOut && props.row.isPending
-                            ? $t('outgoing_payment_pending')
-                            : props.row.isPaid && props.row.isIn
-                              ? $t('payment_received')
                               : props.row.isPaid && props.row.isOut
-                                ? $t('payment_sent')
+                                ? 'pink'
                                 : props.row.isFailed
-                                  ? $t('payment_failed')
+                                  ? 'yellow'
-                                  : ''
+                                  : 'grey'
-                      "
+                          "
-                    ></q-item-label>
+                          :name="
-                  </q-item-section>
+                            props.row.isPaid && props.row.isIn
-                  <q-item-section v-if="props.row.tag" side>
+                              ? 'call_received'
-                    <q-badge
+                              : props.row.isPaid && props.row.isOut
-                      v-if="props.row.extra && !!props.row.extra.tag"
+                                ? 'call_made'
-                      color="yellow"
+                                : props.row.isFailed
-                      text-color="black"
+                                  ? 'warning'
-                    >
+                                  : 'settings_ethernet'
-                      #<span v-text="props.row.tag"></span>
+                          "
-                    </q-badge>
+                        />
-                  </q-item-section>
+                      </q-item-section>
-                </template>
-                <q-separator></q-separator>
-                <lnbits-payment-details
-                  :payment="props.row"
-                ></lnbits-payment-details>
-              </q-expansion-item>
-            </q-list>
 
-            <div
+                      <q-item-section>
-              v-if="props.row.isIn && props.row.isPending && props.row.bolt11"
+                        <q-item-label
-            >
+                          v-text="
-              <div v-if="props.row.extra.fiat_payment_request">
+                            props.row.isIn && props.row.isPending
-                <lnbits-qrcode
+                              ? $t('invoice_waiting')
-                  :value="props.row.extra.fiat_payment_request"
+                              : props.row.isOut && props.row.isPending
-                  :href="props.row.extra.fiat_payment_request"
+                                ? $t('outgoing_payment_pending')
-                  :show-buttons="false"
+                                : props.row.isPaid && props.row.isIn
-                ></lnbits-qrcode>
+                                  ? $t('payment_received')
-              </div>
+                                  : props.row.isPaid && props.row.isOut
-              <div v-else>
+                                    ? $t('payment_sent')
-                <lnbits-qrcode
+                                    : props.row.isFailed
-                  :value="'lightning:' + props.row.bolt11.toUpperCase()"
+                                      ? $t('payment_failed')
-                  :href="'lightning:' + props.row.bolt11"
+                                      : ''
-                ></lnbits-qrcode>
+                          "
-              </div>
+                        ></q-item-label>
-            </div>
+                      </q-item-section>
-          </lnbits-dialog>
+                      <q-item-section v-if="props.row.tag" side>
-          <lnbits-dialog
+                        <q-badge
-            :show="hodlInvoice.show"
+                          v-if="props.row.extra && !!props.row.extra.tag"
-            :cancel-label="$t('close')"
+                          color="yellow"
-            :action="{
+                          text-color="black"
-              label: $t('cancel_invoice'),
+                        >
-              color: 'grey',
+                          #<span v-text="props.row.tag"></span>
-              closePopup: true
+                        </q-badge>
-            }"
+                      </q-item-section>
-            :secondary-action="{
+                    </template>
-              label: $t('settle_invoice'),
+                    <q-separator></q-separator>
-              color: 'grey',
+                    <lnbits-payment-details
-              closePopup: true
+                      :payment="props.row"
-            }"
+                    ></lnbits-payment-details>
-            @update:show="hodlInvoice.show = $event"
+                  </q-expansion-item>
-            @action="cancelHoldInvoice(hodlInvoice.payment.payment_hash)"
+                </q-list>
-            @secondary-action="settleHoldInvoice(hodlInvoice.preimage)"
+
-          >
+                <div
-            <q-card-section>
+                  v-if="
-              <q-item-label class="text-h6">
+                    props.row.isIn && props.row.isPending && props.row.bolt11
-                <span v-text="$t('hold_invoice')"></span>
+                  "
-              </q-item-label>
+                >
-              <q-item-label class="text-subtitle2">
+                  <div v-if="props.row.extra.fiat_payment_request">
-                <span v-text="$t('hold_invoice_description')"></span>
+                    <lnbits-qrcode
-              </q-item-label>
+                      :value="props.row.extra.fiat_payment_request"
-            </q-card-section>
+                      :href="props.row.extra.fiat_payment_request"
-            <q-card-section>
+                      :show-buttons="false"
-              <q-input
+                    ></lnbits-qrcode>
-                filled
+                  </div>
-                :label="$t('preimage')"
+                  <div v-else>
-                :hint="$t('preimage_hint')"
+                    <lnbits-qrcode
-                v-model="hodlInvoice.preimage"
+                      :value="'lightning:' + props.row.bolt11.toUpperCase()"
-                dense
+                      :href="'lightning:' + props.row.bolt11"
-                autofocus
+                    ></lnbits-qrcode>
-                @keyup.enter="settleHoldInvoice(hodlInvoice.preimage)"
+                  </div>
-              >
+                </div>
-              </q-input>
+                <div class="row q-mt-md">
-            </q-card-section>
+                  <q-btn
-          </lnbits-dialog>
+                    outline
+                    color="grey"
+                    @click="checkPayment(props.row.payment_hash)"
+                    icon="refresh"
+                    :label="$t('payment_check')"
+                  ></q-btn>
+                  <q-btn
+                    v-close-popup
+                    flat
+                    color="grey"
+                    class="q-ml-auto"
+                    :label="$t('close')"
+                  ></q-btn>
+                </div>
+              </q-card-section>
+            </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>
+                </q-item-label>
+                <q-item-label class="text-subtitle2">
+                  <span v-text="$t('hold_invoice_description')"></span>
+                </q-item-label>
+              </q-card-section>
+              <q-card-section>
+                <q-input
+                  filled
+                  :label="$t('preimage')"
+                  :hint="$t('preimage_hint')"
+                  v-model="hodlInvoice.preimage"
+                  dense
+                  autofocus
+                  @keyup.enter="settleHoldInvoice(hodlInvoice.preimage)"
+                >
+                </q-input>
+              </q-card-section>
+              <q-card-section class="row q-gutter-x-sm">
+                <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,16 +1,22 @@
 <template id="lnbits-qrcode-scanner">
-  <lnbits-dialog
+  <q-dialog v-model="showScanner" position="top">
-    :show="showScanner"
+    <q-card class="q-pa-lg q-pt-xl">
-    :cancel-label="$t('cancel')"
+      <div class="text-center q-mb-lg">
-    @update:show="showScanner = $event"
+        <qrcode-stream
-    @cancel="reset"
+          @detect="detect"
-  >
+          @camera-on="onInitQR"
-    <div class="text-center q-mb-lg">
+          class="rounded-borders"
-      <qrcode-stream
+        ></qrcode-stream>
-        @detect="detect"
+      </div>
-        @camera-on="onInitQR"
+      <div class="row q-mt-lg">
-        class="rounded-borders"
+        <q-btn
-      ></qrcode-stream>
+          @click="reset"
-    </div>
+          flat
-  </lnbits-dialog>
+          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,48 +8,49 @@
     icon="edit"
     style="position: relative; left: -15px; bottom: -10px"
   ></q-btn>
-  <lnbits-dialog
+  <q-dialog v-model="icon.show" position="top">
-    :show="icon.show"
+    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-    :action="{
+      <q-form @submit="setIcon" class="q-gutter-md">
-      label: 'Save Icon',
+        <div class="q-gutter-sm q-pa-sm flex flex-wrap justify-center">
-      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"
-          :key="index"
-          @click="setSelectedIcon(thisIcon)"
-          round
-          text-color="black"
-          :color="
-            icon.data.icon === thisIcon
-              ? icon.data.color || 'primary'
-              : 'grey-5'
-          "
-          size="md"
-          :icon="thisIcon"
-          class="q-mb-sm"
-        ></q-btn>
-      </div>
-      <div class="q-pa-sm flex justify-between items-center">
-        <div class="flex q-pl-lg">
           <q-btn
-            v-for="(color, index) in icon.colorOptions"
+            v-for="(thisIcon, index) in icon.options"
-            :key="'color-' + index"
+            :key="index"
-            @click="setSelectedColor(color)"
+            @click="setSelectedIcon(thisIcon)"
             round
-            :color="color"
+            text-color="black"
-            size="xs"
+            :color="
-            style="width: 24px; height: 24px; min-width: 24px; padding: 0"
+              icon.data.icon === thisIcon
-            class="q-mr-xs"
+                ? icon.data.color || 'primary'
+                : 'grey-5'
+            "
+            size="md"
+            :icon="thisIcon"
+            class="q-mb-sm"
           ></q-btn>
         </div>
-      </div>
+        <div class="q-pa-sm flex justify-between items-center">
-    </q-form>
+          <div class="flex q-pl-lg">
-  </lnbits-dialog>
+            <q-btn
+              v-for="(color, index) in icon.colorOptions"
+              :key="'color-' + index"
+              @click="setSelectedColor(color)"
+              round
+              :color="color"
+              size="xs"
+              style="width: 24px; height: 24px; min-width: 24px; padding: 0"
+              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>
+  </q-dialog>
 </template>

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

@@ -1,72 +1,94 @@
 <template id="lnbits-wallet-new">
-  <lnbits-dialog
+  <q-dialog v-model="showNewWalletDialog" position="top">
-    :show="showNewWalletDialog"
+    <q-card class="q-pa-lg q-pt-md lnbits__dialog-card">
-    :title="$t('add_new_wallet')"
+      <q-card-section>
-    :action="{
+        <div class="text-h6">
-      label: $t('add_wallet'),
+          <span v-text="$t('add_new_wallet')"></span>
-      closePopup: true
+        </div>
-    }"
+      </q-card-section>
-    :secondary-action="
+      <q-card-section v-if="g.user.walletInvitesCount">
-      isLightningShared
+        <q-badge
-        ? {
+          @click="g.newWalletType = 'lightning-shared'"
-            label: $t('reject_wallet'),
+          class="cursor-pointer"
-            color: 'negative',
+        >
-            closePopup: true
+          <span
-          }
+            v-text="
-        : null
+              'You have ' +
-    "
+              g.user.walletInvitesCount +
-    @update:show="showNewWalletDialog = $event"
+              ' wallet invitation' +
-    @action="submitAddWallet"
+              (g.user.walletInvitesCount > 1 ? 's' : '')
-    @secondary-action="submitRejectWalletInvitation"
+            "
-  >
+          ></span>
-    <q-card-section v-if="g.user.walletInvitesCount">
+        </q-badge>
-      <q-badge
+      </q-card-section>
-        @click="g.newWalletType = 'lightning-shared'"
-        class="cursor-pointer"
-      >
-        <span
-          v-text="
-            'You have ' +
-            g.user.walletInvitesCount +
-            ' wallet invitation' +
-            (g.user.walletInvitesCount > 1 ? 's' : '')
-          "
-        ></span>
-      </q-badge>
-    </q-card-section>
 
-    <q-card-section class="q-pt-none">
+      <q-card-section class="q-pt-none">
-      <q-select
+        <q-select
-        v-if="walletTypes.length > 1"
+          v-if="walletTypes.length > 1"
-        :options="walletTypes"
+          :options="walletTypes"
-        emit-value
+          emit-value
-        map-options
+          map-options
-        :label="$t('wallet_type')"
+          :label="$t('wallet_type')"
-        v-model="g.newWalletType"
+          v-model="g.newWalletType"
-        dense
+          dense
-      ></q-select>
+        ></q-select>
-      <q-input
+        <q-input
-        v-if="isLightning"
+          v-if="isLightning"
-        dense
+          dense
-        v-model="wallet.name"
+          v-model="wallet.name"
-        :label="$t('wallet_name')"
+          :label="$t('wallet_name')"
-        autofocus
+          autofocus
-        @keyup.enter="submitAddWallet()"
+          @keyup.enter="submitAddWallet()"
-        class="q-mt-md"
+          class="q-mt-md"
-      ></q-input>
+        ></q-input>
-      <q-select
+        <q-select
-        v-if="isLightningShared"
+          v-if="isLightningShared"
-        v-model="wallet.sharedWalletId"
+          v-model="wallet.sharedWalletId"
-        :label="$t('shared_wallet_id')"
+          :label="$t('shared_wallet_id')"
-        emit-value
+          emit-value
-        map-options
+          map-options
-        dense
+          dense
-        :options="inviteWalletOptions"
+          :options="inviteWalletOptions"
-        class="q-mt-md"
+          class="q-mt-md"
-      ></q-select>
+        ></q-select>
-      <div v-if="isLightningShared" class="q-mt-md">
+        <div v-if="isLightningShared" class="q-mt-md">
-        <span v-text="$t('shared_wallet_desc')" class="q-mt-lg"></span>
+          <span v-text="$t('shared_wallet_desc')" class="q-mt-lg"></span>
-      </div>
+        </div>
-    </q-card-section>
+      </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,174 +1231,213 @@
     </div>
   </div>
 
-  <lnbits-dialog
+  <q-dialog v-model="apiAcl.showPasswordDialog" position="top">
-    :show="apiAcl.showPasswordDialog"
+    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
-    title="Password Required"
+      <strong>User Password</strong>
-    :action="{
+      <div class="row q-mt-md q-col-gutter-md">
-      label: $t('ok')
+        <div class="col-12">
-    }"
+          <q-input
-    @update:show="apiAcl.showPasswordDialog = $event"
+            v-model="apiAcl.password"
-    @action="runPasswordGuardedFunction()"
+            type="password"
-  >
+            dense
-    <div class="row q-col-gutter-md">
+            filled
-      <div class="col-12">
+            label="Password"
-        <q-input
+            hint="User password is required for this action."
-          v-model="apiAcl.password"
+          >
-          type="password"
+          </q-input>
-          dense
+        </div>
-          filled
-          label="Password"
-          hint="User password is required for this action."
-        >
-        </q-input>
       </div>
-    </div>
+      <div class="row q-mt-lg">
-  </lnbits-dialog>
+        <q-btn
-
+          v-close-popup
-  <lnbits-dialog
+          flat
-    :show="apiAcl.showNewAclDialog"
+          color="grey"
-    title="New API Access Control List"
+          class="q-ml-auto"
-    :action="{
+          v-text="$t('cancel')"
-      label: 'Create'
+        ></q-btn>
-    }"
+        <q-btn
-    :cancel-label="$t('close')"
+          @click="runPasswordGuardedFunction()"
-    @update:show="apiAcl.showNewAclDialog = $event"
+          :label="$t('ok')"
-    @action="addApiACL()"
+          color="primary"
-  >
+        ></q-btn>
-    <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>
+    </q-card>
-  </lnbits-dialog>
+  </q-dialog>
 
-  <lnbits-dialog
+  <q-dialog v-model="apiAcl.showNewAclDialog" position="top">
-    :show="apiAcl.showNewTokenDialog"
+    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
-    title="New API Token"
+      <strong>New API Access Control List</strong>
-    :action="{
+      <div class="row q-mt-md q-col-gutter-md">
-      label: 'Create'
+        <div class="col-12">
-    }"
+          <q-input v-model="apiAcl.newAclName" dense filled label="ACL Name">
-    :cancel-label="$t('close')"
+          </q-input>
-    @update:show="apiAcl.showNewTokenDialog = $event"
+        </div>
-    @action="generateApiToken()"
-  >
-    <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">
+      <div class="row q-mt-lg">
-        <q-input
+        <q-btn @click="addApiACL()" label="Create" color="primary"></q-btn>
-          v-model="apiAcl.newTokenExpiry"
+        <q-btn
-          dense
+          v-close-popup
-          filled
+          flat
-          label="Expiration"
+          color="grey"
-          hit="Expiration time in minutes (default xxx)"
+          class="q-ml-auto"
-        >
+          v-text="$t('close')"
-          <template v-slot:prepend>
+        ></q-btn>
-            <q-icon name="event" class="cursor-pointer">
+      </div>
-              <q-popup-proxy
+    </q-card>
-                cover
+  </q-dialog>
-                transition-show="scale"
+  <q-dialog v-model="apiAcl.showNewTokenDialog" position="top">
-                transition-hide="scale"
+    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
-              >
+      <strong>New API Token</strong>
-                <q-date v-model="apiAcl.newTokenExpiry" mask="YYYY-MM-DD HH:mm">
+      <div class="row q-col-gutter-md q-mt-md">
-                  <div class="row items-center justify-end">
+        <div class="col-12">
-                    <q-btn v-close-popup label="Close" color="primary" flat />
+          <q-input
-                  </div>
+            v-model="apiAcl.newTokenName"
-                </q-date>
+            dense
-              </q-popup-proxy>
+            filled
-            </q-icon>
+            label="Token Name"
-          </template>
+          >
-
+          </q-input>
-          <template v-slot:append>
+        </div>
-            <q-icon name="access_time" class="cursor-pointer">
+        <div class="col-12">
-              <q-popup-proxy
+          <q-input
-                cover
+            v-model="apiAcl.newTokenExpiry"
-                transition-show="scale"
+            dense
-                transition-hide="scale"
+            filled
-              >
+            label="Expiration"
-                <q-time
+            hit="Expiration time in minutes (default xxx)"
-                  v-model="apiAcl.newTokenExpiry"
+          >
-                  mask="YYYY-MM-DD HH:mm"
+            <template v-slot:prepend>
-                  format24h
+              <q-icon name="event" class="cursor-pointer">
+                <q-popup-proxy
+                  cover
+                  transition-show="scale"
+                  transition-hide="scale"
                 >
-                  <div class="row items-center justify-end">
+                  <q-date
-                    <q-btn v-close-popup label="Close" color="primary" flat />
+                    v-model="apiAcl.newTokenExpiry"
-                  </div>
+                    mask="YYYY-MM-DD HH:mm"
-                </q-time>
+                  >
-              </q-popup-proxy>
+                    <div class="row items-center justify-end">
-            </q-icon>
+                      <q-btn v-close-popup label="Close" color="primary" flat />
-          </template>
+                    </div>
-        </q-input>
+                  </q-date>
-      </div>
+                </q-popup-proxy>
-    </div>
+              </q-icon>
-  </lnbits-dialog>
+            </template>
 
-  <lnbits-dialog
+            <template v-slot:append>
-    :show="labelsDialog.show"
+              <q-icon name="access_time" class="cursor-pointer">
-    :title="$t('label')"
+                <q-popup-proxy
-    :action="{
+                  cover
-      label: g.user.extra.labels.some(
+                  transition-show="scale"
-        label => label.name === labelsDialog.data.name
+                  transition-hide="scale"
-      )
+                >
-        ? $t('update_label')
+                  <q-time
-        : $t('add_label'),
+                    v-model="apiAcl.newTokenExpiry"
-      disable: !labelsDialog.data.name || !labelsDialog.data.color
+                    mask="YYYY-MM-DD HH:mm"
-    }"
+                    format24h
-    :cancel-label="$t('cancel')"
+                  >
-    @update:show="labelsDialog.show = $event"
+                    <div class="row items-center justify-end">
-    @action="
+                      <q-btn v-close-popup label="Close" color="primary" flat />
-      g.user.extra.labels.some(label => label.name === labelsDialog.data.name)
+                    </div>
-        ? updateUserLabel()
+                  </q-time>
-        : addUserLabel()
+                </q-popup-proxy>
-    "
+              </q-icon>
-  >
+            </template>
-    <div class="row q-col-gutter-md">
+          </q-input>
-      <div class="col-12">
+        </div>
-        <q-input
-          v-model="labelsDialog.data.name"
-          dense
-          filled
-          :label="$t('name')"
-        >
-        </q-input>
       </div>
-      <div class="col-12">
+      <div class="row q-mt-lg">
-        <q-input
+        <q-btn
-          v-model="labelsDialog.data.description"
+          @click="generateApiToken()"
-          dense
+          label="Create"
-          filled
+          color="primary"
-          type="textarea"
+        ></q-btn>
-          rows="3"
+        <q-btn
-          :label="$t('description')"
+          v-close-popup
-        >
+          flat
-        </q-input>
+          color="grey"
+          class="q-ml-auto"
+          v-text="$t('close')"
+        ></q-btn>
       </div>
-      <div class="col-12">
+    </q-card>
-        <q-input
+  </q-dialog>
-          v-model="labelsDialog.data.color"
+  <q-dialog v-model="labelsDialog.show" position="top">
-          filled
+    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
-          dense
+      <strong v-text="$t('label')"></strong>
-          class="my-input"
+      <div class="row q-mt-md q-col-gutter-md">
-        >
+        <div class="col-12">
-          <template v-slot:append>
+          <q-input
-            <q-icon name="colorize" class="cursor-pointer">
+            v-model="labelsDialog.data.name"
-              <q-popup-proxy
+            dense
-                cover
+            filled
-                transition-show="scale"
+            :label="$t('name')"
-                transition-hide="scale"
+          >
-              >
+          </q-input>
-                <q-color
+        </div>
-                  v-model="labelsDialog.data.color"
+        <div class="col-12">
-                  default-view="palette"
+          <q-input
-                />
+            v-model="labelsDialog.data.description"
-              </q-popup-proxy>
+            dense
-            </q-icon>
+            filled
-          </template>
+            type="textarea"
-        </q-input>
+            rows="3"
+            :label="$t('description')"
+          >
+          </q-input>
+        </div>
+        <div class="col-12">
+          <q-input
+            v-model="labelsDialog.data.color"
+            filled
+            dense
+            class="my-input"
+          >
+            <template v-slot:append>
+              <q-icon name="colorize" class="cursor-pointer">
+                <q-popup-proxy
+                  cover
+                  transition-show="scale"
+                  transition-hide="scale"
+                >
+                  <q-color
+                    v-model="labelsDialog.data.color"
+                    default-view="palette"
+                  />
+                </q-popup-proxy>
+              </q-icon>
+            </template>
+          </q-input>
+        </div>
       </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,23 +170,33 @@
     </div>
   </div>
 
-  <lnbits-dialog
+  <q-dialog v-model="auditDetailsDialog.show" position="top">
-    :show="auditDetailsDialog.show"
+    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
-    :title="$t('http_request_details')"
+      <strong v-text="$t('http_request_details')"></strong>
-    :action="{
+      <q-input
-      label: $t('copy'),
+        filled
-      icon: 'content_copy'
+        dense
-    }"
+        v-model.trim="auditDetailsDialog.data"
-    :cancel-label="$t('close')"
+        type="textarea"
-    @update:show="auditDetailsDialog.show = $event"
+        rows="25"
-    @action="utils.copyText(auditDetailsDialog.data)"
+      ></q-input>
-  >
+
-    <q-input
+      <div class="row q-mt-lg">
-      filled
+        <q-btn
-      dense
+          @click="utils.copyText(auditDetailsDialog.data)"
-      v-model.trim="auditDetailsDialog.data"
+          icon="content_copy"
-      type="textarea"
+          color="grey"
-      rows="25"
+          flat
-    ></q-input>
+          v-text="$t('copy')"
-  </lnbits-dialog>
+        ></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,72 +366,72 @@
     </div>
   </div>
 
-  <lnbits-dialog
+  <q-dialog v-model="showUninstallDialog" position="top">
-    :show="showUninstallDialog"
+    <q-card class="q-pa-lg">
-    :title="$t('warning')"
+      <h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
-    :action="{
+      <p>
-      label: $t('uninstall_confirm')
+        <span v-text="$t('extension_uninstall_warning')"></span><br />
-    }"
+        <span v-text="$t('confirm_continue')"></span>
-    :cancel-label="$t('cancel')"
+      </p>
-    @update:show="showUninstallDialog = $event"
-    @action="uninstallExtension()"
-  >
-    <p>
-      <span v-text="$t('extension_uninstall_warning')"></span><br />
-      <span v-text="$t('confirm_continue')"></span>
-    </p>
 
-    <div class="row q-mt-lg">
+      <div class="row q-mt-lg">
-      <q-checkbox
+        <q-checkbox
-        v-model="uninstallAndDropDb"
+          v-model="uninstallAndDropDb"
-        value="false"
+          value="false"
-        label="Cleanup database tables"
+          label="Cleanup database tables"
-      >
+        >
-        <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left"
+          <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left"
-          ><span v-text="$t('extension_db_drop_info')"></span>
+            ><span v-text="$t('extension_db_drop_info')"></span>
-        </q-tooltip>
+          </q-tooltip>
-      </q-checkbox>
+        </q-checkbox>
-    </div>
+      </div>
-  </lnbits-dialog>
+      <div class="row q-mt-lg">
+        <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>
 
-  <lnbits-dialog
+  <q-dialog v-model="showDropDbDialog" position="top">
-    v-if="selectedExtension"
+    <q-card v-if="selectedExtension" class="q-pa-lg">
-    :show="showDropDbDialog"
+      <h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
-    :title="$t('warning')"
+      <p><span v-text="$t('extension_db_drop_warning')"></span><br /></p>
-    :action="{
+      <q-input
-      label: $t('confirm'),
+        v-model="dropDbExtensionId"
-      color: 'red',
+        :label="selectedExtension.id"
-      disable: dropDbExtensionId !== selectedExtension.id
+      ></q-input>
-    }"
+      <br />
-    :cancel-label="$t('cancel')"
+      <p v-text="$t('confirm_continue')"></p>
-    @update:show="showDropDbDialog = $event"
-    @action="dropExtensionDb()"
-  >
-    <p><span v-text="$t('extension_db_drop_warning')"></span><br /></p>
-    <q-input
-      v-model="dropDbExtensionId"
-      :label="selectedExtension.id"
-    ></q-input>
-    <br />
-    <p v-text="$t('confirm_continue')"></p>
 
-    <div class="row q-mt-lg">
+      <div class="row q-mt-lg">
-      <q-btn
+        <q-btn
-        :disable="dropDbExtensionId !== selectedExtension.id"
+          :disable="dropDbExtensionId !== selectedExtension.id"
-        outline
+          outline
-        color="red"
+          color="red"
-        @click="dropExtensionDb()"
+          @click="dropExtensionDb()"
-        v-text="$t('confirm')"
+          v-text="$t('confirm')"
-      ></q-btn>
+        ></q-btn>
-      <q-btn
+        <q-btn
-        v-close-popup
+          v-close-popup
-        flat
+          flat
-        color="grey"
+          color="grey"
-        class="q-ml-auto"
+          class="q-ml-auto"
-        v-text="$t('cancel')"
+          v-text="$t('cancel')"
-      ></q-btn>
+        ></q-btn>
-    </div>
+      </div>
-  </lnbits-dialog>
+    </q-card>
+  </q-dialog>
 
   <q-dialog v-model="showManageExtensionDialog" position="top">
     <q-card v-if="selectedRelease" class="q-pa-lg lnbits__dialog-card">
@@ -1244,61 +1244,76 @@
       </q-card-section>
     </q-card>
   </q-dialog>
-  <lnbits-dialog
+  <q-dialog v-model="paymentDialog.show" position="top">
-    :show="paymentDialog.show"
+    <q-card class="q-pa-md lnbits__dialog-card">
-    :cancel-label="$t('close')"
+      <q-card-section>
-    @update:show="paymentDialog.show = $event"
+        <q-responsive :ratio="1" class="q-mx-xl q-mb-xl">
-  >
+          <lnbits-qrcode
-    <q-responsive :ratio="1" class="q-mx-xl q-mb-xl">
+            :value="paymentDialog.invoice"
-      <lnbits-qrcode
+            :options="{width: 800}"
-        :value="paymentDialog.invoice"
+            class="rounded-borders"
-        :options="{width: 800}"
+          ></lnbits-qrcode>
-        class="rounded-borders"
+        </q-responsive>
-      ></lnbits-qrcode>
+      </q-card-section>
-    </q-responsive>
+      <q-card-actions align="between">
-  </lnbits-dialog>
+        <q-btn v-close-popup flat color="grey" :label="$t('close')"></q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+  <q-dialog v-model="showUpdateAllDialog" position="top">
+    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
+      <div class="row">
+        <div class="col-12">
+          <h6 class="q-my-md" v-text="$t('update')"></h6>
+        </div>
+      </div>
+      <div v-if="updatableExtensions?.length > 1" class="row">
+        <div class="col-12">
+          <q-btn
+            outline
+            color="grey"
+            @click="selectAllUpdatableExtensionss()"
+            v-text="$t('select_all')"
+          ></q-btn>
+        </div>
+      </div>
 
-  <lnbits-dialog
+      <q-virtual-scroll :items="updatableExtensions" style="max-height: 400px">
-    :show="showUpdateAllDialog"
+        <template v-slot="{item, index}">
-    :title="$t('update')"
+          <div class="row">
-    :action="{
+            <div class="q-col">
-      label: $t('update')
+              <q-checkbox
-    }"
+                v-model="item.selectedForUpdate"
-    :cancel-label="$t('cancel')"
+                :disable="item.isUpgraded"
-    @update:show="showUpdateAllDialog = $event"
+                value="false"
-    @action="updateSelectedExtensions()"
+                :label="item.name + ` (v${item.latestRelease?.version})`"
-  >
+              >
-    <div v-if="updatableExtensions?.length > 1" class="row">
+                <q-spinner-bars
-      <div class="col-12 q-mb-md">
+                  v-if="item.inProgress"
+                  color="primary"
+                  size="1.5em"
+                  class="q-ml-md"
+                ></q-spinner-bars>
+              </q-checkbox>
+            </div>
+          </div>
+        </template>
+      </q-virtual-scroll>
+      <div class="row q-mt-lg">
         <q-btn
+          @click="updateSelectedExtensions()"
           outline
           color="grey"
-          @click="selectAllUpdatableExtensionss()"
+          v-text="$t('update')"
-          v-text="$t('select_all')"
+        ></q-btn>
+        <q-btn
+          v-close-popup
+          flat
+          color="grey"
+          class="q-ml-auto"
+          v-text="$t('cancel')"
         ></q-btn>
       </div>
-    </div>
+    </q-card>
-
+  </q-dialog>
-    <q-virtual-scroll :items="updatableExtensions" style="max-height: 400px">
-      <template v-slot="{item, index}">
-        <div class="row">
-          <div class="q-col">
-            <q-checkbox
-              v-model="item.selectedForUpdate"
-              :disable="item.isUpgraded"
-              value="false"
-              :label="item.name + ` (v${item.latestRelease?.version})`"
-            >
-              <q-spinner-bars
-                v-if="item.inProgress"
-                color="primary"
-                size="1.5em"
-                class="q-ml-md"
-              ></q-spinner-bars>
-            </q-checkbox>
-          </div>
-        </div>
-      </template>
-    </q-virtual-scroll>
-  </lnbits-dialog>
 </template>

lnbits/templates/pages/node.vue

@@ -103,127 +103,164 @@
               </q-card-section>
             </q-tab-panel>
             <q-tab-panel name="channels">
-              <lnbits-dialog
+              <q-dialog v-model="connectPeerDialog.show" position="top">
-                :show="connectPeerDialog.show"
+                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-                :action="{
+                  <q-form class="q-gutter-md">
-                  label: $t('connect')
+                    <q-input
-                }"
+                      dense
-                :cancel-label="$t('cancel')"
+                      type="text"
-                @update:show="connectPeerDialog.show = $event"
+                      filled
-                @action="connectPeer"
+                      v-model="connectPeerDialog.data.uri"
-              >
+                      label="Node URI"
-                <q-form class="q-gutter-md">
+                      hint="pubkey@host:port"
-                  <q-input
+                    ></q-input>
-                    dense
-                    type="text"
-                    filled
-                    v-model="connectPeerDialog.data.uri"
-                    label="Node URI"
-                    hint="pubkey@host:port"
-                  ></q-input>
-                </q-form>
-              </lnbits-dialog>
 
-              <lnbits-dialog
+                    <div class="row q-mt-lg">
-                :show="setFeeDialog.show"
+                      <q-btn
-                title="Set Channel Fee"
+                        :label="$t('connect')"
-                :action="{
+                        color="primary"
-                  label: $t('set')
+                        @click="connectPeer"
-                }"
+                      ></q-btn>
-                :cancel-label="$t('cancel')"
+                      <q-btn
-                @update:show="setFeeDialog.show = $event"
+                        v-close-popup
-                @action="setChannelFee(setFeeDialog.channel_id)"
+                        flat
-              >
+                        color="grey"
-                <p class="text-caption" v-text="setFeeDialog.channel_id"></p>
+                        class="q-ml-auto"
-                <q-separator></q-separator>
+                        :label="$t('cancel')"
-                <q-form class="q-gutter-md">
+                      ></q-btn>
-                  <q-input
+                    </div>
-                    dense
+                  </q-form>
-                    type="number"
+                </q-card>
-                    filled
+              </q-dialog>
-                    v-model.number="setFeeDialog.data.fee_ppm"
-                    label="Fee Rate PPM"
-                  ></q-input>
-                  <q-input
-                    dense
-                    type="number"
-                    filled
-                    v-model.number="setFeeDialog.data.fee_base_msat"
-                    label="Fee Base msat"
-                  ></q-input>
-                </q-form>
-              </lnbits-dialog>
 
-              <lnbits-dialog
+              <q-dialog v-model="setFeeDialog.show">
-                :show="openChannelDialog.show"
+                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-                :action="{
+                  <label class="text-h6">Set Channel Fee</label>
-                  label: $t('open')
+                  <p class="text-caption" v-text="setFeeDialog.channel_id"></p>
-                }"
+                  <q-separator></q-separator>
-                :cancel-label="$t('cancel')"
+                  <q-form class="q-gutter-md">
-                @update:show="openChannelDialog.show = $event"
+                    <q-input
-                @action="openChannel"
+                      dense
-              >
+                      type="number"
-                <q-form class="q-gutter-md">
+                      filled
-                  <q-input
+                      v-model.number="setFeeDialog.data.fee_ppm"
-                    dense
+                      label="Fee Rate PPM"
-                    type="text"
+                    ></q-input>
-                    filled
+                    <q-input
-                    v-model="openChannelDialog.data.peer_id"
+                      dense
-                    label="Peer ID"
+                      type="number"
-                  ></q-input>
+                      filled
-                  <q-input
+                      v-model.number="setFeeDialog.data.fee_base_msat"
-                    dense
+                      label="Fee Base msat"
-                    type="number"
+                    ></q-input>
-                    filled
-                    v-model.number="openChannelDialog.data.funding_amount"
-                    label="Funding Amount"
-                  ></q-input>
-                  <q-expansion-item icon="warning" label="Advanced">
-                    <q-card>
-                      <q-card-section>
-                        <div class="column q-gutter-md">
-                          <q-input
-                            dense
-                            type="number"
-                            filled
-                            v-model.number="openChannelDialog.data.push_amount"
-                            label="Push Amount"
-                            hint="This gifts sats to the other side!"
-                          ></q-input>
 
-                          <q-input
+                    <div class="row q-mt-lg">
-                            dense
+                      <q-btn
-                            type="number"
+                        :label="$t('set')"
-                            filled
+                        color="primary"
-                            v-model.number="openChannelDialog.data.fee_rate"
+                        @click="setChannelFee(setFeeDialog.channel_id)"
-                            label="Fee Rate"
+                      ></q-btn>
-                          ></q-input>
+                      <q-btn
-                        </div>
+                        v-close-popup
-                      </q-card-section>
+                        flat
-                    </q-card>
+                        color="grey"
-                  </q-expansion-item>
+                        class="q-ml-auto"
-                </q-form>
+                        :label="$t('cancel')"
-              </lnbits-dialog>
+                      ></q-btn>
+                    </div>
+                  </q-form>
+                </q-card>
+              </q-dialog>
 
-              <lnbits-dialog
+              <q-dialog v-model="openChannelDialog.show">
-                :show="closeChannelDialog.show"
+                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-                title="Close Channel"
+                  <q-form class="q-gutter-md">
-                :action="{
+                    <q-input
-                  label: $t('close')
+                      dense
-                }"
+                      type="text"
-                :cancel-label="$t('cancel')"
+                      filled
-                @update:show="closeChannelDialog.show = $event"
+                      v-model="openChannelDialog.data.peer_id"
-                @action="closeChannel"
+                      label="Peer ID"
-              >
+                    ></q-input>
-                <q-form class="q-gutter-md">
+                    <q-input
-                  <div>
+                      dense
-                    <q-checkbox
+                      type="number"
-                      v-model="closeChannelDialog.data.force"
+                      filled
-                      label="Force"
+                      v-model.number="openChannelDialog.data.funding_amount"
-                    />
+                      label="Funding Amount"
-                  </div>
+                    ></q-input>
-                </q-form>
+                    <q-expansion-item icon="warning" label="Advanced">
-              </lnbits-dialog>
+                      <q-card>
+                        <q-card-section>
+                          <div class="column q-gutter-md">
+                            <q-input
+                              dense
+                              type="number"
+                              filled
+                              v-model.number="
+                                openChannelDialog.data.push_amount
+                              "
+                              label="Push Amount"
+                              hint="This gifts sats to the other side!"
+                            ></q-input>
+
+                            <q-input
+                              dense
+                              type="number"
+                              filled
+                              v-model.number="openChannelDialog.data.fee_rate"
+                              label="Fee Rate"
+                            ></q-input>
+                          </div>
+                        </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>
+              </q-dialog>
+
+              <q-dialog v-model="closeChannelDialog.show" position="top">
+                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+                  <q-form class="q-gutter-md">
+                    <div>
+                      <q-checkbox
+                        v-model="closeChannelDialog.data.force"
+                        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>
+              </q-dialog>
 
               <q-card-section class="q-pa-none">
                 <div class="row q-col-gutter-lg">

lnbits/templates/pages/users.vue

@@ -446,44 +446,50 @@
         </div>
       </div>
       <div v-else-if="activeWallet.show">
-        <lnbits-dialog
+        <q-dialog v-model="createWalletDialog.show" position="top">
-          :show="createWalletDialog.show"
+          <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
-          title="Create Wallet"
+            <strong>Create Wallet</strong>
-          :action="{
+            <div class="row">
-            label: 'Create',
+              <div class="col-12">
-            closePopup: true
+                <div class="row q-mt-lg">
-          }"
+                  <div class="col">
-          cancel-label="Cancel"
+                    <q-input
-          @update:show="createWalletDialog.show = $event"
+                      v-model="createWalletDialog.data.name"
-          @action="createWallet"
+                      :label="$t('name_your_wallet')"
-        >
+                      filled
-          <div class="row">
+                      dense
-            <div class="col-12">
+                      class="q-mb-md"
-              <div class="row q-mt-lg">
+                    >
-                <div class="col">
+                    </q-input>
-                  <q-input
+                  </div>
-                    v-model="createWalletDialog.data.name"
-                    :label="$t('name_your_wallet')"
-                    filled
-                    dense
-                    class="q-mb-md"
-                  >
-                  </q-input>
                 </div>
-              </div>
+                <div class="row q-mt-lg">
-              <div class="row q-mt-lg">
+                  <div class="col">
-                <div class="col">
+                    <q-select
-                  <q-select
+                      filled
-                    filled
+                      dense
-                    dense
+                      v-model="createWalletDialog.data.currency"
-                    v-model="createWalletDialog.data.currency"
+                      :options="{{ currencies | safe }}"
-                    :options="g.allowedCurrencies"
+                    ></q-select>
-                  ></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>
-          </div>
+          </q-card>
-        </lnbits-dialog>
+        </q-dialog>
       </div>
       <div v-else>
         <div class="row q-col-gutter-md q-mb-md">

package.json

@@ -123,7 +123,6 @@
       "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",

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "lnbits"
-version = "1.5.2-rc1"
+version = "1.5.2"
 requires-python = ">=3.10,<3.13"
 description = "LNbits, free and open-source Lightning wallet and accounts system."
 authors = [{ name = "Alan Bits", email = "alan@lnbits.com" }]

uv.lock

@@ -1247,7 +1247,7 @@ wheels = [
 
 [[package]]
 name = "lnbits"
-version = "1.5.2rc1"
+version = "1.5.2"
 source = { editable = "." }
 dependencies = [
     { name = "aiosqlite" },