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

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": "",

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;

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</0> 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</0> 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</0> 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__</0> Personal plan?",
+  "invalid_confirmation_code": "That didn’t work. Please check the code and try again. Or click <0>Resend confirmation code</0> 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</0> 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</0> 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",