From 27537b76dd0a586ec376a2923820caa18cba17a0 Mon Sep 17 00:00:00 2001 From: Jack Cody Date: Tue, 26 Mar 2024 16:28:43 -0500 Subject: [PATCH 01/21] Update presenter --- .../users/webauthn_setup_controller.rb | 1 + app/presenters/webauthn_setup_presenter.rb | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/app/controllers/users/webauthn_setup_controller.rb b/app/controllers/users/webauthn_setup_controller.rb index d8bd370c509..c9cfe7bcf10 100644 --- a/app/controllers/users/webauthn_setup_controller.rb +++ b/app/controllers/users/webauthn_setup_controller.rb @@ -22,6 +22,7 @@ def new ) result = form.submit(new_params) @platform_authenticator = form.platform_authenticator? + @mobile = mobile? @presenter = WebauthnSetupPresenter.new( current_user: current_user, user_fully_authenticated: user_fully_authenticated?, diff --git a/app/presenters/webauthn_setup_presenter.rb b/app/presenters/webauthn_setup_presenter.rb index e385a199b30..933c9b35441 100644 --- a/app/presenters/webauthn_setup_presenter.rb +++ b/app/presenters/webauthn_setup_presenter.rb @@ -2,6 +2,7 @@ class WebauthnSetupPresenter < SetupPresenter include Rails.application.routes.url_helpers include ActionView::Helpers::UrlHelper include ActionView::Helpers::TranslationHelper + include LinkHelper attr_reader :url_options @@ -32,6 +33,19 @@ def image_path end end + def learn_more_html + new_tab_link_to( + t('forms.webauthn_setup.learn_more'), + help_center_redirect_path( + category: 'get-started', + article: 'security-key', + article_anchor: 'security-key', + flow: :two_factor_authentication, + step: :security_key_setup, + ), + ) + end + def page_title if @platform_authenticator t('headings.webauthn_platform_setup.new') @@ -69,7 +83,7 @@ def intro_html ), ) else - t('forms.webauthn_setup.intro_html') + t('forms.webauthn_setup.intro') end end @@ -85,7 +99,7 @@ def button_text if @platform_authenticator t('forms.webauthn_platform_setup.continue') else - t('forms.webauthn_setup.continue') + t('forms.webauthn_setup.set_up') end end end From b2cdb52cb116024cd79e3860ddacfc51efc53816 Mon Sep 17 00:00:00 2001 From: Jack Cody Date: Tue, 26 Mar 2024 16:29:00 -0500 Subject: [PATCH 02/21] Update view --- app/views/users/webauthn_setup/new.html.erb | 57 +++++++++++++++------ 1 file changed, 40 insertions(+), 17 deletions(-) diff --git a/app/views/users/webauthn_setup/new.html.erb b/app/views/users/webauthn_setup/new.html.erb index f0eee7961fc..76bf4acf89c 100644 --- a/app/views/users/webauthn_setup/new.html.erb +++ b/app/views/users/webauthn_setup/new.html.erb @@ -1,6 +1,8 @@ <% self.title = @presenter.page_title %> -<%= image_tag asset_url(@presenter.image_path), alt: '', width: '90', class: 'margin-left-1 margin-bottom-2', role: 'img' %> +<% if @platform_authenticator %> + <%= image_tag asset_url(@presenter.image_path), alt: '', width: '90', class: 'margin-left-1 margin-bottom-2', role: 'img' %> +<% end %> <%= render PageHeadingComponent.new.with_content(@presenter.heading) %> @@ -10,7 +12,10 @@ <% end %> <% end %> -<%= @presenter.intro_html %> + + <%= @presenter.intro_html %> + <%= @presenter.learn_more_html unless @platform_authenticator %> + <%= simple_form_for( '', @@ -33,20 +38,38 @@ <%= hidden_field_tag :platform_authenticator, @platform_authenticator, id: 'platform_authenticator' %> <% if !@platform_authenticator %> - - <%= render ValidatedFieldComponent.new( - form: f, - name: :name, - required: true, - label: @presenter.nickname_label, - hint: @presenter.device_nickname_hint, - input_html: { - id: 'nickname', - class: 'font-family-mono', - size: 16, - maxlength: 20, - }, - ) %> +
+ <%= render ProcessListComponent.new(connected: true) do |c| %> + <%= c.with_item(heading: t('forms.webauthn_setup.step_1'), heading_id: 'step-1-label') do %> +

<%= t('forms.webauthn_setup.step_1a') %>

+ <%= render ValidatedFieldComponent.new( + form: f, + name: :name, + required: true, + label: false, + hint: @presenter.device_nickname_hint, + wrapper_html: { class: 'margin-bottom-0' }, + input_html: { + aria: { labelledby: 'step-1-label' }, + id: 'nickname', + class: 'font-family-mono', + size: 16, + maxlength: 20, + }, + ) %> + <% end %> + <%= c.with_item(heading: t('forms.webauthn_setup.step_2')) do %> + <% if @mobile %> + <%= image_tag asset_url('mfa-options/security_key_mobile.gif'), class: "rounded-xl", alt: t('forms.webauthn_setup.step_2_image_mobile_alt') %> + <% else %> + <%= image_tag asset_url('mfa-options/security_key.gif'), class: "rounded-xl", alt: t('forms.webauthn_setup.step_2_image_alt') %> + <% end %> + <% end %> + <%= c.with_item(heading: t('forms.webauthn_setup.step_3')) do %> +

<%= t('forms.webauthn_setup.step_3a') %>

+ <% end %> + <% end %> +
<% end %>