Refactor signed out action views (login, register, etc.) (#3333)

* Refactor signed out action views (login, register, etc.)

Extract common layout and some more cleanups.

* Optimize supporters display on mobile

* Optimize footer display on mobile

BTCPayServer/Views/Shared/_BTCPaySupporters.cshtml

@@ -19,7 +19,7 @@
 </div>
 
 <div class="row justify-content-center mb-2">
-    <div class="p-3 text-center flex-grow-1 flex-sm-grow-0" style="flex-basis:80px;">
+    <div class="col-5 col-md-auto py-3 px-md-4 text-center">
         <a href="https://kraken.com" target="_blank" class="text-muted small" rel="noreferrer noopener">
             <svg role="img" width="50" height="50">
                 <use href="#supporter-kraken"></use>
@@ -27,7 +27,7 @@
             <span class="d-block mt-3">Kraken</span>
         </a>
     </div>
-    <div class="p-3 text-center flex-grow-1 flex-sm-grow-0" style="flex-basis:120px;">
+    <div class="col-5 col-md-auto py-3 px-md-4 text-center">
         <a href="https://spiral.xyz" target="_blank" class="text-muted small" rel="noreferrer noopener">
             <svg role="img" width="50" height="50">
                 <use href="#supporter-spiral"></use>
@@ -35,7 +35,7 @@
             <span class="d-block mt-3">Spiral</span>
         </a>
     </div>
-    <div class="p-3 text-center flex-grow-1 flex-sm-grow-0" style="flex-basis:116px;">
+    <div class="col-5 col-md-auto py-3 px-md-4 text-center">
         <a href="https://www.bailliegifford.com" target="_blank" class="text-muted small" rel="noreferrer noopener">
             <svg role="img" width="80" height="50">
                 <use href="#supporter-bailliegifford"></use>
@@ -43,7 +43,7 @@
             <span class="d-block mt-3">Baillie&nbsp;Gifford</span>
         </a>
     </div>
-    <div class="p-3 text-center flex-grow-1 flex-sm-grow-0" style="flex-basis:110px;">
+    <div class="col-5 col-md-auto py-3 px-md-4 text-center">
         <a href="https://www.pnxbet.com" target="_blank" class="text-muted small" rel="noreferrer noopener">
             <svg role="img" width="75" height="50">
                 <use href="#supporter-pnxbet"></use>

BTCPayServer/Views/Shared/_Footer.cshtml

@@ -4,21 +4,21 @@
     <div class="container">
         <div class="d-flex flex-wrap flex-column justify-content-between flex-xl-row py-1">
             <div class="d-flex flex-wrap justify-content-center justify-content-xl-start mb-2 mb-xl-0">
-                <a href="https://github.com/btcpayserver/btcpayserver" class="d-flex align-items-center me-4" target="_blank" rel="noreferrer noopener">
+                <a href="https://github.com/btcpayserver/btcpayserver" class="d-flex align-items-center m-3 m-sm-0 me-sm-4" target="_blank" rel="noreferrer noopener">
                     <vc:icon symbol="github"/>
                     <span style="margin-left:.4rem">Github</span>
                 </a>
-                <a href="https://chat.btcpayserver.org/" class="d-flex align-items-center me-4" target="_blank" rel="noreferrer noopener">
+                <a href="https://chat.btcpayserver.org/" class="d-flex align-items-center m-3 m-sm-0 me-sm-4" target="_blank" rel="noreferrer noopener">
                     <vc:icon symbol="mattermost"/>
                     <span style="margin-left:.4rem">Mattermost</span>
                 </a>
-                <a href="https://twitter.com/BtcpayServer" class="d-flex align-items-center" target="_blank" rel="noreferrer noopener">
+                <a href="https://twitter.com/BtcpayServer" class="d-flex align-items-center m-3 m-sm-0" target="_blank" rel="noreferrer noopener">
                     <vc:icon symbol="twitter"/>
                     <span style="margin-left:.4rem">Twitter</span>
                 </a>
                 @if (!string.IsNullOrEmpty(_env.OnionUrl) && !Context.Request.IsOnion())
                 {
-                    <a href="@_env.OnionUrl" class="d-flex align-items-center ms-4" target="_onion" rel="noreferrer noopener" role="button" data-clipboard="@_env.OnionUrl" style="min-width:9em;">
+                    <a href="@_env.OnionUrl" class="d-flex align-items-center m-3 m-sm-0 ms-sm-4" target="_onion" rel="noreferrer noopener" role="button" data-clipboard="@_env.OnionUrl" style="min-width:9em;">
                         <vc:icon symbol="onion"/>
                         <span style="margin-left:.4rem" data-clipboard-confirm="Copied URL ✔">Copy Tor URL</span>
                     </a>

BTCPayServer/Views/Shared/_LayoutSignedOut.cshtml

@@ -0,0 +1,59 @@
+@{
+    Layout = "_LayoutSimple";
+    ViewBag.ShowLeadText ??= false;
+}
+
+@section PageHeadContent {
+    <style>
+        .account-form {
+            max-width: 35em;
+            margin: 0 auto var(--btcpay-space-xl);
+            padding: 2rem;
+            background: var(--btcpay-bg-tile);
+            border-radius: var(--btcpay-border-radius);
+        }
+        
+        .account-form h4 {
+            margin-bottom: 1.5rem;
+        }
+    </style>
+    @await RenderSectionAsync("PageHeadContent", false)
+}
+
+@section PageFootContent {
+    <partial name="_ValidationScriptsPartial" />
+    @await RenderSectionAsync("PageFootContent", false)
+}
+
+<div class="row justify-content-center mb-2">
+    <div class="col text-center">
+        <a asp-controller="UIHome" asp-action="Index" tabindex="-1">
+            <img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="mb-4" height="70" asp-append-version="true"/>
+        </a>
+
+        <h1 class="h2 mb-3">Welcome to your BTCPay&nbsp;Server</h1>
+        @if (ViewBag.ShowLeadText)
+        {
+            <p class="lead">
+                <span class="d-sm-block">A self-hosted, open-source cryptocurrency payment processor.</span>
+                <span class="d-sm-block">It is secure, private, censorship-resistant and free.</span>
+            </p>
+        }
+
+        <partial name="_StatusMessage"/>
+    </div>
+</div>
+
+<div class="account-form">
+    <h4>@ViewData["Title"]</h4>
+    @RenderBody()
+</div>
+
+<div class="row justify-content-center mt-5">
+    <div class="col">
+        <partial name="_BTCPaySupporters"/>
+    </div>
+</div>
+
+
+

BTCPayServer/Views/UIAccount/ForgotPassword.cshtml

@@ -1,36 +1,26 @@
 @model ForgotPasswordViewModel
 @{
     ViewData["Title"] = "Forgot your password?";
-    Layout = "_LayoutSimple";
+    Layout = "_LayoutSignedOut";
 }
 
-<partial name="_StatusMessage" />
+<p>
-
-<div class="row justify-content-center">
-    <div class="col-md-6 section-heading">
-        <h3>@ViewData["Title"]</h3>
-        <hr class="primary">
-    </div>
-</div>
-<div class="row justify-content-center">
-    <div class="col-md-6">
-        <form asp-action="ForgotPassword" method="post">
-            <h4>Start password reset</h4>
-            <p>
     We all forget passwords every now and then. Just provide email address tied to
     your account and we'll start the process of helping you recover your account.
-            </p>
+</p>
+
+<form asp-action="ForgotPassword" method="post">
     <div asp-validation-summary="All" class="text-danger"></div>
     <div class="form-group">
         <label asp-for="Email" class="form-label"></label>
         <input asp-for="Email" class="form-control" />
         <span asp-validation-for="Email" class="text-danger"></span>
     </div>
-            <button type="submit" class="btn btn-primary">Submit</button>
+    <div class="form-group mt-4">
-        </form>
+        <button type="submit" class="btn btn-primary btn-lg w-100">Submit</button>
     </div>
-</div>
+</form>
 
-@section PageFootContent {
+<p class="text-center mt-2 mb-0">
-    <partial name="_ValidationScriptsPartial" />
+    <a id="Login" style="font-size:1.15rem" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]">Log in</a>
-}
+</p>

BTCPayServer/Views/UIAccount/ForgotPasswordConfirmation.cshtml

@@ -1,12 +1,10 @@
 @{
     ViewData["Title"] = "Email sent!";
+    Layout = "_LayoutSignedOut";
 }
 
-<div class="row">
+<p>Please check your email to reset your password.</p>
-    <div class="col-md-4">
+
-        <h4>@ViewData["Title"]</h4>
+<p class="text-center mt-2 mb-0">
-        <p>
+    <a id="Login" style="font-size:1.15rem" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]">Log in</a>
-            Please check your email to reset your password.
+</p>
-        </p>
-    </div>
-</div>

