feat: add cookies tip drawer (#2935)

packages/web/i18n/en/login.json

@@ -12,5 +12,8 @@
   "register": "Register",
   "root_password_placeholder": "The root user password is the value of the environment variable DEFAULT_ROOT_PSW",
   "terms": "Terms",
-  "use_root_login": "Log in as root user"
-}
+  "use_root_login": "Log in as root user",
+  "agree": "agree",
+  "cookies_tip": " This website uses cookies to provide a better service experience. By continuing to use the site, you agree to our Cookie Policy.",
+  "privacy_policy": "Privacy Policy"
+}

packages/web/i18n/zh/login.json

@@ -12,5 +12,8 @@
   "use_root_login": "使用 root 用户登录",
   "redirect": "跳转",
   "no_remind": "不再提醒",
-  "Chinese_ip_tip": "检测到您是中国大陆 IP，点击跳转访问中国大陆版。"
-}
+  "Chinese_ip_tip": "检测到您是中国大陆 IP，点击跳转访问中国大陆版。",
+  "agree": "同意",
+  "cookies_tip": "本网站使用 cookies 提供更好的服务体验。继续使用即表示您同意我们的 Cookie 政策。",
+  "privacy_policy": "隐私政策"
+}

projects/app/src/pages/login/index.tsx

@@ -27,6 +27,7 @@ import { useTranslation } from 'next-i18next';
 import I18nLngSelector from '@/components/Select/I18nLngSelector';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import { GET } from '@/web/common/api/request';
+import { getDocPath } from '@/web/common/system/doc';
 
 const RegisterForm = dynamic(() => import('./components/RegisterForm'));
 const ForgetPasswordForm = dynamic(() => import('./components/ForgetPasswordForm'));
@@ -50,10 +51,18 @@ const Login = ({ ChineseRedirectUrl }: { ChineseRedirectUrl: string }) => {
     onOpen: onOpenRedirect,
     onClose: onCloseRedirect
   } = useDisclosure();
+  const {
+    isOpen: isOpenCookiesDrawer,
+    onOpen: onOpenCookiesDrawer,
+    onClose: onCloseCookiesDrawer
+  } = useDisclosure();
 
   const [showRedirect, setShowRedirect] = useLocalStorageState<boolean>('showRedirect', {
     defaultValue: true
   });
+  const cookieVersion = 1;
+  const [localCookieVersion, setLocalCookieVersion] =
+    useLocalStorageState<number>('localCookieVersion');
 
   const loginSuccess = useCallback(
     (res: ResLogin) => {
@@ -111,6 +120,7 @@ const Login = ({ ChineseRedirectUrl }: { ChineseRedirectUrl: string }) => {
     clearToken();
     router.prefetch('/app/list');
     ChineseRedirectUrl && showRedirect && checkIpInChina();
+    localCookieVersion !== cookieVersion && onOpenCookiesDrawer();
   });
 
   return (
@@ -182,6 +192,15 @@ const Login = ({ ChineseRedirectUrl }: { ChineseRedirectUrl: string }) => {
           disableDrawer={() => setShowRedirect(false)}
         />
       )}
+      {isOpenCookiesDrawer && (
+        <CookiesDrawer
+          onAgree={() => {
+            setLocalCookieVersion(cookieVersion);
+            onCloseCookiesDrawer();
+          }}
+          onClose={onCloseCookiesDrawer}
+        />
+      )}
     </>
   );
 };
@@ -228,6 +247,41 @@ function RedirectDrawer({
   );
 }
 
+function CookiesDrawer({ onClose, onAgree }: { onClose: () => void; onAgree: () => void }) {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  return (
+    <Drawer placement="bottom" size={'xs'} isOpen={true} onClose={onClose}>
+      <DrawerOverlay backgroundColor={'rgba(0,0,0,0.2)'} />
+      <DrawerContent py={'1.75rem'} px={'3rem'}>
+        <DrawerCloseButton size={'sm'} />
+        <Flex align={'center'} justify={'space-between'}>
+          <Box>
+            <Box color={'myGray.900'} fontWeight={'500'} fontSize={'1rem'}>
+              {t('login:cookies_tip')}
+            </Box>
+            <Box
+              color={'primary.700'}
+              fontWeight={'500'}
+              fontSize={'1rem'}
+              textDecorationLine={'underline'}
+              cursor={'pointer'}
+              w={'fit-content'}
+              onClick={() => router.push(getDocPath('/docs/agreement/privacy/'))}
+            >
+              {t('login:privacy_policy')}
+            </Box>
+          </Box>
+          <Button ml={'0.75rem'} onClick={onAgree}>
+            {t('login:agree')}
+          </Button>
+        </Flex>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
 export async function getServerSideProps(context: any) {
   return {
     props: {