From 364b6dc857fe7d465cc4b2ba44ad7ceaa2e6d398 Mon Sep 17 00:00:00 2001
From: Eneko Illarramendi <eneko@illarra.com>
Date: Tue, 21 Apr 2020 08:16:56 +0200
Subject: [PATCH] fix(vue): use @submit to send forms, and catch users pressing
 return

---
 lnbits/core/templates/core/index.html         | 60 +++++++---------
 lnbits/core/templates/core/wallet.html        | 10 +--
 .../amilk/templates/amilk/index.html          | 16 ++---
 .../templates/diagonalley/index.html          | 70 +++++++------------
 .../paywall/templates/paywall/index.html      |  4 +-
 .../extensions/tpos/templates/tpos/index.html |  4 +-
 6 files changed, 68 insertions(+), 96 deletions(-)

diff --git a/lnbits/core/templates/core/index.html b/lnbits/core/templates/core/index.html
index 32c31d41d..d0124dc2b 100644
--- a/lnbits/core/templates/core/index.html
+++ b/lnbits/core/templates/core/index.html
@@ -22,7 +22,7 @@
                 Press to claim bitcoin
               </q-btn>
             {% else %}
-              <q-form class="q-gutter-md">
+              <q-form @submit="createWallet" class="q-gutter-md">
                 <q-input filled dense
                   v-model="walletName"
                   label="Name your LNbits wallet *"
@@ -30,29 +30,7 @@
                 <q-btn unelevated
                   color="deep-purple"
                   :disable="walletName == ''"
-                  @click="disclaimerDialog.show = true"
-                  @click="createWallet">Add a new wallet</q-btn>
-
-
-                 
-
-         <q-dialog v-model="disclaimerDialog.show" position="top">
-            <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
-              <h5 class="q-my-md">WARNING</h5>
-              <p>
-               Login functionality to be released in V0.2, for now make sure you bookmark to save your wallet!<br/><br/>
-               This service is in BETA, and we hold no responsibility for people losing access to funds.<br/><br/>
-               To encourage you to run your own LNbits, any balance on lnbits.com will incur a charge of 1% per week.
-              </p>
-
-              <q-btn unelevated
-                        color="deep-purple"
-                        @click="createWallet">Proceed</q-btn>
-            </q-card>
-          </q-dialog>
-
-
-
+                  type="submit">Add a new wallet</q-btn>
               </q-form>
             {% endif %}
         </q-card-section>
@@ -62,19 +40,19 @@
         <q-card-section>
           <h3 class="q-my-none"><strong>LN</strong>bits</h3>
           <h5 class="q-my-md">Free and open-source lightning wallet</h5>
-          <p>Easy to set up and lightweight, LNbits can run on any lightning-network funding source, currently supporting LND, Clightning, Opennode, Lntxbot, Lnpay and even LNbits itself! </p>
+          <p>Easy to set up and lightweight, LNbits can run on any lightning-network funding source, currently supporting LND, c-lightning, OpenNode, lntxbot, LNPay and even LNbits itself!</p>
           <p>You can run LNbits for yourself, or easily offer a custodian solution for others.</p>
           <p>Each wallet has its own API keys and there is no limit to the number of wallets you can make. Being able to partition funds makes LNbits a useful tool for money management and as a development tool.</p>
           <p>Extensions add extra functionality to LNbits so you can experiment with a range of cutting-edge technologies on the lightning network. We have made developing extensions as easy as possible, and as a free and open-source project, we encourage people to develop and submit their own.</p>
+          <div class="row q-mt-md q-gutter-sm">
+            <q-btn outline
+              color="grey"
+              type="a" href="https://github.com/arcbtc/lnbits" target="_blank" rel="noopener">View project in GitHub</q-btn>
+            <q-btn outline
+              color="grey"
+              type="a" href="https://paywall.link/to/f4e4e" target="_blank" rel="noopener">Donate</q-btn>
+          </div>
         </q-card-section>
-        <q-card-actions align="right">
-          <q-btn flat
-            color="grey"
-            type="a" href="https://github.com/arcbtc/lnbits" target="_blank" rel="noopener">View project in GitHub</q-btn>
-          <q-btn flat
-            color="grey"
-            type="a" href="https://paywall.link/to/f4e4e" target="_blank" rel="noopener">Donate</q-btn>
-        </q-card-actions>
       </q-card>
 
     </div>
@@ -85,7 +63,7 @@
       <div>
         <a href="https://where39.com/">
           <q-img :ratio="48/9" src="{{ url_for('static', filename='images/where39.png') }}" class="rounded-borders">