BTCPayServer/Views/UIAccount/Login.cshtml

@@ -1,32 +1,12 @@
 @using BTCPayServer.Abstractions.Contracts
 @model LoginViewModel
-@inject BTCPayServer.Services.BTCPayServerEnvironment env
 @inject ISettingsRepository _settingsRepository
 @{
-    ViewData["Title"] = "Log in";
+    ViewData["Title"] = "Sign in";
-    Layout = "_LayoutSimple";
+    Layout = "_LayoutSignedOut";
 }
 
-<div class="row justify-content-center mb-2">
+<form asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" id="login-form" asp-action="Login">
-    <div class="col text-center">
-        <a asp-controller="UIHome" asp-action="Index" tabindex="-1">
-            <img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="mb-4" height="70" asp-append-version="true"/>
-        </a>
-
-        <h1 class="h2 mb-3">Welcome to your BTCPay&nbsp;Server</h1>
-
-        <partial name="_StatusMessage"/>
-    </div>
-</div>
-
-<div class="row justify-content-center mb-5">
-    <div class="col account-form">
-        <div class="modal-content border-0 p-3">
-            <div class="modal-header border-0 py-2">
-                <h4 class="modal-title">Sign In</h4>
-            </div>
-            <div class="modal-body">
-                <form asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" id="login-form" asp-action="Login">
     <fieldset disabled="@(ViewData.ContainsKey("disabled") ? "disabled" : null)">
         <div asp-validation-summary="ModelOnly" class="text-danger"></div>
         <div class="form-group">
