V4.6.6-1 (#656)

projects/app/src/pages/login/components/RegisterForm.tsx

@@ -34,7 +34,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
     mode: 'onBlur'
   });
 
-  const { codeSending, sendCodeText, sendCode, codeCountDown } = useSendCode();
+  const { sendCodeText, sendCode, codeCountDown } = useSendCode();
 
   const onclickSendCode = useCallback(async () => {
     const check = await trigger('username');
@@ -90,11 +90,11 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
       <Box fontWeight={'bold'} fontSize={'2xl'} textAlign={'center'}>
         注册 {feConfigs?.systemTitle} 账号
       </Box>
-      <form onSubmit={handleSubmit(onclickRegister)}>
-        <FormControl mt={5} isInvalid={!!errors.username}>
+      <Box mt={'42px'}>
+        <FormControl isInvalid={!!errors.username}>
           <Input
+            bg={'myGray.50'}
             placeholder="邮箱/手机号"
-            size={['md', 'lg']}
             {...register('username', {
               required: '邮箱/手机号不能为空',
               pattern: {
@@ -104,41 +104,46 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
               }
             })}
           ></Input>
-          <FormErrorMessage position={'absolute'} fontSize="xs">
-            {!!errors.username && errors.username.message}
-          </FormErrorMessage>
         </FormControl>
-        <FormControl mt={8} isInvalid={!!errors.username}>
-          <Flex>
-            <Input
-              flex={1}
-              size={['md', 'lg']}
-              placeholder="验证码"
-              {...register('code', {
-                required: '验证码不能为空'
-              })}
-            ></Input>
-            <Button
-              ml={5}
-              w={'145px'}
-              maxW={'50%'}
-              size={['md', 'lg']}
-              onClick={onclickSendCode}
-              isDisabled={codeCountDown > 0}
-              isLoading={codeSending}
-            >
-              {sendCodeText}
-            </Button>
-          </Flex>
-          <FormErrorMessage position={'absolute'} fontSize="xs">
-            {!!errors.code && errors.code.message}
-          </FormErrorMessage>
-        </FormControl>
-        <FormControl mt={8} isInvalid={!!errors.password}>
+        <FormControl
+          mt={6}
+          isInvalid={!!errors.code}
+          display={'flex'}
+          alignItems={'center'}
+          position={'relative'}
+        >
           <Input
+            bg={'myGray.50'}
+            flex={1}
+            maxLength={8}
+            placeholder="验证码"
+            {...register('code', {
+              required: '验证码不能为空'
+            })}
+          ></Input>
+          <Box
+            position={'absolute'}
+            right={3}
+            zIndex={1}
+            fontSize={'sm'}
+            {...(codeCountDown > 0
+              ? {
+                  color: 'myGray.500'
+                }
+              : {
+                  color: 'primary.700',
+                  cursor: 'pointer',
+                  onClick: onclickSendCode
+                })}
+          >
+            {sendCodeText}
+          </Box>
+        </FormControl>
+        <FormControl mt={6} isInvalid={!!errors.password}>
+          <Input
+            bg={'myGray.50'}
             type={'password'}
-            placeholder="密码"
-            size={['md', 'lg']}
+            placeholder="密码(4~20位)"
             {...register('password', {
               required: '密码不能为空',
               minLength: {
@@ -151,45 +156,41 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
               }
             })}
           ></Input>
-          <FormErrorMessage position={'absolute'} fontSize="xs">
-            {!!errors.password && errors.password.message}
-          </FormErrorMessage>
         </FormControl>
-        <FormControl mt={8} isInvalid={!!errors.password2}>
+        <FormControl mt={6} isInvalid={!!errors.password2}>
           <Input
+            bg={'myGray.50'}
             type={'password'}
             placeholder="确认密码"
-            size={['md', 'lg']}
             {...register('password2', {
               validate: (val) => (getValues('password') === val ? true : '两次密码不一致')
             })}
           ></Input>
-          <FormErrorMessage position={'absolute'} fontSize="xs">
-            {!!errors.password2 && errors.password2.message}
-          </FormErrorMessage>
         </FormControl>
+        <Button
+          type="submit"
+          mt={6}
+          w={'100%'}
+          size={['md', 'lg']}
+          colorScheme="blue"
+          isLoading={requesting}
+          onClick={handleSubmit(onclickRegister)}
+        >
+          确认注册
+        </Button>
         <Box
           float={'right'}
           fontSize="sm"
           mt={2}
-          color={'blue.500'}
+          mb={'50px'}
+          color={'primary.700'}
           cursor={'pointer'}
           _hover={{ textDecoration: 'underline' }}
           onClick={() => setPageType('login')}
         >
           已有账号，去登录
         </Box>
-        <Button
-          type="submit"
-          mt={5}
-          w={'100%'}
-          size={['md', 'lg']}
-          colorScheme="blue"
-          isLoading={requesting}
-        >
-          确认注册
-        </Button>
-      </form>
+      </Box>
     </>
   );
 };