heierbtc/lnbits
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(vue): use @submit to send forms, and catch users pressing return

Browse Source
This commit is contained in:
Eneko Illarramendi 2020-04-21 08:16:56 +02:00
parent bb2d1ea140
commit 364b6dc857
6 changed files with 68 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
lnbits/core/templates/core/index.html
View File

@ -22,7 +22,7 @@
Press to claim bitcoin Press to claim bitcoin
</q-btn> </q-btn>
{% else %} {% else %}
<q-form class="q-gutter-md"> <q-form @submit="createWallet" class="q-gutter-md">
<q-input filled dense <q-input filled dense
v-model="walletName" v-model="walletName"
label="Name your LNbits wallet *" label="Name your LNbits wallet *"
@ -30,29 +30,7 @@
<q-btn unelevated <q-btn unelevated
color="deep-purple" color="deep-purple"
:disable="walletName == ''" :disable="walletName == ''"
@click="disclaimerDialog.show = true" type="submit">Add a new wallet</q-btn>
@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>
</q-form> </q-form>
{% endif %} {% endif %}
</q-card-section> </q-card-section>
@ -62,19 +40,19 @@
<q-card-section> <q-card-section>
<h3 class="q-my-none"><strong>LN</strong>bits</h3> <h3 class="q-my-none"><strong>LN</strong>bits</h3>
<h5 class="q-my-md">Free and open-source lightning wallet</h5> <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>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>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> <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-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> </q-card>
</div> </div>
@ -85,7 +63,7 @@
<div> <div>
<a href="https://where39.com/"> <a href="https://where39.com/">
<q-img :ratio="48/9" src="{{ url_for('static', filename='images/where39.png') }}" class="rounded-borders"> <q-img :ratio="48/9" src="{{ url_for('static', filename='images/where39.png') }}" class="rounded-borders">
</q-img> </q-img>
</a> </a>
</div> </div>
@ -93,7 +71,7 @@
<div> <div>
<a href="https://github.com/rootzoll/raspiblitz"> <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 :ratio="65/9" src="{{ url_for('static', filename='images/raspilogo.png') }}" class="rounded-borders">
</q-img> </q-img>
</a> </a>
</div> </div>
@ -107,4 +85,16 @@
</div> </div>
</div> </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 %} {% endblock %}

10
lnbits/core/templates/core/wallet.html
View File

@ -145,7 +145,7 @@
<q-dialog v-model="receive.show" position="top" @hide="closeReceiveDialog"> <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-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 <q-input filled dense
v-model.number="receive.data.amount" v-model.number="receive.data.amount"
type="number" type="number"
@ -158,7 +158,7 @@
<q-btn unelevated <q-btn unelevated
color="deep-purple" color="deep-purple"
:disable="receive.data.amount == null || receive.data.amount <= 0" :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> <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
</div> </div>
<q-spinner v-if="receive.status == 'loading'" color="deep-purple" size="2.55em"></q-spinner> <q-spinner v-if="receive.status == 'loading'" color="deep-purple" size="2.55em"></q-spinner>
@ -173,7 +173,7 @@
</a> </a>
</div> </div>
<div class="row q-mt-lg"> <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> <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
</div> </div>
</q-card> </q-card>
@ -182,7 +182,7 @@
<q-dialog v-model="send.show" position="top" @hide="closeSendDialog"> <q-dialog v-model="send.show" position="top" @hide="closeSendDialog">
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card"> <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
<div v-if="!send.invoice"> <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 <q-input filled dense
v-model.trim="send.data.bolt11" v-model.trim="send.data.bolt11"
type="textarea" type="textarea"
@ -197,7 +197,7 @@
<q-btn unelevated <q-btn unelevated
color="deep-purple" color="deep-purple"
:disable="send.data.bolt11 == ''" :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> <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
</div> </div>
</q-form> </q-form>

16
lnbits/extensions/amilk/templates/amilk/index.html
View File

