From 04acbf6509de03a14904a19c436431e66170058a Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Mon, 29 Jun 2020 16:54:07 +0200
Subject: [PATCH 1/2] Improve information structure on Lightning page

---
 .../StoresController.LightningLike.cs         |   2 +-
 .../StoreViewModels/LightningNodeViewModel.cs |   2 +
 .../Views/Stores/AddLightningNode.cshtml      | 149 ++++++++++--------
 .../wwwroot/_bootstrap_kitchensink.html       |   1 +
 BTCPayServer/wwwroot/main/site.css            |  16 ++
 5 files changed, 106 insertions(+), 64 deletions(-)

diff --git a/BTCPayServer/Controllers/StoresController.LightningLike.cs b/BTCPayServer/Controllers/StoresController.LightningLike.cs
index 43cea0a7c..a89621a39 100644
--- a/BTCPayServer/Controllers/StoresController.LightningLike.cs
+++ b/BTCPayServer/Controllers/StoresController.LightningLike.cs
@@ -159,7 +159,7 @@ namespace BTCPayServer.Controllers
                                 await handler.TestConnection(info, cts.Token);
                             }
                         }
-                        TempData[WellKnownTempData.SuccessMessage] = $"Connection to the lightning node succeeded ({info})";
+                        TempData[WellKnownTempData.SuccessMessage] = $"Connection to the lightning node succeeded. Your node address: {info}";
                     }
                     catch (Exception ex)
                     {
diff --git a/BTCPayServer/Models/StoreViewModels/LightningNodeViewModel.cs b/BTCPayServer/Models/StoreViewModels/LightningNodeViewModel.cs
index 4163b9b87..25d985a17 100644
--- a/BTCPayServer/Models/StoreViewModels/LightningNodeViewModel.cs
+++ b/BTCPayServer/Models/StoreViewModels/LightningNodeViewModel.cs
@@ -23,6 +23,8 @@ namespace BTCPayServer.Models.StoreViewModels
         }
         public string InternalLightningNode { get; internal set; }
         public bool SkipPortTest { get; set; }
+
+        [Display(Name="Lightning enabled")]
         public bool Enabled { get; set; } = true;
 
         public string StoreId { get; set; }
diff --git a/BTCPayServer/Views/Stores/AddLightningNode.cshtml b/BTCPayServer/Views/Stores/AddLightningNode.cshtml
index bc488bc9e..ec9181d01 100644
--- a/BTCPayServer/Views/Stores/AddLightningNode.cshtml
+++ b/BTCPayServer/Views/Stores/AddLightningNode.cshtml
@@ -1,24 +1,22 @@
 @model LightningNodeViewModel
 @{
     Layout = "../Shared/_NavLayout.cshtml";
-    ViewData.SetActivePageAndTitle(StoreNavPages.Index, "Add lightning node (Experimental)");
+    ViewData.SetActivePageAndTitle(StoreNavPages.Index, "Add lightning node");
 }
 
 <partial name="_StatusMessage" />
 
-<div class="alert alert-warning alert-dismissible" role="alert">
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+<div class="alert alert-warning alert-dismissible mb-5" role="alert">
+    <h4 class="alert-heading">Warning</h4>
     <p>
         <span>Before you proceed, please understand that the Lightning Network is still considered experimental and is under active development.</span>
     </p>
     <p><strong>Do not add money that you can't afford to lose - there's a high risk of loss of funds.</strong></p>
-    <p>
-        Take time to familiarize yourself with the risks, some of which are:
-    </p>
-    <ul>
+    <p class="mb-2">Take time to familiarize yourself with the risks, some of which are:</p>
+    <ul class="mb-4">
         <li>Most BTCPay Server deployments run on a pruned node which, while working, is not officially supported by lightning network implementations.</li>
         <li>
-            Lightning keys are NOT automatically backed up by BTCPay Server; your keys are in a hot-wallet. This means:
+            Lightning keys are NOT automatically backed up by BTCPay Server. Your keys are in a hot-wallet. This means:
             <ul>
                 <li>If you erase your BTCPay Server virtual machine: you lose all the funds.</li>
                 <li>If your server gets hacked: a hacker can take all of your funds by accessing your keys.</li>
@@ -26,84 +24,109 @@
             </ul>
         </li>
     </ul>
-
-    <p>To proceed, please ensure that:</p>
+    <hr>
+    <p class="mb-2">To proceed, please ensure that:</p>
     <ul>
         <li>You accept being #reckless and being the sole responsible party for any loss of funds.</li>
         <li>You agree to keep on your lightning node only what you can afford to lose.</li>
     </ul>
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
 </div>
 
 <div class="row">
-    <div class="col-md-10">
+    <div class="col">
+        <h3 class="mb-3">Lightning Node Connection</h3>
         <form method="post">
             <div class="form-group">
-                <p>This connection string encapsulates the necessary information BTCPay needs to connect to your lightning node, we currently support:</p>
+                <p class="mb-2">The connection string encapsulates the configuration for connecting to your lightning node. We currently support:</p>
                 <ul>