-            
+
           </q-img>
         </a>
       </div>
@@ -93,7 +71,7 @@
       <div>
         <a href="https://github.com/rootzoll/raspiblitz">
           <q-img :ratio="65/9" src="{{ url_for('static', filename='images/raspilogo.png') }}" class="rounded-borders">
- 
+
           </q-img>
         </a>
       </div>
@@ -107,4 +85,16 @@
       </div>
     </div>
   </div>
+
+  <q-dialog v-model="disclaimerDialog.show" position="top">
+    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
+      <h5 class="q-my-md">WARNING</h5>
+      <p>
+        Login functionality to be released in V0.2, for now make sure you bookmark to save your wallet!<br/><br/>
+        This service is in BETA, and we hold no responsibility for people losing access to funds.<br/><br/>
+        To encourage you to run your own LNbits, any balance on lnbits.com will incur a charge of 1% per week.
+      </p>
+      <q-btn unelevated color="deep-purple" @click="createWallet">Proceed</q-btn>
+    </q-card>
+  </q-dialog>
 {% endblock %}
diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index c8e72e81e..5335d956d 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -145,7 +145,7 @@
 
   <q-dialog v-model="receive.show" position="top" @hide="closeReceiveDialog">
     <q-card v-if="!receive.paymentReq" class="q-pa-lg q-pt-xl lnbits__dialog-card">
-      <q-form class="q-gutter-md">
+      <q-form @submit="createInvoice" class="q-gutter-md">
         <q-input filled dense
           v-model.number="receive.data.amount"
           type="number"
@@ -158,7 +158,7 @@
           <q-btn unelevated
             color="deep-purple"
             :disable="receive.data.amount == null || receive.data.amount <= 0"
-            @click="createInvoice">Create invoice</q-btn>
+            type="submit">Create invoice</q-btn>
           <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
         </div>
         <q-spinner v-if="receive.status == 'loading'" color="deep-purple" size="2.55em"></q-spinner>
@@ -173,7 +173,7 @@
         </a>
       </div>
       <div class="row q-mt-lg">
-        <q-btn flat color="grey" @click="copyText(receive.paymentReq)">Copy invoice</q-btn>
+        <q-btn outline color="grey" @click="copyText(receive.paymentReq)">Copy invoice</q-btn>
         <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
       </div>
     </q-card>
@@ -182,7 +182,7 @@
   <q-dialog v-model="send.show" position="top" @hide="closeSendDialog">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <div v-if="!send.invoice">
-        <q-form v-if="!sendCamera.show" class="q-gutter-md">
+        <q-form v-if="!sendCamera.show" @submit="decodeInvoice" class="q-gutter-md">
           <q-input filled dense
             v-model.trim="send.data.bolt11"
             type="textarea"
@@ -197,7 +197,7 @@
             <q-btn unelevated
               color="deep-purple"
               :disable="send.data.bolt11 == ''"
-              @click="decodeInvoice">Read invoice</q-btn>
+              type="submit">Read invoice</q-btn>
             <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
           </div>
         </q-form>
diff --git a/lnbits/extensions/amilk/templates/amilk/index.html b/lnbits/extensions/amilk/templates/amilk/index.html
index 4a2c67d33..9640f1987 100644
--- a/lnbits/extensions/amilk/templates/amilk/index.html
+++ b/lnbits/extensions/amilk/templates/amilk/index.html
@@ -79,7 +79,7 @@
 
     <q-dialog v-model="amilkDialog.show" position="top">
       <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-        <q-form class="q-gutter-md">
+        <q-form @submit="createAMilk" class="q-gutter-md">
           <q-select filled dense emit-value v-model="amilkDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *">
           </q-select>
           <q-input filled dense
@@ -98,7 +98,7 @@
           <q-btn unelevated
             color="deep-purple"
             :disable="amilkDialog.data.amount == null || amilkDialog.data.amount < 0 || amilkDialog.data.lnurl == null"
-            @click="createAMilk">Create amilk</q-btn>
+            type="submit">Create amilk</q-btn>
           <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
         </q-form>
       </q-card>
