From 8fc593a73ef92247a7d971387b9d46d43eafaf91 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Wed, 8 Jul 2020 19:18:40 +0200
Subject: [PATCH] Improve secondary login view

---
 BTCPayServer/Views/Account/LoginWith2fa.cshtml  | 16 ++++++++--------
 BTCPayServer/Views/Account/LoginWithU2F.cshtml  | 17 ++++++++++-------
 .../Views/Account/SecondaryLogin.cshtml         | 12 +++---------
 3 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/BTCPayServer/Views/Account/LoginWith2fa.cshtml b/BTCPayServer/Views/Account/LoginWith2fa.cshtml
index 2759e8378..b145b3b33 100644
--- a/BTCPayServer/Views/Account/LoginWith2fa.cshtml
+++ b/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>
diff --git a/BTCPayServer/Views/Account/LoginWithU2F.cshtml b/BTCPayServer/Views/Account/LoginWithU2F.cshtml
index 682854b98..d98eb838f 100644
--- a/BTCPayServer/Views/Account/LoginWithU2F.cshtml
+++ b/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>
 
diff --git a/BTCPayServer/Views/Account/SecondaryLogin.cshtml b/BTCPayServer/Views/Account/SecondaryLogin.cshtml
index 1d985d167..9b2760645 100644
--- a/BTCPayServer/Views/Account/SecondaryLogin.cshtml
+++ b/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">