Skip to content

Commit

Permalink
Refactor signed out action views (login, register, etc.) (#3333)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
dennisreimann committed Jan 21, 2022
1 parent c338846 commit 6a20d90
Show file tree
Hide file tree
Showing 9 changed files with 191 additions and 250 deletions.
8 changes: 4 additions & 4 deletions BTCPayServer/Views/Shared/_BTCPaySupporters.cshtml
Expand Up @@ -19,31 +19,31 @@
</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>
</svg>
<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>
</svg>
<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>
</svg>
<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>
Expand Down
8 changes: 4 additions & 4 deletions BTCPayServer/Views/Shared/_Footer.cshtml
Expand Up @@ -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>
Expand Down
59 changes: 59 additions & 0 deletions 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>



44 changes: 17 additions & 27 deletions BTCPayServer/Views/UIAccount/ForgotPassword.cshtml
@@ -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>
14 changes: 6 additions & 8 deletions BTCPayServer/Views/UIAccount/ForgotPasswordConfirmation.cshtml
@@ -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>
101 changes: 35 additions & 66 deletions BTCPayServer/Views/UIAccount/Login.cshtml
@@ -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>
</div>

<div class="row justify-content-center mt-5">
<div class="col">
<partial name="_BTCPaySupporters"/>
</div>
</div>
<partial name="CameraScanner"/>
<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>
}

@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"/>
Expand Down

0 comments on commit 6a20d90

Please sign in to comment.