From 872cc2170364ab595f85fe27105d76026781d908 Mon Sep 17 00:00:00 2001 From: Michael Ryan Date: Thu, 5 Jul 2018 15:11:18 -0400 Subject: [PATCH] LG-393 Redesign IDV verification OTP delivery method template **Why**: To simplify the page, per a design review. **How**: Modify the text and layout of the screen, add new content and link. Since the result is similar to the existing OTP screen in the main 2FA flow, the same messaging (labels/translations) from that page is now shared. --- .../idv/otp_delivery_method/new.html.slim | 77 ++++++++++++------- config/locales/idv/en.yml | 6 +- 2 files changed, 51 insertions(+), 32 deletions(-) diff --git a/app/views/idv/otp_delivery_method/new.html.slim b/app/views/idv/otp_delivery_method/new.html.slim index b8f57fc798b..905bc44406c 100644 --- a/app/views/idv/otp_delivery_method/new.html.slim +++ b/app/views/idv/otp_delivery_method/new.html.slim @@ -1,33 +1,52 @@ h1.h3.my0 = t('idv.titles.otp_delivery_method') -p = t('idv.messages.otp_delivery_method.phone_number_html', +p.mt1 = t('idv.messages.otp_delivery_method.phone_number_html', phone: @set_otp_delivery_method_presenter.phone) = simple_form_for(@otp_delivery_selection_form, url: idv_otp_delivery_method_url, - html: { autocomplete: 'off', method: 'put', role: 'form', class: 'mt2' }) do |f| - fieldset.mb3.p0.border-none - legend.mb1.h4.serif.bold = t('devise.two_factor_authentication.otp_delivery_preference.title') - label.btn-border.col-12.sm-col-5.sm-mr2.mb2.sm-mb0 - .radio - = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]', :sms, true, - class: :otp_delivery_preference_sms - span.indicator - = t('devise.two_factor_authentication.otp_delivery_preference.sms') - - if @set_otp_delivery_method_presenter.sms_only? - label.btn-border.col-12.sm-col-5.mb0.btn-disabled + html: { autocomplete: 'off', method: 'put', role: 'form', class: 'mt3' }) do |f| + fieldset.mb3.p0.border-none + label.btn-border.col-12.mb1 .radio - = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]', :voice, false, - disabled: true, - class: :otp_delivery_preference_voice - span.indicator - = t('devise.two_factor_authentication.otp_delivery_preference.voice') - p.mt2.mb0 = @set_otp_delivery_method_presenter.phone_unsupported_message - - else - label.btn-border.col-12.sm-col-5.mb0 - .radio - = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]', :voice, false, - class: :otp_delivery_preference_voice - span.indicator - = t('devise.two_factor_authentication.otp_delivery_preference.voice') - = f.submit t('idv.buttons.send_confirmation_code'), type: :submit, class: 'btn btn-primary' -.mt2.pt1.border-top - = t('instructions.mfa.wrong_number_html', - link: link_to(t('forms.two_factor.try_again'), idv_phone_path)) + = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]', :sms, true, + class: :otp_delivery_preference_sms + span.indicator.mt-tiny + span.blue.bold.fs-20p + = t('devise.two_factor_authentication.otp_delivery_preference.sms') + .regular.gray-dark.fs-10p.mb-tiny + = t('devise.two_factor_authentication.two_factor_choice_options.sms_info') + - if @set_otp_delivery_method_presenter.sms_only? + label.btn-border.col-12.mb0.btn-disabled + .radio + = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]', + :voice, false, + disabled: true, + class: :otp_delivery_preference_voice + span.indicator.mt-tiny + span.blue.bold.fs-20p + = t('devise.two_factor_authentication.otp_delivery_preference.voice') + .regular.gray-dark.fs-10p.mb-tiny + = t('devise.two_factor_authentication.two_factor_choice_options.voice_info') + p.mt2.mb0 = @set_otp_delivery_method_presenter.phone_unsupported_message + - else + label.btn-border.col-12.mb0 + .radio + = radio_button_tag 'otp_delivery_selection_form[otp_delivery_preference]', + :voice, false, + class: :otp_delivery_preference_voice + span.indicator.mt-tiny + span.blue.bold.fs-20p + = t('devise.two_factor_authentication.otp_delivery_preference.voice') + .regular.gray-dark.fs-10p.mb-tiny + = t('devise.two_factor_authentication.two_factor_choice_options.voice_info') + .mt3 + = t('idv.form.no_alternate_phone_html', + link: link_to(t('idv.form.activate_by_mail'), idv_usps_path)) + .mt2 + = t('instructions.mfa.wrong_number_html', + link: link_to(t('forms.two_factor.try_again'), idv_phone_path)) + .mt3 + = f.submit t('idv.buttons.send_confirmation_code'), + type: :submit, + class: 'sm-col-6 col-12 btn btn-primary' +.mt3.border-top + .mt1 + = link_to t('links.cancel'), idv_phone_path diff --git a/config/locales/idv/en.yml b/config/locales/idv/en.yml index 95e23031361..52e4a432f3e 100644 --- a/config/locales/idv/en.yml +++ b/config/locales/idv/en.yml @@ -8,7 +8,7 @@ en: mail: resend: Send another letter send: Send a letter - send_confirmation_code: Send confirmation code + send_confirmation_code: Continue cancel: modal_header: Are you sure you want to cancel? warning_header: If you cancel now @@ -96,7 +96,7 @@ en: loading: Verifying your identity mail_sent: Your letter is on its way otp_delivery_method: - phone_number_html: We will send a code to %{phone} + phone_number_html: We'll send a code to %{phone} personal_key: This is your new personal key. Write it down and keep it in a safe place. You will need it if you ever lose your password. phone: @@ -177,7 +177,7 @@ en: resend: Want another letter? verify: Want a letter? no_id: We are unable to verify your identity without a state-issued ID - otp_delivery_method: Get a code by phone + otp_delivery_method: How would you like to receive a code? phone: Phone number of record review: Review and submit select_verification: Choose how to confirm your address