import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; import { Col } from 'react-bootstrap'; import Login from '../Components/Login'; import Panel from '../Components/Site/Panel'; import ApiStatus from '../Components/Site/ApiStatus'; import { Auth } from '../redux/types'; import { loginAccount, clearApiStatus, authenticateSocket, navigate } from '../redux/actions'; const LoginContainer = () => { const dispatch = useDispatch(); const { t } = useTranslation(); const apiState = useSelector((state) => { const retState = state.api[Auth.LoginAccount]; if (retState && retState.status === 401) { retState.message = t('Invalid username/password'); } else if (retState && retState.success) { retState.message = t('Login successful, redirecting you to the home page'); setTimeout(() => { dispatch(clearApiStatus(Auth.LoginAccount)); dispatch(authenticateSocket()); dispatch(navigate('/')); }, 500); } return retState; }); return ( <Col lg={{ span: 8, offset: 2 }}> <Panel title={t('Login')}> <ApiStatus state={apiState} onClose={() => dispatch(clearApiStatus(Auth.LoginAccount))} /> <Login onSubmit={(values) => dispatch(loginAccount(values))} /> </Panel> </Col> ); }; export default LoginContainer;