@@ -51,30 +31,19 @@
             </div>
         </div>
     </fieldset>
-                </form>
+</form>
-                <form asp-action="LoginWithCode" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" id="logincode-form">
+<form asp-action="LoginWithCode" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" id="logincode-form">
     <input asp-for="LoginCode" type="hidden" class="form-control"/>
-                </form>
+</form>
-                @if (!(await _settingsRepository.GetPolicies()).LockSubscription)
+@if (!(await _settingsRepository.GetPolicies()).LockSubscription)
-                {
+{
     <p class="text-center mt-2 mb-0">
         <a id="Register" style="font-size:1.15rem" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" tabindex="4">Create your account</a>
     </p>
-                }
+}
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="row justify-content-center mt-5">
-    <div class="col">
-        <partial name="_BTCPaySupporters"/>
-    </div>
-</div>
-<partial name="CameraScanner"/>
 
 @section PageFootContent {
-    <partial name="_ValidationScriptsPartial"/>
+    <partial name="CameraScanner"/>
 
     <bundle name="wwwroot/bundles/camera-bundle.min.js"></bundle>
     <link href="~/vendor/vue-qrcode-reader/vue-qrcode-reader.css" rel="stylesheet" asp-append-version="true"/>

BTCPayServer/Views/UIAccount/Register.cshtml

@@ -1,39 +1,12 @@
 @model RegisterViewModel
 @inject BTCPayServer.Services.BTCPayServerEnvironment env
 @{
-    ViewData["Title"] = "Register";
+    ViewData["Title"] = "Create account";
-    Layout = "_LayoutSimple";
+    ViewBag.ShowLeadText = true;
+    Layout = "_LayoutSignedOut";
 }
 
-@section PageFootContent {
+<form asp-route-returnUrl="@ViewData["ReturnUrl"]" asp-route-logon="true" method="post">
-    <partial name="_ValidationScriptsPartial" />
-}
-
-<div class="row justify-content-center mb-2">
-    <div class="col text-center">
-        <a asp-controller="UIHome" asp-action="Index">
-            <img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="mb-4" height="70" asp-append-version="true"/>
-        </a>
-
-        <h1 class="h2 mb-3">Welcome to your BTCPay&nbsp;Server</h1>
-
-        <p class="lead">
-            <span class="d-sm-block">A self-hosted, open-source cryptocurrency payment processor.</span>
-            <span class="d-sm-block">It is secure, private, censorship-resistant and free.</span>
-        </p>
-
-        <partial name="_StatusMessage" />
-    </div>
-</div>
-
-<div class="row justify-content-center mb-5">
-    <div class="col account-form">
-        <div class="modal-content border-0 p-3">
-            <div class="modal-header border-0 py-2">
-                <h4 class="modal-title">Create account</h4>
-            </div>
-            <div class="modal-body">
-                <form asp-route-returnUrl="@ViewData["ReturnUrl"]" asp-route-logon="true" method="post">
     <fieldset disabled="@(ViewData.ContainsKey("disabled") ? "disabled" : null)" >
         <div asp-validation-summary="ModelOnly" class="text-danger"></div>
         <div class="form-group">
@@ -63,18 +36,7 @@
             <button type="submit" class="btn btn-primary btn-lg w-100" id="RegisterButton">Create account</button>
         </div>
     </fieldset>
-                </form>
+</form>
-                <p class="text-center mt-2 mb-0">
+<p class="text-center mt-2 mb-0">
     <a id="Login" style="font-size:1.15rem" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]">Log in</a>
