Merge pull request #1721 from dennisreimann/ui-updates-account

UI updates: Account section

BTCPayServer/Views/Account/LoginWith2fa.cshtml

@@ -1,20 +1,20 @@
 @model LoginWith2faViewModel
 
-<section>
-    <div class="container-fluid">
+<section class="pt-5">
+    <div>
         <div class="row">
             <div class="col-lg-12 section-heading">
                 <h2>Two-factor authentication</h2>
                 <hr class="primary">
             </div>
         </div>
-        <div class="row">
+        <div class="row mb-3">
             <form class="col-12" method="post" asp-route-returnUrl="@ViewData["ReturnUrl"]" asp-action="LoginWith2fa">
                 <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                 <input asp-for="RememberMe" type="hidden"/>
                 <div class="form-group">
                     <label asp-for="TwoFactorCode"></label>
-                    <input asp-for="TwoFactorCode" class="form-control" autocomplete="off" autofocus/>
+                    <input asp-for="TwoFactorCode" class="form-control" autocomplete="off" autofocus style="width:13em" />
                     <span asp-validation-for="TwoFactorCode" class="text-danger"></span>
                 </div>
                 <div class="form-group">
@@ -28,14 +28,14 @@
                 <div class="form-group">
                     <button type="submit" class="btn btn-primary">Log in</button>
                 </div>
-
             </form>
         </div>
         <div class="row">
             <div class="col-12">
-                <p>
-                    Don't have access to your authenticator device? You can
-                    <a asp-action="LoginWithRecoveryCode" asp-route-returnUrl="@ViewData["ReturnUrl"]">log in with a recovery code</a>.
+                <p class="text-secondary">
+                    Don't have access to your authenticator device?
+                    <br>
+                    You can <a asp-action="LoginWithRecoveryCode" asp-route-returnUrl="@ViewData["ReturnUrl"]">log in with a recovery code</a>.
                 </p>
             </div>
         </div>

BTCPayServer/Views/Account/LoginWithU2F.cshtml

@@ -13,19 +13,22 @@
     <input type="hidden" asp-for="RememberMe" />
 </form>
 
-<section>
-    <div class="container-fluid">
+<section class="pt-5">
+    <div>
         <div class="row">
             <div class="col-lg-12 section-heading">
-                <h2><span class="fa fa-spinner fa-spin"></span>U2F Authentication</h2>
+                <h2>
+                    U2F Authentication
+                </h2>
                 <hr class="primary">
+                <div>
+                    <span class="fa fa-spinner fa-spin float-right ml-3 mr-5 mt-1" style="font-size:2.5em"></span>
+                    <p>Insert your U2F device or hardware wallet into your computer's USB port. If it has a button, tap on it.</p>
+                </div>
 
-                <p>Insert your U2F device or a hardware wallet into your computer's USB port. If it has a button, tap on it.</p>
+                <a id="error-response" class="text-danger" href="javascript:window.location.reload()"> </a>
             </div>
         </div>
-        <div class="row">
-            <a id="error-response" class="text-danger" href="javascript:window.location.reload()"> </a>
-        </div>
     </div>
 </section>
 

BTCPayServer/Views/Account/SecondaryLogin.cshtml

@@ -7,15 +7,9 @@
     <div class="container">
         @if (Model.LoginWith2FaViewModel != null && Model.LoginWithU2FViewModel != null)
         {
-            <div class="row">
-                <div class="col-lg-12 section-heading">
-                    <h2>@ViewData["Title"]</h2>
-                    <hr class="primary">
-
-                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
-                </div>
-            </div>
-        }else if (Model.LoginWith2FaViewModel == null && Model.LoginWithU2FViewModel == null)
+            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
+        }
+        else if (Model.LoginWith2FaViewModel == null && Model.LoginWithU2FViewModel == null)
         {
             <div class="row">
                 <div class="col-lg-12 section-heading">

BTCPayServer/Views/Manage/APIKeys.cshtml

@@ -5,7 +5,7 @@
 }
 
 <partial name="_StatusMessage"/>
-<h4>API Keys</h4>
+
 <table class="table table-lg">
     <thead>
     <tr>
@@ -20,18 +20,23 @@
     {
         <tr>
             <td>@keyData.Label</td>
-            <td>@keyData.Id</td>
+            <td><code>@keyData.Id</code></td>
             <td>
                 @{
                     var permissions = keyData.GetBlob().Permissions;
                 }
                 @if (!permissions.Any())
                 {
-                    <span>No permissions</span>
+                    <span class="text-warning">No permissions</span>
                 }
                 else
                 {
-                    <span>@string.Join(", ", Permission.ToPermissions(permissions).Select(c => c.ToString()).Distinct().ToArray())</span>
+                    <ul>
+                        @foreach (var permission in Permission.ToPermissions(permissions).Select(c => c.ToString()).Distinct().ToArray())
+                        {
+                            <li>@permission</li>
+                        }
+                    </ul>
                 }
             </td>
             <td class="text-right">
@@ -47,10 +52,9 @@
             </td>
         </tr>
     }
