From a2a1104b144775838284b213c8152d3faf053b42 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 14 Apr 2023 13:19:13 +0200
Subject: [PATCH] Nostr: UI updates

---
 .../Views/Nip5/Edit.cshtml                    | 137 ++++++++----------
 .../Views/Shared/Nip05Nav.cshtml              |   4 +-
 2 files changed, 65 insertions(+), 76 deletions(-)

diff --git a/Plugins/BTCPayServer.Plugins.NIP05/Views/Nip5/Edit.cshtml b/Plugins/BTCPayServer.Plugins.NIP05/Views/Nip5/Edit.cshtml
index 2f28f53..e644b01 100644
--- a/Plugins/BTCPayServer.Plugins.NIP05/Views/Nip5/Edit.cshtml
+++ b/Plugins/BTCPayServer.Plugins.NIP05/Views/Nip5/Edit.cshtml
@@ -12,69 +12,62 @@
 
 <h2 class="mb-4">@ViewData["Title"]</h2>
 
+<p>You'll also need to <a asp-action="EditLightningAddress" asp-controller="UILNURL" asp-route-storeId="@ScopeProvider.GetCurrentStoreId()">enable a lightning address</a> with the same name.</p>
+
 <div class="row">
     <div class="col-md-10">
         <form method="post">
-            <div class="row">
-                <div class="form-group">
-                    <label asp-for="Name" class="form-label"></label>
-                    <input asp-for="Name" class="form-control"/>
-                    <span asp-validation-for="Name" class="text-danger"></span>
-                </div>
-                <div class="form-group">
-                    <label asp-for="PubKey" class="form-label"></label>
-                    <input asp-for="PubKey" class="form-control"/>
-                    <span asp-validation-for="PubKey" class="text-danger"></span>
-                </div>
-                <div class="form-group">
-                    <label asp-for="PrivateKey" class="form-label">Private key for zaps</label>
-                    <input asp-for="PrivateKey" class="form-control"/>
-                    <span asp-validation-for="PrivateKey" class="text-danger"></span>
-                    <p class="text-muted">You'll also need to <a asp-action="EditLightningAddress" asp-controller="UILNURL" asp-route-storeId="@ScopeProvider.GetCurrentStoreId()">enable a lightning address</a> with the same name.</p>
-                    
-                </div>
+            <div class="form-group">
+                <label asp-for="Name" class="form-label"></label>
+                <input asp-for="Name" class="form-control"/>
+                <span asp-validation-for="Name" class="text-danger"></span>
             </div>
-            <div class="row">
-                <table class="table table-responsive col-12">
-                    <thead>
-                    <tr>
-                        <th>
-                            Relay
-                        </th>
-                        <th class="text-end">
-                            Actions
-                        </th>
-                    </tr>
-                    </thead>
-                    <tbody id="relay-list">
-                    @if (Model.Relays is not null)
+            <div class="form-group">
+                <label asp-for="PubKey" class="form-label"></label>
+                <input asp-for="PubKey" class="form-control"/>
+                <span asp-validation-for="PubKey" class="text-danger"></span>
+            </div>
+            <div class="form-group">
+                <label asp-for="PrivateKey" class="form-label">Private key for zaps</label>
+                <input asp-for="PrivateKey" class="form-control" type="password"/>
+                <span asp-validation-for="PrivateKey" class="text-danger"></span>
+            </div>
+            <table class="table table-responsive col-12">
+                <thead>
+                <tr>
+                    <th>
+                        Relay
+                    </th>
+                    <th class="text-end">
+                        Actions
+                    </th>
+                </tr>
+                </thead>
+                <tbody id="relay-list">
+                @if (Model.Relays is not null)
+                {
+                    @for (var index = 0; index < Model.Relays.Length; index++)
                     {
-                        @for (var index = 0; index < Model.Relays.Length; index++)
-                        {
-                            <tr data-index="@index">
-                                <td>
-                                    <input class="form-control" type="text" asp-for="Relays[index]">
-                                </td>
-                                <td  class="text-end">
-                                    <button class="btn btn-link" type="button" data-remove>Remove</button>
-                                </td>
-                            </tr>
-                        }
+                        <tr data-index="@index">
+                            <td>
+                                <input class="form-control" type="text" asp-for="Relays[index]">
+                            </td>
+                            <td  class="text-end">
+                                <button class="btn btn-link" type="button" data-remove>Remove</button>
+                            </td>
+                        </tr>
                     }
-                    </tbody>
-                </table>
-
-            </div>
-            <div class="row">
-                <div class="d-flex">
-                <button type="button" id="add-relay" class="btn btn-outline-secondary mx-2">Add Relay</button>
-                <button name="command" type="submit" value="save" class="btn btn-primary  mx-2">Submit</button>
-                <button name="command" type="button" class="btn btn-primary  mx-2 " style="display: none" id="import">Import wth nostr extension</button>
-                @if (Model.Name is not null)
+                }
+                </tbody>
+            </table>
+            <div class="d-flex flex-wrap align-items-center gap-3">
+                <button type="button" id="add-relay" class="btn btn-outline-secondary">Add Relay</button>
+                <button name="command" type="submit" value="save" class="btn btn-primary">Submit</button>
+                <button name="command" type="button" class="btn btn-primary" style="display: none" id="import">Import wth Nostr extension</button>
+                @if (!string.IsNullOrEmpty(Model.Name))
                 {
                     <button name="command" type="submit" value="remove" class="btn btn-danger">Clear</button>
                 }