@ -79,7 +79,7 @@
<q-dialog v-model="amilkDialog.show" position="top"> <q-dialog v-model="amilkDialog.show" position="top">
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card"> <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 filled dense emit-value v-model="amilkDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *">
</q-select> </q-select>
<q-input filled dense <q-input filled dense
@ -98,7 +98,7 @@
<q-btn unelevated <q-btn unelevated
color="deep-purple" color="deep-purple"
:disable="amilkDialog.data.amount == null || amilkDialog.data.amount < 0 || amilkDialog.data.lnurl == null" :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-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
</q-form> </q-form>
</q-card> </q-card>
@ -151,23 +151,23 @@
'/amilk/api/v1/amilk?all_wallets', '/amilk/api/v1/amilk?all_wallets',
this.g.user.wallets[0].inkey this.g.user.wallets[0].inkey
).then(function (response) { ).then(function (response) {
self.amilks = response.data.map(function (obj) { self.amilks = response.data.map(function (obj) {
response.data.forEach(MILK); response.data.forEach(MILK);
function MILK(item){ function MILK(item){
window.setInterval(function(){ window.setInterval(function(){
LNbits.api.request( LNbits.api.request(
'GET', 'GET',
'/amilk/api/v1/amilk/milk/' + item.id, '/amilk/api/v1/amilk/milk/' + item.id,
"Lorem" "Lorem"
).then(function (response) { ).then(function (response) {
self.amilks = response.data.map(function (obj) { self.amilks = response.data.map(function (obj) {
return mapAMilk(obj); return mapAMilk(obj);
}); });
}); });
}, },
item.atime*1000); item.atime*1000);
} }

70
lnbits/extensions/diagonalley/templates/diagonalley/index.html
View File

@ -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="productDialog.show = true">New Product</q-btn>
<q-btn unelevated color="deep-purple" @click="indexerDialog.show = true">New Indexer <q-btn unelevated color="deep-purple" @click="indexerDialog.show = true">New Indexer
<q-tooltip> <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-tooltip></q-btn>
</q-card-section> </q-card-section>
</q-card> </q-card>
@ -95,7 +95,7 @@
{% raw %} {% raw %}
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
<q-th <q-th
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
@ -150,7 +150,7 @@
{% raw %} {% raw %}
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">
<q-th <q-th
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
@ -210,7 +210,7 @@
<q-dialog v-model="productDialog.show" position="top"> <q-dialog v-model="productDialog.show" position="top">
<q-card class="q-pa-lg q-pt-xl" style="width: 500px"> <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 filled dense emit-value v-model="productDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *">
</q-select> </q-select>
<q-input filled dense <q-input filled dense
@ -237,8 +237,9 @@
></q-input> ></q-input>
<div class="row q-mt-lg"> <div class="row q-mt-lg">
<q-btn v-if="productDialog.data.id" unelevated color="deep-purple" <q-btn v-if="productDialog.data.id" unelevated
type="submit">Update Product</q-btn> color="deep-purple"
type="submit">Update Product</q-btn>
<q-btn v-else unelevated <q-btn v-else unelevated
color="deep-purple" color="deep-purple"
@ -254,12 +255,9 @@
</q-card> </q-card>
</q-dialog> </q-dialog>
<q-dialog v-model="indexerDialog.show" position="top"> <q-dialog v-model="indexerDialog.show" position="top">
<q-card class="q-pa-lg q-pt-xl" style="width: 500px"> <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 filled dense emit-value v-model="indexerDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *">
</q-select> </q-select>
<q-input filled dense <q-input filled dense
@ -297,19 +295,20 @@
label="Email to share with customers"></q-input> label="Email to share with customers"></q-input>
<div class="row q-mt-lg"> <div class="row q-mt-lg">
<q-btn v-if="indexerDialog.data.id" unelevated color="deep-purple" <q-btn v-if="indexerDialog.data.id" unelevated
type="submit">Update Indexer</q-btn> color="deep-purple"
type="submit">Update Indexer</q-btn>
<q-btn v-else unelevated <q-btn v-else unelevated
color="deep-purple" color="deep-purple"
:disable="indexerDialog.data.shopname == null :disable="indexerDialog.data.shopname == null
|| indexerDialog.data.shippingzone1 == null || indexerDialog.data.shippingzone1 == null
|| indexerDialog.data.indexeraddress == null || indexerDialog.data.indexeraddress == null
|| indexerDialog.data.zone1cost == null || indexerDialog.data.zone1cost == null
|| indexerDialog.data.shippingzone2 == null || indexerDialog.data.shippingzone2 == null
|| indexerDialog.data.zone2cost == null || indexerDialog.data.zone2cost == null
|| indexerDialog.data.email == null" || indexerDialog.data.email == null"
type="submit">Create Indexer</q-btn> type="submit">Create Indexer</q-btn>
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn> <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
</div> </div>
@ -317,8 +316,6 @@
</q-card> </q-card>
</q-dialog> </q-dialog>
</div> </div>
{% endblock %} {% endblock %}
@ -390,7 +387,7 @@
rowsPerPage: 10 rowsPerPage: 10
} }
}, },
productDialog: { productDialog: {
show: false, show: false,
data: {} data: {}
}, },
@ -404,8 +401,7 @@
}, },
}; };
}, },
methods: { methods: {
getIndexers: function () { getIndexers: function () {
var self = this; var self = this;
@ -419,7 +415,6 @@
}); });
}); });
}, },
openIndexerUpdateDialog: function (linkId) { openIndexerUpdateDialog: function (linkId) {
var link = _.findWhere(this.indexers, {id: linkId}); var link = _.findWhere(this.indexers, {id: linkId});
@ -439,8 +434,7 @@
email: this.indexerDialog.data.email email: this.indexerDialog.data.email
};} };}
if (this.indexerDialog.data.id) { if (this.indexerDialog.data.id) { this.updateIndexer(this.indexerDialog.data); }
this.updateIndexer(this.indexerDialog.data); }
else { this.createIndexer(data); } else { this.createIndexer(data); }
}, },
updateIndexer: function (data) { updateIndexer: function (data) {
@ -476,7 +470,6 @@
LNbits.utils.notifyApiError(error); LNbits.utils.notifyApiError(error);
}); });
}, },
deleteIndexer: function (indexerId) { deleteIndexer: function (indexerId) {
var self = this; var self = this;
var indexer = _.findWhere(this.indexers, {id: indexerId}); var indexer = _.findWhere(this.indexers, {id: indexerId});
@ -506,9 +499,7 @@
exportIndexersCSV: function () { exportIndexersCSV: function () {
LNbits.utils.exportCSV(this.indexersTable.columns, this.indexers); LNbits.utils.exportCSV(this.indexersTable.columns, this.indexers);
}, },
getOrders: function () {
getOrders: function () {
var self = this; var self = this;
LNbits.api.request( LNbits.api.request(
@ -521,7 +512,6 @@
}); });
}); });
}, },
createOrder: function () { createOrder: function () {
var data = { var data = {
address: this.orderDialog.data.address, address: this.orderDialog.data.address,
@ -582,14 +572,11 @@
return mapDiagonAlley(obj); return mapDiagonAlley(obj);
}); });
}); });
},
},
exportOrdersCSV: function () { exportOrdersCSV: function () {
LNbits.utils.exportCSV(this.ordersTable.columns, this.orders); LNbits.utils.exportCSV(this.ordersTable.columns, this.orders);
}, },
getProducts: function () { getProducts: function () {
var self = this; var self = this;
@ -603,9 +590,6 @@
}); });
}); });
}, },
openProductUpdateDialog: function (linkId) { openProductUpdateDialog: function (linkId) {
var link = _.findWhere(this.products, {id: linkId}); var link = _.findWhere(this.products, {id: linkId});
@ -623,7 +607,7 @@
price: this.productDialog.data.price, price: this.productDialog.data.price,
quantity: this.productDialog.data.quantity quantity: this.productDialog.data.quantity
};} };}
if (this.productDialog.data.id) { if (this.productDialog.data.id) {
this.updateProduct(this.productDialog.data); } this.updateProduct(this.productDialog.data); }
else { this.createProduct(data); } else { this.createProduct(data); }
}, },
@ -658,7 +642,6 @@
LNbits.utils.notifyApiError(error); LNbits.utils.notifyApiError(error);
}); });
}, },
deleteProduct: function (productId) { deleteProduct: function (productId) {
var self = this; var self = this;
var product = _.findWhere(this.products, {id: productId}); var product = _.findWhere(this.products, {id: productId});
@ -694,7 +677,6 @@
this.getProducts(); this.getProducts();
this.getOrders(); this.getOrders();
this.getIndexers(); this.getIndexers();
// console.log(this);
} }
} }
}); });

4
lnbits/extensions/paywall/templates/paywall/index.html
View File

@ -81,7 +81,7 @@
<q-dialog v-model="paywallDialog.show" position="top"> <q-dialog v-model="paywallDialog.show" position="top">
<q-card class="q-pa-lg q-pt-xl" style="width: 500px"> <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 filled dense emit-value v-model="paywallDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *">
</q-select> </q-select>
<q-input filled dense <q-input filled dense
@ -100,7 +100,7 @@
<q-btn unelevated <q-btn unelevated
color="deep-purple" color="deep-purple"
:disable="paywallDialog.data.amount == null || paywallDialog.data.amount < 0 || paywallDialog.data.url == null" :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> <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
</div> </div>
</q-form> </q-form>

4
lnbits/extensions/tpos/templates/tpos/index.html
View File

@ -84,7 +84,7 @@
<q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog"> <q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
<q-card class="q-pa-lg q-pt-xl" style="width: 500px"> <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 <q-input filled dense
v-model.trim="formDialog.data.name" v-model.trim="formDialog.data.name"
label="Name" label="Name"
@ -101,7 +101,7 @@
<q-btn unelevated <q-btn unelevated
color="deep-purple" color="deep-purple"
:disable="formDialog.data.currency == null || formDialog.data.name == null" :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> <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
</div> </div>
</q-form> </q-form>