-    <tr class="bg-gray">
-        <td colspan="4">
-            <a class="btn btn-primary" asp-action="AddApiKey" id="AddApiKey">Generate new key</a>
-        </td>
-    </tr>
     </tbody>
 </table>
+<a class="btn btn-primary" asp-action="AddApiKey" id="AddApiKey">
+    <span class="fa fa-plus"></span>
+    Generate new key
+</a>

BTCPayServer/Views/Manage/ChangePassword.cshtml

@@ -4,10 +4,19 @@
 }
 
 <partial name="_StatusMessage" />
+
+@if (!this.ViewContext.ModelState.IsValid)
+{
+    <div class="row">
+        <div class="col-md-6">
+            <div asp-validation-summary="All" class="text-danger"></div>
+        </div>
+    </div>
+}
+
 <div class="row">
     <div class="col-md-6">
         <form method="post">
-            <div asp-validation-summary="All" class="text-danger"></div>
             <div class="form-group">
                 <label asp-for="OldPassword"></label>
                 <input asp-for="OldPassword" class="form-control" />

BTCPayServer/Views/Manage/Disable2fa.cshtml

@@ -2,18 +2,16 @@
     ViewData.SetActivePageAndTitle(ManageNavPages.TwoFactorAuthentication, "Disable two-factor authentication (2FA)");
 }
 
-<h2>@ViewData["Title"]</h2>
-
 <div class="alert alert-warning" role="alert">
-    <p>
+    <h4 class="alert-heading mb-3">
         <span class="fa fa-warning"></span>
-        <strong>This action only disables 2FA.</strong>
-    </p>
-    <p>
-        Disabling 2FA does not change the keys used in authenticator apps. If you wish to change the key
-        used in an authenticator app you should <a asp-action="ResetAuthenticatorWarning" class="alert-link">
-            reset your
-            authenticator keys.
+        This action only disables 2FA.
+    </h4>
+    <p class="mb-0">
+        Disabling 2FA does not change the keys used in authenticator apps.
+        If you wish to change the key used in an authenticator app you should
+        <a asp-action="ResetAuthenticatorWarning" class="alert-link">
+            reset your authenticator keys.
         </a>
     </p>
 </div>

BTCPayServer/Views/Manage/EnableAuthenticator.cshtml

@@ -1,31 +1,40 @@
 @model EnableAuthenticatorViewModel
 @{
-    ViewData.SetActivePageAndTitle(ManageNavPages.TwoFactorAuthentication, "Enable authenticator");
+    ViewData.SetActivePageAndTitle(ManageNavPages.TwoFactorAuthentication, "Enable authenticator app");
 }
 
 <div>
     <p>To use an authenticator app go through the following steps:</p>
     <ol class="list">
-        <li>
-            <p>
-                Download a two-factor authenticator app like Microsoft Authenticator for
-                <a href="https://go.microsoft.com/fwlink/?Linkid=825072">Android</a> and
-                <a href="https://go.microsoft.com/fwlink/?Linkid=825073">iOS</a> or
-                Google Authenticator for
-                <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en">Android</a> and
-                <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8">iOS</a>.
-            </p>
+        <li class="mb-5">
+            <div class="mb-2">Download a two-factor authenticator app like …</div>
+            <ul>
+                <li>
+                    Microsoft Authenticator for
+                    <a href="https://go.microsoft.com/fwlink/?Linkid=825072">Android</a> or
+                    <a href="https://go.microsoft.com/fwlink/?Linkid=825073">iOS</a>
+                </li>
+                <li>
+                    Google Authenticator for
+                    <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en">Android</a> or
+                    <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8">iOS</a>
+                </li>
+            </ul>
         </li>
-        <li>
-            <p>Scan the QR Code or enter this key <kbd>@Model.SharedKey</kbd> into your two factor authenticator app. Spaces and casing do not matter.</p>
+        <li class="mb-5">
+            <p class="mb-2">Scan the QR Code or enter the following key into your two factor authenticator app:</p>
+            <p class="mb-4">
+                <code class="mr-3">@Model.SharedKey</code>
+                <span class="text-secondary">(spaces and casing do not matter)</span>
+            </p>
             <div id="qrCode"></div>
             <div id="qrCodeData" data-url="@Model.AuthenticatorUri"></div>
