Recovery seed page improvements

BTCPayServer/Controllers/StoresController.BTCLike.cs

@@ -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()
                 {

BTCPayServer/Controllers/WalletsController.cs

@@ -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,

BTCPayServer/Views/Home/RecoverySeedBackup.cshtml

@@ -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">
+            <h1 class="text-center text-primary mb-5">Secure your recovery&nbsp;phrase</h1>
-            <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">
+        <div class="lead text-center">
             <p>
-                    The words below are called your recovery phrase.
+                <span class="d-sm-block">The words below are called your recovery phrase.</span>
-                    Please save these words securely.
+                <span class="d-sm-block"><strong>Write them down on a piece of paper in the exact order.</strong></span>
-                    They will allow you to recover your wallet.
+            </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">The recovery phrase will only be shown before being wiped from the server.</p>
+                <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 or store this in a non air-gapped digital format.
+                <span class="d-md-block">Do not photograph or store this in a non air-gapped digital format.</span>
-                    Anyone with access to your recovery phrase can steal your funds.
+                <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 also sure to store your passphrase.</p>
+                <p class="mt-3 mb-0">Please make sure to also write down your passphrase.</p>
             }
         </div>
-        </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 id="recovery-confirmation" action="@Model.ReturnUrl" class="d-flex align-items-start justify-content-center" style="padding-bottom: 80px">
-            form#recoveryConfirmation button { position: absolute; bottom:0; left:50%; width:200px; margin-left:-100px; }
+            <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>
-            form#recoveryConfirmation button:not([disabled]) { display: none; }
+            <input type="checkbox" class="mt-2 mr-3 order-1" id="confirm">
-            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">
             <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>