account dialogs

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="{
+      handler: () => runPasswordGuardedFunction(),
+      label: $t('ok')
+    }"
+    @update:model-value="apiAcl.showPasswordDialog = $event"
+  >
+    <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="{
+      handler: () => addApiACL(),
+      label: 'Create'
+    }"
+    :cancel-label="$t('close')"
+    @update:model-value="apiAcl.showNewAclDialog = $event"
+  >
+    <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"
+      handler: () => generateApiToken(),
-          v-text="$t('close')"
+      label: 'Create'
-        ></q-btn>
+    }"
-      </div>
+    :cancel-label="$t('close')"
-    </q-card>
+    @update:model-value="apiAcl.showNewTokenDialog = $event"
-  </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,27 @@
         </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
+      handler: () =>
-          v-close-popup
+        g.user.extra.labels.some(label => label.name === labelsDialog.data.name)
-          flat
+          ? updateUserLabel()
-          color="grey"
+          : addUserLabel(),
-          class="q-ml-auto"
+      label: g.user.extra.labels.some(
-          v-text="$t('close')"
+        label => label.name === labelsDialog.data.name
-        ></q-btn>
+      )
-      </div>
+        ? $t('update_label')
-    </q-card>
+        : $t('add_label'),
-  </q-dialog>
+      disable: !labelsDialog.data.name || !labelsDialog.data.color
-  <q-dialog v-model="labelsDialog.show" position="top">
+    }"
-    <q-card class="q-pa-md q-pt-md lnbits__dialog-card">
+    :cancel-label="$t('cancel')"
-      <strong v-text="$t('label')"></strong>
+    @update:model-value="labelsDialog.show = $event"
-      <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 +1399,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>