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

Author: kovsu

apps/desktop/locales/settings/en.json

@@ -297,6 +297,7 @@
   "profile.email.unverified": "Unverified",
   "profile.email.verification_sent": "Email verification sent",
   "profile.email.verified": "Verified",
+  "profile.email.verify_email": "Please verify your email ({{email_address}}) to continue",
   "profile.handle.description": "Your unique identifier.",
   "profile.handle.label": "Handle",
   "profile.link_social.authentication": "Authentication",

apps/desktop/locales/settings/zh-CN.json

@@ -294,6 +294,7 @@
   "profile.email.unverified": "未验证",
   "profile.email.verification_sent": "验证邮件已发送。",
   "profile.email.verified": "已验证",
+  "profile.email.verify_email": "请认证你的邮箱地址 ({{email_address}}) 以继续。",
   "profile.handle.description": "你的唯一标识。",
   "profile.handle.label": "唯一标识",
   "profile.link_social.authentication": "身份验证",

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

@@ -1,5 +1,6 @@
 import { cn } from "@follow/utils/utils"
 import { lazy, Suspense, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 
 import { useWhoami } from "~/atoms/user"
@@ -21,7 +22,9 @@ export function NewUserGuide() {
   useEffect(() => {
     if (user?.email && !user.emailVerified) {
       toast.error(<EmailVerificationToast user={user} />, {
+        id: "email-verification",
         duration: Infinity,
+        closeButton: true,
       })
     }
   }, [user?.emailVerified])
@@ -40,10 +43,15 @@ function EmailVerificationToast({
     email: string
   }
 }) {
+  const { t } = useTranslation("settings")
   const [isEmailVerificationSent, setIsEmailVerificationSent] = useState(false)
   return (
     <div data-content className="flex w-full flex-col gap-2">
-      <div data-title>Please verify your email ({user.email}) to continue</div>
+      <div data-title>
+        {t("profile.email.verify_email", {
+          email_address: user.email,
+        })}
+      </div>
       <button
         type="button"
         data-button="true"
@@ -53,15 +61,21 @@ function EmailVerificationToast({
           isEmailVerificationSent && "!cursor-progress opacity-50",
         )}
         disabled={isEmailVerificationSent}
-        onClick={() => {
-          sendVerificationEmail({
+        onClick={async () => {
+          setIsEmailVerificationSent(true)
+          await sendVerificationEmail({
             email: user.email,
             callbackURL: `${WEB_URL}/login`,
           })
-          setIsEmailVerificationSent(true)
+          toast.dismiss("email-verification")
+          // Wait for the toast to dismiss before showing the success toast
+          // To have a better user experience
+          setTimeout(() => {
+            toast.success(t("profile.email.verification_sent"))
+          }, 800)
         }}
       >
-        Send verification email
+        {t("profile.email.send_verification")}
       </button>
     </div>
   )