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
This commit is contained in:
d11n 2022-01-21 03:10:03 +01:00 committed by GitHub
parent c338846d63
commit 6a20d9036c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 192 additions and 251 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -1,36 +1,26 @@
@model ForgotPasswordViewModel
@{
ViewData["Title"] = "Forgot your password?";
Layout = "_LayoutSimple";
Layout = "_LayoutSignedOut";
}
<partial name="_StatusMessage" />
<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>
<div class="row justify-content-center">
<div class="col-md-6 section-heading">
<h3>@ViewData["Title"]</h3>
<hr class="primary">
<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>
</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>
<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>
</form>
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary btn-lg w-100">Submit</button>
</div>
</div>
</form>
@section PageFootContent {
<partial name="_ValidationScriptsPartial" />
}
<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>

View file

@ -1,12 +1,10 @@
@{
ViewData["Title"] = "Email sent!";
Layout = "_LayoutSignedOut";
}
<div class="row">
<div class="col-md-4">
<h4>@ViewData["Title"]</h4>
<p>
Please check your email to reset your password.
</p>
</div>
</div>
<p>Please check your email to reset your password.</p>
<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>

View file

@ -1,80 +1,49 @@
@using BTCPayServer.Abstractions.Contracts
@model LoginViewModel
@inject BTCPayServer.Services.BTCPayServerEnvironment env
@inject ISettingsRepository _settingsRepository
@{
ViewData["Title"] = "Log in";
Layout = "_LayoutSimple";
ViewData["Title"] = "Sign in";
Layout = "_LayoutSignedOut";
}
<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>
<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>
<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">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" class="form-control" required tabindex="1" autofocus/>
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<div class="d-flex justify-content-between">
<label asp-for="Password" class="form-label"></label>
<a asp-action="ForgotPassword" tabindex="5">Forgot password?</a>
</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">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" class="form-control" required tabindex="1" autofocus/>
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<div class="d-flex justify-content-between">
<label asp-for="Password" class="form-label"></label>
<a asp-action="ForgotPassword" tabindex="5">Forgot password?</a>
</div>
<div class="input-group d-flex">
<input asp-for="Password" class="form-control" required tabindex="2"/>
</div>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group mt-4">
<div class="btn-group w-100">
<button type="submit" class="btn btn-primary btn-lg w-100" id="LoginButton" tabindex="3"><span class="ps-3">Sign in</span></button>
<button type="button" class="btn btn-outline-primary btn-lg w-auto only-for-js" data-bs-toggle="modal" data-bs-target="#scanModal" title="Scan Login code with camera" tabindex="4"><i class="fa fa-camera"></i></button>
</div>
</div>
</fieldset>
</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>
@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 class="input-group d-flex">
<input asp-for="Password" class="form-control" required tabindex="2"/>
</div>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group mt-4">
<div class="btn-group w-100">
<button type="submit" class="btn btn-primary btn-lg w-100" id="LoginButton" tabindex="3"><span class="ps-3">Sign in</span></button>
<button type="button" class="btn btn-outline-primary btn-lg w-auto only-for-js" data-bs-toggle="modal" data-bs-target="#scanModal" title="Scan Login code with camera" tabindex="4"><i class="fa fa-camera"></i></button>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col">
<partial name="_BTCPaySupporters"/>
</div>
</div>
<partial name="CameraScanner"/>
</fieldset>
</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>
@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>
}
@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"/>

View file

@ -1,80 +1,42 @@
@model RegisterViewModel
@inject BTCPayServer.Services.BTCPayServerEnvironment env
@{
ViewData["Title"] = "Register";
Layout = "_LayoutSimple";
ViewData["Title"] = "Create account";
ViewBag.ShowLeadText = true;
Layout = "_LayoutSignedOut";
}
@section PageFootContent {
<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">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" class="form-control" required autofocus />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="form-label"></label>
<input asp-for="Password" class="form-control" required />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ConfirmPassword" class="form-label"></label>
<input asp-for="ConfirmPassword" class="form-control" required />
<span asp-validation-for="ConfirmPassword" class="text-danger"></span>
</div>
@if (env.CheatMode)
{
<div class="form-group form-check">
<input asp-for="IsAdmin" type="checkbox" class="form-check-input"/>
<label asp-for="IsAdmin" class="form-check-label"></label>
<span asp-validation-for="IsAdmin" class="text-danger"></span>
</div>
}
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary btn-lg w-100" id="RegisterButton">Create account</button>
</div>
</fieldset>
</form>
<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>
</div>
<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">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" class="form-control" required autofocus />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col">
<partial name="_BTCPaySupporters"/>
</div>
</div>
<div class="form-group">
<label asp-for="Password" class="form-label"></label>
<input asp-for="Password" class="form-control" required />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ConfirmPassword" class="form-label"></label>
<input asp-for="ConfirmPassword" class="form-control" required />
<span asp-validation-for="ConfirmPassword" class="text-danger"></span>
</div>
@if (env.CheatMode)
{
<div class="form-group form-check">
<input asp-for="IsAdmin" type="checkbox" class="form-check-input"/>
<label asp-for="IsAdmin" class="form-check-label"></label>
<span asp-validation-for="IsAdmin" class="text-danger"></span>
</div>
}
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary btn-lg w-100" id="RegisterButton">Create account</button>
</div>
</fieldset>
</form>
<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>

View file

@ -1,72 +1,39 @@
@model BTCPayServer.Models.AccountViewModels.SetPasswordViewModel
@{
ViewData["Title"] = "Reset password";
Layout = "_LayoutSimple";
Layout = "_LayoutSignedOut";
}
@section PageFootContent {
<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"/>
@if (Model.EmailSetInternally)
{
<input asp-for="Email" type="hidden"/>
<div class="form-group">
<label asp-for="Email" class="form-label"></label>
<input type="text" disabled value="@Model.Email" class="form-control"/>
<span asp-validation-for="Email" class="text-danger"></span>
</div>
}
else
{
<div class="form-group">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" value="@Model.Email" class="form-control"/>
<span asp-validation-for="Email" class="text-danger"></span>
</div>
}
<div class="form-group">
<label asp-for="Password" class="form-label"></label>
<input asp-for="Password" class="form-control"/>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ConfirmPassword" class="form-label"></label>
<input asp-for="ConfirmPassword" class="form-control"/>
<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>
</div>
<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"/>
@if (Model.EmailSetInternally)
{
<input asp-for="Email" type="hidden"/>
<div class="form-group">
<label asp-for="Email" class="form-label"></label>
<input type="text" disabled value="@Model.Email" class="form-control"/>
<span asp-validation-for="Email" class="text-danger"></span>
</div>
}
else
{
<div class="form-group">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" value="@Model.Email" class="form-control"/>
<span asp-validation-for="Email" class="text-danger"></span>
</div>
}
<div class="form-group">
<label asp-for="Password" class="form-label"></label>
<input asp-for="Password" class="form-control"/>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col">
<partial name="_BTCPaySupporters"/>
<div class="form-group">
<label asp-for="ConfirmPassword" class="form-label"></label>
<input asp-for="ConfirmPassword" class="form-control"/>
<span asp-validation-for="ConfirmPassword" class="text-danger"></span>
</div>
</div>
<button type="submit" class="btn btn-primary w-100 btn-lg" id="SetPassword">Set Password</button>
</form>

View file

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