-            <br />
         </li>
         <li>
             <p>
-                Once you have scanned the QR code or input the key above, your two factor authentication app will provide you
-                with a unique code. Enter the code in the confirmation box below.
+                Your two factor authenticator app will provide you with a unique code.
+                <br/>
+                Enter the code in the confirmation box below.
             </p>
             <div class="row">
                 <div class="col-md-6">

BTCPayServer/Views/Manage/GenerateRecoveryCodes.cshtml

@@ -4,11 +4,11 @@
 }
 
 <div class="alert alert-warning" role="alert">
-    <p>
+    <h5>
         <span class="fa fa-warning"></span>
-        <strong>Put these codes in a safe place.</strong>
-    </p>
-    <p>
+        Put these codes in a safe place
+    </h5>
+    <p class="mb-0">
         If you lose your device and don't have the recovery codes you will lose access to your account.
     </p>
 </div>

BTCPayServer/Views/Manage/Index.cshtml

@@ -6,38 +6,43 @@
 
 <partial name="_StatusMessage" />
 
-<div class="row">
-    <div class="col-md-6">
-        <div asp-validation-summary="All" class="text-danger"></div>
+@if (!this.ViewContext.ModelState.IsValid)
+{
+    <div class="row">
+        <div class="col-md-6">
+            <div asp-validation-summary="All" class="text-danger"></div>
+        </div>
     </div>
-</div>
-<div class="row">
-    <div class="col-md-6">
-        <form method="post">
-            <div class="form-group">
-                <label asp-for="Username"></label>
-                <input asp-for="Username" class="form-control" disabled />
-            </div>
-            <div class="form-group">
-                <label asp-for="Email"></label>
-                @if(Model.IsEmailConfirmed)
-                {
-                    <div class="input-group">
-                        <input asp-for="Email" class="form-control" />
-                        <span class="input-group-addon" aria-hidden="true"><span class="fa fa-check text-success"></span></span>
-                    </div>
-                }
-                else
-                {
-                    <input asp-for="Email" class="form-control" />
-                    <button asp-action="SendVerificationEmail" class="btn btn-link">Send verification email</button>
-                }
-                <span asp-validation-for="Email" class="text-danger"></span>
-            </div>
-            <button type="submit" class="btn btn-primary">Save</button>
-        </form>
+}
+<form method="post">
+    <div class="form-row">
+        <div class="col-md-6 mb-3">
+            <label asp-for="Username"></label>
+            <input asp-for="Username" class="form-control" disabled />
+        </div>
     </div>
-</div>
+    <div class="form-row">
+        <div class="col-md-6 mb-3">
+            <label asp-for="Email"></label>
+            <input asp-for="Email" class="form-control" />
+            <span asp-validation-for="Email" class="text-danger"></span>
+        </div>
+        <div class="col-md-6 mb-3 d-flex align-items-end">
+            @if(Model.IsEmailConfirmed)
+            {
+                <span class="badge badge-success p-2 my-1">
+                    <span class="fa fa-check"></span>
+                    confirmed
+                </span>
+            }
+            else
+            {
+                <button asp-action="SendVerificationEmail" class="btn btn-secondary">Send verification email</button>
+            }
+        </div>
+    </div>
+    <button type="submit" class="btn btn-primary">Save</button>
+</form>
 
 @section Scripts {
     @await Html.PartialAsync("_ValidationScriptsPartial")

BTCPayServer/Views/Manage/ResetAuthenticator.cshtml

@@ -3,12 +3,14 @@
 }
 
 <div class="alert alert-warning" role="alert">
-    <p>
+    <h4 class="alert-heading mb-3">
         <span class="fa fa-warning"></span>
-        <strong>If you reset your authenticator key your authenticator app will not work until you reconfigure it.</strong>
-    </p>
-    <p>
+        Your authenticator app will not work until you reconfigure it.
+    </h4>
+    <p class="mb-2">
         This process disables 2FA until you verify your authenticator app and will also reset your 2FA recovery codes.
+    </p>
+    <p class="mb-0">
         If you do not complete your authenticator app configuration you may lose access to your account.
     </p>
 </div>

BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml

