Login/register/error view updates

This commit is contained in:
Dennis Reimann
2020-07-19 01:20:12 +02:00
parent 892ea0e9af
commit 0e8cd20533
12 changed files with 195 additions and 241 deletions

View File

@@ -6,6 +6,7 @@ namespace BTCPayServer.Models.AccountViewModels
{
[Required]
[EmailAddress]
[Display(Name = "Email address")]
public string Email { get; set; }
}
}

View File

@@ -6,6 +6,7 @@ namespace BTCPayServer.Models.AccountViewModels
{
[Required]
[EmailAddress]
[Display(Name = "Email address")]
public string Email { get; set; }
[Required]

View File

@@ -3,82 +3,74 @@
@inject BTCPayServer.HostedServices.CssThemeManager themeManager
@{
ViewData["Title"] = "Log in";
ViewData["Headline"] = "Welcome to your BTCPay Server";
Layout = "_LayoutSimple";
}
<style>
.col-head,
.col-account-form {
max-width: 40em;
}
</style>
<div class="row justify-content-center mb-2">
<div class="col text-center">
<a asp-controller="Home" 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>
<div class="row justify-content-center">
<div class="col col-account-form">
@if (TempData.HasStatusMessage())
{
<partial name="_StatusMessage"/>
}
</div>
</div>
<p class="lead-login px-3">
BTCPay Server is a self-hosted, open-source cryptocurrency payment processor.
It is secure, private, censorship-resistant and free.
</p>
<div class="modal-content">
<div class="modal-header">
<div class="row justify-content-center mb-5">
<div class="col account-form">
<div class="modal-content border-0">
<div class="modal-header align-items-center border-0 pb-0">
<h4 class="modal-title">Sign In</h4>
@if (env.OnionUrl != null)
{
<div class="text-center">
<a href="@env.OnionUrl" target="_onion" class="btn btn-sm btn-outline-onion d-inline-flex align-items-center p-2" data-clipboard="@env.OnionUrl">
<img src="~/img/icons/onion-purple.svg" height="20" class="mr-2" asp-append-version="true" />
Copy Tor URL
</a>
</div>
}
</div>
<div class="modal-body">
<form asp-route-returnurl="@ViewData["ReturnUrl"]" method="post">
<fieldset disabled="@(ViewData.ContainsKey("disabled") ? "disabled" : null)" >
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<label for="Email" class="input-group-text"><span class="input-group-addon fa fa-user"></span></label>
</div>
<input asp-for="Email" class="form-control" placeholder="Email" required="required" />
</div>
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" required />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<label for="Password" class="input-group-text"><span class="input-group-addon fa fa-lock"></span></label>
</div>
<input asp-for="Password" class="form-control" placeholder="Password" required="required" />
<div class="d-flex justify-content-between">
<label asp-for="Password"></label>
<a asp-action="ForgotPassword">Forgot password?</a>
</div>
<input asp-for="Password" class="form-control" required />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary btn-block btn-lg" id="LoginButton">Sign in</button>
</div>
<p class="text-right mt-4 mb-2">
<a asp-action="ForgotPassword" class="text-secondary">Forgot your password?</a>
</p>
</fieldset>
</form>
@if (themeManager.ShowRegister)
{
<p class="text-center my-2">
<a id="Register" class="ml-1" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">Create your account</a>
</p>
}
</div>
@if (themeManager.ShowRegister)
{
<div class="modal-footer">
Don't have an account?
<a id="Register" class="btn btn-secondary ml-3" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">Sign Up</a>
</div>
}
</div>
@if (env.OnionUrl != null)
{
<div class="mt-5 mb-2 text-center">
<a href="@env.OnionUrl" target="_onion" class="btn btn-outline-onion d-inline-flex align-items-center" data-clipboard="@env.OnionUrl">
<img src="~/img/icons/onion-purple.svg" height="24" class="mr-2" asp-append-version="true" />
Copy Tor URL
</a>
</div>
}
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col">
<partial name="_BTCPaySupporters"/>
</div>
</div>

View File

@@ -2,69 +2,61 @@
@inject BTCPayServer.Services.BTCPayServerEnvironment env
@{
ViewData["Title"] = "Register";
ViewData["Headline"] = "Welcome to your BTCPay Server";
Layout = "_LayoutSimple";
}
<style>
.col-head,
.col-account-form {
max-width: 40em;
}
</style>
<div class="row justify-content-center mb-2">
<div class="col text-center">
<a asp-controller="Home" 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>
<div class="row justify-content-center">
<div class="col col-account-form">
@if (TempData.HasStatusMessage())
{
<partial name="_StatusMessage"/>
}
</div>
</div>
<p class="lead-login px-3">
BTCPay Server is a self-hosted, open-source cryptocurrency payment processor.
It is secure, private, censorship-resistant and free.
</p>
<!-- We want to center the dialog box in case we are not using the Welcome layout -->
<div class="modal-content">
<div class="modal-header">
<div class="row justify-content-center mb-5">
<div class="col account-form">
<div class="modal-content border-0">
<div class="modal-header align-items-center border-0 pb-0">
<h4 class="modal-title">Create account</h4>
@if (env.OnionUrl != null)
{
<div class="text-center">
<a href="@env.OnionUrl" target="_onion" class="btn btn-sm btn-outline-onion d-inline-flex align-items-center p-2" data-clipboard="@env.OnionUrl">
<img src="~/img/icons/onion-purple.svg" height="20" class="mr-2" asp-append-version="true" />
Copy Tor URL
</a>
</div>
}
</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">
<div class="input-group">
<div class="input-group-prepend">
<label for="Email" class="input-group-text">
<span class="input-group-addon fa fa-user"></span>
</label>
</div>
<input asp-for="Email" class="form-control" placeholder="Email" required="required"/>
</div>
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" required />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<label for="Password" class="input-group-text">
<span class="input-group-addon fa fa-lock"></span>
</label>
</div>
<input asp-for="Password" class="form-control" placeholder="Password" required="required"/>
</div>
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" required />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<label for="ConfirmPassword" class="input-group-text">
<span class="input-group-addon fa fa-lock"></span>
</label>
</div>
<input asp-for="ConfirmPassword" class="form-control" placeholder="Repeat password" required="required"/>
</div>
<label asp-for="ConfirmPassword"></label>
<input asp-for="ConfirmPassword" class="form-control" required />
<span asp-validation-for="ConfirmPassword" class="text-danger"></span>
</div>
@if (ViewData["AllowIsAdmin"] is true)
@@ -75,27 +67,22 @@
<span asp-validation-for="IsAdmin" class="text-danger"></span>
</div>
}
<div class="form-group">
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary btn-block btn-lg" id="RegisterButton">Create account</button>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
Already have an account?
<a id="Login" class="btn btn-secondary ml-3" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]">Login</a>
<p class="text-center my-2">
<a id="Login" class="ml-1" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]">Log in</a>
</p>
</div>
</div>
@if (env.OnionUrl != null)
{
<div class="mt-5 mb-2 text-center">
<a href="@env.OnionUrl" target="_onion" class="btn btn-outline-onion d-inline-flex align-items-center" data-clipboard="@env.OnionUrl">
<img src="~/img/icons/onion-purple.svg" height="24" class="mr-2" asp-append-version="true" />
Copy Tor URL
</a>
</div>
}
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col">
<partial name="_BTCPaySupporters"/>
</div>
</div>

