mirror of
https://github.com/lnbits/lnbits.git
synced 2025-06-23 15:22:13 +02:00
ran prettier on captcha
This commit is contained in:
benarc
parent
20ef9f92a1
commit
1e9151cedc
@ -1,65 +1,80 @@
|
|||||||
var ciframeLoaded = !1,
|
var ciframeLoaded = !1,
|
||||||
captchaStyleAdded = !1;
|
captchaStyleAdded = !1
|
||||||
|
|
||||||
function ccreateIframeElement(t = {}) {
|
function ccreateIframeElement(t = {}) {
|
||||||
const e = document.createElement("iframe");
|
const e = document.createElement('iframe')
|
||||||
// e.style.marginLeft = "25px",
|
// e.style.marginLeft = "25px",
|
||||||
e.style.border = "none", e.style.width = "100%", e.style.height = "100%", e.scrolling = "no", e.id = "captcha-iframe";
|
;(e.style.border = 'none'),
|
||||||
t.dest, t.amount, t.currency, t.label, t.opReturn;
|
(e.style.width = '100%'),
|
||||||
var captchaid = document.getElementById("captchascript").getAttribute("data-captchaid");
|
(e.style.height = '100%'),
|
||||||
return e.src = "http://localhost:5000/captcha/" + captchaid, e
|
(e.scrolling = 'no'),
|
||||||
|
(e.id = 'captcha-iframe')
|
||||||
|
t.dest, t.amount, t.currency, t.label, t.opReturn
|
||||||
|
var captchaid = document
|
||||||
|
.getElementById('captchascript')
|
||||||
|
.getAttribute('data-captchaid')
|
||||||
|
return (e.src = 'http://localhost:5000/captcha/' + captchaid), e
|
||||||
}
|
}
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
if (captchaStyleAdded) console.log("Captcha stuff already added!");
|
if (captchaStyleAdded) console.log('Captcha stuff already added!')
|
||||||
else {
|
else {
|
||||||
console.log("Adding captcha stuff"), captchaStyleAdded = !0;
|
console.log('Adding captcha stuff'), (captchaStyleAdded = !0)
|
||||||
var t = document.createElement("style");
|
var t = document.createElement('style')
|
||||||
t.innerHTML = "\t/*Button*/\t\t.button-captcha-filled\t\t\t{\t\t\tdisplay: flex;\t\t\talign-items: center;\t\t\tjustify-content: center;\t\t\twidth: 120px;\t\t\tmin-width: 30px;\t\t\theight: 40px;\t\t\tline-height: 2.5;\t\t\ttext-align: center;\t\t\tcursor: pointer;\t\t\t/* Rectangle 2: */\t\t\tbackground: #FF7979;\t\t\tbox-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);\t\t\tborder-radius: 20px;\t\t\t/* Sign up: */\t\t\tfont-family: 'Avenir-Heavy', Futura, Helvetica, Arial;\t\t\tfont-size: 16px;\t\t\tcolor: #FFFFFF;\t\t}\t\t.button-captcha-filled:hover\t\t{\t\t\tbackground:#FFFFFF;\t\t\tcolor: #FF7979;\t\t\tbox-shadow: 0 0 4px 0 rgba(0,0,0,0.20);\t\t}\t\t.button-captcha-filled:active\t\t{\t\t\tbackground:#FFFFFF;\t\t\tcolor: #FF7979;\t\t\t/*Move it down a little bit*/\t\t\tposition: relative;\t\t\ttop: 1px;\t\t}\t\t.button-captcha-filled-dark\t\t\t{\t\t\tdisplay: flex;\t\t\talign-items: center;\t\t\tjustify-content: center;\t\t\twidth: 120px;\t\t\tmin-width: 30px;\t\t\theight: 40px;\t\t\tline-height: 2.5;\t\t\ttext-align: center;\t\t\tcursor: pointer;\t\t\t/* Rectangle 2: */\t\t\tbackground: #161C38;\t\t\tbox-shadow: 0 0px 4px 0 rgba(0,0,0,0.20);\t\t\tborder-radius: 20px;\t\t\t/* Sign up: */\t\t\tfont-family: 'Avenir-Heavy', Futura, Helvetica, Arial;\t\t\tfont-size: 16px;\t\t\tcolor: #FFFFFF;\t\t}\t\t.button-captcha-filled-dark:hover\t\t{\t\t\tbackground:#FFFFFF;\t\t\tcolor: #161C38;\t\t\tbox-shadow: 0 0px 4px 0 rgba(0,0,0,0.20);\t\t}\t\t.button-captcha-filled-dark:active\t\t{\t\t\tbackground:#FFFFFF;\t\t\tcolor: #161C38;\t\t\t/*Move it down a little bit*/\t\t\tposition: relative;\t\t\ttop: 1px;\t\t}\t\t.modal-captcha-container {\t\t position: fixed;\t\t z-index: 1000;\t\t text-align: left;/*Si no añado esto, a veces hereda el text-align:center del body, y entonces el popup queda movido a la derecha, por center + margin left que aplico*/\t\t left: 0;\t\t top: 0;\t\t width: 100%;\t\t height: 100%;\t\t background-color: rgba(0, 0, 0, 0.5);\t\t opacity: 0;\t\t visibility: hidden;\t\t transform: scale(1.1);\t\t transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;\t\t}\t\t.modal-captcha-content {\t\t position: absolute;\t\t top: 50%;\t\t left: 50%;\t\t transform: translate(-50%, -50%);\t\t background-color: white;\t\t width: 100%;\t\t height: 100%;\t\t border-radius: 0.5rem;\t\t /*Rounded shadowed borders*/\t\t\tbox-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15);\t\t\tborder-radius: 5px;\t\t}\t\t.close-button-captcha {\t\t float: right;\t\t width: 1.5rem;\t\t line-height: 1.5rem;\t\t text-align: center;\t\t cursor: pointer;\t\t margin-right:20px;\t\t margin-top:10px;\t\t border-radius: 0.25rem;\t\t background-color: lightgray;\t\t}\t\t.close-button-captcha:hover {\t\t background-color: darkgray;\t\t}\t\t.show-modal-captcha {\t\t opacity: 1;\t\t visibility: visible;\t\t transform: scale(1.0);\t\t transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;\t\t}\t\t/* Mobile */\t\t@media screen and (min-device-width: 160px) and ( max-width: 1077px ) /*No tendria ni por que poner un min-device, porq abarca todo lo humano...*/\t\t{\t\t}";
|
t.innerHTML =
|
||||||
var e = document.querySelector("script");
|
"\t/*Button*/\t\t.button-captcha-filled\t\t\t{\t\t\tdisplay: flex;\t\t\talign-items: center;\t\t\tjustify-content: center;\t\t\twidth: 120px;\t\t\tmin-width: 30px;\t\t\theight: 40px;\t\t\tline-height: 2.5;\t\t\ttext-align: center;\t\t\tcursor: pointer;\t\t\t/* Rectangle 2: */\t\t\tbackground: #FF7979;\t\t\tbox-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);\t\t\tborder-radius: 20px;\t\t\t/* Sign up: */\t\t\tfont-family: 'Avenir-Heavy', Futura, Helvetica, Arial;\t\t\tfont-size: 16px;\t\t\tcolor: #FFFFFF;\t\t}\t\t.button-captcha-filled:hover\t\t{\t\t\tbackground:#FFFFFF;\t\t\tcolor: #FF7979;\t\t\tbox-shadow: 0 0 4px 0 rgba(0,0,0,0.20);\t\t}\t\t.button-captcha-filled:active\t\t{\t\t\tbackground:#FFFFFF;\t\t\tcolor: #FF7979;\t\t\t/*Move it down a little bit*/\t\t\tposition: relative;\t\t\ttop: 1px;\t\t}\t\t.button-captcha-filled-dark\t\t\t{\t\t\tdisplay: flex;\t\t\talign-items: center;\t\t\tjustify-content: center;\t\t\twidth: 120px;\t\t\tmin-width: 30px;\t\t\theight: 40px;\t\t\tline-height: 2.5;\t\t\ttext-align: center;\t\t\tcursor: pointer;\t\t\t/* Rectangle 2: */\t\t\tbackground: #161C38;\t\t\tbox-shadow: 0 0px 4px 0 rgba(0,0,0,0.20);\t\t\tborder-radius: 20px;\t\t\t/* Sign up: */\t\t\tfont-family: 'Avenir-Heavy', Futura, Helvetica, Arial;\t\t\tfont-size: 16px;\t\t\tcolor: #FFFFFF;\t\t}\t\t.button-captcha-filled-dark:hover\t\t{\t\t\tbackground:#FFFFFF;\t\t\tcolor: #161C38;\t\t\tbox-shadow: 0 0px 4px 0 rgba(0,0,0,0.20);\t\t}\t\t.button-captcha-filled-dark:active\t\t{\t\t\tbackground:#FFFFFF;\t\t\tcolor: #161C38;\t\t\t/*Move it down a little bit*/\t\t\tposition: relative;\t\t\ttop: 1px;\t\t}\t\t.modal-captcha-container {\t\t position: fixed;\t\t z-index: 1000;\t\t text-align: left;/*Si no añado esto, a veces hereda el text-align:center del body, y entonces el popup queda movido a la derecha, por center + margin left que aplico*/\t\t left: 0;\t\t top: 0;\t\t width: 100%;\t\t height: 100%;\t\t background-color: rgba(0, 0, 0, 0.5);\t\t opacity: 0;\t\t visibility: hidden;\t\t transform: scale(1.1);\t\t transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;\t\t}\t\t.modal-captcha-content {\t\t position: absolute;\t\t top: 50%;\t\t left: 50%;\t\t transform: translate(-50%, -50%);\t\t background-color: white;\t\t width: 100%;\t\t height: 100%;\t\t border-radius: 0.5rem;\t\t /*Rounded shadowed borders*/\t\t\tbox-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15);\t\t\tborder-radius: 5px;\t\t}\t\t.close-button-captcha {\t\t float: right;\t\t width: 1.5rem;\t\t line-height: 1.5rem;\t\t text-align: center;\t\t cursor: pointer;\t\t margin-right:20px;\t\t margin-top:10px;\t\t border-radius: 0.25rem;\t\t background-color: lightgray;\t\t}\t\t.close-button-captcha:hover {\t\t background-color: darkgray;\t\t}\t\t.show-modal-captcha {\t\t opacity: 1;\t\t visibility: visible;\t\t transform: scale(1.0);\t\t transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;\t\t}\t\t/* Mobile */\t\t@media screen and (min-device-width: 160px) and ( max-width: 1077px ) /*No tendria ni por que poner un min-device, porq abarca todo lo humano...*/\t\t{\t\t}"
|
||||||
e.parentNode.insertBefore(t, e);
|
var e = document.querySelector('script')
|
||||||
var i = document.getElementById("captchacheckbox"),
|
e.parentNode.insertBefore(t, e)
|
||||||
n = i.dataset,
|
var i = document.getElementById('captchacheckbox'),
|
||||||
o = "true" === n.dark;
|
n = i.dataset,
|
||||||
var a = document.createElement("div");
|
o = 'true' === n.dark
|
||||||
a.className += " modal-captcha-container", a.innerHTML = '\t\t<div class="modal-captcha-content"> \t<span class="close-button-captcha" style="display: none;">×</span>\t\t</div>\t', document.getElementsByTagName("body")[0].appendChild(a);
|
var a = document.createElement('div')
|
||||||
var r = document.getElementsByClassName("modal-captcha-content").item(0);
|
;(a.className += ' modal-captcha-container'),
|
||||||
document.getElementsByClassName("close-button-captcha").item(0).addEventListener("click", d), window.addEventListener("click", function(t) {
|
(a.innerHTML =
|
||||||
t.target === a && d()
|
'\t\t<div class="modal-captcha-content"> \t<span class="close-button-captcha" style="display: none;">×</span>\t\t</div>\t'),
|
||||||
}), i.addEventListener("change", function() {
|
document.getElementsByTagName('body')[0].appendChild(a)
|
||||||
if(this.checked){
|
var r = document.getElementsByClassName('modal-captcha-content').item(0)
|
||||||
// console.log("checkbox checked");
|
document
|
||||||
if (0 == ciframeLoaded) {
|
.getElementsByClassName('close-button-captcha')
|
||||||
// console.log("n: ", n);
|
.item(0)
|
||||||
var t = ccreateIframeElement(n);
|
.addEventListener('click', d),
|
||||||
r.appendChild(t), ciframeLoaded = !0
|
window.addEventListener('click', function (t) {
|
||||||
}
|
t.target === a && d()
|
||||||
d()
|
}),
|
||||||
}
|
i.addEventListener('change', function () {
|
||||||
})
|
if (this.checked) {
|
||||||
}
|
// console.log("checkbox checked");
|
||||||
|
if (0 == ciframeLoaded) {
|
||||||
|
// console.log("n: ", n);
|
||||||
|
var t = ccreateIframeElement(n)
|
||||||
|
r.appendChild(t), (ciframeLoaded = !0)
|
||||||
|
}
|
||||||
|
d()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
function d() {
|
function d() {
|
||||||
a.classList.toggle("show-modal-captcha")
|
a.classList.toggle('show-modal-captcha')
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
function receiveMessage(event){
|
function receiveMessage(event) {
|
||||||
if (event.data.includes("paymenthash")){
|
if (event.data.includes('paymenthash')) {
|
||||||
// console.log("paymenthash received: ", event.data);
|
// console.log("paymenthash received: ", event.data);
|
||||||
document.getElementById("captchapayhash").value = event.data.split("_")[1];
|
document.getElementById('captchapayhash').value = event.data.split('_')[1]
|
||||||
}
|
}
|
||||||
if (event.data.includes("removetheiframe")){
|
if (event.data.includes('removetheiframe')) {
|
||||||
if (event.data.includes("nok")){
|
if (event.data.includes('nok')) {
|
||||||
//invoice was NOT paid
|
//invoice was NOT paid
|
||||||
// console.log("receiveMessage not paid")
|
// console.log("receiveMessage not paid")
|
||||||
document.getElementById("captchacheckbox").checked = false;
|
document.getElementById('captchacheckbox').checked = false
|
||||||
}
|
}
|
||||||
ciframeLoaded = !1;
|
ciframeLoaded = !1
|
||||||
var element = document.getElementById('captcha-iframe');
|
var element = document.getElementById('captcha-iframe')
|
||||||
document.getElementsByClassName("modal-captcha-container")[0].classList.toggle("show-modal-captcha");
|
document
|
||||||
element.parentNode.removeChild(element);
|
.getElementsByClassName('modal-captcha-container')[0]
|
||||||
}
|
.classList.toggle('show-modal-captcha')
|
||||||
|
element.parentNode.removeChild(element)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
window.addEventListener("message", receiveMessage, false);
|
window.addEventListener('message', receiveMessage, false)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -46,7 +46,11 @@
|
|||||||
<q-btn outline color="grey" @click="copyText(paymentReq)"
|
<q-btn outline color="grey" @click="copyText(paymentReq)"
|
||||||
>Copy invoice</q-btn
|
>Copy invoice</q-btn
|
||||||
>
|
>
|
||||||
<q-btn @click="cancelPayment(false)" flat color="grey" class="q-ml-auto"
|
<q-btn
|
||||||
|
@click="cancelPayment(false)"
|
||||||
|
flat
|
||||||
|
color="grey"
|
||||||
|
class="q-ml-auto"
|
||||||
>Cancel</q-btn
|
>Cancel</q-btn
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@ -58,7 +62,7 @@
|
|||||||
Captcha accepted. You are probably human.<br />
|
Captcha accepted. You are probably human.<br />
|
||||||
<!-- <strong>{% raw %}{{ redirectUrl }}{% endraw %}</strong> -->
|
<!-- <strong>{% raw %}{{ redirectUrl }}{% endraw %}</strong> -->
|
||||||
</p>
|
</p>
|
||||||
<!-- <div class="row q-mt-lg">
|
<!-- <div class="row q-mt-lg">
|
||||||
<q-btn outline color="grey" type="a" :href="redirectUrl"
|
<q-btn outline color="grey" type="a" :href="redirectUrl"
|
||||||
>Open URL</q-btn>
|
>Open URL</q-btn>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|||||||
@ -106,7 +106,7 @@
|
|||||||
label="Wallet *"
|
label="Wallet *"
|
||||||
>
|
>
|
||||||
</q-select>
|
</q-select>
|
||||||
<!-- <q-input
|
<!-- <q-input
|
||||||
filled
|
filled
|
||||||
dense
|
dense
|
||||||
v-model.trim="formDialog.data.url"
|
v-model.trim="formDialog.data.url"
|
||||||
@ -148,7 +148,8 @@
|
|||||||
<q-item-label>Remember payments</q-item-label>
|
<q-item-label>Remember payments</q-item-label>
|
||||||
<q-item-label caption
|
<q-item-label caption
|
||||||
>A succesful payment will be registered in the browser's
|
>A succesful payment will be registered in the browser's
|
||||||
storage, so the user doesn't need to pay again to prove they are human.</q-item-label
|
storage, so the user doesn't need to pay again to prove they are
|
||||||
|
human.</q-item-label
|
||||||
>
|
>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
@ -173,7 +174,7 @@
|
|||||||
<q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
|
<q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
|
||||||
{% raw %}
|
{% raw %}
|
||||||
<q-responsive :ratio="1" class="q-mx-xl q-mb-md">
|
<q-responsive :ratio="1" class="q-mx-xl q-mb-md">
|
||||||
<!-- <qrcode
|
<!-- <qrcode
|
||||||
:value="qrCodeDialog.data.lnurl"
|
:value="qrCodeDialog.data.lnurl"
|
||||||
:options="{width: 800}"
|
:options="{width: 800}"
|
||||||
class="rounded-borders"
|
class="rounded-borders"
|
||||||
@ -181,12 +182,15 @@
|
|||||||
<code style="word-break: break-all">
|
<code style="word-break: break-all">
|
||||||
{{ qrCodeDialog.data.snippet }}
|
{{ qrCodeDialog.data.snippet }}
|
||||||
</code>
|
</code>
|
||||||
<p style="margin-top: 20px;">Copy the snippet above and paste into your website/form. The checkbox can be in checked state only after user pays.</p>
|
<p style="margin-top: 20px">
|
||||||
|
Copy the snippet above and paste into your website/form. The checkbox
|
||||||
|
can be in checked state only after user pays.
|
||||||
|
</p>
|
||||||
</q-responsive>
|
</q-responsive>
|
||||||
<p style="word-break: break-all">
|
<p style="word-break: break-all">
|
||||||
<strong>ID:</strong> {{ qrCodeDialog.data.id }}<br />
|
<strong>ID:</strong> {{ qrCodeDialog.data.id }}<br />
|
||||||
<strong>Amount:</strong> {{ qrCodeDialog.data.amount }}<br />
|
<strong>Amount:</strong> {{ qrCodeDialog.data.amount }}<br />
|
||||||
<!-- <span v-if="qrCodeDialog.data.currency"
|
<!-- <span v-if="qrCodeDialog.data.currency"
|
||||||
><strong>{{ qrCodeDialog.data.currency }} price:</strong> {{
|
><strong>{{ qrCodeDialog.data.currency }} price:</strong> {{
|
||||||
fiatRates[qrCodeDialog.data.currency] ?
|
fiatRates[qrCodeDialog.data.currency] ?
|
||||||
fiatRates[qrCodeDialog.data.currency] + ' sat' : 'Loading...' }}<br
|
fiatRates[qrCodeDialog.data.currency] + ' sat' : 'Loading...' }}<br
|
||||||
@ -305,7 +309,7 @@
|
|||||||
createCaptcha: function () {
|
createCaptcha: function () {
|
||||||
var data = {
|
var data = {
|
||||||
// url: this.formDialog.data.url,
|
// url: this.formDialog.data.url,
|
||||||
url: "http://dummy.com",
|
url: 'http://dummy.com',
|
||||||
memo: this.formDialog.data.memo,
|
memo: this.formDialog.data.memo,
|
||||||
amount: this.formDialog.data.amount,
|
amount: this.formDialog.data.amount,
|
||||||
description: this.formDialog.data.description,
|
description: this.formDialog.data.description,
|
||||||
@ -355,7 +359,7 @@
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
buildCaptchaSnippet: function(captchaId){
|
buildCaptchaSnippet: function (captchaId) {
|
||||||
var locationPath = [
|
var locationPath = [
|
||||||
window.location.protocol,
|
window.location.protocol,
|
||||||
'//',
|
'//',
|
||||||
@ -363,14 +367,19 @@
|
|||||||
window.location.pathname
|
window.location.pathname
|
||||||
].join('')
|
].join('')
|
||||||
|
|
||||||
var captchasnippet = '<!-- Captcha Checkbox Start -->\n'
|
var captchasnippet =
|
||||||
+ '<input type="checkbox" id="captchacheckbox">\n'
|
'<!-- Captcha Checkbox Start -->\n' +
|
||||||
+ '<label for="captchacheckbox">I\'m not a robot</label><br/>\n'
|
'<input type="checkbox" id="captchacheckbox">\n' +
|
||||||
+ '<input type="text" id="captchapayhash" style="display: none;"/>\n'
|
'<label for="captchacheckbox">I\'m not a robot</label><br/>\n' +
|
||||||
+ '<script type="text/javascript" src="'+ locationPath +'static/js/captcha.js" id="captchascript" data-captchaid="'+ captchaId +'">\n'
|
'<input type="text" id="captchapayhash" style="display: none;"/>\n' +
|
||||||
+ '<\/script>\n'
|
'<script type="text/javascript" src="' +
|
||||||
+ '<!-- Captcha Checkbox End -->';
|
locationPath +
|
||||||
return captchasnippet;
|
'static/js/captcha.js" id="captchascript" data-captchaid="' +
|
||||||
|
captchaId +
|
||||||
|
'">\n' +
|
||||||
|
'<\/script>\n' +
|
||||||
|
'<!-- Captcha Checkbox End -->'
|
||||||
|
return captchasnippet
|
||||||
},
|
},
|
||||||
openQrCodeDialog(captchaId) {
|
openQrCodeDialog(captchaId) {
|
||||||
// var link = _.findWhere(this.payLinks, {id: linkId})
|
// var link = _.findWhere(this.payLinks, {id: linkId})
|
||||||
@ -380,9 +389,9 @@
|
|||||||
this.qrCodeDialog.data = {
|
this.qrCodeDialog.data = {
|
||||||
id: captcha.id,
|
id: captcha.id,
|
||||||
amount: captcha.amount,
|
amount: captcha.amount,
|
||||||
// (link.min === link.max ? link.min : `${link.min} - ${link.max}`) +
|
// (link.min === link.max ? link.min : `${link.min} - ${link.max}`) +
|
||||||
// ' ' +
|
// ' ' +
|
||||||
// (link.currency || 'sat'),
|
// (link.currency || 'sat'),
|
||||||
snippet: this.buildCaptchaSnippet(captcha.id)
|
snippet: this.buildCaptchaSnippet(captcha.id)
|
||||||
// currency: link.currency,
|
// currency: link.currency,
|
||||||
// comments: link.comment_chars
|
// comments: link.comment_chars
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user