feat(desktop): add email verification prompt and translation support

[kovsu]

Part of #3249

After:

https://github.com/user-attachments/assets/589afa8f-a014-4fad-a7ba-664ce4325815

[follow-reviewer-bot[bot]]

Thank you for your contribution. We will review it promptly.

[vercel[bot]]

@kovsu is attempting to deploy a commit to the RSS3 Team on Vercel.

A member of the Team first needs to authorize it.

[follow-reviewer-bot[bot]]

Suggested PR Title:

feat: add email verification messages and improve UI

Change Summary: Added email verification messages and improved UI for email confirmation in both English and Chinese localizations. Enhanced user experience by integrating translations and managing toast notifications properly.

Code Review:

Code Review

Issues Requiring Change Requests

1. File: apps/desktop/src/renderer/src/modules/app-layout/feed-column/index.shared.tsx

   • Lines: 61-65

   • Issue: The current implementation of the onClick handler for the "Send verification email" button does not handle potential errors from the sendVerificationEmail function. If the API call to send the email fails for some reason, the user will not be informed, and the button will remain in the "disabled" state (isEmailVerificationSent set to true).

   • Change Request: Add error handling for the sendVerificationEmail function. Ensure that if the API call fails, the user is notified (e.g., via toast.error) and the button is re-enabled by resetting isEmailVerificationSent to false.

     Example:

     onClick={async () => {
       setIsEmailVerificationSent(true)
       try {
         await sendVerificationEmail({
           email: user.email,
           callbackURL: `${WEB_URL}/login`,
         })
         toast.dismiss("email-verification")
         setTimeout(() => {
           toast.success(t("profile.email.verification_sent"))
         }, 800)
       } catch (error) {
         setIsEmailVerificationSent(false)
         toast.error(t("profile.email.verification_failed")) // Add this translation key to the JSON files
       }
     }}
     

---

2. File: apps/desktop/src/renderer/src/modules/app-layout/feed-column/index.shared.tsx
   • Lines: 53, 65
   • Issue: The string profile.email.send_verification used to localize the "Send verification email" button text is referred to in the JSX code, but it is missing from both apps/desktop/locales/settings/en.json and apps/desktop/locales/settings/zh-CN.json. This will result in missing translations when the application runs.
   • Change Request: Add the profile.email.send_verification string to the localization JSON files. Example:
     • For en.json:

       "profile.email.send_verification": "Send verification email"
       

     • For zh-CN.json:

       "profile.email.send_verification": "发送验证邮件"
       

---

3. File: apps/desktop/locales/settings/en.json
   • Lines: Existing structure
   • Issue: The placeholder {{email_address}} used in profile.email.verify_email is a dynamic variable. The surrounding translation code in index.shared.tsx assumes its safe usage, but there is no explicit sanitization or escaping of the dynamic values used in translations. Although this may typically be handled upstream by react-i18next, it’s still worth verifying or documenting.
   • Change Request: Ensure dynamic values such as email_address are properly sanitized or escaped to prevent possible script injection attacks. This may involve validating input in the backend or modifying usage in the frontend with an escaping function.

---

Summary of Required Changes

• Add error handling for sendVerificationEmail in index.shared.tsx to manage API call failures gracefully.
• Add the missing profile.email.send_verification localization key in both en.json and zh-CN.json files.
• Ensure dynamic placeholders in translations are sanitized to prevent misuse or injection.

These changes are critical to enhance error handling, complete localization, and ensure the application’s security.

[follow-reviewer-bot[bot]]

Thank you @kovsu for your contribution! 🎉

Your pull request has been merged and we really appreciate your help in making this project better. We hope to see more contributions from you in the future! 💪