feat: add login fail page

ui/.eslintrc.js

@@ -36,6 +36,7 @@ module.exports = {
     'react/no-unescaped-entities': 'off',
     'react/require-default-props': 'off',
     'arrow-body-style': 'off',
+    "global-require": "off",
     'react/prop-types': 0,
     'react/no-danger': 'off',
     'jsx-a11y/no-static-element-interactions': 'off',

ui/src/components/HttpErrorContent/index.tsx

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

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

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

ui/src/pages/LoginFail/index.tsx

@@ -0,0 +1,57 @@
+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/router/routes.ts

@@ -367,6 +367,10 @@ const routes: RouteNode[] = [
         path: '50x',
         page: 'pages/50X',
       },
+      {
+        path: 'login-fail',
+        page: 'pages/LoginFail',
+      },
     ],
   },
   {