Various minor UI fixes and cleanups (#3208)

* Copy to clipboard fix

* Improve invoice status change wording and JS

* Re-add ability to delete apps

Now that the list view is gone, we need to move this option to the edit view

* Clean up app and payment request bundles

* Fix for invoice status change when dismissed

BTCPayServer.Tests/SeleniumTests.cs

@@ -508,7 +508,7 @@ namespace BTCPayServer.Tests
             {
                 await s.StartAsync();
                 s.RegisterNewUser();
-                (string storeName, _) = s.CreateNewStore();
+                s.CreateNewStore();
 
                 s.Driver.FindElement(By.Id("StoreNav-CreateApp")).Click();
                 s.Driver.FindElement(By.Name("AppName")).SendKeys("PoS" + Guid.NewGuid());
@@ -546,7 +546,7 @@ namespace BTCPayServer.Tests
             {
                 await s.StartAsync();
                 s.RegisterNewUser();
-                (string storeName, _) = s.CreateNewStore();
+                s.CreateNewStore();
                 s.AddDerivationScheme();
 
                 s.Driver.FindElement(By.Id("StoreNav-CreateApp")).Click();

BTCPayServer/Views/Apps/UpdateCrowdfund.cshtml

@@ -11,7 +11,6 @@
 }
 
 @section PageFootContent {
-    <script src="~/vendor/moment/moment.js" asp-append-version="true"></script>
     <partial name="_ValidationScriptsPartial" />
     <bundle name="wwwroot/bundles/crowdfund-admin-bundle.min.js" asp-append-version="true"></bundle>
 }
@@ -247,7 +246,15 @@
                            target="viewapp_@Model.AppId"><span class="fa fa-external-link"></span></a>
                     </div>
                 }
+                            
             </div>
         </div>
     </div>
 </form>
+
+<h4 class="mt-5 mb-3">Other actions</h4>
+<div id="danger-zone">
+    <a id="DeleteApp" class="btn btn-outline-danger mb-5" asp-action="DeleteApp" asp-route-appId="@Model.AppId" data-bs-toggle="modal" data-bs-target="#ConfirmModal" data-description="The app <strong>@Model.AppName</strong> and its settings will be permanently deleted." data-confirm-input="DELETE">Delete this app</a>
+</div>
+
+<partial name="_Confirm" model="@(new ConfirmModel("Delete app", "This app will be removed from this store.", "Delete"))" />

BTCPayServer/Views/Apps/UpdatePointOfSale.cshtml

@@ -253,6 +253,13 @@
     </div>
 </form>
 
+<h4 class="mt-5 mb-3">Other actions</h4>
+<div id="danger-zone">
+    <a id="DeleteApp" class="btn btn-outline-danger mb-5" asp-action="DeleteApp" asp-route-appId="@Model.Id" data-bs-toggle="modal" data-bs-target="#ConfirmModal" data-description="The app <strong>@Model.AppName</strong> and its settings will be permanently deleted." data-confirm-input="DELETE">Delete this app</a>
+</div>
+
+<partial name="_Confirm" model="@(new ConfirmModel("Delete app", "This app will be removed from this store.", "Delete"))" />
+
 @section PageHeadContent {
     <link rel="stylesheet" href="~/vendor/highlightjs/default.min.css" asp-append-version="true">
     <bundle name="wwwroot/bundles/pos-admin-bundle.min.css" asp-append-version="true"></bundle>
@@ -260,8 +267,6 @@
 
 @section PageFootContent {
     <partial name="_ValidationScriptsPartial" />
-    <script src="~/vendor/highlightjs/highlight.min.js" asp-append-version="true"></script>
-    <script>hljs.initHighlightingOnLoad();</script>
     <script id="template-product-item" type="text/template">
         <div class="col-sm-4 col-md-3 mb-3">
             <div class="card">

BTCPayServer/Views/Invoice/InvoiceStatusChangePartial.cshtml

@@ -3,56 +3,45 @@
 @* This is a temporary infobox to inform users about the state changes in 1.4.0. It should be removed eventually. *@
 @if ((await _userManager.GetUserAsync(User)).GetBlob().ShowInvoiceStatusChangeHint)
 {
-    <div class="row">
-        <div class="alert alert-light alert-dismissible fade show mb-5" role="alert">
-            <form method="post" asp-controller="Manage" asp-action="DisableShowInvoiceStatusChangeHint" id="invoicestatuschangeform">
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
-                    <vc:icon symbol="close" />
-                </button>
-                <h5 class="alert-heading">Updated in v1.4.0</h5>
-                <p class="mb-2">Invoice states have been updated to match the Greenfield API:</p>
-                <div class="row">
-                    <div class="col col-12 col-sm-6">
-                        <ul class="list-unstyled mb-sm-0">
-                            <li>
-                                <span class="badge badge-processing">Paid</span>
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
-                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
-                                </svg>
-                                <span class="badge badge-processing">Processing</span>
-                            </li>
-                            <li class="mt-2">
-                                <span class="badge badge-settled">Completed</span>
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
-                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
-                                </svg>
-                                <span class="badge badge-settled">Settled</span>
-                            </li>
-                            <li class="mt-2">
-                                <span class="badge badge-settled">Confirmed</span>
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
-                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
-                                </svg>
-                                <span class="badge badge-settled">Settled</span>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="col col-12 col-sm-6 d-flex justify-content-sm-end align-items-sm-end">
-                        <button name="command" type="submit" value="save" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="alert">Don't Show Again</button>
-                    </div>
+    <div class="alert alert-light alert-dismissible fade show mb-5" role="alert">
+        <form method="post" asp-controller="Manage" asp-action="DisableShowInvoiceStatusChangeHint" id="invoicestatuschangeform">
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
+                <vc:icon symbol="close" />
+            </button>
+            <h5 class="alert-heading">Updated in v1.4.0</h5>
+            <p class="mb-2">Invoice states have been updated to match the Greenfield API:</p>
+            <div class="row">
+                <div class="col col-12 col-sm-6">
+                    <ul class="list-unstyled mb-sm-0">
+                        <li>
+                            <span class="badge badge-processing">Paid</span>
+                            <span class="mx-1">is now shown as</span>
+                            <span class="badge badge-processing">Processing</span>
+                        </li>
+                        <li class="mt-2">
+                            <span class="badge badge-settled">Completed</span>
+                            <span class="mx-1">is now shown as</span>
+                            <span class="badge badge-settled">Settled</span>
+                        </li>
+                        <li class="mt-2">
+                            <span class="badge badge-settled">Confirmed</span>
+                            <span class="mx-1">is now shown as</span>
+                            <span class="badge badge-settled">Settled</span>
+                        </li>
+                    </ul>
                 </div>
-            </form>
-        </div>
+                <div class="col col-12 col-sm-6 d-flex justify-content-sm-end align-items-sm-end">
+                    <button name="command" type="submit" value="save" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="alert">Don't Show Again</button>
+                </div>
+            </div>
+        </form>
     </div>
-}
-
-<script>
-    document.addEventListener("DOMContentLoaded", function () {
-        document.getElementById("invoicestatuschangeform").addEventListener("submit", function (event) {
+    <script>
+        document.getElementById("invoicestatuschangeform").addEventListener("submit", event => {
             event.preventDefault();
-            var xhttp = new XMLHttpRequest();
+            const xhttp = new XMLHttpRequest();
             xhttp.open('POST', event.target.getAttribute('action'), true);
             xhttp.send(new FormData(event.target));
         });
-});
-</script>
+    </script>
+}

BTCPayServer/Views/PaymentRequest/EditPaymentRequest.cshtml

@@ -11,7 +11,6 @@
 }
 
 @section PageFootContent {
-    <script src="~/vendor/moment/moment.js" asp-append-version="true"></script>
     <partial name="_ValidationScriptsPartial" />
     <bundle name="wwwroot/bundles/payment-request-admin-bundle.min.js" asp-append-version="true"></bundle>
 }

BTCPayServer/bundleconfig.json

@@ -94,18 +94,15 @@
     {
         "outputFileName": "wwwroot/bundles/crowdfund-admin-bundle.min.js",
         "inputFiles": [
-            "wwwroot/js/summernote-options.js",
             "wwwroot/vendor/vuejs/vue.min.js",
-            "wwwroot/vendor/babel-polyfill/polyfill.min.js",
-            "wwwroot/vendor/highlightjs/highlight.min.js",
             "wwwroot/vendor/summernote/summernote-bs5.js",
+            "wwwroot/js/summernote-options.js",
             "wwwroot/crowdfund-admin/main.js"
         ]
     },
     {
         "outputFileName": "wwwroot/bundles/crowdfund-admin-bundle.min.css",
         "inputFiles": [
-            "wwwroot/vendor/highlightjs/default.min.css",
             "wwwroot/vendor/summernote/summernote-bs5.css",
             "wwwroot/main/template-editor.css"
         ]
@@ -113,18 +110,15 @@
     {
         "outputFileName": "wwwroot/bundles/pos-admin-bundle.min.js",
         "inputFiles": [
-            "wwwroot/js/summernote-options.js",
             "wwwroot/vendor/vuejs/vue.min.js",
-            "wwwroot/vendor/babel-polyfill/polyfill.min.js",
-            "wwwroot/vendor/highlightjs/highlight.min.js",
             "wwwroot/vendor/summernote/summernote-bs5.js",
+            "wwwroot/js/summernote-options.js",
             "wwwroot/pos-admin/main.js"
         ]
     },
     {
         "outputFileName": "wwwroot/bundles/pos-admin-bundle.min.css",
         "inputFiles": [
-            "wwwroot/vendor/highlightjs/default.min.css",
             "wwwroot/vendor/summernote/summernote-bs5.css",
             "wwwroot/main/template-editor.css"
         ]
@@ -175,6 +169,7 @@
             "wwwroot/vendor/animejs/anime.min.js",
             "wwwroot/vendor/moment/moment.min.js",
             "wwwroot/js/copy-to-clipboard.js",
+            "wwwroot/main/utils.js",
             "wwwroot/payment-request/**/*.js"
         ],
         "minify": {

BTCPayServer/wwwroot/crowdfund-admin/main.js

@@ -1,4 +1,3 @@
-hljs.initHighlightingOnLoad();
-$(document).ready(function () {
-    $(".richtext").summernote(window.summernoteOptions());
-});
+document.addEventListener('DOMContentLoaded', () => {
+    $('.richtext').summernote(window.summernoteOptions())
+})

BTCPayServer/wwwroot/js/copy-to-clipboard.js

@@ -22,11 +22,11 @@ window.copyUrlToClipboard = function (e) {
 
 document.addEventListener("DOMContentLoaded", () => {
     delegate('click', '[data-clipboard]', e => {
-        const data = e.target.getAttribute('data-clipboard')
+        const data = e.target.closest('[data-clipboard]').getAttribute('data-clipboard')
         window.copyToClipboard(e, data)
     })
     delegate('click', '[data-clipboard-target]', e => {
-        const selector = e.target.getAttribute('data-clipboard-target')
+        const selector = e.target.closest('[data-clipboard-target]').getAttribute('data-clipboard-target')
         const target = document.querySelector(selector)
         const data = target.innerText
         window.copyToClipboard(e, data)

BTCPayServer/wwwroot/js/summernote-options.js

@@ -1,12 +1,14 @@
-window.summernoteOptions = function() {
-    return {
-        minHeight: 300,
-        tableClassName: 'table table-sm',
-        insertTableMaxSize: {
-            col: 5,
-            row: 10
-        },
-        codeviewFilter: true,
-        codeviewFilterRegex: new RegExp($.summernote.options.codeviewFilterRegex.source + '|<.*?( on\\w+?=.*?)>', 'gi')
+(function() {
+    window.summernoteOptions = function() {
+        return {
+            minHeight: 300,
+            tableClassName: 'table table-sm',
+            insertTableMaxSize: {
+                col: 5,
+                row: 10
+            },
+            codeviewFilter: true,
+            codeviewFilterRegex: new RegExp($.summernote.options.codeviewFilterRegex.source + '|<.*?( on\\w+?=.*?)>', 'gi')
+        }
     }
-}
+})()

BTCPayServer/wwwroot/payment-request-admin/main.js

@@ -1,3 +1,3 @@
-$(document).ready(function() {
-    $(".richtext").summernote(window.summernoteOptions());
-});
+document.addEventListener('DOMContentLoaded', () => {
+    $('.richtext').summernote(window.summernoteOptions())
+})

BTCPayServer/wwwroot/pos-admin/main.js

@@ -1,4 +1,3 @@
-hljs.initHighlightingOnLoad();
-$(document).ready(function () {
-    $(".richtext").summernote(window.summernoteOptions());
+document.addEventListener('DOMContentLoaded', () => {
+    $('.richtext').summernote(window.summernoteOptions())
 });