diff --git a/app/assets/stylesheets/components/_totp-setup.scss b/app/assets/stylesheets/components/_totp-setup.scss index 67d0c932..2bcf341b 100644 --- a/app/assets/stylesheets/components/_totp-setup.scss +++ b/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 { diff --git a/app/views/auth/two_factor_authentication.haml b/app/views/auth/two_factor_authentication.haml index 75583213..01547311 100644 --- a/app/views/auth/two_factor_authentication.haml +++ b/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' diff --git a/app/views/settings/security/recovery_keys.haml b/app/views/settings/security/recovery_keys.haml index 066facf0..ef58cec4 100644 --- a/app/views/settings/security/recovery_keys.haml +++ b/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. \ No newline at end of file diff --git a/app/views/shared/_locales.haml b/app/views/shared/_locales.haml index 52e687d7..f1d8f1ff 100644 --- a/app/views/shared/_locales.haml +++ b/app/views/shared/_locales.haml @@ -1,4 +1,4 @@ -.container +.container.d-print-none .locales %span %a{ href: '#', id: 'locale-switch' }