@@ -8,39 +8,53 @@
     if(Model.RecoveryCodesLeft == 0)
     {
         <div class="alert alert-danger">
-            <strong>You have no recovery codes left.</strong>
-            <p>You must <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a> before you can log in with a recovery code.</p>
+            <h4 class="alert-heading mb-3">
+                <span class="fa fa-warning"></span>
+                You have no recovery codes left.
+            </h4>
+            <p class="mb-0">You must <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a> before you can log in with a recovery code.</p>
         </div>
     }
     else if(Model.RecoveryCodesLeft == 1)
     {
         <div class="alert alert-danger">
-            <strong>You have 1 recovery code left.</strong>
-            <p>You can <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a>.</p>
+            <h4 class="alert-heading mb-3">
+                <span class="fa fa-warning"></span>
+                You have 1 recovery code left.
+            </h4>
+            <p class="mb-0">You can <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a>.</p>
         </div>
     }
     else if(Model.RecoveryCodesLeft <= 3)
     {
         <div class="alert alert-warning">
-            <strong>You have @Model.RecoveryCodesLeft recovery codes left.</strong>
-            <p>You should <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a>.</p>
+            <h4 class="alert-heading mb-3">
+                <span class="fa fa-warning"></span>
+                You have @Model.RecoveryCodesLeft recovery codes left.
+            </h4>
+            <p class="mb-0">You should <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a>.</p>
         </div>
     }
-
-    <a asp-action="Disable2faWarning" class="btn btn-primary">Disable 2FA</a>
-    <a asp-action="GenerateRecoveryCodes" class="btn btn-primary">Reset recovery codes</a>
+    <h5>Your current 2FA</h5>
+    <ul>
+        <li><a asp-action="Disable2faWarning">Disable 2FA</a></li>
+        <li><a asp-action="GenerateRecoveryCodes">Reset recovery codes</a></li>
+    </ul>
 }
 
 <h5 class="mt-4">Authenticator app</h5>
-@if(!Model.HasAuthenticator)
-{
-    <a asp-action="EnableAuthenticator" class="btn btn-primary">Add authenticator app</a>
-}
-else
-{
-    <a asp-action="EnableAuthenticator" class="btn btn-primary">Configure authenticator app</a>
-    <a asp-action="ResetAuthenticatorWarning" class="btn btn-primary">Reset authenticator key</a>
-}
+<ul>
+
+    @if(!Model.HasAuthenticator)
+    {
+        <li><a asp-action="EnableAuthenticator">Add authenticator app</a></li>
+    }
+    else
+    {
+        <li><a asp-action="EnableAuthenticator">Configure authenticator app</a></li>
+        <li><a asp-action="ResetAuthenticatorWarning">Reset authenticator key</a></li>
+    }
+</ul>
 
 @section Scripts {
     @await Html.PartialAsync("_ValidationScriptsPartial")

BTCPayServer/Views/Manage/U2FAuthentication.cshtml

@@ -1,17 +1,17 @@
 @model BTCPayServer.U2F.Models.U2FAuthenticationViewModel
 @{
-    ViewData.SetActivePageAndTitle(ManageNavPages.U2F, "Manage your registered U2F devices");
+    ViewData.SetActivePageAndTitle(ManageNavPages.U2F, "Registered U2F devices");
 }
 
 <partial name="_StatusMessage" />
-<h4>Registered U2F Devices</h4>
+
 <form asp-action="AddU2FDevice" method="get">
-    <table class="table table-lg">
+    <table class="table table-lg mb-4">
         <thead>
-        <tr>
-            <th >Name</th>
-            <th class="text-right">Actions</th>
-        </tr>
+            <tr>
+                <th>Name</th>
+                <th class="text-right">Actions</th>
+            </tr>
         </thead>
         <tbody>
         @foreach (var device in Model.Devices)
@@ -19,8 +19,7 @@
             <tr>
                 <td>@device.Name</td>
                 <td class="text-right" >
-                        <a asp-action="RemoveU2FDevice" asp-route-id="@device.Id">Remove</a>
-               
+                    <a asp-action="RemoveU2FDevice" asp-route-id="@device.Id">Remove</a>
                 </td>
             </tr>
         }
@@ -32,16 +31,16 @@
                 </td>
             </tr>
         }
-        <tr class="bg-gray">
-            <td>
-                <input type="text" class="form-control" name="Name" placeholder="New Device Name"/>
-            </td>
-            <td>
-                <div class="pull-right">
-                    <button type="submit" class="btn btn-primary">Add New Device</button>
-                </div>
-            </td>
-        </tr>
+
         </tbody>
     </table>
+    <div class="form-inline">
+        <div class="form-group">
+            <input type="text" class="form-control" name="Name" placeholder="New Device Name"/>
+            <button type="submit" class="btn btn-primary ml-2">
+                <span class="fa fa-plus"></span>
+                Add New Device
+            </button>
+        </div>
+    </div>
 </form>

BTCPayServer/wwwroot/main/site.css

@@ -47,6 +47,10 @@ a {
     transition-property: background, color;
 }
 
+ol {
+   padding-left: 1.125em;
+}
+
 ul {
     padding-left: 1em;
 }