System inform (#2263)

* feat: Bind Notification Pipe (#2229) * chore: account page add bind notification modal * feat: timerlock schema and type * feat(fe): bind notification method modal * chore: fe adjust * feat: clean useless code * fix: cron lock * chore: adjust the code * chore: rename api * chore: remove unused code * chore: fe adjust * perf: bind inform ux * fix: time ts * chore: notification (#2251) * perf: send message code * perf: sub schema index * fix: timezone plugin * fix: format --------- Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
2024-08-05 00:29:14 +08:00
parent 998e7833e8
commit 56f6e69bc7
31 changed files with 344 additions and 171 deletions
--- a/projects/app/src/pages/account/components/UpdateNotificationModal.tsx
+++ b/projects/app/src/pages/account/components/UpdateNotificationModal.tsx
@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+import { ModalBody, Box, Flex, Input, ModalFooter, Button, HStack } from '@chakra-ui/react';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import { useTranslation } from 'next-i18next';
+import { useForm } from 'react-hook-form';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { updateNotificationAccount } from '@/web/support/user/api';
+import Icon from '@fastgpt/web/components/common/Icon';
+import { useSendCode } from '@/web/support/user/hooks/useSendCode';
+import { useUserStore } from '@/web/support/user/useUserStore';
+
+type FormType = {
+  account: string;
+  verifyCode: string;
+};
+
+const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation();
+  const { initUserInfo } = useUserStore();
+  const { register, handleSubmit, trigger, getValues, watch } = useForm<FormType>({
+    defaultValues: {
+      account: '',
+      verifyCode: ''
+    }
+  });
+  const account = watch('account');
+  const verifyCode = watch('verifyCode');
+
+  const { runAsync: onSubmit, loading: isLoading } = useRequest2(
+    (data: FormType) => {
+      return updateNotificationAccount(data);
+    },
+    {
+      onSuccess() {
+        initUserInfo();
+        onClose();
+      },
+      successToast: t('user:bind_inform_account_success'),
+      errorToast: t('user:bind_inform_account_error')
+    }
+  );
+
+  const { sendCodeText, sendCode, codeCountDown } = useSendCode();
+
+  const onclickSendCode = useCallback(async () => {
+    const check = await trigger('account');
+    if (!check) return;
+    sendCode({
+      username: getValues('account'),
+      type: 'bindNotification'
+    });
+  }, [getValues, sendCode, trigger]);
+
+  return (
+    <MyModal
+      isOpen
+      iconSrc="common/settingLight"
+      w={'32rem'}
+      title={t('common:user.Notification Receive')}
+    >
+      <ModalBody px={10}>
+        <Flex flexDirection="column">
+          <HStack px="6" py="3" color="primary.600" bgColor="primary.50" borderRadius="md">
+            <Icon name="common/info" w="1rem" />
+            <Box fontSize={'sm'}>{t('user:notification.Bind Notification Pipe Hint')}</Box>
+          </HStack>
+          <Flex mt="4" alignItems="center">
+            <Box flex={'0 0 70px'}>{t('common:user.Account')}</Box>
+            <Input
+              flex={1}
+              bg={'myGray.50'}
+              {...register('account', { required: true })}
+              placeholder={t('common:support.user.Email Or Phone')}
+            ></Input>
+          </Flex>
+          <Flex mt="6" alignItems="center" position={'relative'}>
+            <Box flex={'0 0 70px'}>{t('common:support.user.Verify Code')}</Box>
+            <Input
+              flex={1}
+              bg={'myGray.50'}
+              {...register('verifyCode', { required: true })}
+              placeholder={t('common:support.user.Verify Code')}
+            ></Input>
+            <Box
+              position={'absolute'}
+              right={2}
+              zIndex={1}
+              fontSize={'sm'}
+              {...(codeCountDown > 0
+                ? {
+                    color: 'myGray.500'
+                  }
+                : {
+                    color: 'primary.700',
+                    cursor: 'pointer',
+                    onClick: onclickSendCode
+                  })}
+            >
+              {sendCodeText}
+            </Box>
+          </Flex>
+        </Flex>
+      </ModalBody>
+      <ModalFooter>
+        <Button mr={3} variant={'whiteBase'} onClick={onClose}>
+          {t('common:common.Cancel')}
+        </Button>
+        <Button
+          isLoading={isLoading}
+          isDisabled={!account || !verifyCode}
+          onClick={handleSubmit((data) => onSubmit(data))}
+        >
+          {t('common:common.Confirm')}
+        </Button>
+      </ModalFooter>
+    </MyModal>
+  );
+};
+
+export default UpdateNotificationModal;