Stacks recovery key

app/assets/stylesheets/components/_border.scss

@@ -6,3 +6,4 @@
 .border-dashed { border-style: dashed; }
 
 .rounded-lg { border-radius: $border-radius-lg; }
+.rounded-xl { border-radius: $border-radius-xl; }

app/assets/stylesheets/variables/_web.scss

@@ -75,6 +75,7 @@ $lighten-4: rgba(255, 255, 255, .5) !default;
 $border-width: 1px !default;
 $border-radius: 2px !default;
 $border-radius-lg: 8px !default;
+$border-radius-xl: 16px !default;
 $border-color: #cedbec !default;
 
 $table-header-font-weight: $bold-font-weight !default;

app/views/partials/_recovery_code.html.slim

@@ -0,0 +1,14 @@
+#recovery-code(class="col-12 border-box mt4 mb3 py2 px3 fs-20p sans-serif\
+                      border border-dashed border-red rounded-xl relative")
+  = image_tag asset_url('scissors.svg'), width: 24,
+    class: 'absolute', style: 'top:-14px;left:-5px'
+  p.bold.center.mt1
+    = image_tag(asset_url('p-key.svg'), width: 36, class: 'align-middle mr1')
+    = t('users.recovery_code.header')
+  .navy.ml2.monospace
+    - code.split(' ').each do |word|
+      p.bold.mb0.h3
+        = word
+  .center.h5.mt2
+    = t('users.recovery_code.generated_on_html',
+        date: content_tag(:strong, I18n.l(Time.zone.today, format: '%B %d, %Y')))

app/views/sign_up/recovery_codes/show.html.slim

@@ -3,10 +3,11 @@
 - if @show_progress_bar
   = render 'shared/progress_steps', active: 3
 h1.h3.my0 = t('headings.recovery_code')
-p.mt-tiny.mb0 = t('instructions.recovery_code')
+p.mt-tiny.mb0
+  = t('instructions.recovery_code_html',
+      accent: content_tag(:strong, t('instructions.recovery_code_accent')))
 
-.col-12.border-box.mt4.mb3.py2.px3.inline-block.fs-20p.border.border-dashed.monospace#recovery-code
-  = @code
+= render 'partials/recovery_code', code: @code
 
 .mb3.right-align
   = link_to t('users.recovery_code.get_another'), manage_recovery_code_path(resend: true),

config/locales/instructions/en.yml

@@ -39,9 +39,10 @@ en:
         intro: 'Password strength: '
         iv: Good
         v: Great!
-    recovery_code: >
-      Write this recovery code down and store it someplace safe. If you can’t
-      get to your phone, you can use it instead of a one-time passcode to sign in.
+    recovery_code_html: >
+      This is the to regain access to your account if you lose your password or
+      phone. %{accent}
+    recovery_code_accent: Write it down or print it out.
     registration:
       already_have_account: Already have an account? %{link}
       email: Pick an address to use for government communications.

config/locales/instructions/es.yml

@@ -35,9 +35,10 @@ es:
         intro: 'Seguridad de la contraseña: '
         iv: Bueno
         v: Muy bueno!
-    recovery_code: >
+    recovery_code_html: >
       Escriba este código de recuperación y guárdelo en algún lugar seguro. Si no puede
       acceder a su teléfono, puede usarlo en lugar de un código de acceso único para iniciar sesión.
+    recovery_code_accent: NOT TRANSLATED YET
     registration:
       already_have_account: ¿Ya tiene una cuenta? %{link}
       email: Elija una dirección para usar en las comunicaciones del gobierno.

config/locales/users/en.yml

@@ -6,5 +6,7 @@ en:
       start:
         app_img_alt: Authentication App
     recovery_code:
+      header: Your personal key
+      generated_on_html: Generated on %{date}
       get_another: Get another code
       print: Print this page

config/locales/users/es.yml

@@ -6,5 +6,7 @@ es:
       start:
         app_img_alt: Aplicación de autenticación
     recovery_code:
+      header: NOT TRANSLATED YET
+      generated_on_html: NO TRANSLATED YET
       get_another: NOT TRANSLATED YET
       print: NOT TRANSLATED YET

spec/views/sign_up/recovery_codes/show.html.slim_spec.rb

@@ -1,17 +1,35 @@
 require 'rails_helper'
 
 describe 'sign_up/recovery_codes/show.html.slim' do
+  before do
+    @code = 'foo bar'
+  end
+
   it 'has a localized title' do
     expect(view).to receive(:title).with(t('titles.recovery_code'))
     render
   end
 
-  it 'displays the recovery code' do
-    @code = 'foo'
+  context 'recovery code block' do
+    before do
+      render
+    end
 
-    render
+    it 'displays the recovery code' do
+      expect(rendered).to have_content 'foo'
+      expect(rendered).to have_content 'bar'
+    end
 
-    expect(rendered).to have_content 'foo'
+    it 'displays the recovery code subheader' do
+      expect(rendered).to have_content t('users.recovery_code.header')
+    end
+
+    it 'displays the date the code was generated' do
+      expect(rendered).to have_content(
+        t('users.recovery_code.generated_on_html',
+          date: I18n.l(Time.zone.today, format: '%B %d, %Y'))
+      )
+    end
   end
 
   it 'displays the correct progress step when @show_progress_bar is true' do
@@ -29,7 +47,10 @@
 
   it 'informs the user of importance of keeping the recovery code in a safe place' do
     render
-    expect(rendered).to have_content t('instructions.recovery_code')
+    expect(rendered).to have_content(
+      t('instructions.recovery_code_html',
+        accent: t('instructions.recovery_code_accent'))
+    )
   end
 
   it 'contains link to continue authenticating' do