-                    <li><code>clightning</code> via TCP or unix domain socket connection</li>
-                    <li><code>lightning charge</code> via HTTPS</li>
-                    <li><code>lnd</code> via the REST proxy</li>
+                    <li class="mb-2">
+                        <strong>c-lightning</strong> via TCP or unix domain socket connection:
+                        <ul>
+                            <li>
+                                <code><b>type=</b>clightning;<b>server=</b>unix://root/.lightning/lightning-rpc</code>
+                            </li>
+                            <li>
+                                <code><b>type=</b>clightning;<b>server=</b>tcp://1.1.1.1:27743/</code>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="mb-2">
+                        <strong>Lightning Charge</strong> via HTTPS:
+                        <ul>
+                            <li>
+                                <code><b>type=</b>charge;<b>server=</b>https://charge:8080/;<b>api-token=</b>myapitoken...</code>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="mb-2">
+                        <strong>Eclair</strong> via HTTPS:
+                        <ul>
+                            <li>
+                                <code><b>type=</b>eclair;<b>server=</b>https://eclair:8080/;<b>password=</b>eclairpassword...</code>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="mb-2">
+                        <strong>LND</strong> via the REST proxy:
+                        <ul>
+                            <li>
+                                <code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...</code>
+                            </li>
+                            <li>
+                                <code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...;<b>certthumbprint=</b>abef263adfe...</code>
+                            </li>
+                            <li>
+                                <code><b>type=</b>lnd-rest;<b>server=</b>http://mylnd:8080/;<b>macaroonfilepath=</b>/root/.lnd/admin.macaroon;<b>allowinsecure=</b>true</code>
+                            </li>
+                        </ul>
+                        <a class="d-inline-block my-2 text-secondary text-decoration-none" data-toggle="collapse" href="#lnd-notes" role="button" aria-expanded="false" aria-controls="lnd-notes">
+                            <span class="fa fa-question-circle-o" title="More information..."></span> More information on the LND settings
+                        </a>
+                        <div class="collapse" id="lnd-notes">
+                            <div class="card card-body">
+                                <p>For the macaroon options you need to provide the <code>admin.macaroon</code>.</p>
+                                <p>The path to the LND data directory may vary, the following example assume <code>/root/.lnd</code>.</p>
+                                <p class="mb-2">The <code>macaroon</code> parameter expects the HEX value, it can be obtained using this command:</p>
+                                <pre class="mb-4">xxd -plain /root/.lnd/data/chain/bitcoin/mainnet/admin.macaroon | tr -d '\n'</pre>
+                                <p>You can omit <code>certthumbprint</code> if the certificate is trusted by your machine.</p>
+                                <p class="mb-2">The <code>certthumbprint</code> can be obtained using this command:</p>
+                                <pre class="mb-4">openssl x509 -noout -fingerprint -sha256 -in /root/.lnd/tls.cert | sed -e 's/.*=//;s/://g'</pre>
+                                <p class="mb-0">If your LND REST server is using HTTP or HTTPS with an untrusted certificate, you can set <code>allowinsecure=true</code> as a fallback.</p>
+                            </div>
+                        </div>
+                    </li>
                 </ul>
-                <table class="table table-sm table-responsive-md">
-                    <thead>
-                        <tr>
-                            <th>Examples</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-
-                        <tr>
-                            <th class="small"><b>type=</b>clightning;<b>server=</b>unix://root/.lightning/lightning-rpc</th>
-                        </tr>
-                        <tr>
-                            <th class="small"><b>type=</b>clightning;<b>server=</b>tcp://1.1.1.1:27743/</th>
-                        </tr>
-                        <tr>
-                            <th class="small"><b>type=</b>lnd-rest;<b>server=</b>http://mylnd:8080/;<b>macaroonfilepath=</b>/root/.lnd/admin.macaroon;<b>allowinsecure=</b>true</th>
-                        </tr>
-                        <tr>
-                            <th class="small"><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...</th>
-                        </tr>
-                        <tr>
-                            <th class="small"><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...;<b>certthumbprint=</b>abef263adfe...</th>
-                        </tr>
-                        <tr>
-                            <th class="small"><b>type=</b>charge;<b>server=</b>https://charge:8080/;<b>api-token=</b>myapitoken...</th>
-                        </tr>
-                        <tr>
-                            <th class="small"><b>type=</b>eclair;<b>server=</b>https://eclair:8080/;<b>password=</b>eclairpassword...</th>
-                        </tr>
-                    </tbody>
-                </table>
-                <p>Note that the <code>certthumbprint</code> to connect to your LND node can be obtained through this command line:</p>
-                <p><pre><code>openssl x509 -noout -fingerprint -sha256 -inform pem -in /root/.lnd/tls.cert | sed -e 's/.*=//' -e 's/://g'</code></pre></p>
-                <p>You can omit <code>certthumbprint</code> if the certificate is trusted by your machine</p>
-                <p>You can set <code>allowinsecure</code> to <code>true</code> if your LND REST server is using HTTP or HTTPS with an untrusted certificate which you don't know the <code>certthumbprint</code></p>
             </div>
