Improve token UX (Fix #353)

BTCPayServer.Tests/docker-compose.yml

@@ -69,7 +69,7 @@ services:
 
 
   nbxplorer:
-    image: nicolasdorier/nbxplorer:1.1.0.8
+    image: nicolasdorier/nbxplorer:1.1.0.9
     restart: unless-stopped
     ports:
       - "32838:32838"

BTCPayServer/BTCPayServer.csproj

@@ -139,6 +139,9 @@
     <Content Update="Views\Server\SSHService.cshtml">
       <Pack>$(IncludeRazorContentInPack)</Pack>
     </Content>
+    <Content Update="Views\Stores\ShowToken.cshtml">
+      <Pack>$(IncludeRazorContentInPack)</Pack>
+    </Content>
     <Content Update="Views\Stores\PayButtonEnable.cshtml">
       <Pack>$(IncludeRazorContentInPack)</Pack>
     </Content>

BTCPayServer/Controllers/StoresController.cs

@@ -570,6 +570,45 @@ namespace BTCPayServer.Controllers
             return View(model);
         }
 
+        [HttpGet]
+        [Route("{storeId}/tokens/{tokenId}/revoke")]
+        public async Task<IActionResult> RevokeToken(string tokenId)
+        {
+            var token = await _TokenRepository.GetToken(tokenId);
+            if (token == null || token.StoreId != StoreData.Id)
+                return NotFound();
+            return View("Confirm", new ConfirmModel()
+            {
+                Action = "Revoke the token",
+                Title = "Revoke the token",
+                Description = $"The access token with the label \"{token.Label}\" will be revoked, do you wish to continue?",
+                ButtonClass = "btn-danger"
+            });
+        }
+        [HttpPost]
+        [Route("{storeId}/tokens/{tokenId}/revoke")]
+        public async Task<IActionResult> RevokeTokenConfirm(string tokenId)
+        {
+            var token = await _TokenRepository.GetToken(tokenId);
+            if (token == null ||
+                token.StoreId != StoreData.Id ||
+               !await _TokenRepository.DeleteToken(tokenId))
+                StatusMessage = "Failure to revoke this token";
+            else
+                StatusMessage = "Token revoked";
+            return RedirectToAction(nameof(ListTokens));
+        }
+
+        [HttpGet]
+        [Route("{storeId}/tokens/{tokenId}")]
+        public async Task<IActionResult> ShowToken(string tokenId)
+        {
+            var token = await _TokenRepository.GetToken(tokenId);
+            if (token == null || token.StoreId != StoreData.Id)
+                return NotFound();
+            return View(token);
+        }
+
         [HttpPost]
         [Route("/api-tokens")]
         [Route("{storeId}/Tokens/Create")]
@@ -671,21 +710,6 @@ namespace BTCPayServer.Controllers
             return View(model);
         }
 
-
-        [HttpPost]
-        [Route("{storeId}/Tokens/Delete")]
-        public async Task<IActionResult> DeleteToken(string tokenId)
-        {
-            var token = await _TokenRepository.GetToken(tokenId);
-            if (token == null ||
-                token.StoreId != StoreData.Id ||
-               !await _TokenRepository.DeleteToken(tokenId))
-                StatusMessage = "Failure to revoke this token";
-            else
-                StatusMessage = "Token revoked";
-            return RedirectToAction(nameof(ListTokens));
-        }
-
         [HttpPost]
         [Route("{storeId}/tokens/apikey")]
         public async Task<IActionResult> GenerateAPIKey()

BTCPayServer/Views/Stores/ListTokens.cshtml

@@ -18,9 +18,8 @@
             <thead>
                 <tr>
                     <th>Label</th>
-                    <th>SIN</th>
                     <th>Facade</th>
-                    <th>Actions</th>
+                    <th class="text-right">Actions</th>
                 </tr>
             </thead>
             <tbody>
@@ -28,13 +27,9 @@
                 {
                     <tr>
                         <td>@token.Label</td>
-                        <td>@token.SIN</td>
                         <td>@token.Facade</td>
-                        <td>
+                        <td class="text-right">
-                            <form asp-action="DeleteToken" method="post">
+                            <a asp-action="ShowToken" asp-route-tokenId="@token.Id">See information</a> - <a asp-action="RevokeToken" asp-route-tokenId="@token.Id">Revoke</a>
-                                <input type="hidden" name="tokenId" value="@token.Id">
-                                <button type="submit" class="btn btn-danger" role="button">Revoke</button>
-                            </form>
                         </td>
                     </tr>
                 }

BTCPayServer/Views/Stores/ShowToken.cshtml

@@ -0,0 +1,29 @@
+@model BTCPayServer.Authentication.BitTokenEntity
+@{
+    Layout = "../Shared/_NavLayout.cshtml";
+    ViewData.SetActivePageAndTitle(StoreNavPages.Tokens, "Access Tokens");
+}
+
+<div class="row">
+    <div class="col-md-8">
+        <h5>Token information</h5>
+        <table class="table table-sm">
+            <tr>
+                <th>Label</th>
+                <td>@Model.Label</td>
+            </tr>
+            <tr>
+                <th>SIN</th>
+                <td>@Model.SIN</td>
+            </tr>
+            <tr>
+                <th>Token</th>
+                <td>@Model.Value</td>
+            </tr>
+            <tr>
+                <th>Facade</th>
+                <td>@Model.Facade</td>
+            </tr>
+        </table>
+    </div>
+</div>