@@ -151,23 +151,23 @@
             '/amilk/api/v1/amilk?all_wallets',
             this.g.user.wallets[0].inkey
           ).then(function (response) {
-            self.amilks = response.data.map(function (obj) { 
+            self.amilks = response.data.map(function (obj) {
               response.data.forEach(MILK);
               function MILK(item){
 
-              window.setInterval(function(){ 
-                
-             
+              window.setInterval(function(){
+
+
                 LNbits.api.request(
                   'GET',
                   '/amilk/api/v1/amilk/milk/' + item.id,
                   "Lorem"
                 ).then(function (response) {
-                  self.amilks = response.data.map(function (obj) { 
+                  self.amilks = response.data.map(function (obj) {
                   return mapAMilk(obj);
                 });
               });
-              }, 
+              },
               item.atime*1000);
 
               }
diff --git a/lnbits/extensions/diagonalley/templates/diagonalley/index.html b/lnbits/extensions/diagonalley/templates/diagonalley/index.html
index c435d118a..287a5092c 100644
--- a/lnbits/extensions/diagonalley/templates/diagonalley/index.html
+++ b/lnbits/extensions/diagonalley/templates/diagonalley/index.html
@@ -11,7 +11,7 @@
           <q-btn unelevated color="deep-purple" @click="productDialog.show = true">New Product</q-btn>
           <q-btn unelevated color="deep-purple" @click="indexerDialog.show = true">New Indexer
           <q-tooltip>
-            Frontend shop your stall will list its products in 
+            Frontend shop your stall will list its products in
           </q-tooltip></q-btn>
         </q-card-section>
       </q-card>
@@ -95,7 +95,7 @@
             {% raw %}
             <template v-slot:header="props">
               <q-tr :props="props">
-                
+
                 <q-th
                   v-for="col in props.cols"
                   :key="col.name"
@@ -150,7 +150,7 @@
             {% raw %}
             <template v-slot:header="props">
               <q-tr :props="props">
-             
+
                 <q-th
                   v-for="col in props.cols"
                   :key="col.name"
@@ -210,7 +210,7 @@
 
     <q-dialog v-model="productDialog.show" position="top">
       <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
-        <q-form  @submit="sendProductFormData" class="q-gutter-md">
+        <q-form @submit="sendProductFormData" class="q-gutter-md">
           <q-select filled dense emit-value v-model="productDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *">
           </q-select>
           <q-input filled dense
@@ -237,8 +237,9 @@
            ></q-input>
 
           <div class="row q-mt-lg">
-           <q-btn v-if="productDialog.data.id" unelevated color="deep-purple"
-           type="submit">Update Product</q-btn>
+            <q-btn v-if="productDialog.data.id" unelevated
+              color="deep-purple"
+              type="submit">Update Product</q-btn>
 
             <q-btn v-else unelevated
               color="deep-purple"
@@ -254,12 +255,9 @@
       </q-card>
     </q-dialog>
 
-
-
-
     <q-dialog v-model="indexerDialog.show" position="top">
       <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
-        <q-form  @submit="sendIndexerFormData" class="q-gutter-md">
+        <q-form @submit="sendIndexerFormData" class="q-gutter-md">
           <q-select filled dense emit-value v-model="indexerDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *">
           </q-select>
           <q-input filled dense
@@ -297,19 +295,20 @@
             label="Email to share with customers"></q-input>
 
           <div class="row q-mt-lg">
-           <q-btn v-if="indexerDialog.data.id" unelevated color="deep-purple"
-           type="submit">Update Indexer</q-btn>
+            <q-btn v-if="indexerDialog.data.id" unelevated
+              color="deep-purple"
+              type="submit">Update Indexer</q-btn>
 
             <q-btn v-else unelevated
-            color="deep-purple"
-            :disable="indexerDialog.data.shopname == null
-            || indexerDialog.data.shippingzone1 == null
-            || indexerDialog.data.indexeraddress == null
-            || indexerDialog.data.zone1cost == null
-            || indexerDialog.data.shippingzone2 == null
-            || indexerDialog.data.zone2cost == null
-            || indexerDialog.data.email == null"
-            type="submit">Create Indexer</q-btn>
+              color="deep-purple"
+              :disable="indexerDialog.data.shopname == null
+              || indexerDialog.data.shippingzone1 == null
+              || indexerDialog.data.indexeraddress == null
+              || indexerDialog.data.zone1cost == null
+              || indexerDialog.data.shippingzone2 == null
+              || indexerDialog.data.zone2cost == null
+              || indexerDialog.data.email == null"
+              type="submit">Create Indexer</q-btn>
 
             <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
           </div>
@@ -317,8 +316,6 @@
       </q-card>
     </q-dialog>
 
-
-
   </div>
 {% endblock %}
 
@@ -390,7 +387,7 @@
               rowsPerPage: 10
             }
           },
-          productDialog: {  
+          productDialog: {
             show: false,
             data: {}
           },
@@ -404,8 +401,7 @@
           },
         };
       },
-      methods: {  
-
+      methods: {
         getIndexers: function () {
           var self = this;
 
@@ -419,7 +415,6 @@
             });
           });
         },
-
         openIndexerUpdateDialog: function (linkId) {
           var link = _.findWhere(this.indexers, {id: linkId});
 
@@ -439,8 +434,7 @@
             email: this.indexerDialog.data.email
           };}
 
-          if (this.indexerDialog.data.id) { 
-            this.updateIndexer(this.indexerDialog.data); }
+          if (this.indexerDialog.data.id) { this.updateIndexer(this.indexerDialog.data); }
           else { this.createIndexer(data); }
         },
         updateIndexer: function (data) {
@@ -476,7 +470,6 @@
             LNbits.utils.notifyApiError(error);
           });
         },
