feat(experience): improve MFA button text for email/phone verification (#7795)

Author: wangsijie

packages/experience/src/components/Button/MfaFactorButton.tsx

@@ -1,6 +1,7 @@
 import { MfaFactor } from '@logto/schemas';
 import classNames from 'classnames';
 import { type TFuncKey } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import ArrowNext from '@/assets/icons/arrow-next.svg?react';
 import FactorBackupCode from '@/assets/icons/factor-backup-code.svg?react';
@@ -56,8 +57,25 @@ const linkFactorDescription: Record<MfaFactor, TFuncKey> = {
 };
 
 const MfaFactorButton = ({ factor, isBinding, isDisabled, maskedIdentifier, onClick }: Props) => {
+  const { t } = useTranslation();
   const Icon = factorIcon[factor];
 
+  const getDescriptionForMaskedIdentifier = () => {
+    if (!maskedIdentifier) {
+      return null;
+    }
+
+    if (factor === MfaFactor.EmailVerificationCode) {
+      return t('mfa.send_to_email', { identifier: maskedIdentifier });
+    }
+
+    if (factor === MfaFactor.PhoneVerificationCode) {
+      return t('mfa.send_to_phone', { identifier: maskedIdentifier });
+    }
+
+    return maskedIdentifier;
+  };
+
   return (
     <button
       className={classNames(
@@ -78,7 +96,7 @@ const MfaFactorButton = ({ factor, isBinding, isDisabled, maskedIdentifier, onCl
         </div>
         <div className={mfaFactorButtonStyles.description}>
           {maskedIdentifier ? (
-            <span>{maskedIdentifier}</span>
+            <span>{getDescriptionForMaskedIdentifier()}</span>
           ) : (
             <DynamicT forKey={(isBinding ? linkFactorDescription : factorDescription)[factor]} />
           )}

packages/phrases-experience/src/locales/ar/mfa.ts

@@ -16,6 +16,8 @@ const mfa = {
   verify_backup_code_description: 'الصق رمز النسخ الاحتياطي الذي حفظته',
   verify_email_verification_code_description: 'أدخل الرمز المرسل إلى بريدك الإلكتروني',
   verify_phone_verification_code_description: 'أدخل الرمز المرسل إلى هاتفك',
+  send_to_email: 'إرسال إلى {{identifier}}',
+  send_to_phone: 'إرسال إلى {{identifier}}',
   add_mfa_factors: 'إضافة التحقق من خطوتين',
   add_mfa_description: 'تم تمكين التحقق من خطوتين. حدد طريقة التحقق الثانية لتسجيل الدخول الآمن.',
   add_another_mfa_factor: 'إضافة تحقق آخر من خطوتين',

packages/phrases-experience/src/locales/de/mfa.ts

@@ -16,6 +16,8 @@ const mfa = {
   verify_backup_code_description: 'Fügen Sie den gespeicherten Backup-Code ein',
   verify_email_verification_code_description: 'Geben Sie den an Ihre E-Mail gesendeten Code ein',
   verify_phone_verification_code_description: 'Geben Sie den an Ihr Telefon gesendeten Code ein',
+  send_to_email: 'Senden an {{identifier}}',
+  send_to_phone: 'Senden an {{identifier}}',
   add_mfa_factors: '2-Schritte-Verifizierung hinzufügen',
   add_mfa_description:
     'Die Zwei-Faktor-Verifizierung ist aktiviert. Wählen Sie Ihre zweite Verifizierungsmethode für sicheres Anmelden aus.',

packages/phrases-experience/src/locales/en/mfa.ts

@@ -16,6 +16,8 @@ const mfa = {
   verify_backup_code_description: 'Paste the backup code you saved',
   verify_email_verification_code_description: 'Enter the code sent to your email',
   verify_phone_verification_code_description: 'Enter the code sent to your phone',
+  send_to_email: 'Send to {{identifier}}',
+  send_to_phone: 'Send to {{identifier}}',
   add_mfa_factors: 'Add 2-step verification',
   add_mfa_description:
     'Two-factor verification is enabled. Select your second verification method for secure sign-in.',

packages/phrases-experience/src/locales/es/mfa.ts

@@ -17,6 +17,8 @@ const mfa = {
   verify_backup_code_description: 'Pegue el código de respaldo que guardó',
   verify_email_verification_code_description: 'Ingrese el código enviado a su correo electrónico',
   verify_phone_verification_code_description: 'Ingrese el código enviado a su teléfono',
+  send_to_email: 'Enviar a {{identifier}}',
+  send_to_phone: 'Enviar a {{identifier}}',
   add_mfa_factors: 'Agregar verificación de 2 pasos',
   add_mfa_description:
     'La verificación de dos factores está habilitada. Seleccione su segundo método de verificación para iniciar sesión de forma segura.',

packages/phrases-experience/src/locales/fr/mfa.ts

@@ -16,6 +16,8 @@ const mfa = {
   verify_backup_code_description: 'Collez le code de sauvegarde que vous avez enregistré',
   verify_email_verification_code_description: 'Saisissez le code envoyé à votre e-mail',
   verify_phone_verification_code_description: 'Saisissez le code envoyé à votre téléphone',
+  send_to_email: 'Envoyer à {{identifier}}',
+  send_to_phone: 'Envoyer à {{identifier}}',
   add_mfa_factors: 'Ajouter la vérification en deux étapes',
   add_mfa_description:
     'La vérification en deux étapes est activée. Sélectionnez votre deuxième méthode de vérification pour une connexion sécurisée.',

packages/phrases-experience/src/locales/it/mfa.ts

@@ -15,7 +15,9 @@ const mfa = {
   verify_webauthn_description: 'Verifica il tuo dispositivo o hardware USB',
   verify_backup_code_description: 'Incolla il codice di backup che hai salvato',
   verify_email_verification_code_description: 'Inserisci il codice inviato alla tua email',
-  verify_phone_verification_code_description: 'Inserisci il codice inviato al tuo telefono',
+  verify_phone_verification_code_description: 'Inserisci il codice inviato al tuo telefone',
+  send_to_email: 'Invia a {{identifier}}',
+  send_to_phone: 'Invia a {{identifier}}',
   add_mfa_factors: 'Aggiungi la verifica in due passaggi',
   add_mfa_description:
     'La verifica in due passaggi è abilitata. Seleziona il tuo secondo metodo di verifica per un accesso sicuro.',

packages/phrases-experience/src/locales/ja/mfa.ts

@@ -16,6 +16,8 @@ const mfa = {
   verify_backup_code_description: '保存したバックアップコードを貼り付け',
   verify_email_verification_code_description: 'メールに送信されたコードを入力',
   verify_phone_verification_code_description: '電話に送信されたコードを入力',
+  send_to_email: '{{identifier}} に送信',
+  send_to_phone: '{{identifier}} に送信',
   add_mfa_factors: '2段階認証を追加',
   add_mfa_description:
     '2段階認証が有効になっています。安全なサインインのために第二の認証方法を選択してください。',

packages/phrases-experience/src/locales/ko/mfa.ts

@@ -16,6 +16,8 @@ const mfa = {
   verify_backup_code_description: '저장한 백업 코드 붙여넣기',
   verify_email_verification_code_description: '이메일로 전송된 코드 입력',
   verify_phone_verification_code_description: '휴대폰으로 전송된 코드 입력',
+  send_to_email: '{{identifier}}로 전송',
+  send_to_phone: '{{identifier}}로 전송',
   add_mfa_factors: '2단계 인증 추가',
   add_mfa_description:
     '2단계 인증이 활성화되었습니다. 안전한 로그인을 위해 두 번째 인증 방법을 선택하세요.',

packages/phrases-experience/src/locales/pl-pl/mfa.ts

@@ -16,6 +16,8 @@ const mfa = {
   verify_backup_code_description: 'Wklej kod zapasowy, który zapisałeś',
   verify_email_verification_code_description: 'Wprowadź kod wysłany na twój e-mail',
   verify_phone_verification_code_description: 'Wprowadź kod wysłany na twój telefon',
+  send_to_email: 'Wyślij do {{identifier}}',
+  send_to_phone: 'Wyślij do {{identifier}}',
   add_mfa_factors: 'Dodaj weryfikację dwuetapową',
   add_mfa_description:
     'Weryfikacja dwuetapowa jest włączona. Wybierz swój drugi sposób weryfikacji dla bezpiecznego logowania.',