From 62c2cbab5f36aa8020d83407d9884db299549f17 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Mon, 29 Aug 2022 01:41:07 +0200
Subject: [PATCH] add bootstrap

---
 internal/api/userpage/static/webapp.html | 40 +++++++++++++++---------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/internal/api/userpage/static/webapp.html b/internal/api/userpage/static/webapp.html
index 6714d71..cd21358 100644
--- a/internal/api/userpage/static/webapp.html
+++ b/internal/api/userpage/static/webapp.html
@@ -13,6 +13,8 @@
     <meta name="MobileOptimized" content="176" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="robots" content="noindex,nofollow" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
     <title>LNURL</title>
     <script src="https://unpkg.com/kjua@0.6.0/dist/kjua.min.js"></script>
     <script src="https://telegram.org/js/telegram-web-app.js?1"></script>
@@ -43,10 +45,7 @@
             display: block;
             width: 100%;
             font-size: 14px;
-            margin: 15px 0;
-            padding: 12px 20px;
             border: none;
-            border-radius: 4px;
             background-color: var(--tg-theme-button-color, #50a8eb);
             color: var(--tg-theme-button-text-color, #ffffff);
             cursor: pointer;
@@ -61,10 +60,7 @@
         input {
             font-size: 14px;
             text-align: center; 
-            padding: 12px 20px;
-            margin: 15px 0;
             border: none;
-            border-radius: 4px;
             background-color: var(--tg-theme-bg-color, #f5f5f5);
             color: var(--tg-theme-text-color, #1a1a1a);
         }
@@ -218,6 +214,7 @@
         padding: 12px 20px;
         column-gap: 10px;
         row-gap: 1em;
+        align-items: center;
         }
     </style>
 </head>
@@ -235,11 +232,15 @@
     <div id="buttons">
         <!-- <button onclick="webviewClose();">Close</button> -->
         <div class="wrapper">
-            <div>
-                <input type="number" min="1" inputmode="numeric" pattern="[0-9]*" id="invoiceAmount" placeholder="amount in sat" style="width: 80%"></input>
+            <label class="sr-only" for="inlineFormInputGroup">Username</label>
+            <div class="input-group">
+                <input type="number" class="form-control" min="1" inputmode="numeric" pattern="[0-9]*" id="invoiceAmount" placeholder="amount">
+                <div class="input-group-append">
+                    <div class="input-group-text">sat</div>
+                </div>
             </div>
             <div>
-                <button onclick="invoiceButtonClick();" style="display: inline;" id="requestInvoice">Invoice</button>
+                <button class="btn btn-primary" onclick="invoiceButtonClick();" style="display: inline;" id="requestInvoice">Invoice</button>
             </div>
         </div>
     </div>
@@ -271,8 +272,6 @@
     }
 
 
-
-
     // listen for enter in input field
     var el = document.getElementById("invoiceAmount");
     el.addEventListener("keydown", function(event) {
@@ -280,6 +279,8 @@
             document.getElementById("requestInvoice").click();
         }
         document.getElementById("requestInvoice").innerHTML = "Invoice"
+        // revert color of button
+        $('#requestInvoice').removeClass('btn-danger').addClass('btn-primary');
     });
 
     // ------------------ functions ------------------
@@ -292,6 +293,13 @@
         window.scrollTo(0, 0);
     }
 
+    function invoiceButtonDisplayError(message) {
+        btn = document.getElementById("requestInvoice")
+        btn.innerHTML = message
+        // update color of button
+        $('#requestInvoice').removeClass('btn-primary').addClass('btn-danger');
+    }
+
     function webviewClose() {
         Telegram.WebApp.close();
     }
@@ -319,8 +327,8 @@
             console.log(r);
             var invoiceAmount = Number(document.getElementById("invoiceAmount").value);
             if (!Number.isInteger(invoiceAmount) || invoiceAmount < 1) {
-                document.getElementById("requestInvoice").innerHTML = "Error"
-                return true;
+                invoiceButtonDisplayError("Invalid")
+                return false;
             }
             console.log("requesting invoice with amount " + invoiceAmount);
             fetch(r.callback + '?amount='+ invoiceAmount * 1000).then(data => {
@@ -333,13 +341,17 @@
                     renderQr(r.pr);
                     document.querySelector('#greeting').innerHTML = "Pay " + invoiceAmount + " sat";
                 } else {
-                    document.getElementById("requestInvoice").innerHTML = "Error"
+                    invoiceButtonDisplayError("Error")
+                    return false;
                 }
 
             })
         })
     }
 </script>
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 </body>
 </html>