-
         deleteIndexer: function (indexerId) {
           var self = this;
           var indexer = _.findWhere(this.indexers, {id: indexerId});
@@ -506,9 +499,7 @@
         exportIndexersCSV: function () {
           LNbits.utils.exportCSV(this.indexersTable.columns, this.indexers);
         },
-
-
-       getOrders: function () {
+        getOrders: function () {
           var self = this;
 
           LNbits.api.request(
@@ -521,7 +512,6 @@
             });
           });
         },
-
         createOrder: function () {
           var data = {
             address: this.orderDialog.data.address,
@@ -582,14 +572,11 @@
               return mapDiagonAlley(obj);
             });
           });
-         
-        },
 
+        },
         exportOrdersCSV: function () {
           LNbits.utils.exportCSV(this.ordersTable.columns, this.orders);
         },
-
-
         getProducts: function () {
           var self = this;
 
@@ -603,9 +590,6 @@
             });
           });
         },
-
-
-
         openProductUpdateDialog: function (linkId) {
           var link = _.findWhere(this.products, {id: linkId});
 
@@ -623,7 +607,7 @@
             price: this.productDialog.data.price,
             quantity: this.productDialog.data.quantity
           };}
-          if (this.productDialog.data.id) { 
+          if (this.productDialog.data.id) {
             this.updateProduct(this.productDialog.data); }
           else { this.createProduct(data); }
         },
@@ -658,7 +642,6 @@
             LNbits.utils.notifyApiError(error);
           });
         },
-
         deleteProduct: function (productId) {
           var self = this;
           var product = _.findWhere(this.products, {id: productId});
@@ -694,7 +677,6 @@
           this.getProducts();
           this.getOrders();
           this.getIndexers();
-         // console.log(this);
         }
       }
    });
diff --git a/lnbits/extensions/paywall/templates/paywall/index.html b/lnbits/extensions/paywall/templates/paywall/index.html
index 77e8c7508..7db533390 100644
--- a/lnbits/extensions/paywall/templates/paywall/index.html
+++ b/lnbits/extensions/paywall/templates/paywall/index.html
@@ -81,7 +81,7 @@
 
     <q-dialog v-model="paywallDialog.show" position="top">
       <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
-        <q-form class="q-gutter-md">
+        <q-form @submit="createPaywall" class="q-gutter-md">
           <q-select filled dense emit-value v-model="paywallDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *">
           </q-select>
           <q-input filled dense
@@ -100,7 +100,7 @@
             <q-btn unelevated
               color="deep-purple"
               :disable="paywallDialog.data.amount == null || paywallDialog.data.amount < 0 || paywallDialog.data.url == null"
-              @click="createPaywall">Create paywall</q-btn>
+              type="submit">Create paywall</q-btn>
             <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
           </div>
         </q-form>
diff --git a/lnbits/extensions/tpos/templates/tpos/index.html b/lnbits/extensions/tpos/templates/tpos/index.html
index 97a1bcfc0..393723cf9 100644
--- a/lnbits/extensions/tpos/templates/tpos/index.html
+++ b/lnbits/extensions/tpos/templates/tpos/index.html
@@ -84,7 +84,7 @@
 
     <q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
       <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
-        <q-form class="q-gutter-md">
+        <q-form @submit="createTPoS" class="q-gutter-md">
             <q-input filled dense
               v-model.trim="formDialog.data.name"
               label="Name"
@@ -101,7 +101,7 @@
               <q-btn unelevated
                 color="deep-purple"
                 :disable="formDialog.data.currency == null || formDialog.data.name == null"
-                @click="createTPoS">Create TPoS</q-btn>
+                type="submit">Create TPoS</q-btn>
               <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
             </div>
         </q-form>