Recovery seed page improvements

This commit is contained in:
Dennis Reimann 2020-07-16 19:09:45 +02:00
parent 188774f30a
commit dbf6676115
No known key found for this signature in database
GPG key ID: 5009E1797F03F8D0
3 changed files with 47 additions and 43 deletions

View file

@ -305,7 +305,7 @@ namespace BTCPayServer.Controllers
TempData.SetStatusMessageModel(new StatusMessageModel()
{
Severity = StatusMessageModel.StatusSeverity.Success,
Html = $"Your wallet has been generated. Please store your seed securely!"
Html = $"<span class='text-centered'>Your wallet has been generated.</span>"
});
var vm = new RecoverySeedBackupViewModel()
{

View file

@ -1145,11 +1145,6 @@ namespace BTCPayServer.Controllers
}
else
{
TempData.SetStatusMessageModel(new StatusMessageModel()
{
Severity = StatusMessageModel.StatusSeverity.Success,
Html = $"Please store your seed securely!"
});
var recoveryVm = new RecoverySeedBackupViewModel()
{
CryptoCode = walletId.CryptoCode,

View file

@ -1,57 +1,66 @@
@model RecoverySeedBackupViewModel
@{
Layout = "_LayoutSimple";
ViewData["Title"] = "Save your recovery phrase";
ViewData["Title"] = "Your recovery phrase";
}
<div class="row justify-content-md-center">
<div class="col-md-9 col-lg-8">
<div class="col-lg-10">
<partial name="_StatusMessage" />
<h1 class="text-center text-primary mb-5">@ViewData["Title"]</h1>
<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>
<div class="row">
<div class="col-12 col-sm-2 d-flex align-items-center justify-content-center">
<span class="fa fa-warning align-self-center p-3" style="font-size:3.5em;"></span>
</div>
<div class="col-12 col-sm-10 lead">
<p>
The words below are called your recovery phrase.
Please save these words securely.
They will allow you to recover your wallet.
</p>
@if (!Model.IsStored)
{
<p class="mt-3 mb-3">The recovery phrase will only be shown before being wiped from the server.</p>
}
<p class="mt-3 mb-0">
Do not photograph or store this in a non air-gapped digital format.
Anyone with access to your recovery phrase can steal your funds.
</p>
@if (!string.IsNullOrEmpty(Model.Passphrase))
{
<p class="mt-3 mb-0">Please make also sure to store your passphrase.</p>
}
</div>
<h1 class="text-center text-primary mb-5">Secure your recovery&nbsp;phrase</h1>
</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>
<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">
<span class="d-md-block">Do not photograph or store this in a non air-gapped digital format.</span>
<span class="d-md-block">Anyone with access to your recovery phrase can steal your funds.</span>
</p>
@if (!string.IsNullOrEmpty(Model.Passphrase))
{
<p class="mt-3 mb-0">Please make sure to also write down your passphrase.</p>
}
</div>
<style>
<ol id="recovery-phrase" data-mnemonic="@Model.Mnemonic" class="my-5 d-flex flex-wrap justify-content-center align-items-center p-0" style="max-width:800px">
@@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">
@foreach (var word in Model.Words)
{
<li class="ml-4 p-3 text-secondary" style="flex: 0 1 11em">
<li class="ml-4 px-3 py-2 text-secondary" style="flex: 0 1;min-width:10em;">
<span class="text-dark h5">@word</span>
</li>
}
</ol>
<style>
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; }
</style>
<form id="recoveryConfirmation" action="@Model.ReturnUrl" class="d-flex align-items-center justify-content-center" style="padding-bottom: 80px">
<label class="form-check-label lead order-2" for="confirm">I have saved my recovery phrase in a secure location</label>
<input type="checkbox" class="mr-3 order-1" id="confirm">
<form id="recovery-confirmation" action="@Model.ReturnUrl" class="d-flex align-items-start justify-content-center" style="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>
<button type="submit" class="btn btn-primary btn-lg px-5 order-3" disabled>Done</button>
</form>