Add two-factor

src/pages/Sign/SignIn.tsx

@@ -4,6 +4,8 @@ import {
     H_CAPTCHA_SITE_KEY,
     PERMISSION_LOGIN_SUCCESS,
     PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
+    PERMISSION_NEED_TWO_FACTOR,
+    PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR,
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND,
     SYSTEM_INVALID_CAPTCHA_CODE
@@ -16,6 +18,7 @@ import FitCenter from '@/components/common/FitCenter'
 import FlexBox from '@/components/common/FlexBox'
 
 const SignIn = () => {
+    const [modal, contextHolder] = AntdModal.useModal()
     const { refreshRouter } = useContext(AppContext)
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
@@ -29,6 +32,7 @@ const SignIn = () => {
         },
         [location.pathname]
     )
+    const [twoFactorForm] = AntdForm.useForm<{ twoFactorCode: string }>()
     const [isSigningIn, setIsSigningIn] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
@@ -55,7 +59,8 @@ const SignIn = () => {
         void r_auth_login({
             account: loginParam.account,
             password: loginParam.password,
-            captchaCode
+            captchaCode,
+            twoFactorCode: loginParam.twoFactorCode
         })
             .then((res) => {
                 const response = res.data
@@ -96,6 +101,56 @@ const SignIn = () => {
                             })
                         }, 1500)
                         break
+                    case PERMISSION_NEED_TWO_FACTOR:
+                        twoFactorForm.resetFields()
+                        void modal.confirm({
+                            title: '双因素验证',
+                            getContainer: false,
+                            centered: true,
+                            content: (
+                                <>
+                                    <AntdForm form={twoFactorForm}>
+                                        <AntdForm.Item
+                                            name={'twoFactorCode'}
+                                            label={'验证码'}
+                                            style={{ marginTop: 10 }}
+                                            rules={[{ required: true, len: 6 }]}
+                                        >
+                                            <AntdInput
+                                                showCount
+                                                maxLength={6}
+                                                ref={(input) => {
+                                                    input?.focus()
+                                                }}
+                                            />
+                                        </AntdForm.Item>
+                                    </AntdForm>
+                                </>
+                            ),
+                            onOk: () =>
+                                twoFactorForm.validateFields().then(
+                                    () => {
+                                        return new Promise<void>((resolve) => {
+                                            handleOnFinish({
+                                                ...loginParam,
+                                                twoFactorCode: twoFactorForm.getFieldValue(
+                                                    'twoFactorCode'
+                                                ) as string
+                                            })
+                                            resolve()
+                                        })
+                                    },
+                                    () => {
+                                        return new Promise((_, reject) => {
+                                            reject('输入有误')
+                                        })
+                                    }
+                                ),
+                            onCancel: () => {
+                                setIsSigningIn(false)
+                            }
+                        })
+                        break
                     case PERMISSION_USERNAME_NOT_FOUND:
                     case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
                         void message.error(
@@ -105,6 +160,10 @@ const SignIn = () => {
                         )
                         setIsSigningIn(false)
                         break
+                    case PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR:
+                        void message.error('双因素验证码错误')
+                        setIsSigningIn(false)
+                        break
                     case PERMISSION_USER_DISABLE:
                         void message.error(
                             <>
@@ -170,7 +229,13 @@ const SignIn = () => {
                             />
                         </AntdForm.Item>
                         <FlexBox direction={'horizontal'} className={'addition'}>
-                            <AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
+                            <a
+                                onClick={() => {
+                                    navigate('/')
+                                }}
+                            >
+                                返回首页
+                            </a>
                             <a
                                 onClick={() => {
                                     navigate(`/forget${location.search}`, { replace: true })
@@ -203,6 +268,7 @@ const SignIn = () => {
                     </AntdForm>
                 </FlexBox>
             </FitCenter>
+            {contextHolder}
         </div>
     )
 }