From 03f8d6693d2da08f6cecd5efbb5ffb5b36a3c3bb Mon Sep 17 00:00:00 2001
From: dstrukt <gfxdsign@gmail.com>
Date: Thu, 18 Nov 2021 01:04:20 -0800
Subject: [PATCH] Improve Access Tokens View (#3118)

Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
---
 BTCPayServer/Views/Stores/CreateToken.cshtml  | 12 ++++++------
 BTCPayServer/Views/Stores/ListTokens.cshtml   | 19 +++++++++----------
 .../Views/Stores/RequestPairing.cshtml        | 12 +++++-------
 BTCPayServer/Views/Stores/ShowToken.cshtml    |  4 ++--
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/BTCPayServer/Views/Stores/CreateToken.cshtml b/BTCPayServer/Views/Stores/CreateToken.cshtml
index 2dff14e32..c19d1a0f4 100644
--- a/BTCPayServer/Views/Stores/CreateToken.cshtml
+++ b/BTCPayServer/Views/Stores/CreateToken.cshtml
@@ -1,14 +1,13 @@
 @model CreateTokenViewModel
 @{
     Layout = "../Shared/_NavLayout.cshtml";
-    ViewData.SetActivePageAndTitle(StoreNavPages.Tokens, "Create a new token", Context.GetStoreData()?.StoreName);
+    ViewData.SetActivePageAndTitle(StoreNavPages.Tokens, "Create New Token", Context.GetStoreData()?.StoreName);
     ViewBag.HidePublicKey = ViewBag.HidePublicKey ?? false;
     ViewBag.ShowStores = ViewBag.ShowStores ?? false;
 }
-
 <div class="row">
     <div class="col-lg-6">
-        <h4 class="mb-4">@ViewData["PageTitle"]</h4>
+        <h3 class="mb-4">@ViewData["PageTitle"]</h3>
         <form method="post">
             <div class="form-group">
                 <label asp-for="Label" class="form-label"></label>
@@ -23,12 +22,13 @@
             {
                 <div class="form-group">
                     <label asp-for="PublicKey" class="form-label"></label>
-                    <small class="text-muted">Keep empty for server-initiated pairing</small>
                     <input asp-for="PublicKey" class="form-control" />
                     <span asp-validation-for="PublicKey" class="text-danger"></span>
+                    <p class="form-text text-muted">
+                        Keep empty for server-initiated pairing.
+                    </p>
                 </div>
             }
-
             @if (ViewBag.ShowStores)
             {
                 <div class="form-group">
@@ -42,7 +42,7 @@
                 <input type="hidden" asp-for="StoreId" />
             }
             <div class="form-group">
-                <input id="RequestPairing" type="submit" value="Request pairing" class="btn btn-primary" />
+                <input id="RequestPairing" type="submit" value="Request Pairing" class="btn btn-primary" />
             </div>
         </form>
     </div>
diff --git a/BTCPayServer/Views/Stores/ListTokens.cshtml b/BTCPayServer/Views/Stores/ListTokens.cshtml
index b87cee145..07ad0a5f6 100644
--- a/BTCPayServer/Views/Stores/ListTokens.cshtml
+++ b/BTCPayServer/Views/Stores/ListTokens.cshtml
@@ -18,10 +18,10 @@
 <div class="row">
     <div class="col-lg-8">
         <div class="d-flex align-items-center justify-content-between mb-3">
-            <h4 class="mb-0">@ViewData["PageTitle"]</h4>
+            <h3 class="mb-0">@ViewData["PageTitle"]</h3>
             <a id="CreateNewToken" asp-action="CreateToken" class="btn btn-primary" role="button" asp-route-storeId="@Context.GetRouteValue("storeId")">
                 <span class="fa fa-plus"></span>
-                Create a new token
+                Create New Token
             </a>
         </div>
 
@@ -57,27 +57,27 @@
         else
         {
             <p class="text-secondary mt-3">
-                There are no access tokens yet.
+                No access tokens yet.
             </p>
         }
 
-        <h4 class="mt-5 mb-3">Legacy API Keys</h4>
+        <h3 class="mt-5 mb-3">Legacy API Keys</h3>
         <p>Alternatively, you can use the invoice API by including the following HTTP Header in your requests:</p>
         <p><code>Authorization: Basic @Model.EncodedApiKey</code></p>
 
         <form method="post" asp-action="GenerateAPIKey" asp-route-storeId="@Context.GetRouteValue("storeId")">
             <div class="form-group">
                 <label asp-for="ApiKey" class="form-label"></label>
-                <div class="input-group">
+                <div class="d-flex">
                     <input asp-for="ApiKey" readonly class="form-control"/>
                     @if (string.IsNullOrEmpty(Model.ApiKey))
                     {
-                        <button class="btn btn-success" type="submit">Generate</button>
+                        <button class="btn btn-success ms-3" type="submit">Generate</button>
                     }
                     else
                     {
-                        <button class="btn btn-danger" type="submit" name="command" value="revoke">Revoke</button>
-                        <button class="btn btn-success" type="submit">Re-generate</button>
+                        <button class="btn btn-danger ms-3" type="submit" name="command" value="revoke">Revoke</button>
+                        <button class="btn btn-success ms-3" type="submit">Regenerate</button>
                     }
                 </div>
             </div>
@@ -85,5 +85,4 @@
     </div>
 </div>
 
-<partial name="_Confirm" model="@(new ConfirmModel("Revoke access token", "The access token will be revoked. Do you wish to continue?", "Revoke"))" />
-
+<partial name="_Confirm" model="@(new ConfirmModel("Revoke access token", "The access token will be revoked. Do you wish to continue?", "Revoke"))" />
\ No newline at end of file
diff --git a/BTCPayServer/Views/Stores/RequestPairing.cshtml b/BTCPayServer/Views/Stores/RequestPairing.cshtml
index 0d0da048d..9b3a94262 100644
--- a/BTCPayServer/Views/Stores/RequestPairing.cshtml
+++ b/BTCPayServer/Views/Stores/RequestPairing.cshtml
@@ -1,12 +1,10 @@
 @model PairingModel
 @{
     Layout = "../Shared/_NavLayout.cshtml";
-    ViewData.SetActivePageAndTitle(StoreNavPages.Tokens, "Pairing permission", Context.GetStoreData()?.StoreName);
+    ViewData.SetActivePageAndTitle(StoreNavPages.Tokens, "Pairing Permission", Context.GetStoreData()?.StoreName);
 }
 
-<h2 class="mb-4">@ViewData["PageTitle"]</h2>
-<p class="mb-0">Create and manage store settings.</p>
-
+<h3 class="mb-0">@ViewData["PageTitle"]</h3>
 <div class="row">
     <div class="col-md-4">
         <table class="table table-hover removetopborder">
@@ -25,12 +23,12 @@
     <div class="col-md-4">
         <form asp-action="Pair" method="post">
             <div class="form-group">
-                <label asp-for="StoreId" class="form-label"></label>
+                <label asp-for="StoreId" class="form-label">Pair To Store</label>
                 <select asp-for="StoreId" asp-items="@(new SelectList(Model.Stores,"Id","Name"))" class="form-select"></select>
                 <span asp-validation-for="StoreId" class="text-danger"></span>
             </div>
             <input type="hidden" name="pairingCode" value="@Model.Id" />
-            <button id="ApprovePairing" type="submit" class="btn btn-primary" title="Approve this pairing demand">Approve</button>
+            <button id="ApprovePairing" type="submit" class="btn btn-primary mt-3" title="Approve this pairing demand">Approve</button>
         </form>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/BTCPayServer/Views/Stores/ShowToken.cshtml b/BTCPayServer/Views/Stores/ShowToken.cshtml
index a1f3a0703..f2f33e1bd 100644
--- a/BTCPayServer/Views/Stores/ShowToken.cshtml
+++ b/BTCPayServer/Views/Stores/ShowToken.cshtml
@@ -4,11 +4,11 @@
     ViewData.SetActivePageAndTitle(StoreNavPages.Tokens, "Access Tokens", Context.GetStoreData().StoreName);
 }
 
-<h2 class="mb-4">@ViewData["PageTitle"]</h2>
+<h3 class="mb-4">@ViewData["PageTitle"]</h3>
 
 <div class="row">
     <div class="col-md-8">
-        <h5>Token information</h5>
+        <h5>Token Information</h5>
         <table class="table table-hover">
             <tr>
                 <th>Label</th>