划转添加邮箱验证

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

src/http/types.ts

@@ -16,7 +16,7 @@ export namespace HttpRequestPs {
 
   export interface SendEmail {
     email: string,
-    type: 1 | 2 | 3  //1.register 2.withdraw 3.resetPwd
+    type: 1 | 2 | 3 | 5  //1.register 2.withdraw 3.resetPwd 5.transfer
   }
 
   export interface Login {

src/pages/forget/index.tsx

@@ -54,7 +54,7 @@ const ForGet = () => {
         <div className='row-center'>
           <div style={{ maxWidth: 500, width: '100%', padding: '0 20px' }}>
             <Form onFinish={onFinish} form={form}>
-              <Form.Item name="email" rules={[{ required: true, message: t('account') }, { type: 'email', message: '请输入有效的邮箱！' }]}>
+              <Form.Item name="email" rules={[{ required: true, message: t('account') }, { type: 'email', message: t('Email format error') }]}>
                 <Input className='input' placeholder={t('account')} ></Input>
               </Form.Item>
               <Form.Item name="code" rules={[{ required: true, message: t('Verification Code') }]}>

src/pages/transfer/index.tsx

@@ -1,10 +1,11 @@
 import { Button, Form, Input, Select, notification } from 'antd'
 import '../../styles/home.scss'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { observer } from 'mobx-react'
 import store from '../../store'
-import { http_transfer } from '../../http/api'
+import { http_send_email, http_transfer } from '../../http/api'
 import { useTranslation } from 'react-i18next'
+import CountdownTimer, { CountdownTimerRef } from '../../components/CountdownTimer'
 
 const Transfer = () => {
 
@@ -18,11 +19,37 @@ const Transfer = () => {
   ]
 
   const [type, setType] = useState(-1)
+  const countdownRef = useRef<CountdownTimerRef>(null)
 
   const onSelect = (_type: any) => {
     setType(_type)
   }
 
+
+  const getVerifyCode = async () => {
+    try {
+      if (countdownRef.current?.isActive) return
+      countdownRef.current?.handleStart()
+      const res: any = await http_send_email({
+        email: userInfo.email,
+        type: 5
+      })
+      if (res.code === 0) {
+        notification.success({
+          message: t('Verification code sent successfully')
+        })
+      } else {
+        notification.error({
+          message: t('Failed to send verification code')
+        })
+        countdownRef.current?.handleStop()
+      }
+
+    } catch (error) {
+      countdownRef.current?.handleStop()
+    }
+  }
+
   const onFinish = async (values: any) => {
     const res: any = await http_transfer({
       ...values,
@@ -102,6 +129,19 @@ const Transfer = () => {
               <Input style={{ height: 50 }} placeholder={t('Please enter the transfer amount')} />
             </Form.Item>
 
+            {
+              type === 2 && (
+                <Form.Item label={<span className='fz-wb-550'>{t('Verification Code')}</span>} name="code" rules={[{ required: true, message: t('Verification Code') }]}>
+                  <div className='row-items'>
+                    <Input style={{ height: 50, flex: 1 }} className='input' placeholder={t('Verification Code')} />
+                    <Button className='' onClick={getVerifyCode} style={{ height: 50 }} type='primary'>
+                      <CountdownTimer ref={countdownRef} initialSeconds={60} />
+                    </Button>
+                  </div>
+                </Form.Item>
+              )
+            }
+
             <Form.Item>
               <div className='row-center'>
                 <Button type='primary' htmlType='submit' style={{ borderRadius: 30 }}>{t('submit')}</Button>