fix: 添加发送邮件弹窗

apps/user/app/auth/send-code.tsx

@@ -1,13 +1,13 @@
 'use client';
 
+import Modal, { AlertDialogRef } from '@/components/Modal';
 import useGlobalStore from '@/config/use-global';
 import { sendEmailCode, sendSmsCode } from '@/services/common/common';
 import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
 import { useCountDown } from 'ahooks';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { UseFormReturn } from 'react-hook-form';
-import { toast } from 'sonner';
 
 interface SendCodeProps {
   type: 'email' | 'phone';
@@ -44,11 +44,11 @@ export default function SendCode({ type, params, form }: SendCodeProps) {
       localStorage.removeItem(`verify_code_${type}`);
     },
   });
-
+  const ModalRef = useRef<AlertDialogRef>(null);
   const setCodeTimer = () => {
     const endTime = Date.now() + verify_code_interval * 1000;
     setTargetDate(endTime);
-    toast.success(t('register.sendCode'));
+    ModalRef.current?.show();
     localStorage.setItem(`verify_code_${type}`, endTime.toString());
   };
 
@@ -89,14 +89,24 @@ export default function SendCode({ type, params, form }: SendCodeProps) {
     (type === 'email' ? !params.email : !params.telephone || !params.telephone_area_code);
 
   return (
-    <AiroButton
+    <div>
-      type='button'
+      <AiroButton
-      variant={'primary'}
+        type='button'
-      className={'h-[30px] w-[109px]'}
+        variant={'primary'}
-      onClick={handleSendCode}
+        className={'h-[30px] w-[109px]'}
-      disabled={disabled}
+        onClick={handleSendCode}
-    >
+        disabled={disabled}
-      {seconds > 0 ? `${seconds}s` : t('get')}
+      >
-    </AiroButton>
+        {seconds > 0 ? `${seconds}s` : t('get')}
+      </AiroButton>
+      <Modal
+        ref={ModalRef}
+        title={t('register.sendCodeTitle')}
+        wrapClassName={'w-80'}
+        footerClassName={'hidden'}
+        descriptionClassName={'font-normal text-[#4D4D4D]'}
+        description={t('register.sendCode')}
+      />
+    </div>
   );
 }

apps/user/components/Modal.tsx

@@ -11,6 +11,7 @@ import {
   AlertDialogTitle,
 } from '@workspace/airo-ui/components/alert-dialog';
 import CloseSvg from '@workspace/airo-ui/components/close.svg';
+import { cn } from '@workspace/airo-ui/lib/utils';
 import { Ref, useImperativeHandle, useState } from 'react';
 
 interface AlertDialogComponentProps {
@@ -20,6 +21,9 @@ interface AlertDialogComponentProps {
   cancelText?: string;
   confirmText?: string;
   onConfirm?: () => void;
+  footerClassName?: string;
+  wrapClassName?: string;
+  descriptionClassName?: string;
 }
 
 // 定义ref可以访问的方法类型
@@ -35,6 +39,9 @@ const AlertDialogComponent: React.FC<AlertDialogComponentProps> = ({
   cancelText = 'Cancel',
   confirmText = 'Confirm',
   onConfirm,
+  footerClassName,
+  wrapClassName,
+  descriptionClassName,
 }) => {
   const [open, setOpen] = useState(false);
 
@@ -52,17 +59,17 @@ const AlertDialogComponent: React.FC<AlertDialogComponentProps> = ({
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
       <AlertDialogPortal>
-        <AlertDialogContent className={'py-[30px] sm:rounded-[25px]'}>
+        <AlertDialogContent className={cn('py-[30px] sm:rounded-[25px]', wrapClassName)}>
           <div className={'absolute right-4 top-6'} onClick={() => setOpen(false)}>
             <CloseSvg />
           </div>
           <AlertDialogHeader>
             <AlertDialogTitle className={'text-[#E22C2E]'}>{title}</AlertDialogTitle>
-            <AlertDialogDescription className={'text-base font-light'}>
+            <AlertDialogDescription className={cn('text-base font-light', descriptionClassName)}>
               {description}
             </AlertDialogDescription>
           </AlertDialogHeader>
-          <AlertDialogFooter className={'sm:justify-center'}>
+          <AlertDialogFooter className={cn('sm:justify-center', footerClassName)}>
             <AlertDialogAction asChild className={buttonVariants({ variant: 'primary' })}>
               <AiroButton variant={'primary'} onClick={onConfirm}>
                 {confirmText}

apps/user/locales/en-US/auth.json

@@ -28,7 +28,8 @@
     "description": "Create a new account, fill in your information to register.",
     "email": "Please enter a valid email address.",
     "existingAccount": "Already have an account?",
-    "sendCode": "The verification code was sent successfully. If you did not receive it, please check your spam folder.",
+    "sendCodeTitle": "【Important Tips】",
+    "sendCode": "TYour verification code has been sent successfully. If you still haven't received it, please check your spam folder.",
     "get": "Get",
     "invite": "Invitation code",
     "message": "#### Dear User, Hello!\n\nThank you for your attention and support. Due to adjustments in site operation strategy, we have closed the new user registration function. During this period, existing users will not be affected.\n\nWe are committed to providing you with better service and experience, so we will conduct comprehensive system optimization and feature upgrades during the registration closure. In the future, we will welcome you with better content and services.\n\nPlease follow our website and social media platforms to get the latest updates and notifications. Thank you for your understanding and support.\n\nIf you have any questions or need assistance, please feel free to contact our customer service team.\n\n**Thank you again for your support and understanding.**",

apps/user/locales/zh-CN/auth.json

@@ -36,7 +36,8 @@
     "switchToLogin": "登录",
     "title": "注册",
     "whitelist": "电子邮件域名不在允许的白名单中。",
-    "sendCode": "验证码发送成功，如未收到请检查垃圾邮件"
+    "sendCodeTitle": "【重要提示】",
+    "sendCode": "您的验证码已成功发送，如您仍未收到，请检查您邮箱的垃圾邮件箱。"
   },
   "reset": {
     "description": "请输入您的电子邮件地址以重置密码。",