[donate-static/staging] Use a little bit of js to hide and show btcpayserver forms - tor-commits

23 Dec 2020

commit 9388136959c1ebf98addb800055ee064f5954bde
Author: hiro hiro@torproject.org
Date:   Fri Dec 11 11:18:55 2020 +0100
Use a little bit of js to hide and show btcpayserver forms
---
 content/cryptocurrency/contents.lr | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/content/cryptocurrency/contents.lr b/content/cryptocurrency/contents.lr
index 8df60ca8..1bf31553 100644
--- a/content/cryptocurrency/contents.lr
+++ b/content/cryptocurrency/contents.lr
@@ -19,10 +19,18 @@ body:
 <div class="intro-text">
   <div class="preamble">
     <p>
-      Donate using BTCPayServeer
+      Donate using BTCPayServer
     </p>
   </div>
-  <div class="btc-form">
+    <script>
+      var origin = window.location.origin;
+      if(origin.endsWith('.onion')) {
+        $('#clear-net').hide();
+      else {
+        $('#onion-net').hide();
+      }
+  </script>
+  <div class="btc-form" id="clear-net">
     <style type="text/css"> .btcpay-form { display: inline-flex; align-items: center; justify-content: center; } .btcpay-form--inline { flex-direction: row; } .btcpay-form--block { flex-direction: column; } .btcpay-form--inline .submit { margin-left: 15px; } .btcpay-form--block select { margin-bottom: 10px; } .btcpay-form .btcpay-custom-container{ text-align: center; }.btcpay-custom { display: flex; align-items: center; justify-content: center; } .btcpay-form .plus-minus { cursor:pointer; font-size:25px; line-height: 25px; background: #DFE0E1; height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto 5px; display: inline-flex; justify-content: center; } .btcpay-form select { -moz-appearance: none; -webkit-appearance: none; appearance: none; color: currentColor; background: transparent; border:1px solid transparent; display: block; padding: 1px; margin-left: auto; margin-right: auto; font-size: 11px; cursor: pointer; } .btcpay-form select:hover { border-color: #ccc; }
  #btcpay-input-price { -moz-appearance: none; -webkit-appearance: none; border: none; box-shadow: none; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff; } #btcpay-input-price::-webkit-outer-spin-button, #btcpay-input-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } </style>
     <form method="POST"  action="https://btcpay.torproject.net/api/v1/invoices" class="btcpay-form btcpay-form--inline">
     <input type="hidden" name="storeId" value="95bAXzi9xpnvu6BqUm5Uyc8C1c1rPLYsQnsgdvMGp4sh" />
@@ -42,12 +50,7 @@ body:
     <input type="image" class="submit" name="submit" src="https://btcpay.torproject.net/img/paybutton/pay.svg" style="width:209px" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">
     </form>
   </div>
-  <div class="preamble">
-    <p>
-      Donate using BTCPayServeer .onion address
-    </p>
-  </div>
-  <div class="btc-form">
+  <div class="btc-form" id="onion-net">
   <script>if(!window.btcpay){    var head = document.getElementsByTagName('head')[0];   var script = document.createElement('script');   script.src='http://3rk3juzfjgs6tpn57betff4yrnuprd72xdzn6tmgf4rbdwnjy3dapoqd.onion/modal/...';   script.type = 'text/javascript';   head.append(script);}function onBTCPayFormSubmit(event){    var xhttp = new XMLHttpRequest();    xhttp.onreadystatechange = function() {        if (this.readyState == 4 && this.status == 200) {            if(this.status == 200 && this.responseText){                var response = JSON.parse(this.responseText);                window.btcpay.showInvoice(response.invoiceId);            }        }    };    xhttp.open("POST", event.target.getAttribute('action'), true);    xhttp.send(new FormData( event.target ));}</script><style type="text/css"> .btcpay-form { display: inline-flex; align-items: center; justify-content: center; } .btcpay-form--inline { flex-direction: row; } .btcpay-form--block { flex-direction: column; }
  .btcpay-form--inline .submit { margin-left: 15px; } .btcpay-form--block select { margin-bottom: 10px; } .btcpay-form .btcpay-custom-container{ text-align: center; }.btcpay-custom { display: flex; align-items: center; justify-content: center; } .btcpay-form .plus-minus { cursor:pointer; font-size:25px; line-height: 25px; background: #DFE0E1; height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto 5px; display: inline-flex; justify-content: center; } .btcpay-form select { -moz-appearance: none; -webkit-appearance: none; appearance: none; color: currentColor; background: transparent; border:1px solid transparent; display: block; padding: 1px; margin-left: auto; margin-right: auto; font-size: 11px; cursor: pointer; } .btcpay-form select:hover { border-color: #ccc; } #btcpay-input-price { -moz-appearance: none; -webkit-appearance: none; border: none; box-shadow: none; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: 
 #fff; } #btcpay-input-price::-webkit-outer-spin-button, #btcpay-input-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } </style>
   <form method="POST"  onsubmit="onBTCPayFormSubmit(event);return false"  action="http://3rk3juzfjgs6tpn57betff4yrnuprd72xdzn6tmgf4rbdwnjy3dapoqd.onion/api/v1/invoices" class="btcpay-form btcpay-form--inline">
   <input type="hidden" name="storeId" value="95bAXzi9xpnvu6BqUm5Uyc8C1c1rPLYsQnsgdvMGp4sh" />

    