Lightning setup redesign

This commit is contained in:
Dennis Reimann 2021-04-19 16:21:50 +02:00
parent 35f47bdfb7
commit bbe621109f
No known key found for this signature in database
GPG Key ID: 5009E1797F03F8D0
10 changed files with 196 additions and 148 deletions

View File

@ -70,7 +70,7 @@ namespace BTCPayServer.Tests
Assert.Equal(3, invoice.CryptoInfo.Length);
var controller = user.GetController<StoresController>();
var lightningVm = (LightningNodeViewModel)Assert.IsType<ViewResult>(controller.AddLightningNode(user.StoreId, cryptoCode)).Model;
var lightningVm = (LightningNodeViewModel)Assert.IsType<ViewResult>(controller.SetupLightningNode(user.StoreId, cryptoCode)).Model;
Assert.True(lightningVm.Enabled);
var response = await controller.SetLightningNodeEnabled(user.StoreId, cryptoCode, false);
Assert.IsType<RedirectToActionResult>(response);

View File

@ -68,7 +68,7 @@ namespace BTCPayServer.Tests
cds.Port = Utils.FreeTcpPort();
cds.HostName = "127.0.0.1";
cds.Start();
Driver = new ChromeDriver(cds, options,
Driver = new ChromeDriver(cds, options,
// A bit less than test timeout
TimeSpan.FromSeconds(50));
@ -212,17 +212,20 @@ namespace BTCPayServer.Tests
{
Assert.True(Driver.FindElement(By.Id("LightningNodeType-Internal")).Enabled, "Usage of the internal Lightning node is disabled.");
Driver.FindElement(By.CssSelector("label[for=\"LightningNodeType-Internal\"]")).Click();
Driver.FindElement(By.Id("saveInternal")).Click();
}
else
{
Driver.FindElement(By.CssSelector("label[for=\"LightningNodeType-Custom\"]")).Click();
Driver.FindElement(By.Id("ConnectionString")).SendKeys(connectionString);
Driver.FindElement(By.Id("test")).Click();
Assert.Contains("Connection to the Lightning node successful.", FindAlertMessage().Text);
Driver.FindElement(By.Id("saveCustom")).Click();
}
Driver.FindElement(By.Id("test")).Click();
Assert.Contains("Connection to the Lightning node successful.", FindAlertMessage().Text);
Driver.FindElement(By.Id("save")).Click();
Assert.Contains($"{cryptoCode} Lightning node updated.", FindAlertMessage().Text);
var enabled = Driver.FindElement(By.Id($"{cryptoCode}LightningEnabled"));
@ -378,14 +381,14 @@ namespace BTCPayServer.Tests
private void CheckForJSErrors()
{
//wait for seleniun update: https://stackoverflow.com/questions/57520296/selenium-webdriver-3-141-0-driver-manage-logs-availablelogtypes-throwing-syste
// var errorStrings = new List<string>
// {
// "SyntaxError",
// "EvalError",
// "ReferenceError",
// "RangeError",
// "TypeError",
// "URIError"
// var errorStrings = new List<string>
// {
// "SyntaxError",
// "EvalError",
// "ReferenceError",
// "RangeError",
// "TypeError",
// "URIError"
// };
//
// var jsErrors = Driver.Manage().Logs.GetLog(LogType.Browser).Where(x => errorStrings.Any(e => x.Message.Contains(e)));
@ -412,7 +415,7 @@ namespace BTCPayServer.Tests
{
Driver.Navigate().GoToUrl(new Uri(Server.PayTester.ServerUri, relativeUrl));
}
public void GoToServer(ServerNavPages navPages = ServerNavPages.Index)
{
Driver.FindElement(By.Id("ServerSettings")).Click();

View File

@ -273,7 +273,7 @@ namespace BTCPayServer.Tests
var connectionString = parent.GetLightningConnectionString(connectionType, isMerchant);
var nodeType = connectionString == LightningSupportedPaymentMethod.InternalNode ? LightningNodeType.Internal : LightningNodeType.Custom;
await storeController.AddLightningNode(storeId ?? StoreId,
await storeController.SetupLightningNode(storeId ?? StoreId,
new LightningNodeViewModel { ConnectionString = connectionString, LightningNodeType = nodeType, SkipPortTest = true }, "save", cryptoCode);
if (storeController.ModelState.ErrorCount != 0)
Assert.False(true, storeController.ModelState.FirstOrDefault().Value.Errors[0].ErrorMessage);

View File

@ -988,9 +988,9 @@ namespace BTCPayServer.Tests
user.GrantAccess(true);
var storeController = user.GetController<StoresController>();
Assert.IsType<ViewResult>(storeController.UpdateStore());
Assert.IsType<ViewResult>(storeController.AddLightningNode(user.StoreId, "BTC"));
Assert.IsType<ViewResult>(storeController.SetupLightningNode(user.StoreId, "BTC"));
var testResult = storeController.AddLightningNode(user.StoreId, new LightningNodeViewModel()
var testResult = storeController.SetupLightningNode(user.StoreId, new LightningNodeViewModel
{
ConnectionString = $"type=charge;server={tester.MerchantCharge.Client.Uri.AbsoluteUri};allowinsecure=true",
SkipPortTest = true // We can't test this as the IP can't be resolved by the test host :(
@ -999,19 +999,19 @@ namespace BTCPayServer.Tests
storeController.TempData.Clear();
Assert.True(storeController.ModelState.IsValid);
Assert.IsType<RedirectToActionResult>(storeController.AddLightningNode(user.StoreId,
new LightningNodeViewModel()
Assert.IsType<RedirectToActionResult>(storeController.SetupLightningNode(user.StoreId,
new LightningNodeViewModel
{
ConnectionString = $"type=charge;server={tester.MerchantCharge.Client.Uri.AbsoluteUri};allowinsecure=true"
}, "save", "BTC").GetAwaiter().GetResult());
// Make sure old connection string format does not work
Assert.IsType<ViewResult>(storeController.AddLightningNode(user.StoreId,
new LightningNodeViewModel() { ConnectionString = tester.MerchantCharge.Client.Uri.AbsoluteUri },
Assert.IsType<ViewResult>(storeController.SetupLightningNode(user.StoreId,
new LightningNodeViewModel { ConnectionString = tester.MerchantCharge.Client.Uri.AbsoluteUri },
"save", "BTC").GetAwaiter().GetResult());
var storeVm =
Assert.IsType<Models.StoreViewModels.StoreViewModel>(Assert
Assert.IsType<StoreViewModel>(Assert
.IsType<ViewResult>(storeController.UpdateStore()).Model);
Assert.Single(storeVm.LightningNodes.Where(l => !string.IsNullOrEmpty(l.Address)));
}

View File

@ -15,7 +15,7 @@ namespace BTCPayServer.Controllers
public partial class StoresController
{
[HttpGet("{storeId}/lightning/{cryptoCode}")]
public IActionResult AddLightningNode(string storeId, string cryptoCode)
public IActionResult SetupLightningNode(string storeId, string cryptoCode)
{
var store = HttpContext.GetStoreData();
if (store == null)
@ -31,7 +31,7 @@ namespace BTCPayServer.Controllers
}
[HttpPost("{storeId}/lightning/{cryptoCode}")]
public async Task<IActionResult> AddLightningNode(string storeId, LightningNodeViewModel vm, string command, string cryptoCode)
public async Task<IActionResult> SetupLightningNode(string storeId, LightningNodeViewModel vm, string command, string cryptoCode)
{
vm.CryptoCode = cryptoCode;
var store = HttpContext.GetStoreData();
@ -161,13 +161,17 @@ namespace BTCPayServer.Controllers
private void SetExistingValues(StoreData store, LightningNodeViewModel vm)
{
vm.CanUseInternalNode = CanUseInternalLightning();
var lightning = GetExistingLightningSupportedPaymentMethod(vm.CryptoCode, store);
if (lightning != null)
{
vm.LightningNodeType = lightning.IsInternalNode ? LightningNodeType.Internal : LightningNodeType.Custom;
vm.ConnectionString = lightning.GetDisplayableConnectionString();
}
vm.CanUseInternalNode = CanUseInternalLightning();
else
{
vm.LightningNodeType = vm.CanUseInternalNode ? LightningNodeType.Internal : LightningNodeType.Custom;
}
}
private LightningSupportedPaymentMethod GetExistingLightningSupportedPaymentMethod(string cryptoCode, StoreData store)

View File

@ -4,7 +4,6 @@ namespace BTCPayServer.Models.StoreViewModels
{
public enum LightningNodeType
{
None,
Internal,
Custom
}

View File

@ -1,120 +0,0 @@
@model LightningNodeViewModel
@{
Layout = "../Shared/_NavLayout.cshtml";
ViewData.SetActivePageAndTitle(StoreNavPages.Index, "Lightning node settings", Context.GetStoreData().StoreName);
}
<h4 class="mb-3">@ViewData["PageTitle"]</h4>
<div class="alert alert-warning alert-dismissible my-4" role="alert">
<p class="mb-0">
Please understand that the Lightning Network is still under active development and considered experimental.
Before you proceed, take time to familiarize yourself with the risks.
<a href="https://docs.btcpayserver.org/LightningNetwork/" class="alert-link">More information</a>
</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<style>
#CustomSetup { display: none; }
#LightningNodeType-Custom:checked + * + #CustomSetup { display: block; }
</style>
<form method="post">
<div class="form-group">
<div class="custom-control custom-radio">
<input asp-for="LightningNodeType" value="@LightningNodeType.Internal" type="radio" id="LightningNodeType-@LightningNodeType.Internal" class="custom-control-input" disabled="@(!Model.CanUseInternalNode)">
<label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Internal}")" class="custom-control-label">Use the internal Lightning node</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-radio">
<input asp-for="LightningNodeType" value="@LightningNodeType.Custom" type="radio" id="LightningNodeType-@LightningNodeType.Custom" class="custom-control-input">
<label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")" class="custom-control-label">Use a custom Lightning node <span class="text-muted">(requires connection string)</span></label>
<div id="CustomSetup">
<div class="form-group my-3">
<label asp-for="ConnectionString">The connection string configuration for your custom Lightning node:</label>
<input asp-for="ConnectionString" class="form-control" placeholder="type=…;server=…;" value="@(Model.LightningNodeType == LightningNodeType.Internal ? "" : Model.ConnectionString)" />
<span asp-validation-for="ConnectionString" class="text-danger"></span>
</div>
<p class="mt-4 mb-2">BTCPay Server currently supports:</p>
<ul>
<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>
</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>
</div>
</div>
</div>
<div>
<button id="save" name="command" type="submit" value="save" class="btn btn-primary mr-2">Submit</button>
<button id="test" 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>
</div>
</form>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}

View File

@ -0,0 +1,161 @@
@model LightningNodeViewModel
@{
Layout = "_LayoutWalletSetup.cshtml";
ViewData.SetActivePageAndTitle(StoreNavPages.Index, "Configure your Lightning node", Context.GetStoreData().StoreName);
}
@section Navbar {
<a asp-controller="Stores" asp-action="UpdateStore" asp-route-storeId="@Model.StoreId">
<vc:icon symbol="back" />
</a>
}
<header class="text-center">
<h1>@ViewData["Title"]</h1>
<div class="d-flex mt-4 mb-5">
<vc:icon symbol="warning" />
<p class="text-secondary text-left mb-0">
Please understand that the Lightning Network is still under active development and considered experimental.
Before you proceed, take time to familiarize yourself with the risks.
<a href="https://docs.btcpayserver.org/LightningNetwork/" target="_blank">More information</a>
</p>
</div>
</header>
<style>
header .icon-warning {
flex: 0 0 24px;
height: 24px;
align-self: center;
margin-right: 2rem;
color: var(--btcpay-color-warning);
}
#InternalSetup, #CustomSetup, #LightningNodeType-Internal, #LightningNodeType-Custom { display: none; }
#LightningNodeType-Internal:checked + * + * + * + #InternalSetup,
#LightningNodeType-Custom:checked + * + *+ #CustomSetup { display: block; }
#LightningNodeType-Internal:checked + label, #LightningNodeType-Custom:checked + label {
color: var(--btcpay-color-white);
background: var(--btcpay-color-primary);
}
label[for="LightningNodeType-Internal"], label[for="LightningNodeType-Custom"] {
display: inline-block;
padding: .75rem 2rem;
color: var(--btcpay-color-primary);
font-weight: var(--btcpay-font-weight-semibold);
border-radius: 1.5rem;
cursor: pointer;
}
#LightningNodeType-Internal[disabled]:checked + label[for="LightningNodeType-Internal"] {
background: var(--btcpay-color-secondary);
color: var(--btcpay-color-white);
opacity: .5;
}
#LightningNodeType-Internal[disabled] + label[for="LightningNodeType-Internal"] {
color: var(--btcpay-color-secondary);
opacity: .5;
}
#CustomSetup ul {
list-style: none;
padding-left: 0;
}
#CustomSetup ul li code {
color: var(--btcpay-code-color);
}
#CustomSetup ul li > code {
display: block;
color: var(--btcpay-code-color);
background: var(--btcpay-code-bg);
margin: .5rem 0;
padding: .75rem 1rem;
border-radius: .25rem;
}
</style>
<form method="post" class="mt-n2 text-center">
<input asp-for="LightningNodeType" value="@LightningNodeType.Internal" type="radio" id="LightningNodeType-@LightningNodeType.Internal" disabled="@(!Model.CanUseInternalNode)">
<label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Internal}")">Internal node</label>
<input asp-for="LightningNodeType" value="@LightningNodeType.Custom" type="radio" id="LightningNodeType-@LightningNodeType.Custom">
<label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")">Custom node</label>
<div id="InternalSetup" class="text-left">
@if (Model.CanUseInternalNode)
{
<p class="my-4">That's it, no need to configure anything else.</p>
<button id="saveInternal" name="command" type="submit" value="save" class="btn btn-primary mr-2">Use internal node</button>
}
else
{
<p class="my-4">Only administrators can use the internal Lightning node.</p>
}
</div>
<div id="CustomSetup" class="text-left">
<label asp-for="ConnectionString" class="mt-4">The connection string configuration for your custom Lightning node:</label>
<div class="d-sm-flex">
<input asp-for="ConnectionString" class="form-control mb-2 mr-2" placeholder="type=…;server=…;" value="@(Model.LightningNodeType == LightningNodeType.Internal ? "" : Model.ConnectionString)"/>
<button id="test" name="command" type="submit" value="test" class="btn btn-secondary text-nowrap mb-2">Test connection</button>
</div>
<span asp-validation-for="ConnectionString" class="text-danger"></span>
<p class="mt-4 mb-2">BTCPay Server currently supports:</p>
<ul>
<li class="mb-3">
<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-3">
<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-3">
<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-3">
<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>
</ul>
<a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#lnd-notes" role="button" aria-expanded="false" aria-controls="lnd-notes">
More information on the LND settings
</a>
<div id="lnd-notes" class="collapse pt-2">
<p>
For the macaroon options you need to provide the <code>admin.macaroon</code>.<br/>
The path to the LND data directory may vary, the following examples 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 class="mb-2">
You can omit <code>certthumbprint</code> if the certificate is trusted by your machine.<br/>
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>
</li>
</ul>
<button id="saveCustom" name="command" type="submit" value="save" class="btn btn-primary mr-2">Use custom node</button>
</div>
</form>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}

View File

@ -148,7 +148,7 @@
{
<span class="text-light ml-3 mr-2">|</span>
}
<a asp-action="AddLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Model.Id" id="@($"Modify-Lightning{scheme.CryptoCode}")" class="btn btn-@(isSetUp ? "link px-1" : "primary btn-sm ml-4 px-3") py-1 fw-semibold">
<a asp-action="SetupLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Model.Id" id="@($"Modify-Lightning{scheme.CryptoCode}")" class="btn btn-@(isSetUp ? "link px-1" : "primary btn-sm ml-4 px-3") py-1 fw-semibold">
@(isSetUp ? "Modify" : "Setup")
</a>
</span>

View File

@ -12,4 +12,5 @@
<symbol id="wallet-file" viewBox="0 0 32 32"><path d="M5 1H20.8479L27 6.90258V31H5V1Z" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
<symbol id="scan-qr" viewBox="0 0 32 32"><path d="M20 .875h10c.621 0 1.125.504 1.125 1.125v10m0 8v10c0 .621-.504 1.125-1.125 1.125H20m-8 0H2A1.125 1.125 0 01.875 30V20m0-8V2C.875 1.379 1.379.875 2 .875h10" stroke="currentColor" stroke-width="1.75" fill="none" fill-rule="evenodd"/></symbol>
<symbol id="seed" viewBox="0 0 32 32"><rect x="0.875" y="2.875" width="30.25" height="26.25" rx="1.125" fill="none" stroke="currentColor" stroke-width="1.75"/><rect x="5" y="7" width="9" height="4" rx="0.5" fill="currentColor"/><rect x="5" y="14" width="9" height="4" rx="0.5" fill="currentColor"/><rect x="18" y="7" width="9" height="4" rx="0.5" fill="currentColor"/><rect x="18" y="14" width="9" height="4" rx="0.5" fill="currentColor"/><rect x="5" y="21" width="9" height="4" rx="0.5" fill="currentColor"/><rect x="18" y="21" width="9" height="4" rx="0.5" fill="currentColor"/></symbol>
<symbol id="warning" viewBox="0 0 24 24"><path d="M12.337 3.101a.383.383 0 00-.674 0l-9.32 17.434a.383.383 0 00.338.564h18.638a.384.384 0 00.337-.564L12.337 3.101zM9.636 2.018c1.01-1.89 3.719-1.89 4.728 0l9.32 17.434a2.681 2.681 0 01-2.365 3.945H2.681a2.68 2.68 0 01-2.364-3.945L9.636 2.018zm3.896 15.25a1.532 1.532 0 11-3.064 0 1.532 1.532 0 013.064 0zm-.383-8.044a1.15 1.15 0 00-2.298 0v3.83a1.15 1.15 0 002.298 0v-3.83z" fill="currentColor"/></symbol>
</svg>

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB