Create print view for recovery codes

app/assets/stylesheets/components/_totp-setup.scss

@@ -1,6 +1,6 @@
 %totp-input {
   font-family: "Monaco", "Inconsolata", "Cascadia Code", "Consolas", monospace;
-  width: 86px;
+  width: 100px;
 }
 
 .totp-setup {
@@ -43,6 +43,32 @@
   &__code-field {
     @extend %totp-input;
   }
+
+  &__recovery {
+    &-container {
+      max-width: 455px;
+    }
+
+    &-icon {
+      font-size: .75in;
+    }
+
+    &-title {
+      text-align: left;
+    }
+
+    &-codes {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      padding: 0;
+
+      li {
+        list-style-type: none;
+        font-size: 16px;
+        text-align: center;
+      }
+    }
+  }
 }
 
 #user_otp_attempt {

app/views/auth/two_factor_authentication.haml

@@ -7,7 +7,7 @@
           %h1.mb-3.mt-0= t('views.auth.2fa.title')
           = bootstrap_form_for(resource, as: resource_name, url: session_path(resource_name), method: :post) do |f|
 
-            = f.text_field :otp_attempt, autofocus: true, label: t('views.auth.2fa.otp_field')
+            = f.text_field :otp_attempt, autofocus: true, label: 'Please enter the code from your authenticator app'
 
             = f.submit t('views.sessions.create'), class: 'btn btn-primary mt-3 mb-3'
 

app/views/settings/security/recovery_keys.haml

@@ -1,6 +1,23 @@
-%p= t('views.auth.2fa.setup.success')
+.container.container--main
+  .row.justify-content-center
+    .col-md-5.totp-setup__recovery-container
+      .card
+        .card-body
+          .d-none.d-print-block.totp-setup__recovery-icon
+            %i.fa.fa-comments
+          %h1.totp-setup__recovery-title Your Retrospring recovery codes
 
-%ul
-  - @recovery_keys.each do |key|
-    %li
-      %code= key.code
+          %ul.totp-setup__recovery-codes
+            - @recovery_keys.each do |key|
+              %li
+                %code= key.code
+          .d-none.d-print-block= "These codes were generated #{Time.now.strftime("%F at %T %Z")}"
+        .card-footer.d-print-none
+          We recommend storing these in a password manager or printing them out on paper.
+          %br
+          %a.btn{onclick: 'print()'}
+            %i.fa.fa-print
+            Print
+        .d-none.d-print-block.text-success
+          %i.fa.fa-tree
+          Please consider the environment before printing this page.

app/views/shared/_locales.haml

@@ -1,4 +1,4 @@
-.container
+.container.d-print-none
   .locales
     %span
       %a{ href: '#', id: 'locale-switch' }