mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-03-03 09:29:10 +01:00
Recovery seed page improvements
This commit is contained in:
Dennis Reimann
parent
6bc5c05cf3
commit
7c1d0f2e8f
2 changed files with 41 additions and 93 deletions
|
|
@ -4,8 +4,18 @@
|
|||
ViewData["Title"] = "Your recovery phrase";
|
||||
}
|
||||
|
||||
<style>
|
||||
@@media (min-width: 476px) { ol#recovery-phrase {max-height:16em;} }
|
||||
@@media (min-width: 768px) { ol#recovery-phrase {max-height:12em;} }
|
||||
@@media (min-width: 1200px) { ol#recovery-phrase {max-height:8em;} }
|
||||
form#recovery-confirmation button { position: absolute; bottom:0; left:50%; width:200px; margin-left:-100px; }
|
||||
form#recovery-confirmation button:not([disabled]) { display: none; }
|
||||
form#recovery-confirmation input:checked ~ button[disabled] { display: none; }
|
||||
form#recovery-confirmation input:checked + button:not([disabled]) { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="col-lg-10 text-center">
|
||||
<partial name="_StatusMessage" />
|
||||
|
||||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||||
|
|
@ -18,40 +28,8 @@
|
|||
<span class="d-sm-block">The words below are called your recovery phrase.</span>
|
||||
<span class="d-sm-block"><strong>Write them down on a piece of paper in the exact order.</strong></span>
|
||||
</p>
|
||||
<p style="max-width:32em;margin-left:auto;margin-right:auto;">
|
||||
They are the only backup of your private keys and allow you to restore your wallet.
|
||||
If you lose or write down the recovery phrase incorrectly you will permanently lose access of your funds.
|
||||
Double-check the spelling and position of each recovery phrase word.
|
||||
</p>
|
||||
@if (!Model.IsStored)
|
||||
{
|
||||
<p class="mt-3 mb-3">
|
||||
<strong>
|
||||
The recovery phrase will only be shown before being wiped from the server.
|
||||
</strong>
|
||||
</p>
|
||||
}
|
||||
<p class="mt-3 mb-0">
|
||||
Do not photograph the recovery seed.
|
||||
Do not keep it a digital format.
|
||||
Do not share them with anybody.
|
||||
</p>
|
||||
@if (!string.IsNullOrEmpty(Model.Passphrase))
|
||||
{
|
||||
<p class="mt-3 mb-0">Please make sure to also write down your passphrase.</p>
|
||||
}
|
||||
</div>
|
||||
<style>
|
||||
|
||||
@@media (min-width: 476px) { ol#recovery-phrase {max-height:16em;} }
|
||||
@@media (min-width: 768px) { ol#recovery-phrase {max-height:12em;} }
|
||||
@@media (min-width: 1200px) { ol#recovery-phrase {max-height:8em;} }
|
||||
form#recovery-confirmation button { position: absolute; bottom:0; left:50%; width:200px; margin-left:-100px; }
|
||||
form#recovery-confirmation button:not([disabled]) { display: none; }
|
||||
form#recovery-confirmation input:checked ~ button[disabled] { display: none; }
|
||||
form#recovery-confirmation input:checked + button:not([disabled]) { display: inline-block; }
|
||||
</style>
|
||||
<ol id="recovery-phrase" data-mnemonic="@Model.Mnemonic" class="my-5 d-flex flex-column flex-wrap justify-content-center align-items-center p-0">
|
||||
<ol id="recovery-phrase" data-mnemonic="@Model.Mnemonic" class="my-5 d-flex flex-column flex-wrap justify-content-center align-items-center text-left p-0">
|
||||
@foreach (var word in Model.Words)
|
||||
{
|
||||
<li class="ml-4 px-3 py-2 text-secondary" style="flex: 0 1;min-width:10em;">
|
||||
|
|
@ -59,7 +37,35 @@
|
|||
</li>
|
||||
}
|
||||
</ol>
|
||||
<form id="recovery-confirmation" action="@Model.ReturnUrl" class="d-flex align-items-start justify-content-center" style="padding-bottom: 80px">
|
||||
<div class="lead text-center" style="max-width:36em;margin-left:auto;margin-right:auto;">
|
||||
@if (Model.IsStored)
|
||||
{
|
||||
<p>
|
||||
The recovery phrase is a backup that allows you to restore your wallet in case of a server crash.
|
||||
If you lose it or write it down incorrectly, you may permanently lose access to your funds.
|
||||
Do not photograph it. Do not store it digitally.
|
||||
</p>
|
||||
<p>
|
||||
<strong>The recovery phrase will also be stored on a server as a hot wallet.</strong>
|
||||
</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p>
|
||||
The recovery phrase allows you to access and restore your wallet.
|
||||
If you lose it or write it down incorrectly, you will permanently lose access to your funds.
|
||||
Do not photograph the recovery phrase and do not store it digitally.
|
||||
</p>
|
||||
<p>
|
||||
<strong>The recovery phrase will permanently be erased from the server.</strong>
|
||||
</p>
|
||||
}
|
||||
@if (!string.IsNullOrEmpty(Model.Passphrase))
|
||||
{
|
||||
<p class="mt-3 mb-0">Please make sure to also write down your passphrase.</p>
|
||||
}
|
||||
</div>
|
||||
<form id="recovery-confirmation" action="@Model.ReturnUrl" class="d-flex align-items-start justify-content-center" style="margin-top:4rem;padding-bottom: 80px">
|
||||
<label class="form-check-label lead order-2" for="confirm">I have written down my recovery phrase and stored it in a secure location</label>
|
||||
<input type="checkbox" class="mt-2 mr-3 order-1" id="confirm">
|
||||
<button type="submit" class="btn btn-primary btn-lg px-5 order-3" id="submit">Done</button>
|
||||
|
|
|
|||
|
|
@ -21,52 +21,14 @@
|
|||
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;
|
||||
}
|
||||
|
||||
@@media screen and (min-width: 768px) {
|
||||
.content-wrapper {
|
||||
padding: 75px 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>
|
||||
|
|
@ -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")
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue