feat(ssr): enhance email validation and reCAPTCHA handling

feat(ssr): enhance email validation and reCAPTCHA handling

Author: 0-o0

apps/ssr/client/@types/default-resource.ts

@@ -21,6 +21,7 @@ import common_zhCN from "@locales/common/zh-CN.json"
 import common_zhHK from "@locales/common/zh-HK.json"
 import common_zhTW from "@locales/common/zh-TW.json"
 import external_en from "@locales/external/en.json"
+import external_zhCN from "@locales/external/zh-CN.json"
 
 import type { ns, SSRSupportedLanguages } from "./constants"
 
@@ -38,6 +39,7 @@ export const defaultResources = {
   },
   "zh-CN": {
     common: common_zhCN,
+    external: external_zhCN,
   },
   "zh-HK": {
     common: common_zhHK,

apps/ssr/client/pages/(login)/forget-password.tsx

@@ -19,32 +19,65 @@ import { Input } from "@follow/components/ui/input/index.js"
 import { env } from "@follow/shared/env"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
-import { useRef } from "react"
+import { useEffect, useRef } from "react"
 import ReCAPTCHA from "react-google-recaptcha"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router"
 import { toast } from "sonner"
 import { z } from "zod"
 
-const forgetPasswordFormSchema = z.object({
-  email: z.string().email(),
-})
+function closeRecaptcha(
+  recaptchaRef: React.RefObject<ReCAPTCHA>,
+  mutation?: { reset: () => void },
+) {
+  const handleClick = (e: MouseEvent) => {
+    const recaptchaIframeSelector =
+      'iframe[src*="recaptcha/api2"], iframe[src*="www.recaptcha.net"], iframe[src*="google.com/recaptcha"]'
+    const recaptchaChallengeIframe = document.querySelector(recaptchaIframeSelector)
+
+    if (
+      e.target instanceof Element &&
+      (!recaptchaChallengeIframe || !recaptchaChallengeIframe.contains(e.target)) &&
+      !e.target.closest(".g-recaptcha") &&
+      recaptchaChallengeIframe
+    ) {
+      recaptchaRef.current?.reset()
+      mutation?.reset()
+    }
+  }
+
+  document.addEventListener("click", handleClick)
+  return () => document.removeEventListener("click", handleClick)
+}
+
+const createEmailSchema = (t: any) =>
+  z.object({
+    email: z
+      .string()
+      .min(1, t("login.forget_password.email_required"))
+      .email(t("login.forget_password.email_invalid")),
+  })
 
 export function Component() {
   const { t } = useTranslation()
-  const form = useForm<z.infer<typeof forgetPasswordFormSchema>>({
-    resolver: zodResolver(forgetPasswordFormSchema),
+  const navigate = useNavigate()
+  const recaptchaRef = useRef<ReCAPTCHA>(null)
+
+  const EmailSchema = createEmailSchema(t)
+
+  const form = useForm<z.infer<typeof EmailSchema>>({
+    resolver: zodResolver(EmailSchema),
     defaultValues: {
       email: "",
     },
+    mode: "onChange",
+    delayError: 500,
   })
 
-  const recaptchaRef = useRef<ReCAPTCHA>(null)
-
   const { isValid } = form.formState
   const updateMutation = useMutation({
-    mutationFn: async (values: z.infer<typeof forgetPasswordFormSchema>) => {
+    mutationFn: async (values: z.infer<typeof EmailSchema>) => {
       const token = await recaptchaRef.current?.executeAsync()
       const res = await forgetPassword(
         {
@@ -62,19 +95,25 @@ export function Component() {
       }
     },
     onError: (error) => {
+      recaptchaRef.current?.reset()
       toast.error(error.message)
     },
     onSuccess: () => {
       toast.success(t("login.forget_password.success"))
     },
+    onSettled: () => {
+      recaptchaRef.current?.reset()
+    },
   })
 
-  function onSubmit(values: z.infer<typeof forgetPasswordFormSchema>) {
+  useEffect(() => {
+    return closeRecaptcha(recaptchaRef, updateMutation)
+  }, [updateMutation])
+
+  function onSubmit(values: z.infer<typeof EmailSchema>) {
     updateMutation.mutate(values)
   }
 
-  const navigate = useNavigate()
-
   return (
     <div className="flex h-full items-center justify-center">
       <Card className="w-[350px] max-w-full">
@@ -116,7 +155,11 @@ export function Component() {
                 size="invisible"
               />
               <div className="text-right">
-                <Button disabled={!isValid} type="submit" isLoading={updateMutation.isPending}>
+                <Button
+                  disabled={!isValid || updateMutation.isPending}
+                  type="submit"
+                  isLoading={updateMutation.isPending}
+                >
                   {t("login.submit")}
                 </Button>
               </div>

locales/external/en.json

@@ -39,8 +39,11 @@
   "login.continueWith": "Continue with {{provider}}",
   "login.email": "Email",
   "login.forget_password.description": "Enter the email address associated with your account and we’ll send you an email about how to reset your password.",
+  "login.forget_password.email_invalid": "Invalid email",
+  "login.forget_password.email_required": "Email required",
   "login.forget_password.label": "Forget Password",
   "login.forget_password.note": "Forgot your password?",
+  "login.forget_password.recaptcha_required": "Please complete the reCAPTCHA verification",
   "login.forget_password.success": "Email has been sent successfully",
   "login.logInTo": "Sign in to",
   "login.logInWithEmail": "Sign in with email",

locales/external/zh-CN.json

@@ -39,6 +39,8 @@
   "login.continueWith": "使用 {{provider}} 登入",
   "login.email": "邮件地址",
   "login.forget_password.description": "请输入与你的帐户关联的邮件地址，我们将向你发送一封关于如何重置密码的邮件。",
+  "login.forget_password.email_invalid": "无效的邮箱地址",
+  "login.forget_password.email_required": "请输入邮箱",
   "login.forget_password.label": "忘记密码",
   "login.forget_password.note": "忘记了密码？",
   "login.forget_password.success": "邮件已成功发送。",