feat: user-center/auth-failed

ui/src/components/HttpErrorContent/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
 
-const Index = ({ httpCode = '', errMsg = '', showErroCode = true }) => {
+const Index = ({ httpCode = '', errMsg = '', showErrorCode = true }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'page_error' });
   useEffect(() => {
     // auto height of container
@@ -31,7 +31,7 @@ const Index = ({ httpCode = '', errMsg = '', showErroCode = true }) => {
         style={{ fontSize: '120px', lineHeight: 1.2 }}>
         (=‘x‘=)
       </div>
-      {showErroCode && (
+      {showErrorCode && (
         <h4 className="text-center">{t('http_error', { code: httpCode })}</h4>
       )}
       <div className="text-center mb-3 fs-5">

ui/src/pages/50X/index.tsx

@@ -5,7 +5,7 @@ import { HttpErrorContent } from '@/components';
 const Index = () => {
   const [searchParams] = useSearchParams();
   const msg = searchParams.get('msg') || '';
-  return <HttpErrorContent httpCode="50X" errMsg={msg} showErroCode={!msg} />;
+  return <HttpErrorContent httpCode="50X" errMsg={msg} showErrorCode={!msg} />;
 };
 
 export default Index;

ui/src/pages/LoginFail/index.tsx

@@ -1,57 +0,0 @@
-import { memo } from 'react';
-import { Container, Card, Col, Carousel } from 'react-bootstrap';
-
-const data = [
-  {
-    id: 1,
-    url: require('@/assets/images/carousel-wecom-1.jpg'),
-  },
-  {
-    id: 2,
-    url: require('@/assets/images/carousel-wecom-2.jpg'),
-  },
-  {
-    id: 3,
-    url: require('@/assets/images/carousel-wecom-3.jpg'),
-  },
-  {
-    id: 4,
-    url: require('@/assets/images/carousel-wecom-4.jpg'),
-  },
-  {
-    id: 5,
-    url: require('@/assets/images/carousel-wecom-5.jpg'),
-  },
-];
-
-const Index = () => {
-  return (
-    <Container>
-      <Col lg={4} className="mx-auto mt-3 py-5">
-        <Card>
-          <Card.Body>
-            <h3 className="text-center pt-3 mb-3">WeCome Login</h3>
-            <p className="text-danger text-center">
-              Login failed, please allow this app to access your email
-              information before try again.
-            </p>
-
-            <Carousel controls={false}>
-              {data.map((item) => (
-                <Carousel.Item key={item.id}>
-                  <img
-                    className="d-block w-100"
-                    src={item.url}
-                    alt="First slide"
-                  />
-                </Carousel.Item>
-              ))}
-            </Carousel>
-          </Card.Body>
-        </Card>
-      </Col>
-    </Container>
-  );
-};
-
-export default memo(Index);

ui/src/pages/UserCenter/AuthFailed/components/WeCom.tsx

@@ -0,0 +1,55 @@
+import React, { FC } from 'react';
+import { Card, Col, Carousel } from 'react-bootstrap';
+
+const data = [
+  {
+    id: 1,
+    url: require('@/assets/images/carousel-wecom-1.jpg'),
+  },
+  {
+    id: 2,
+    url: require('@/assets/images/carousel-wecom-2.jpg'),
+  },
+  {
+    id: 3,
+    url: require('@/assets/images/carousel-wecom-3.jpg'),
+  },
+  {
+    id: 4,
+    url: require('@/assets/images/carousel-wecom-4.jpg'),
+  },
+  {
+    id: 5,
+    url: require('@/assets/images/carousel-wecom-5.jpg'),
+  },
+];
+
+const Index: FC = () => {
+  return (
+    <Col lg={4} className="mx-auto mt-3 py-5">
+      <Card>
+        <Card.Body>
+          <h3 className="text-center pt-3 mb-3">WeCom Login</h3>
+          <p className="text-danger text-center">
+            Login failed, please allow this app to access your email information
+            before try again.
+          </p>
+
+          <Carousel controls={false}>
+            {data.map((item) => (
+              <Carousel.Item key={item.id}>
+                <img
+                  className="d-block w-100"
+                  src={item.url}
+                  alt="First slide"
+                />
+              </Carousel.Item>
+            ))}
+          </Carousel>
+        </Card.Body>
+      </Card>
+    </Col>
+  );
+};
+
+export default Index;

ui/src/pages/UserCenter/AuthFailed/index.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import { Container } from 'react-bootstrap';
+import { useSearchParams } from 'react-router-dom';
+
+import { userCenterStore } from '@/stores';
+
+import WeCom from './components/WeCom';
+
+const Index = () => {
+  const [searchParam] = useSearchParams();
+  const { agent: ucAgent } = userCenterStore();
+  let agentName = ucAgent?.agent_info.name || '';
+  if (searchParam.get('agent_name')) {
+    agentName = searchParam.get('agent_name') || '';
+  }
+  return <Container>{/^WeCom/i.test(agentName) ? <WeCom /> : null}</Container>;
+};
+
+export default memo(Index);

ui/src/router/routes.ts

@@ -362,6 +362,10 @@ const routes: RouteNode[] = [
           },
         ],
       },
+      {
+        path: '/user-center/auth-failed',
+        page: 'pages/UserCenter/AuthFailed',
+      },
       // for review
       {
         path: 'review',
@@ -375,10 +379,6 @@ const routes: RouteNode[] = [
         path: '50x',
         page: 'pages/50X',
       },
-      {
-        path: 'login-fail',
-        page: 'pages/LoginFail',
-      },
     ],
   },
   {