View File

@@ -1,8 +1,18 @@
@{
ViewData["Headline"] = "404 - Page not found";
ViewData["Title"] = "404 - Page not found";
}
<p class="lead-login">
<div class="row justify-content-center mb-2">
<div class="col text-center">
<a asp-controller="Home" 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">@ViewData["Title"]</h1>
</div>
</div>
<p class="lead text-center">
This is like searching for a person more beautiful than <a href="https://twitter.com/NicolasDorier" target="_blank">Nicolas Dorier</a>.
<br /><br />
<a href="https://twitter.com/NicolasDorier" target="_blank">
@@ -13,3 +23,9 @@
<br /><br />
You can always try <a href="/">navigating back to home</a>.
</p>
<div class="row justify-content-center mt-5">
<div class="col">
<partial name="_BTCPaySupporters"/>
</div>
</div>

View File

@@ -1,8 +1,18 @@
@{
ViewData["Headline"] = "429 - Too Many Requests";
ViewData["Title"] = "429 - Too Many Requests";
}
<p class="lead-login">
<div class="row justify-content-center mb-2">
<div class="col text-center">
<a asp-controller="Home" 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">@ViewData["Title"]</h1>
</div>
</div>
<p class="lead text-center">
Please send requests slower. Or face the wrath of <a href="https://twitter.com/r0ckstardev" target="_blank">Vin Diesel</a>.
<br /><br />
<a href="https://twitter.com/r0ckstardev" target="_blank">
@@ -13,3 +23,9 @@
<br /><br />
Slowly <a href="/">navigate back to home</a>.
</p>
<div class="row justify-content-center mt-5">
<div class="col">
<partial name="_BTCPaySupporters"/>
</div>
</div>

View File

@@ -1,8 +1,18 @@
@{
ViewData["Headline"] = "500 - Internal Server Error";
ViewData["Title"] = "500 - Internal Server Error";
}
<p class="lead-login">
<div class="row justify-content-center mb-2">
<div class="col text-center">
<a asp-controller="Home" 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">@ViewData["Title"]</h1>
</div>
</div>
<p class="lead text-center">
Whoops, something really went wrong! <a href="https://twitter.com/mrkukks">Mr Kukks</a> is so sorry.
<br /><br />
<a href="https://twitter.com/mrkukks" target="_blank">
@@ -13,3 +23,9 @@
<br /><br />
<a href="/">Navigate back to home</a>.
</p>
<div class="row justify-content-center mt-5">
<div class="col">
<partial name="_BTCPaySupporters"/>
</div>
</div>

View File

@@ -1,15 +1,25 @@
@using System.Net
@model int?
@{
ViewData["Headline"] = "Generic Error occurred";
ViewData["Title"] = "Generic Error occurred";
if (Model.HasValue)
{
var httpCode = (HttpStatusCode)Model.Value;
ViewData["Headline"] = $"{(int)httpCode} - {httpCode.ToString()}";
ViewData["Title"] = $"{(int)httpCode} - {httpCode.ToString()}";
}
}
<p class="lead-login">
<div class="row justify-content-center mb-2">
<div class="col text-center">
<a asp-controller="Home" 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">@ViewData["Title"]</h1>
</div>
</div>
<p class="lead text-center">
Generic error occurred, HTTP Code: @Model
<br /><br />
Consult server log for more details.
@@ -17,3 +27,9 @@
<a href="/">Navigate back to home</a>.
<br /><br />
</p>
<div class="row justify-content-center mt-5">
<div class="col">
<partial name="_BTCPaySupporters"/>
</div>
</div>

View File

@@ -1,73 +1,44 @@
<style>
.lead-h {
font-family: Montserrat;
font-style: normal;
margin-bottom: 30px;
font-weight: 600;
font-size: 14px;
line-height: 18px;
/* identical to box height, or 129% */
letter-spacing: 0.1em;
text-transform: uppercase;
}
</style>
<h3 class="lead-h text-center mb-3">
BTCPayServer Supporters
<a href="https://foundation.btcpayserver.org/" target="_blank">
<span class="fa fa-question-circle-o" title="More information..."></span>
</a>
</h3>
<div class="row justify-content-center">
<div class="figure p-3">
<a href="https://kraken.com" target="_blank">
<img src="~/img/kraken.svg" alt="Sponsor Kraken" height="75" asp-append-version="true"/>
<h5 class="text-center font-weight-normal mb-2">
Our Supporters
</h5>
<div class="row justify-content-center mb-2">
<div class="p-3 text-center">
<a href="https://kraken.com" target="_blank" class="text-muted small">
<img src="~/img/kraken.svg" alt="Sponsor Kraken" height="50" asp-append-version="true"/>
<span class="d-block mt-3">Kraken</span>
</a>
<div class="figure-caption text-center">
<a href="https://kraken.com" class="text-muted small" target="_blank">Kraken</a>
</div>
</div>
<div class="figure p-3">
<a href="https://twitter.com/sqcrypto" target="_blank">
<img src="~/img/squarecrypto.svg" alt="Sponsor Square Crypto" height="75" asp-append-version="true"/>
<div class="p-3 text-center">
<a href="https://twitter.com/sqcrypto" target="_blank" class="text-muted small">
<img src="~/img/squarecrypto.svg" alt="Sponsor Square Crypto" height="50" asp-append-version="true"/>
<span class="d-block mt-3">Square Crypto</span>
</a>
<div class="figure-caption text-center">
<a href="https://twitter.com/sqcrypto" class="text-muted small" target="_blank">Square Crypto</a>
</div>
</div>
<div class="figure p-3">
<a href="https://www.btse.com" target="_blank">
<img src="~/img/btse.svg" alt="Sponsor BTSE" height="75" asp-append-version="true"/>
<div class="p-3 text-center">
<a href="https://www.btse.com" target="_blank" class="text-muted small">
<img src="~/img/btse.svg" alt="Sponsor BTSE" height="50" asp-append-version="true"/>
<span class="d-block mt-3">BTSE</span>
</a>
<div class="figure-caption text-center">
<a href="https://www.btse.com/" class="text-muted small" target="_blank">BTSE</a>
</div>
</div>
<div class="figure p-3">
<a href="https://www.dglab.com/en/" target="_blank">
<img src="~/img/dglab.svg" alt="Sponsor DG lab" height="75" asp-append-version="true"/>
<div class="p-3 text-center">
<a href="https://www.dglab.com/en/" target="_blank" class="text-muted small">
<img src="~/img/dglab.svg" alt="Sponsor DG lab" height="50" asp-append-version="true"/>
<span class="d-block mt-3">DG Lab</span>
</a>
<div class="figure-caption text-center">
<a href="https://www.dglab.com/en/" class="text-muted small" target="_blank">DG Lab</a>
</div>
</div>
<div class="figure p-3">
<a href="https://www.okcoin.com/" target="_blank">
<img src="~/img/okcoin.svg" alt="Sponsor OKCoin" height="75" asp-append-version="true"/>
<div class="p-3 text-center">
<a href="https://www.okcoin.com/" target="_blank" class="text-muted small">
<img src="~/img/okcoin.svg" alt="Sponsor OKCoin" height="50" asp-append-version="true"/>
<span class="d-block mt-3">OKCoin</span>
</a>
<div class="figure-caption text-center">
<a href="https://www.okcoin.com/" class="text-muted small" target="_blank">OKCoin</a>
</div>
</div>
<div class="figure p-3">
<a href="https://acinq.co/" target="_blank">
<img src="~/img/acinq-logo.svg" alt="Sponsor ACINQ" height="75" asp-append-version="true"/>
<div class="p-3 text-center">
<a href="https://acinq.co/" target="_blank" class="text-muted small">
<img src="~/img/acinq-logo.svg" alt="Sponsor ACINQ" height="50" asp-append-version="true"/>
<span class="d-block mt-3">ACINQ</span>
</a>
<div class="figure-caption text-center">
<a href="https://acinq.co/" class="text-muted small" target="_blank">ACINQ</a>
</div>
</div>
</div>
<div class="row justify-content-center mt-3">
<a href="https://foundation.btcpayserver.org" target="_blank" class="text-secondary text-center">View all supporters</a>
</div>
<p class="text-center">
<a href="https://foundation.btcpayserver.org" target="_blank">View all supporters</a>
</p>

View File

@@ -21,31 +21,6 @@
padding: 0 2rem;
}
.head-logo {
height: 70px;
margin-bottom: 1rem;
}
.lead-title {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 1.2;
max-width: 17em;
letter-spacing: .1em;
}
.lead-login {
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 1.8;
letter-spacing: 0.1em;
text-align: center;
}
@@media screen and (min-width: 768px) {
.content-wrapper {
padding: 75px 0;
@@ -54,19 +29,6 @@
.col-head {
flex-direction: row;
}
.lead-title {
font-size: 34px;
}
.lead-login {
font-size: 18px;
}
.head-logo {
height: 80px;
margin: 0 30px 0 0;
}
}
</style>
</head>
@@ -74,28 +36,8 @@
<section class="content-wrapper">
<!-- Dummy navbar-brand, hackish way to keep test AssertNoError passing -->
<div class="navbar-brand d-none"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col col-head">
<a asp-controller="Home" asp-action="Index">
<img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="head-logo" asp-append-version="true"/>
</a>
<h1 class="lead-title text-uppercase m-0">@ViewData["Headline"]</h1>
</div>
</div>
<hr class="primary my-4 d-block" />
@RenderBody()
<hr class="primary my-5 d-block" />
<div class="row justify-content-center">
<div class="col">
<partial name="_BTCPaySupporters"/>
</div>
</div>
</div>
</section>
@await Html.PartialAsync("_ValidationScriptsPartial")

View File

@@ -195,24 +195,25 @@ pre {
background: none;
}
.account-form {
max-width: 36em;
}
.btn-outline-onion {
color: #7D4698;
background-image: none;
background-color: transparent;
border-color: #e6d5ee;
border: 0;
}
.btn-outline-onion:hover {
color: #fff;
background-color: #7D4698;
border-color: #7D4698;
}
.btn-outline-onion:focus,
.btn-outline-onion.focus {
color: #fff;
background-color: #7D4698;
border-color: #7D4698;
box-shadow: 0 0 0 0.2rem #e6d5ee;
}

View File

@@ -39,11 +39,6 @@
filter: none;
}
.btn-outline-onion {
color: #e6d5ee !important;
border-color: #59316B !important;
}
.btn-outline-onion img {
filter: contrast(0) brightness(200%) !important;
}