From 906ecc021b68d8e1073699c58f940f2b6e6551fa Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Wed, 8 Jul 2020 19:19:29 +0200
Subject: [PATCH] Improve 2FA views

---
 BTCPayServer/Views/Manage/Disable2fa.cshtml   | 18 +++----
 .../Views/Manage/EnableAuthenticator.cshtml   | 39 +++++++++------
 .../Views/Manage/GenerateRecoveryCodes.cshtml |  8 +--
 .../Views/Manage/ResetAuthenticator.cshtml    | 10 ++--
 .../Manage/TwoFactorAuthentication.cshtml     | 50 ++++++++++++-------
 5 files changed, 74 insertions(+), 51 deletions(-)

diff --git a/BTCPayServer/Views/Manage/Disable2fa.cshtml b/BTCPayServer/Views/Manage/Disable2fa.cshtml
index dd887ef5e..0e6db3466 100644
--- a/BTCPayServer/Views/Manage/Disable2fa.cshtml
+++ b/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>
diff --git a/BTCPayServer/Views/Manage/EnableAuthenticator.cshtml b/BTCPayServer/Views/Manage/EnableAuthenticator.cshtml
index 54c0d7e7d..69be42229 100644
--- a/BTCPayServer/Views/Manage/EnableAuthenticator.cshtml
+++ b/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">
diff --git a/BTCPayServer/Views/Manage/GenerateRecoveryCodes.cshtml b/BTCPayServer/Views/Manage/GenerateRecoveryCodes.cshtml
index 20d7f58e7..0e1b83dc1 100644
--- a/BTCPayServer/Views/Manage/GenerateRecoveryCodes.cshtml
+++ b/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>
diff --git a/BTCPayServer/Views/Manage/ResetAuthenticator.cshtml b/BTCPayServer/Views/Manage/ResetAuthenticator.cshtml
index 350def4eb..027811e12 100644
--- a/BTCPayServer/Views/Manage/ResetAuthenticator.cshtml
+++ b/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>
diff --git a/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml b/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml
index e599b2b92..53bb2567e 100644
--- a/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml
+++ b/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")