-                </p>
+</p>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="row justify-content-center mt-5">
-    <div class="col">
-        <partial name="_BTCPaySupporters"/>
-    </div>
-</div>
-

BTCPayServer/Views/UIAccount/SetPassword.cshtml

@@ -1,33 +1,10 @@
 @model BTCPayServer.Models.AccountViewModels.SetPasswordViewModel
 @{
     ViewData["Title"] = "Reset password";
-    Layout = "_LayoutSimple";
+    Layout = "_LayoutSignedOut";
 }
 
-@section PageFootContent {
+<form method="post" asp-action="SetPassword">
-    <partial name="_ValidationScriptsPartial" />
-}
-
-<div class="row justify-content-center mb-2">
-    <div class="col text-center">
-        <a asp-controller="UIHome" asp-action="Index">
-            <img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="mb-4" height="70" asp-append-version="true"/>
-        </a>
-
-        <h1 class="h2 mb-3">Welcome to your BTCPay&nbsp;Server</h1>
-
-        <partial name="_StatusMessage" />
-    </div>
-</div>
-
-<div class="row justify-content-center mb-5">
-    <div class="col account-form">
-        <div class="modal-content border-0 p-3">
-            <div class="modal-header align-items-center border-0 py-2">
-                <h3 class="modal-title">Set Password</h3>
-            </div>
-            <div class="modal-body">
-                <form method="post" asp-action="SetPassword">
     <div asp-validation-summary="All" class="text-danger"></div>
     <input asp-for="Code" type="hidden"/>
     <input asp-for="EmailSetInternally" type="hidden"/>
@@ -59,14 +36,4 @@
         <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
     </div>
     <button type="submit" class="btn btn-primary w-100 btn-lg" id="SetPassword">Set Password</button>
-                </form>
+</form>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="row justify-content-center mt-5">
-    <div class="col">
-        <partial name="_BTCPaySupporters"/>
-    </div>
-</div>

BTCPayServer/wwwroot/main/site.css

@@ -118,10 +118,6 @@ h2 small .fa-question-circle-o {
     align-self: center;
 }
 
-.account-form {
-    max-width: 36em;
-}
-
 .content-wrapper {
     padding: 50px 0;
 }