feat: Add caution message to magic code input on login#89977
Conversation
|
Hey, I noticed you changed If you want to automatically generate translations for other locales, an Expensify employee will have to:
Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running: npx ts-node ./scripts/generateTranslations.ts --helpTypically, you'd want to translate only what you changed by running |
|
@cretadn22 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Reviewer Checklist
Screenshots/Videos |
|
cc @Expensify/design since this PR adds new UI elements |
|
@rafecolton Could you trigger the script to generate the static translations for this change? |
|
Looks good to me 👍 |
|
🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
|
Looks good to me too 👍 |
|
@justinpersaud Could you trigger the script to generate the static translations for this change? |
This comment has been minimized.
This comment has been minimized.
|
Ran the translations |
|
Oops, I didn't see Justin's comment before I ran the translations 🙈 🦜🦜 |
🦜 Polyglot Parrot! 🦜Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues: View the translation diffdiff --git a/src/languages/de.ts b/src/languages/de.ts
index 84b7bbde..6c6ae99e 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -2863,7 +2863,7 @@ ${amount} für ${merchant} – ${date}`,
validateCodeForm: {
magicCodeNotReceived: 'Keinen magischen Code erhalten?',
avoidScamsMessage:
- '<strong>Vermeide Betrug. Teile deinen Code mit niemandem.</strong> Unser Team wird dich niemals anrufen, dir SMS schreiben oder dir E-Mails zu diesem Code senden.',
+ '<strong>Vermeiden Sie Betrug. Geben Sie Ihren Code nicht an andere weiter.</strong> Unser Team wird Sie niemals anrufen, per SMS kontaktieren oder Ihnen eine E-Mail senden, um diesen Code zu erfragen.',
enterAuthenticatorCode: 'Bitte gib deinen Authentifizierungscode ein',
enterRecoveryCode: 'Bitte gib deinen Wiederherstellungscode ein',
requiredWhen2FAEnabled: 'Erforderlich, wenn 2FA aktiviert ist',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index c1229536..5f0d73bb 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -2869,7 +2869,7 @@ ${amount} pour ${merchant} - ${date}`,
validateCodeForm: {
magicCodeNotReceived: "Vous n'avez pas reçu de code magique ?",
avoidScamsMessage:
- '<strong>Évitez les arnaques. Ne communiquez ce code à personne.</strong> Notre équipe ne vous contactera jamais par téléphone, SMS ou e-mail pour vous demander ce code.',
+ '<strong>Évitez les arnaques. Ne partagez votre code avec personne.</strong> Notre équipe ne vous appellera, ne vous enverra jamais de SMS ni d’e-mail pour demander ce code.',
enterAuthenticatorCode: 'Veuillez saisir votre code d’authentification',
enterRecoveryCode: 'Veuillez saisir votre code de récupération',
requiredWhen2FAEnabled: 'Obligatoire lorsque l’authentification à deux facteurs est activée',
diff --git a/src/languages/it.ts b/src/languages/it.ts
index ce1c0245..c37c5d24 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -2859,7 +2859,7 @@ ${amount} per ${merchant} - ${date}`,
validateCodeForm: {
magicCodeNotReceived: 'Non hai ricevuto un codice magico?',
avoidScamsMessage:
- '<strong>Evita le truffe. Non rivelare il tuo codice a nessuno.</strong> Il nostro team non ti contatterà mai per telefono, SMS o e-mail per chiederti questo codice.',
+ '<strong>Evita le truffe. Non condividere il tuo codice con nessuno.</strong> Il nostro team non ti chiamerà, invierà SMS o manderà email per chiederti questo codice.',
enterAuthenticatorCode: "Inserisci il tuo codice dell'autenticatore",
enterRecoveryCode: 'Inserisci il tuo codice di recupero',
requiredWhen2FAEnabled: 'Obbligatorio quando l’autenticazione a due fattori è abilitata',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 3842b2cd..58d3dbd6 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -2831,8 +2831,7 @@ ${date} の ${merchant} への ${amount}`,
},
validateCodeForm: {
magicCodeNotReceived: 'マジックコードを受け取っていませんか?',
- avoidScamsMessage:
- '<strong>詐欺に注意してください。このコードを誰にも共有しないでください。</strong>このコードについて、当社チームが電話、SMS、またはメールで連絡することはありません。',
+ avoidScamsMessage: '<strong>詐欺に注意してください。コードを他人と共有しないでください。</strong> 当社スタッフがこのコードを電話・SMS・メールでお尋ねすることは決してありません。',
enterAuthenticatorCode: '認証コードを入力してください',
enterRecoveryCode: 'リカバリーコードを入力してください',
requiredWhen2FAEnabled: '2要素認証が有効な場合は必須',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index d04eb62a..9ac3d8ee 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -2855,7 +2855,7 @@ ${amount} voor ${merchant} - ${date}`,
},
validateCodeForm: {
magicCodeNotReceived: 'Geen magische code ontvangen?',
- avoidScamsMessage: '<strong>Vermijd oplichting. Deel je code met niemand.</strong> Ons team zal je nooit bellen, sms’en of e-mailen om deze code te vragen.',
+ avoidScamsMessage: '<strong>Voorkom oplichting. Deel je code met niemand.</strong> Ons team zal je nooit bellen, sms’en of e-mailen om deze code te vragen.',
enterAuthenticatorCode: 'Voer je authenticatiecode in',
enterRecoveryCode: 'Voer uw herstelcode in',
requiredWhen2FAEnabled: 'Vereist wanneer 2FA is ingeschakeld',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 00dc2d54..c6d6bc5b 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -2849,8 +2849,7 @@ ${amount} para ${merchant} - ${date}`,
},
validateCodeForm: {
magicCodeNotReceived: 'Não recebeu um código mágico?',
- avoidScamsMessage:
- '<strong>Evite golpes. Não compartilhe seu código com ninguém.</strong> Nossa equipe nunca entrará em contato com você por telefone, mensagem de texto ou e-mail para pedir esse código.',
+ avoidScamsMessage: '<strong>Evite golpes. Não compartilhe seu código com ninguém.</strong> Nossa equipe nunca ligará, enviará SMS ou e-mail para pedir esse código.',
enterAuthenticatorCode: 'Insira seu código do autenticador',
enterRecoveryCode: 'Insira seu código de recuperação',
requiredWhen2FAEnabled: 'Obrigatório quando a 2FA estiver ativada',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index eed3b862..c19d7758 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -2781,7 +2781,7 @@ ${amount},商户:${merchant} - 日期:${date}`,
},
validateCodeForm: {
magicCodeNotReceived: '没有收到验证码?',
- avoidScamsMessage: '<strong>谨防诈骗。不要与任何人分享您的验证码。</strong>我们的团队绝不会致电、发短信或发送电子邮件向您索要此验证码。',
+ avoidScamsMessage: '<strong>谨防诈骗。不要与任何人分享您的验证码。</strong> 我们的团队绝不会打电话、发短信或发送电子邮件向您索取此验证码。',
enterAuthenticatorCode: '请输入您的认证器验证码',
enterRecoveryCode: '请输入您的恢复代码',
requiredWhen2FAEnabled: '启用双重验证时必填',
Note You can apply these changes to your branch by copying the patch to your clipboard, then running |
rafecolton
left a comment
There was a problem hiding this comment.
@ryntgh if you could please apply the updated translations, I'm happy to merge, everything else LGTM.
|
@rafecolton Done! I've applied the updated translations |
|
🚧 @rafecolton has triggered a test Expensify/App build. You can view the workflow run here. |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/rafecolton in version: 9.3.73-0 🚀
Bundle Size Analysis (Sentry): |
|
No help site changes are required for this PR. The in-app scam warning added here ("Avoid scams. Do not share your code with anyone. Our team will never call, text, or email you for this code.") reinforces guidance already thoroughly covered in the existing Avoiding common scams help articles for both New Expensify and Expensify Classic. Those articles already state that Expensify will never call, email, or message you asking for your Magic Code, and provide detailed guidance on recognizing scams and protecting your account. This PR is a UI enhancement that surfaces existing security guidance directly in the login flow — no new features, workflows, or concepts that need documenting. |
|
🚀 Deployed to staging by https://github.com/rafecolton in version: 9.3.73-0 🚀
Bundle Size Analysis (Sentry): |
|
🚀 Deployed to production by https://github.com/Beamanator in version: 9.3.73-4 🚀
|





Explanation of Change
This PR add a warning message to the magic code input on the login page
Fixed Issues
$ #89923
PROPOSAL: #89923 (comment)
Tests
Same as QA Steps
Offline tests
Same as QA Steps
QA Steps
Exclamationicon and the following copy:"Avoid scams. Do not share your code with anyone. Our team will never call, text, or email you for this code."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android-App.mp4
Android: mWeb Chrome
Android-mWeb.mp4
iOS: Native
iOS-App.mp4
iOS: mWeb Safari
iOS-mWeb.mp4
MacOS: Chrome / Safari
MacOS-Chrome.mp4