+
             <div class="form-group">
                 <label asp-for="ConnectionString"></label>
-                <input id="lightningurl" asp-for="ConnectionString" class="form-control" />
+                <input asp-for="ConnectionString" class="form-control"/>
                 <span asp-validation-for="ConnectionString" class="text-danger"></span>
                 @if (Model.InternalLightningNode != null)
                 {
                     <p class="form-text text-muted">
-                        You can use the internal lightning node by <a href="#" id="internal-ln-node-setter" onclick="$('#lightningurl').val('@Model.InternalLightningNode'); return false;">clicking here</a>
+                        Use the internal lightning node of this BTCPay Server instance by
+                        <a href="#" id="internal-ln-node-setter" onclick="$('#ConnectionString').val('@Model.InternalLightningNode');return false;">clicking here</a>.
                     </p>
                 }
             </div>
-            <div class="form-group">
-                <label asp-for="Enabled"></label>
-                <input asp-for="Enabled" type="checkbox" class="form-check" />
+            <div class="form-group form-check">
+                <input asp-for="Enabled" type="checkbox" class="form-check-input"/>
+                <label asp-for="Enabled" class="form-check-label"></label>
             </div>
             <button id="save" name="command" type="submit" value="save" class="btn btn-primary">Submit</button>
-            <button name="command" type="submit" value="test" class="btn btn-secondary">Test connection</button>
-            <a 
-                class="btn btn-secondary"
-                asp-controller="PublicLightningNodeInfo" 
-               asp-action="ShowLightningNodeInfo" 
-               asp-route-cryptoCode="@Model.CryptoCode" 
-               asp-route-storeId="@Model.StoreId"
-               target="_blank">
+            <button name="command" type="submit" value="test" class="btn btn-secondary mr-3">Test connection</button>
+            <a
+                class="text-secondary"
+                asp-controller="PublicLightningNodeInfo"
+                asp-action="ShowLightningNodeInfo"
+                asp-route-cryptoCode="@Model.CryptoCode"
+                asp-route-storeId="@Model.StoreId"
+                target="_blank">
+                <span class="fa fa-info-circle" title="More information..."></span>
                 Open Public Node Info Page
             </a>
         </form>
diff --git a/BTCPayServer/wwwroot/_bootstrap_kitchensink.html b/BTCPayServer/wwwroot/_bootstrap_kitchensink.html
index 3e5247ddd..23f4881e7 100644
--- a/BTCPayServer/wwwroot/_bootstrap_kitchensink.html
+++ b/BTCPayServer/wwwroot/_bootstrap_kitchensink.html
@@ -9,6 +9,7 @@
     <!-- Bootstrap -->
     <link href="main/bootstrap/bootstrap.css" rel="stylesheet" />
     <link href="main/bootstrap4-creativestart/creative.css" rel="stylesheet" />
+    <link href="main/site.css" rel="stylesheet" />
     <script>
         const theme = window.location.search.replace('?theme=','') || 'default';
         document.write(`<link href="main/themes/${theme}.css" rel="stylesheet" />`)
diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css
index 1ec6626f7..01e555937 100644
--- a/BTCPayServer/wwwroot/main/site.css
+++ b/BTCPayServer/wwwroot/main/site.css
@@ -47,6 +47,15 @@ a {
     transition-property: background, color;
 }
 
+ul {
+    padding-left: 1em;
+}
+
+ul li {
+    padding-top: .2em;
+    padding-bottom: .2em;
+}
+
 .navbar .onion {
     margin-right: auto;
 }
@@ -174,3 +183,10 @@ pre {
   margin-top: -36px;
   margin-left: 16px;
 }
+
+.alert hr {
+    display: block;
+    width: unset;
+    height: 1px;
+    background: none;
+}

From f7474340cd65fb6a099605625b229a33de45ba62 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Mon, 29 Jun 2020 22:38:50 +0200
Subject: [PATCH 2/2] Update BTCPayServer/Views/Stores/AddLightningNode.cshtml

Co-authored-by: Andrew Camilleri <evilkukka@gmail.com>
---
 BTCPayServer/Views/Stores/AddLightningNode.cshtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/BTCPayServer/Views/Stores/AddLightningNode.cshtml b/BTCPayServer/Views/Stores/AddLightningNode.cshtml
index ec9181d01..0997ed79b 100644
--- a/BTCPayServer/Views/Stores/AddLightningNode.cshtml
+++ b/BTCPayServer/Views/Stores/AddLightningNode.cshtml
@@ -40,7 +40,7 @@
         <h3 class="mb-3">Lightning Node Connection</h3>
         <form method="post">
             <div class="form-group">
-                <p class="mb-2">The connection string encapsulates the configuration for connecting to your lightning node. We currently support:</p>
+                <p class="mb-2">The connection string encapsulates the configuration for connecting to your lightning node. BTCPay Server currently supports:</p>
                 <ul>
                     <li class="mb-2">
                         <strong>c-lightning</strong> via TCP or unix domain socket connection: