[web] Requested changes to email verification screens (#30173)

* no grey hyphen when the input is empty

* show email in bold

* Fix tests

* Add test to verify email display in confirmation code input

* Format

GitOrigin-RevId: ade4a670b9dc80b99f64cc3273407a98428521b8

services/web/frontend/js/features/settings/components/emails/ciam-six-digits-input.tsx

@@ -40,9 +40,11 @@ const CIAMSixDigitsInput = forwardRef<
         autocomplete="off"
         data-1p-ignore
       />
-      <span className="ciam-six-digits-dash" aria-hidden>
-        -
-      </span>
+      {group1.length > 0 && (
+        <span className="ciam-six-digits-dash" aria-hidden>
+          -
+        </span>
+      )}
     </div>
   )
 })

services/web/frontend/js/features/settings/components/emails/confirm-email-form.tsx

@@ -187,9 +187,17 @@ export function ConfirmEmailForm({
     )
   }
 
-  const longLabel = isModal
-    ? t('enter_the_code', { email })
-    : t('enter_the_confirmation_code', { email })
+  const longLabel = isModal ? (
+    t('enter_the_code', { email })
+  ) : (
+    <Trans
+      i18nKey="enter_the_confirmation_code"
+      components={[isCiam ? <strong /> : <span />]}
+      values={{ email }}
+      shouldUnescape
+      tOptions={{ interpolation: { escapeValue: true } }}
+    />
+  )
 
   const Button = isCiam ? DSButton : OLButton
   const buttonSize = isCiam ? 'lg' : undefined

services/web/locales/da.json

@@ -543,7 +543,7 @@
   "end_of_document": "Slutningen af dokumentet",
   "enter_any_size_including_units_or_valid_latex_command": "Indtast en størrelse (inklusiv enhed) eller en gyldig LaTeX kommando",
   "enter_image_url": "Indtast billedets URL",
-  "enter_the_confirmation_code": "Indtast den 6-cifrede bekræftelseskode sendt til __email__.",
+  "enter_the_confirmation_code": "Indtast den 6-cifrede bekræftelseskode sendt til <0>__email__</0>.",
   "enter_your_email_address": "Indtast din e-mailaddresse",
   "enter_your_email_address_below_and_we_will_send_you_a_link_to_reset_your_password": "Indtast din e-mailaddresse nedenfor, så sender vi et link til at nulstille dit kodeord",
   "enter_your_new_password": "Indtast dit nye kodeord",

services/web/locales/en.json

@@ -718,7 +718,7 @@
   "enter_any_size_including_units_or_valid_latex_command": "Enter any size (including units) or valid LaTeX command",
   "enter_tax_id_number": "Enter tax ID number",
   "enter_the_code": "Enter the 6-digit code sent to __email__.",
-  "enter_the_confirmation_code": "Enter the 6-digit confirmation code sent to __email__.",
+  "enter_the_confirmation_code": "Enter the 6-digit confirmation code sent to <0>__email__</0>.",
   "enter_the_number_of_licenses_youd_like_to_add_to_see_the_cost_breakdown": "Enter the number of licenses you’d like to add to see the cost breakdown.",
   "enter_your_email": "Enter your email",
   "enter_your_email_address_below_and_we_will_send_you_a_link_to_reset_your_password": "Enter your email address below, and we will send you a link to reset your password",

services/web/locales/zh-CN.json

@@ -652,7 +652,7 @@
   "enter_any_size_including_units_or_valid_latex_command": "输入任意大小（包括单位）或有效的 LaTeX 命令",
   "enter_image_url": "输入图片 URL",
   "enter_the_code": "输入发送至__email__的6位数代码。",
-  "enter_the_confirmation_code": "输入发送到 __email__ 的六位验证码。",
+  "enter_the_confirmation_code": "输入发送到 <0>__email__</0> 的六位验证码。",
   "enter_the_number_of_licenses_youd_like_to_add_to_see_the_cost_breakdown": "输入您想要添加的许可证数量以查看成本明细。",
   "enter_your_email_address": "输入你的电子邮件",
   "enter_your_email_address_below_and_we_will_send_you_a_link_to_reset_your_password": "在下面输入您的电子邮件地址，我们将向您发送重置密码的链接",

services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx

@@ -64,8 +64,9 @@ function resetFetchMock() {
 
 async function confirmCodeForEmail(email: string) {
   const inputCode = await screen.findByRole('textbox', {
-    name: `Enter the 6-digit confirmation code sent to ${email}.`,
+    name: /Enter the 6-digit confirmation code sent to /,
   })
+  screen.getByText(email, { exact: false })
   fireEvent.change(inputCode, { target: { value: '123456' } })
   const submitCodeBtn = screen.getByRole<HTMLButtonElement>('button', {
     name: 'Confirm',
@@ -225,7 +226,8 @@ describe('<EmailsSection />', function () {
     )
 
     await confirmCodeForEmail(userEmailData.email)
-    await screen.findByText(userEmailData.email)
+    const elements = await screen.findAllByText(userEmailData.email)
+    expect(elements.length).to.equal(2)
   })
 
   it('fails to add add new email address', async function () {
@@ -412,9 +414,7 @@ describe('<EmailsSection />', function () {
       department: customDepartment,
     })
 
-    await screen.findByText(
-      `Enter the 6-digit confirmation code sent to ${userEmailData.email}.`
-    )
+    await screen.findByText(/Enter the 6-digit confirmation code sent to /)
 
     await confirmCodeForEmail(userEmailData.email)
 
@@ -575,7 +575,8 @@ describe('<EmailsSection />', function () {
       department: userEmailData.affiliation?.department,
     })
 
-    await screen.findByText(userEmailData.email)
+    const elements = await screen.findAllByText(userEmailData.email)
+    expect(elements.length).to.equal(2)
     await screen.findByText(newUniversity)
     await screen.findByText(userEmailData.affiliation.role!, { exact: false })
     await screen.findByText(userEmailData.affiliation.department!, {