Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 3bcc3430 by papapatrick Committed by GitHub
Options

feat: add captcha (#2613) 

* feat: captcha

* add borderRadius

* code perf
parent d6233cd7
Showing with 215 additions and 93 deletions
packages/global/support/user/auth/constants.ts
...@@ -2,12 +2,14 @@ export enum UserAuthTypeEnum { ...@@ -2,12 +2,14 @@ export enum UserAuthTypeEnum {
register = 'register', register = 'register',
findPassword = 'findPassword', findPassword = 'findPassword',
wxLogin = 'wxLogin', wxLogin = 'wxLogin',
bindNotification = 'bindNotification' bindNotification = 'bindNotification',
captcha = 'captcha'
} }
export const userAuthTypeMap = { export const userAuthTypeMap = {
[UserAuthTypeEnum.register]: 'register', [UserAuthTypeEnum.register]: 'register',
[UserAuthTypeEnum.findPassword]: 'findPassword', [UserAuthTypeEnum.findPassword]: 'findPassword',
[UserAuthTypeEnum.wxLogin]: 'wxLogin', [UserAuthTypeEnum.wxLogin]: 'wxLogin',
[UserAuthTypeEnum.bindNotification]: 'bindNotification' [UserAuthTypeEnum.bindNotification]: 'bindNotification',
[UserAuthTypeEnum.captcha]: 'captcha'
}; };
packages/web/i18n/en/common.json
...@@ -647,8 +647,7 @@ ...@@ -647,8 +647,7 @@
"success": "Start syncing" "success": "Start syncing"
} }
}, },
"training": { "training": {}
}
}, },
"data": { "data": {
"Auxiliary Data": "Auxiliary data", "Auxiliary Data": "Auxiliary data",
...@@ -1257,6 +1256,7 @@ ...@@ -1257,6 +1256,7 @@
"auth": { "auth": {
"Sending Code": "Sending" "Sending Code": "Sending"
}, },
"captcha_placeholder": "Please enter the verification code",
"inform": { "inform": {
"System message": "System message" "System message": "System message"
}, },
......
packages/web/i18n/zh/common.json
...@@ -647,8 +647,7 @@ ...@@ -647,8 +647,7 @@
"success": "开始同步" "success": "开始同步"
} }
}, },
"training": { "training": {}
}
}, },
"data": { "data": {
"Auxiliary Data": "辅助数据", "Auxiliary Data": "辅助数据",
...@@ -1248,6 +1247,7 @@ ...@@ -1248,6 +1247,7 @@
}, },
"user": { "user": {
"Avatar": "头像", "Avatar": "头像",
"captcha_placeholder": "请输入验证码",
"Go laf env": "点击前往 {{env}} 获取 PAT 凭证。", "Go laf env": "点击前往 {{env}} 获取 PAT 凭证。",
"Laf account course": "查看绑定 laf 账号教程。", "Laf account course": "查看绑定 laf 账号教程。",
"Laf account intro": "绑定你的 laf 账号后，你将可以在工作流中使用 laf 模块，实现在线编写代码。", "Laf account intro": "绑定你的 laf 账号后，你将可以在工作流中使用 laf 模块，实现在线编写代码。",
......
projects/app/src/components/support/user/safe/SendCodeAuthModal.tsx 0 → 100644
import { getCaptchaPic } from '@/web/support/user/api';
import { useSendCode } from '@/web/support/user/hooks/useSendCode';
import { Box, Button, Input, Image, ModalBody, ModalFooter } from '@chakra-ui/react';
import { UserAuthTypeEnum } from '@fastgpt/global/support/user/auth/constants';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { useTranslation } from 'next-i18next';
import { useState } from 'react';
const SendCodeAuthModal = ({
username,
type,
onClose
}: {
username: string;
type: UserAuthTypeEnum;
onClose: () => void;
}) => {
const { t } = useTranslation();
const [captchaInput, setCaptchaInput] = useState('');
const { codeSending, sendCode } = useSendCode();
const {
data,
loading,
runAsync: getCaptcha
} = useRequest2(() => getCaptchaPic(username), { manual: false });
return (
<MyModal isOpen={true} isLoading={loading}>
<ModalBody pt={8}>
<Image
borderRadius={'md'}
w={'100%'}
h={'200px'}
_hover={{ cursor: 'pointer' }}
mb={8}
onClick={getCaptcha}
src={data?.captchaImage}
alt="captcha"
/>
<Input
placeholder={t('common:support.user.captcha_placeholder')}
value={captchaInput}
onChange={(e) => setCaptchaInput(e.target.value)}
/>
</ModalBody>
<ModalFooter gap={2}>
<Button isLoading={codeSending} variant={'whiteBase'} onClick={onClose}>
{t('common:common.Cancel')}
</Button>
<Button
isLoading={codeSending}
onClick={async () => {
await sendCode({ username, type, captcha: captchaInput });
onClose();
}}
>
{t('common:common.Confirm')}
</Button>
</ModalFooter>
</MyModal>
);
};
export default SendCodeAuthModal;
projects/app/src/pages/account/components/Info/UpdateNotificationModal.tsx
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { ModalBody, Box, Flex, Input, ModalFooter, Button, HStack } from '@chakra-ui/react'; import {
ModalBody,
Box,
Flex,
Input,
ModalFooter,
Button,
HStack,
useDisclosure
} from '@chakra-ui/react';
import MyModal from '@fastgpt/web/components/common/MyModal'; import MyModal from '@fastgpt/web/components/common/MyModal';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
...@@ -9,6 +18,8 @@ import Icon from '@fastgpt/web/components/common/Icon'; ...@@ -9,6 +18,8 @@ import Icon from '@fastgpt/web/components/common/Icon';
import { useSendCode } from '@/web/support/user/hooks/useSendCode'; import { useSendCode } from '@/web/support/user/hooks/useSendCode';
import { useUserStore } from '@/web/support/user/useUserStore'; import { useUserStore } from '@/web/support/user/useUserStore';
import { useSystemStore } from '@/web/common/system/useSystemStore'; import { useSystemStore } from '@/web/common/system/useSystemStore';
import SendCodeAuthModal from '@/components/support/user/safe/SendCodeAuthModal';
import { UserAuthTypeEnum } from '@fastgpt/global/support/user/auth/constants';
type FormType = { type FormType = {
account: string; account: string;
...@@ -27,7 +38,11 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => { ...@@ -27,7 +38,11 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
}); });
const account = watch('account'); const account = watch('account');
const verifyCode = watch('verifyCode'); const verifyCode = watch('verifyCode');
const {
isOpen: openCodeAuthModal,
onOpen: onOpenCodeAuthModal,
onClose: onCloseCodeAuthModal
} = useDisclosure();
const { runAsync: onSubmit, loading: isLoading } = useRequest2( const { runAsync: onSubmit, loading: isLoading } = useRequest2(
(data: FormType) => { (data: FormType) => {
return updateNotificationAccount(data); return updateNotificationAccount(data);
...@@ -42,16 +57,13 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => { ...@@ -42,16 +57,13 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
} }
); );
const { sendCodeText, sendCode, codeCountDown } = useSendCode(); const { sendCodeText, codeCountDown } = useSendCode();
const onclickSendCode = useCallback(async () => { const onclickSendCode = useCallback(async () => {
const check = await trigger('account'); const check = await trigger('account');
if (!check) return; if (!check) return;
sendCode({ onOpenCodeAuthModal();
username: getValues('account'), }, [onOpenCodeAuthModal, trigger]);
type: 'bindNotification'
});
}, [getValues, sendCode, trigger]);
const placeholder = feConfigs?.bind_notification_method const placeholder = feConfigs?.bind_notification_method
?.map((item) => { ?.map((item) => {
...@@ -65,68 +77,77 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => { ...@@ -65,68 +77,77 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
.join('/'); .join('/');
return ( return (
<MyModal <>
isOpen <MyModal
iconSrc="common/settingLight" isOpen
w={'32rem'} iconSrc="common/settingLight"
title={t('common:user.Notification Receive')} w={'32rem'}
> title={t('common:user.Notification Receive')}
<ModalBody px={10}> >
<Flex flexDirection="column"> <ModalBody px={10}>
<HStack px="6" py="3" color="primary.600" bgColor="primary.50" borderRadius="md"> <Flex flexDirection="column">
<Icon name="common/info" w="1rem" /> <HStack px="6" py="3" color="primary.600" bgColor="primary.50" borderRadius="md">
<Box fontSize={'sm'}>{t('user:notification.Bind Notification Pipe Hint')}</Box> <Icon name="common/info" w="1rem" />
</HStack> <Box fontSize={'sm'}>{t('user:notification.Bind Notification Pipe Hint')}</Box>
<Flex mt="4" alignItems="center"> </HStack>
<Box flex={'0 0 70px'}>{t('common:user.Account')}</Box> <Flex mt="4" alignItems="center">
<Input <Box flex={'0 0 70px'}>{t('common:user.Account')}</Box>
flex={1} <Input
bg={'myGray.50'} flex={1}
{...register('account', { required: true })} bg={'myGray.50'}
placeholder={placeholder} {...register('account', { required: true })}
></Input> placeholder={placeholder}
</Flex> ></Input>
<Flex mt="6" alignItems="center" position={'relative'}> </Flex>
<Box flex={'0 0 70px'}>{t('user:password.verification_code')}</Box> <Flex mt="6" alignItems="center" position={'relative'}>
<Input <Box flex={'0 0 70px'}>{t('user:password.verification_code')}</Box>
flex={1} <Input
bg={'myGray.50'} flex={1}
{...register('verifyCode', { required: true })} bg={'myGray.50'}
placeholder={t('user:password.code_required')} {...register('verifyCode', { required: true })}
></Input> placeholder={t('user:password.code_required')}
<Box ></Input>
position={'absolute'} <Box
right={2} position={'absolute'}
zIndex={1} right={2}
fontSize={'sm'} zIndex={1}
{...(codeCountDown > 0 fontSize={'sm'}
? { {...(codeCountDown > 0
color: 'myGray.500' ? {
} color: 'myGray.500'
: { }
color: 'primary.700', : {
cursor: 'pointer', color: 'primary.700',
onClick: onclickSendCode cursor: 'pointer',
})} onClick: onclickSendCode
> })}
{sendCodeText} >
</Box> {sendCodeText}
</Box>
</Flex>
</Flex> </Flex>
</Flex> </ModalBody>
</ModalBody> <ModalFooter>
<ModalFooter> <Button mr={3} variant={'whiteBase'} onClick={onClose}>
<Button mr={3} variant={'whiteBase'} onClick={onClose}> {t('common:common.Cancel')}
{t('common:common.Cancel')} </Button>
</Button> <Button
<Button isLoading={isLoading}
isLoading={isLoading} isDisabled={!account || !verifyCode}
isDisabled={!account || !verifyCode} onClick={handleSubmit((data) => onSubmit(data))}
onClick={handleSubmit((data) => onSubmit(data))} >
> {t('common:common.Confirm')}
{t('common:common.Confirm')} </Button>
</Button> </ModalFooter>
</ModalFooter> </MyModal>
</MyModal> {openCodeAuthModal && (
<SendCodeAuthModal
onClose={onCloseCodeAuthModal}
username={getValues('account')}
type={UserAuthTypeEnum.bindNotification}
/>
)}
</>
); );
}; };
......
projects/app/src/pages/login/components/ForgetPasswordForm.tsx
import React, { useState, Dispatch, useCallback } from 'react'; import React, { useState, Dispatch, useCallback } from 'react';
import { FormControl, Box, Input, Button } from '@chakra-ui/react'; import { FormControl, Box, Input, Button, useDisclosure } from '@chakra-ui/react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { LoginPageTypeEnum } from '@/web/support/user/login/constants'; import { LoginPageTypeEnum } from '@/web/support/user/login/constants';
import { postFindPassword } from '@/web/support/user/api'; import { postFindPassword } from '@/web/support/user/api';
...@@ -8,6 +8,8 @@ import type { ResLogin } from '@/global/support/api/userRes.d'; ...@@ -8,6 +8,8 @@ import type { ResLogin } from '@/global/support/api/userRes.d';
import { useToast } from '@fastgpt/web/hooks/useToast'; import { useToast } from '@fastgpt/web/hooks/useToast';
import { useSystemStore } from '@/web/common/system/useSystemStore'; import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { UserAuthTypeEnum } from '@fastgpt/global/support/user/auth/constants';
import SendCodeAuthModal from '@/components/support/user/safe/SendCodeAuthModal';
interface Props { interface Props {
setPageType: Dispatch<`${LoginPageTypeEnum}`>; setPageType: Dispatch<`${LoginPageTypeEnum}`>;
loginSuccess: (e: ResLogin) => void; loginSuccess: (e: ResLogin) => void;
...@@ -34,16 +36,17 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => { ...@@ -34,16 +36,17 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
mode: 'onBlur' mode: 'onBlur'
}); });
const { codeSending, sendCodeText, sendCode, codeCountDown } = useSendCode(); const { sendCodeText, codeCountDown } = useSendCode();
const {
isOpen: openCodeAuthModal,
onOpen: onOpenCodeAuthModal,
onClose: onCloseCodeAuthModal
} = useDisclosure();
const onclickSendCode = useCallback(async () => { const onclickSendCode = useCallback(async () => {
const check = await trigger('username'); const check = await trigger('username');
if (!check) return; if (!check) return;
sendCode({ onOpenCodeAuthModal();
username: getValues('username'), }, [onOpenCodeAuthModal, trigger]);
type: 'findPassword'
});
}, [getValues, sendCode, trigger]);
const [requesting, setRequesting] = useState(false); const [requesting, setRequesting] = useState(false);
const placeholder = feConfigs?.find_password_method const placeholder = feConfigs?.find_password_method
...@@ -200,6 +203,13 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => { ...@@ -200,6 +203,13 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
{t('user:password.to_login')} {t('user:password.to_login')}
</Box> </Box>
</Box> </Box>
{openCodeAuthModal && (
<SendCodeAuthModal
onClose={onCloseCodeAuthModal}
username={getValues('username')}
type={UserAuthTypeEnum.findPassword}
/>
)}
</> </>
); );
}; };
......
projects/app/src/pages/login/components/RegisterForm.tsx
import React, { useState, Dispatch, useCallback } from 'react'; import React, { useState, Dispatch, useCallback } from 'react';
import { FormControl, Box, Input, Button } from '@chakra-ui/react'; import { FormControl, Box, Input, Button, useDisclosure } from '@chakra-ui/react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { LoginPageTypeEnum } from '@/web/support/user/login/constants'; import { LoginPageTypeEnum } from '@/web/support/user/login/constants';
import { postRegister } from '@/web/support/user/api'; import { postRegister } from '@/web/support/user/api';
...@@ -11,6 +11,9 @@ import { emptyTemplates } from '@/web/core/app/templates'; ...@@ -11,6 +11,9 @@ import { emptyTemplates } from '@/web/core/app/templates';
import { useSystemStore } from '@/web/common/system/useSystemStore'; import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { AppTypeEnum } from '@fastgpt/global/core/app/constants'; import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import SendCodeAuthModal from '@/components/support/user/safe/SendCodeAuthModal';
import { UserAuthTypeEnum } from '@fastgpt/global/support/user/auth/constants';
interface Props { interface Props {
loginSuccess: (e: ResLogin) => void; loginSuccess: (e: ResLogin) => void;
setPageType: Dispatch<`${LoginPageTypeEnum}`>; setPageType: Dispatch<`${LoginPageTypeEnum}`>;
...@@ -37,17 +40,18 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => { ...@@ -37,17 +40,18 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
} = useForm<RegisterType>({ } = useForm<RegisterType>({
mode: 'onBlur' mode: 'onBlur'
}); });
const {
const { sendCodeText, sendCode, codeCountDown } = useSendCode(); isOpen: openCodeAuthModal,
onOpen: onOpenCodeAuthModal,
onClose: onCloseCodeAuthModal
} = useDisclosure();
const { sendCodeText, codeCountDown } = useSendCode();
const onclickSendCode = useCallback(async () => { const onclickSendCode = useCallback(async () => {
const check = await trigger('username'); const check = await trigger('username');
if (!check) return; if (!check) return;
sendCode({ onOpenCodeAuthModal();
username: getValues('username'), }, [onOpenCodeAuthModal, trigger]);
type: 'register'
});
}, [getValues, sendCode, trigger]);
const [requesting, setRequesting] = useState(false); const [requesting, setRequesting] = useState(false);
...@@ -215,6 +219,13 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => { ...@@ -215,6 +219,13 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
{t('user:register.to_login')} {t('user:register.to_login')}
</Box> </Box>
</Box> </Box>
{openCodeAuthModal && (
<SendCodeAuthModal
onClose={onCloseCodeAuthModal}
username={getValues('username')}
type={UserAuthTypeEnum.register}
/>
)}
</> </>
); );
}; };
......
projects/app/src/web/support/user/api.ts
...@@ -15,6 +15,7 @@ export const sendAuthCode = (data: { ...@@ -15,6 +15,7 @@ export const sendAuthCode = (data: {
username: string; username: string;
type: `${UserAuthTypeEnum}`; type: `${UserAuthTypeEnum}`;
googleToken: string; googleToken: string;
captcha: string;
}) => POST(`/proApi/support/user/inform/sendAuthCode`, data); }) => POST(`/proApi/support/user/inform/sendAuthCode`, data);
export const getTokenLogin = () => export const getTokenLogin = () =>
...@@ -82,3 +83,8 @@ export const getWXLoginQR = () => ...@@ -82,3 +83,8 @@ export const getWXLoginQR = () =>
export const getWXLoginResult = (code: string) => export const getWXLoginResult = (code: string) =>
GET<ResLogin>(`/proApi/support/user/account/login/wx/getResult`, { code }); GET<ResLogin>(`/proApi/support/user/account/login/wx/getResult`, { code });
export const getCaptchaPic = (username: string) =>
GET<{
captchaImage: string;
}>('/proApi/support/user/account/captcha', { username });
projects/app/src/web/support/user/hooks/useSendCode.ts
...@@ -12,10 +12,18 @@ export const useSendCode = () => { ...@@ -12,10 +12,18 @@ export const useSendCode = () => {
const [codeCountDown, setCodeCountDown] = useState(0); const [codeCountDown, setCodeCountDown] = useState(0);
const { runAsync: sendCode, loading: codeSending } = useRequest2( const { runAsync: sendCode, loading: codeSending } = useRequest2(
async ({ username, type }: { username: string; type: `${UserAuthTypeEnum}` }) => { async ({
username,
type,
captcha
}: {
username: string;
type: `${UserAuthTypeEnum}`;
captcha: string;
}) => {
if (codeCountDown > 0) return; if (codeCountDown > 0) return;
const googleToken = await getClientToken(feConfigs.googleClientVerKey); const googleToken = await getClientToken(feConfigs.googleClientVerKey);
await sendAuthCode({ username, type, googleToken }); await sendAuthCode({ username, type, googleToken, captcha });
setCodeCountDown(60); setCodeCountDown(60);
timer = setInterval(() => { timer = setInterval(() => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment