perf: captcha code (#2620)

* perf:  captcha code

* perf: dockerfile

projects/app/src/components/support/user/safe/SendCodeAuthModal.tsx

@@ -1,58 +1,72 @@
 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 { Button, Input, Image, ModalBody, ModalFooter, Skeleton } from '@chakra-ui/react';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useTranslation } from 'next-i18next';
-import { useState } from 'react';
+import { useForm } from 'react-hook-form';
 
 const SendCodeAuthModal = ({
   username,
-  type,
-  onClose
+  onClose,
+  onSending,
+  onSendCode
 }: {
   username: string;
-  type: UserAuthTypeEnum;
   onClose: () => void;
+
+  onSending: boolean;
+  onSendCode: (params_0: { username: string; captcha: string }) => Promise<void>;
 }) => {
   const { t } = useTranslation();
-  const [captchaInput, setCaptchaInput] = useState('');
-  const { codeSending, sendCode } = useSendCode();
+
+  const { register, handleSubmit } = useForm({
+    defaultValues: {
+      code: ''
+    }
+  });
+
   const {
     data,
     loading,
     runAsync: getCaptcha
   } = useRequest2(() => getCaptchaPic(username), { manual: false });
+
   return (
-    <MyModal isOpen={true} isLoading={loading}>
+    <MyModal isOpen={true}>
       <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)}
-        />
+        <Skeleton
+          minH="200px"
+          isLoaded={!loading}
+          fadeDuration={2}
+          display={'flex'}
+          justifyContent={'center'}
+          my={1}
+        >
+          <Image
+            borderRadius={'md'}
+            w={'100%'}
+            h={'200px'}
+            _hover={{ cursor: 'pointer' }}
+            mb={8}
+            onClick={getCaptcha}
+            src={data?.captchaImage}
+            alt=""
+          />
+        </Skeleton>
+
+        <Input placeholder={t('common:support.user.captcha_placeholder')} {...register('code')} />
       </ModalBody>
       <ModalFooter gap={2}>
-        <Button isLoading={codeSending} variant={'whiteBase'} onClick={onClose}>
+        <Button isLoading={onSending} variant={'whiteBase'} onClick={onClose}>
           {t('common:common.Cancel')}
         </Button>
         <Button
-          isLoading={codeSending}
-          onClick={async () => {
-            await sendCode({ username, type, captcha: captchaInput });
-            onClose();
-          }}
+          isLoading={onSending}
+          onClick={handleSubmit(({ code }) => {
+            return onSendCode({ username, captcha: code }).then(() => {
+              onClose();
+            });
+          })}
         >
           {t('common:common.Confirm')}
         </Button>