-                </div>
             </div>
         </form>
     </div>
@@ -91,20 +84,19 @@
     </tr>
 </template>
 
-<script >
-document.addEventListener("DOMContentLoaded", ()=>{
-
-        const importbtn=  document.getElementById("import");
+<script>
+    document.addEventListener("DOMContentLoaded", ()=>{
+        const importbtn = document.getElementById("import");
         importbtn.style.display = "block";
         importbtn.addEventListener("click", async ()=>{
             document.getElementById("PubKey").value = await window.nostr.getPublicKey();
             const relays = await window.nostr.getRelays();
-         
+
             Object.entries(relays).forEach(entry => {
                 const [key, value] = entry;
-           
+
                 if (!document.querySelector(`[value='${key}']`)){
-               
+
                     const template = document.querySelector('#row');
                     const clone = template.content.cloneNode(true);
                     clone.querySelector("input").value = key;
@@ -115,8 +107,8 @@ document.addEventListener("DOMContentLoaded", ()=>{
                 }
             });
         });
-    
-    
+
+
     setupRemoveBtn();
 
     document.getElementById("add-relay").addEventListener("click", ()=>{
@@ -125,26 +117,23 @@ document.addEventListener("DOMContentLoaded", ()=>{
         document.getElementById("relay-list").appendChild(clone);
         setIndex();
     setupRemoveBtn();
-        
+
     });
-    
-    
-    
+
     function setupRemoveBtn(){
         document.querySelectorAll("[data-remove]").forEach(value =>{
                 value.removeEventListener("click",onRemoveRelay )
                  value.addEventListener("click",onRemoveRelay );
-                
+
             });
     }
-    
-    
+
     function onRemoveRelay(evt){
-        evt.target.parentElement.parentElement.remove();    
+        evt.target.parentElement.parentElement.remove();
         setIndex();
-        
+
     }
-    
+
     function setIndex(){
          document.querySelectorAll("[data-index]").forEach((value, key) => {
                         value.setAttribute("data-index", key);
@@ -152,4 +141,4 @@ document.addEventListener("DOMContentLoaded", ()=>{
                     })
     }
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/Plugins/BTCPayServer.Plugins.NIP05/Views/Shared/Nip05Nav.cshtml b/Plugins/BTCPayServer.Plugins.NIP05/Views/Shared/Nip05Nav.cshtml
index 63689c1..d57f2c1 100644
--- a/Plugins/BTCPayServer.Plugins.NIP05/Views/Shared/Nip05Nav.cshtml
+++ b/Plugins/BTCPayServer.Plugins.NIP05/Views/Shared/Nip05Nav.cshtml
@@ -9,10 +9,10 @@
 @if (!string.IsNullOrEmpty(storeId))
 {
     <li class="nav-item">
-        <a asp-controller="Nip5" asp-action="Edit" asp-route-storeId="@storeId" class="nav-link @ViewData.IsActivePage("Nostr NIP05")" id="Nav-NIP05"
+        <a asp-controller="Nip5" asp-action="Edit" asp-route-storeId="@storeId" class="nav-link @ViewData.IsActivePage("Nostr")" id="Nav-NIP05"
            permission="@Policies.CanModifyStoreSettings">
            <svg        xmlns="http://www.w3.org/2000/svg"
-                       viewBox="0 0 116.446 84.924" 
+                       viewBox="0 0 116.446 84.924"
                        style="    width: 15px;
                                   margin-right: 9px;
                                   margin-left: 4px;">