mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-02-22 22:25:28 +01:00
Code Issues Projects Releases Packages Wiki Activity

UI: Redesign Recovery Seed view (#4793)

Browse source 
* Improve recovery seed backup page

* Fix errors from Selenium tests (Sequence contains no elements)

* Revert previous commit

* Improve recovery seed backup page

* Recovery phrase UI update

* recovery seed UI format

* Improve word order

* One column version

---------

Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
This commit is contained in:
Chukwuleta Tobechi 2023-03-24 16:09:53 +01:00 • committed by GitHub
parent d861537d9a
commit 8635fcfe84
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
BTCPayServer/Views/UIHome/RecoverySeedBackup.cshtml
View file

@ -6,13 +6,17 @@
@section PageHeadContent { @section PageHeadContent {
<style> <style>
@@media (min-width: 476px) { ol#RecoveryPhrase {max-height:16em;} } main { max-width: 800px; margin: 0 auto; text-align: center;}
@@media (min-width: 768px) { ol#RecoveryPhrase {max-height:12em;} }
@@media (min-width: 1200px) { ol#RecoveryPhrase {max-height:8em;} }
form#RecoveryConfirmation button { position: absolute; bottom:0; left:50%; width:200px; margin-left:-100px; } form#RecoveryConfirmation button { position: absolute; bottom:0; left:50%; width:200px; margin-left:-100px; }
form#RecoveryConfirmation button:not([disabled]) { display: none; } form#RecoveryConfirmation button:not([disabled]) { display: none; }
form#RecoveryConfirmation input:checked ~ button[disabled] { display: none; } form#RecoveryConfirmation input:checked ~ button[disabled] { display: none; }
form#RecoveryConfirmation input:checked + button:not([disabled]) { display: inline-block; } form#RecoveryConfirmation input:checked + button:not([disabled]) { display: inline-block; }
svg.icon.icon-warning {
width: 2.5rem;
height: 2.5rem;
}
</style> </style>
} }
@ -20,69 +24,71 @@
<partial name="_ValidationScriptsPartial" /> <partial name="_ValidationScriptsPartial" />
} }
<div class="row justify-content-md-center"> <main>
<div class="col-lg-10 text-center"> <partial name="_StatusMessage" />
<partial name="_StatusMessage" /> <div class="d-inline-flex flex-column align-items-center justify-content-center">
<div class="text-warning mb-3">
<div class="d-flex flex-column align-items-center justify-content-center"> <vc:icon symbol="warning" />
<span class="fa fa-info-circle align-self-center p-3" style="font-size:4em;"></span>
<h1 class="text-center text-primary mb-5">Secure your recovery&nbsp;phrase</h1>
</div> </div>
<div class="lead text-center"> <div class="lead text-center">
<p> <h1 class="text-center text-warning mb-3">
<span class="d-sm-block">The words below are called your recovery phrase.</span> Secure your recovery&nbsp;phrase
<span class="d-sm-block"><strong>Write them down on a piece of paper in the exact order.</strong></span> </h1>
</p> </div>
</div> <div class="lead text-center">
<ol id="RecoveryPhrase" data-mnemonic="@Model.Mnemonic" class="my-5 d-flex flex-column flex-wrap justify-content-center align-items-center text-start p-0"> <p class="mb-0">
@foreach (var word in Model.Words) The combination of words below are called your recovery phrase.
{ The recovery phrase allows you to access and restore your wallet.
<li class="ms-4 px-3 py-2 text-secondary" style="flex: 0 1;min-width:10em;"> Write them down on a piece of paper in the exact order:
<span class="text-dark h5">@word</span> </p>
</li> </div>
} <ol id="RecoveryPhrase" data-mnemonic="@Model.Mnemonic" class="my-5 mx-auto">
</ol> @foreach (var word in Model.Words)
<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 the 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>
@if (Model.RequireConfirm)
{ {
<form id="RecoveryConfirmation" action="@Url.EnsureLocal(Model.ReturnUrl)" class="position-relative d-flex align-items-start justify-content-center" style="margin-top:4rem;padding-bottom: 80px" rel="noreferrer noopener"> <li class="text-start text-muted py-2">
<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> <span class="text-dark h5">@word</span>
<input type="checkbox" class="me-3 order-1 form-check-input" id="confirm" style="margin-top:.35rem;flex-shrink:0"> </li>
<button type="submit" class="btn btn-primary btn-lg px-5 order-3" id="submit">Done</button> }
<button type="submit" class="btn btn-primary btn-lg px-5 order-3" disabled>Done</button> </ol>
</form> <div class="lead text-center">
@if (Model.IsStored)
{
<p>
<span>The recovery phrase is a backup that allows you to restore your wallet in case of a server crash.</span>
<span>If you lose it or write it down incorrectly, you may permanently lose access to your funds.</span>
<span>Do not photograph it. Do not store it digitally.</span>
</p>
<p class="text-warning">
<strong>The recovery phrase will also be stored on the server as a hot wallet.</strong>
</p>
} }
else else
{ {
<a href="@Url.EnsureLocal(Model.ReturnUrl)" class="btn btn-primary btn-lg mt-3 px-5 order-3" id="proceed" rel="noreferrer noopener">Done</a> <p>
<span>If you lose it or write it down incorrectly, you will permanently lose access to your funds.</span>
<span>Do not photograph the recovery phrase, and do not store it digitally.</span>
</p>
<br />
<p class="text-warning">
<strong>The recovery phrase will be permanently 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> </div>
</div> @if (Model.RequireConfirm)
{
<form id="RecoveryConfirmation" action="@Url.EnsureLocal(Model.ReturnUrl)" class="position-relative d-flex align-items-start justify-content-center" style="padding:20px 0 100px" rel="noreferrer noopener">
<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="me-3 order-1 form-check-input" id="confirm" style="margin-top:.35rem;flex-shrink:0">
<button type="submit" class="btn btn-primary btn-lg px-5 order-3" id="submit">Done</button>
<button type="submit" class="btn btn-primary btn-lg px-5 order-3" disabled>Done</button>
</form>
}
else
{
<a href="@Url.EnsureLocal(Model.ReturnUrl)" class="btn btn-primary btn-lg mt-3 px-5 order-3" id="proceed" rel="noreferrer noopener">Done</a>
}
</main>