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

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

View File

@ -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>
</q-card-section>
<q-card-actions align="right">
<q-btn flat
<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 flat
<q-btn outline
color="grey"
type="a" href="https://paywall.link/to/f4e4e" target="_blank" rel="noopener">Donate</q-btn>
</q-card-actions>
</div>
</q-card-section>
</q-card>
</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 %}

View File

@ -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>

View File

@ -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>

View File

@ -237,7 +237,8 @@
></q-input>
<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
color="deep-purple"
type="submit">Update Product</q-btn>
<q-btn v-else unelevated
@ -254,9 +255,6 @@
</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">
@ -297,7 +295,8 @@
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"
<q-btn v-if="indexerDialog.data.id" unelevated
color="deep-purple"
type="submit">Update Indexer</q-btn>
<q-btn v-else unelevated
@ -317,8 +316,6 @@
</q-card>
</q-dialog>
</div>
{% endblock %}
@ -405,7 +402,6 @@
};
},
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,8 +499,6 @@
exportIndexersCSV: function () {
LNbits.utils.exportCSV(this.indexersTable.columns, this.indexers);
},
getOrders: function () {
var self = this;
@ -521,7 +512,6 @@
});
});
},
createOrder: function () {
var data = {
address: this.orderDialog.data.address,
@ -584,12 +574,9 @@
});
},
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});
@ -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);
}
}
});

View File

@ -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>

View File

@ -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>