From 2d552f27e26f1cf02a75a2266ba95de9e52ae84c Mon Sep 17 00:00:00 2001 From: Domagoj Kriskovic Date: Thu, 26 Oct 2023 14:26:40 +0200 Subject: [PATCH] Confirm email component (storybook) (#15362) * checkout confirm email component * useTranslation * less and locales * mocked api story * sort locales * feedback state, img as prop * confirm instead of verify * locales changes * use Trans components * disable jsx-key for trans * confirm email page * success typo, bsStyle * added aria-polite * aria-live as wrapper * using btn-secondary * secondary btn only for resend * InputNumber component * fix lint * inputMode numeric * bsStyle * example email in storybook * autocomplete, autofocus * aria-live on alert * removed unused classes * wrapped aria-live * fix lint errors * wrong eslint ignore line * handle any type * apply pr suggestions * aria-label on input * using error icon * removed aria-label GitOrigin-RevId: 2330b7da9278bc250e68acd5d80c28a325c3c653 --- .../web/frontend/extracted-translations.json | 11 +++++++ .../modules/overleaf-integration.less | 33 +++++++++++++++++++ services/web/locales/en.json | 10 ++++++ 3 files changed, 54 insertions(+) diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 9d7f8df9f9..93aad89bdb 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -187,6 +187,8 @@ "confirm_delete_user_type_email_address": "", "confirm_new_password": "", "confirm_primary_email_change": "", + "confirm_your_email": "", + "confirmation_code_message": "", "confirming": "", "conflicting_paths_found": "", "congratulations_youve_successfully_join_group": "", @@ -312,6 +314,9 @@ "educational_discount_for_groups_of_x_or_more": "", "educational_percent_discount_applied": "", "email": "", + "email_already_registered": "", + "email_confirmed_onboarding": "", + "email_confirmed_onboarding_message": "", "email_limit_reached": "", "email_link_expired": "", "email_or_password_wrong_try_again": "", @@ -326,6 +331,7 @@ "enabling": "", "enabling_sso_will_make_this_the_only_sign_in_option": "", "end_of_document": "", + "enter_6_digit_code": "", "enter_image_url": "", "entry_point": "", "error": "", @@ -547,6 +553,7 @@ "institutional_leavers_survey_notification": "", "integrations": "", "interested_in_cheaper_personal_plan": "", + "invalid_confirmation_code": "", "invalid_email": "", "invalid_file_name": "", "invalid_filename": "", @@ -814,6 +821,7 @@ "please_confirm_email": "", "please_confirm_your_email_before_making_it_default": "", "please_contact_support_to_makes_change_to_your_plan": "", + "please_enter_confirmation_code": "", "please_get_in_touch": "", "please_link_before_making_primary": "", "please_reconfirm_institutional_email": "", @@ -932,11 +940,13 @@ "repository_name": "", "republish": "", "resend": "", + "resend_confirmation_code": "", "resend_confirmation_email": "", "resend_email": "", "resend_group_invite": "", "resend_link_sso": "", "resend_managed_user_invite": "", + "resending_confirmation_code": "", "resending_confirmation_email": "", "resize": "", "resolve": "", @@ -1325,6 +1335,7 @@ "we_cant_find_any_sections_or_subsections_in_this_file": "", "we_do_not_share_personal_information": "", "we_logged_you_in": "", + "we_sent_new_code": "", "wed_love_you_to_stay": "", "welcome_to_sl": "", "what_does_this_mean": "", diff --git a/services/web/frontend/stylesheets/modules/overleaf-integration.less b/services/web/frontend/stylesheets/modules/overleaf-integration.less index b99d98feec..170adbdab5 100644 --- a/services/web/frontend/stylesheets/modules/overleaf-integration.less +++ b/services/web/frontend/stylesheets/modules/overleaf-integration.less @@ -1,3 +1,36 @@ +#confirm-email { + max-width: 400px; + padding: 24px; + margin: 0 auto; + background: #fff; + display: flex; + flex-direction: column; + gap: 24px; + + .logo { + width: 130px; + margin: 0 auto; + } + + form { + .text-danger { + display: flex; + gap: 6px; + padding: 4px; + + .icon { + padding-top: 2px; + } + } + .form-actions { + display: flex; + flex-direction: column; + gap: 12px; + padding-top: 20px; + } + } +} + #onboarding-data-collection { width: 720px; padding: 24px; diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 6262e39fa6..6d0320c943 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -298,6 +298,8 @@ "confirm_email": "Confirm Email", "confirm_new_password": "Confirm New Password", "confirm_primary_email_change": "Confirm primary email change", + "confirm_your_email": "Confirm your email address", + "confirmation_code_message": "We’ve sent a 6-digit confirmation code to __email__. Please enter it below to confirm your email address.", "confirmation_link_broken": "Sorry, something is wrong with your confirmation link. Please try copy and pasting the link from the bottom of your confirmation email.", "confirmation_token_invalid": "Sorry, your confirmation token is invalid or has expired. Please request a new email confirmation link.", "confirming": "Confirming", @@ -477,6 +479,8 @@ "email_already_registered": "This email is already registered", "email_already_registered_secondary": "This email is already registered as a secondary email", "email_already_registered_sso": "This email is already registered. Please log in to your account another way and link your account to the new provider via your account settings.", + "email_confirmed_onboarding": "Great! Let’s get you set up", + "email_confirmed_onboarding_message": "Your email address is confirmed. Click <0>Continue to finish your setup.", "email_does_not_belong_to_university": "We don’t recognize that domain as being affiliated with your university. Please contact us to add the affiliation.", "email_limit_reached": "You can have a maximum of <0>__emailAddressLimit__ email addresses on this account. To add another email address, please delete an existing one.", "email_link_expired": "Email link expired, please request a new one.", @@ -499,6 +503,7 @@ "enabling": "Enabling", "enabling_sso_will_make_this_the_only_sign_in_option": "Enabling SSO will make this the <0>only sign-in option for members.", "end_of_document": "End of document", + "enter_6_digit_code": "Enter 6-digit code", "enter_image_url": "Enter image URL", "enter_institution_email_to_log_in": "Enter your institutional email to log in through your institution.", "enter_your_email_address": "Enter your email address", @@ -846,6 +851,7 @@ "integrations": "Integrations", "interested_in": "Interested in", "interested_in_cheaper_personal_plan": "Would you be interested in the cheaper <0>__price__ Personal plan?", + "invalid_confirmation_code": "That didn’t work. Please check the code and try again. Or click <0>Resend confirmation code to get a new one.", "invalid_email": "An email address is invalid", "invalid_file_name": "Invalid File Name", "invalid_filename": "Upload failed: check that the file name doesn’t contain special characters, trailing/leading whitespace or more than __nameLimit__ characters", @@ -1281,6 +1287,7 @@ "please_confirm_email": "Please confirm your email __emailAddress__ by clicking on the link in the confirmation email ", "please_confirm_your_email_before_making_it_default": "Please confirm your email before making it the primary.", "please_contact_support_to_makes_change_to_your_plan": "Please <0>contact support to make changes to your plan", + "please_enter_confirmation_code": "Please enter your confirmation code", "please_enter_email": "Please enter your email address", "please_get_in_touch": "Please get in touch", "please_link_before_making_primary": "Please confirm your email by linking to your institutional account before making it the primary email.", @@ -1459,11 +1466,13 @@ "requesting_password_reset": "Requesting password reset", "required": "Required", "resend": "Resend", + "resend_confirmation_code": "Resend confirmation code", "resend_confirmation_email": "Resend confirmation email", "resend_email": "Resend email", "resend_group_invite": "Resend group invite", "resend_link_sso": "Resend SSO invite", "resend_managed_user_invite": "Resend managed user invite", + "resending_confirmation_code": "Resending confirmation code", "resending_confirmation_email": "Resending confirmation email", "reset_password": "Reset Password", "reset_your_password": "Reset your password", @@ -1986,6 +1995,7 @@ "we_do_not_share_personal_information": "We do not share or sell any personal information.", "we_logged_you_in": "We have logged you in.", "we_may_also_contact_you_from_time_to_time_by_email_with_a_survey": "<0>We may also contact you from time to time by email with a survey, or to see if you would like to participate in other user research initiatives", + "we_sent_new_code": "We’ve sent a new code.", "webinars": "Webinars", "website_status": "Website status", "wed_love_you_to_stay": "We’d love you to stay",