Add login error box for login page.

src/containers/auth/index.tsx

@@ -21,6 +21,8 @@ export const Auth: React.FC<IAuthProps> = ({
  logout,
 }) => {
  const [auth, setAuth] = React.useState(false);
+ const [loginError, setLoginError] = React.useState(false);
+
  const dispatch = useDispatch();
 
  // check auth
@@ -33,10 +35,13 @@ export const Auth: React.FC<IAuthProps> = ({
  const onSubmit = async (values: ILoginForm) => {
  login &&
  login(values)
- .then(() => setAuth(true))
- .catch(() => console.log("login error"));
+ .then(() => {
+ setAuth(true);
+ setLoginError(false);
+ })
+ .catch(() => setLoginError(true));
  };
- return <LoginPage onSubmit={onSubmit} />;
+ return <LoginPage onSubmit={onSubmit} isLoginError={loginError} />;
  }
 
  // set user identity

src/pages/login/index.tsx

@@ -1,15 +1,29 @@
 import React from "react";
-import { Row, Col, Layout, Card, Typography, Form, Input, Button } from "antd";
+import {
+ Row,
+ Col,
+ Layout,
+ Card,
+ Typography,
+ Form,
+ Input,
+ Button,
+ Alert,
+} from "antd";
 export interface ILoginForm {
  username: string;
  password: string;
 }
 
 export interface ILoginPageProps {
  onSubmit?: ((values: ILoginForm) => void) | undefined;
+ isLoginError?: boolean;
 }
 
-export const LoginPage: React.FC<ILoginPageProps> = ({ onSubmit }) => {
+export const LoginPage: React.FC<ILoginPageProps> = ({
+ isLoginError,
+ onSubmit,
+}) => {
  const { Title } = Typography;
 
  const [form] = Form.useForm();
@@ -25,6 +39,15 @@ export const LoginPage: React.FC<ILoginPageProps> = ({ onSubmit }) => {
  }}
  >
  <Col xl={6} lg={8} md={12} sm={18} xs={22}>
+ {isLoginError && (
+ <Alert
+ type="error"
+ message="Login Error"
+ description="Invalid username or password"
+ style={{ marginBottom: 20 }}
+ />
+ )}
+
  <Card>
  <Title level={2} style={{ textAlign: "center" }}>
  Login