mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-22 14:22:40 +01:00
Rework login and register views
This commit is contained in:
Dennis Reimann
parent
9b9cb83a06
commit
ea8f121cb0
3 changed files with 186 additions and 182 deletions
|
|
@ -6,70 +6,73 @@
|
|||
ViewData["Headline"] = "Welcome to your BTCPay Server";
|
||||
Layout = "_LayoutSimple";
|
||||
}
|
||||
@if (TempData.HasStatusMessage())
|
||||
{
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center">
|
||||
<partial name="_StatusMessage"/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<p class="lead-login">
|
||||
BTCPay Server is a self-hosted, open-source cryptocurrency payment processor. It is secure, private, censorship-resistant and free.
|
||||
</p>
|
||||
<style>
|
||||
.col-head,
|
||||
.col-account-form {
|
||||
max-width: 40em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal-dialog modal-login">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Sign In</h4>
|
||||
</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>
|
||||
<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>
|
||||
<span asp-validation-for="Password" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary btn-block btn-lg" id="LoginButton">Sign in</button>
|
||||
</div>
|
||||
<p class="hint-text"><a asp-action="ForgotPassword">Forgot your password?</a></p>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
@if (themeManager.ShowRegister)
|
||||
<div class="row justify-content-center">
|
||||
<div class="col col-account-form">
|
||||
@if (TempData.HasStatusMessage())
|
||||
{
|
||||
<div class="modal-footer"><span>Don't have an account? <a id="Register" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">Create one</a></span></div>
|
||||
<partial name="_StatusMessage"/>
|
||||
}
|
||||
|
||||
<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">
|
||||
<h4 class="modal-title">Sign In</h4>
|
||||
@if (env.OnionUrl != null)
|
||||
{
|
||||
<a href="@env.OnionUrl">
|
||||
<img src="~/img/icons/Onion.svg" height="24" asp-append-version="true" />
|
||||
</a>
|
||||
}
|
||||
</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>
|
||||
<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>
|
||||
<span asp-validation-for="Password" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary btn-block btn-lg" id="LoginButton">Sign in</button>
|
||||
</div>
|
||||
<p class="hint-text"><a asp-action="ForgotPassword">Forgot your password?</a></p>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
@if (themeManager.ShowRegister)
|
||||
{
|
||||
<div class="modal-footer">
|
||||
<div>Don't have an account?</div>
|
||||
<a id="Register" class="btn btn-secondary ml-2" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">Sign Up</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (env.OnionUrl != null)
|
||||
{
|
||||
<div class="input-group form-group">
|
||||
<div class="input-group-prepend">
|
||||
<a href="@env.OnionUrl" class="input-group-text">
|
||||
<span class="input-group-addon"></span>
|
||||
<img src="~/img/icons/Onion_Color.svg" height="16" asp-append-version="true" />
|
||||
</a>
|
||||
</div>
|
||||
<input class="form-control" onClick="this.select();" type="text" style="font-size:0.75em;" value="@env.OnionUrl" readonly>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,93 +3,92 @@
|
|||
@{
|
||||
ViewData["Title"] = "Register";
|
||||
ViewData["Headline"] = "Welcome to your BTCPay Server";
|
||||
|
||||
var useBasicLayout = ViewData["UseBasicLayout"] is true;
|
||||
Layout = useBasicLayout ? "_Layout" : "_LayoutSimple";
|
||||
Layout = "_LayoutSimple";
|
||||
}
|
||||
@if (TempData.HasStatusMessage())
|
||||
{
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center">
|
||||
|
||||
<style>
|
||||
.col-head,
|
||||
.col-account-form {
|
||||
max-width: 40em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col col-account-form">
|
||||
@if (TempData.HasStatusMessage())
|
||||
{
|
||||
<partial name="_StatusMessage"/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
<p class="lead-login">
|
||||
BTCPay Server is a self-hosted, open-source cryptocurrency payment processor. It is secure, private, censorship-resistant and free.
|
||||
</p>
|
||||
<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-dialog @(useBasicLayout ? "modal-dialog-centered" : "")">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Create account</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form asp-route-returnUrl="@ViewData["ReturnUrl"]" asp-route-logon="@ViewData["Logon"]" 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>
|
||||
<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>
|
||||
<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>
|
||||
<span asp-validation-for="ConfirmPassword" class="text-danger"></span>
|
||||
</div>
|
||||
@if (ViewData["AllowIsAdmin"] is true)
|
||||
{
|
||||
<!-- We want to center the dialog box in case we are not using the Welcome layout -->
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Create account</h4>
|
||||
@if (env.OnionUrl != null)
|
||||
{
|
||||
<a href="@env.OnionUrl">
|
||||
<img src="~/img/icons/Onion.svg" height="24" asp-append-version="true" />
|
||||
</a>
|
||||
}
|
||||
</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="IsAdmin"></label>
|
||||
<input asp-for="IsAdmin" type="checkbox" class="form-check-inline"/>
|
||||
<span asp-validation-for="IsAdmin" class="text-danger"></span>
|
||||
<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>
|
||||
<span asp-validation-for="Email" class="text-danger"></span>
|
||||
</div>
|
||||
}
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary btn-block btn-lg" id="RegisterButton">Create account</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</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>
|
||||
<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>
|
||||
<span asp-validation-for="ConfirmPassword" class="text-danger"></span>
|
||||
</div>
|
||||
@if (ViewData["AllowIsAdmin"] is true)
|
||||
{
|
||||
<div class="form-group">
|
||||
<label asp-for="IsAdmin"></label>
|
||||
<input asp-for="IsAdmin" type="checkbox" class="form-check-inline"/>
|
||||
<span asp-validation-for="IsAdmin" class="text-danger"></span>
|
||||
</div>
|
||||
}
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary btn-block btn-lg" id="RegisterButton">Create account</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer"><span>Already have an account? <a id="Login" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]">Login</a></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!useBasicLayout && env.OnionUrl != null)
|
||||
{
|
||||
<div class="input-group form-group">
|
||||
<div class="input-group-prepend">
|
||||
<a href="@env.OnionUrl" class="input-group-text">
|
||||
<span class="input-group-addon"></span>
|
||||
<img src="~/img/icons/Onion_Color.svg" height="16" asp-append-version="true" />
|
||||
</a>
|
||||
</div>
|
||||
<input class="form-control" onClick="this.select();" type="text" style="font-size:0.75em;" value="@env.OnionUrl" readonly>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,7 @@
|
|||
<link href="~/main/fonts/Montserrat.css" rel="stylesheet" asp-append-version="true">
|
||||
<style>
|
||||
.content-wrapper {
|
||||
padding: 70px 0;
|
||||
}
|
||||
|
||||
@@media screen and (min-width: 768px) {
|
||||
.content-wrapper {
|
||||
padding: 100px 0;
|
||||
}
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.col-head {
|
||||
|
|
@ -24,13 +18,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@media screen and (min-width: 768px) {
|
||||
.col-head {
|
||||
text-align: left;
|
||||
flex-direction: row;
|
||||
}
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.head-logo {
|
||||
|
|
@ -38,62 +26,76 @@
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@media screen and (min-width: 768px) {
|
||||
.head-logo {
|
||||
height: 100px;
|
||||
margin-bottom: 0;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.lead-title {
|
||||
font-family: Montserrat;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
/* or 150% */
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
@@media screen and (min-width: 768px) {
|
||||
.lead-title {
|
||||
font-size: 40px;
|
||||
}
|
||||
max-width: 17em;
|
||||
letter-spacing: .1em;
|
||||
}
|
||||
|
||||
.lead-login {
|
||||
font-family: Montserrat;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
line-height: 33px;
|
||||
/* or 183% */
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
@@media screen and (min-width: 768px) {
|
||||
.content-wrapper {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.col-head {
|
||||
text-align: left;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.lead-title {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.lead-login {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.head-logo {
|
||||
height: 80px;
|
||||
margin: 0 30px 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="content-wrapper">
|
||||
<!-- Dummy navbar-brand, hackish way to keep test AssertNoError passing -->
|
||||
<div class="navbar-brand" style="display:none;"></div>
|
||||
<div class="navbar-brand d-none"></div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 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">@ViewData["Headline"]</h1>
|
||||
<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" style="display:block;margin:20px auto;" />
|
||||
<hr class="primary my-4 d-block" />
|
||||
|
||||
@RenderBody()
|
||||
|
||||
<hr class="primary" style="display:block;margin:20px auto;" />
|
||||
<hr class="primary my-5 d-block" />
|
||||
|
||||
<partial name="_BTCPaySupporters"/>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col">
|
||||
<partial name="_BTCPaySupporters"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@await Html.PartialAsync("_ValidationScriptsPartial")
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue