mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-21 22:11:48 +01:00
UI: Redesign Recovery Seed view (#4793)
* 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
GitHub
parent
d861537d9a
commit
8635fcfe84
1 changed files with 67 additions and 61 deletions
|
|
@ -6,13 +6,17 @@
|
|||
|
||||
@section PageHeadContent {
|
||||
<style>
|
||||
@@media (min-width: 476px) { ol#RecoveryPhrase {max-height:16em;} }
|
||||
@@media (min-width: 768px) { ol#RecoveryPhrase {max-height:12em;} }
|
||||
@@media (min-width: 1200px) { ol#RecoveryPhrase {max-height:8em;} }
|
||||
main { max-width: 800px; margin: 0 auto; text-align: center;}
|
||||
|
||||
form#RecoveryConfirmation button { position: absolute; bottom:0; left:50%; width:200px; margin-left:-100px; }
|
||||
form#RecoveryConfirmation button:not([disabled]) { display: none; }
|
||||
form#RecoveryConfirmation input:checked ~ button[disabled] { display: none; }
|
||||
form#RecoveryConfirmation input:checked + button:not([disabled]) { display: inline-block; }
|
||||
|
||||
svg.icon.icon-warning {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
|
|
@ -20,69 +24,71 @@
|
|||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-lg-10 text-center">
|
||||
<partial name="_StatusMessage" />
|
||||
|
||||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||||
<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 phrase</h1>
|
||||
<main>
|
||||
<partial name="_StatusMessage" />
|
||||
<div class="d-inline-flex flex-column align-items-center justify-content-center">
|
||||
<div class="text-warning mb-3">
|
||||
<vc:icon symbol="warning" />
|
||||
</div>
|
||||
<div class="lead text-center">
|
||||
<p>
|
||||
<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>
|
||||
</div>
|
||||
<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">
|
||||
@foreach (var word in Model.Words)
|
||||
{
|
||||
<li class="ms-4 px-3 py-2 text-secondary" style="flex: 0 1;min-width:10em;">
|
||||
<span class="text-dark h5">@word</span>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
<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)
|
||||
<h1 class="text-center text-warning mb-3">
|
||||
Secure your recovery phrase
|
||||
</h1>
|
||||
</div>
|
||||
<div class="lead text-center">
|
||||
<p class="mb-0">
|
||||
The combination of words below are called your recovery phrase.
|
||||
The recovery phrase allows you to access and restore your wallet.
|
||||
Write them down on a piece of paper in the exact order:
|
||||
</p>
|
||||
</div>
|
||||
<ol id="RecoveryPhrase" data-mnemonic="@Model.Mnemonic" class="my-5 mx-auto">
|
||||
@foreach (var word in Model.Words)
|
||||
{
|
||||
<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">
|
||||
<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>
|
||||
<li class="text-start text-muted py-2">
|
||||
<span class="text-dark h5">@word</span>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
<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
|
||||
{
|
||||
<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>
|
||||
@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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue