feat: display erros messages on login errors

This commit is contained in:
canove
2020-07-30 18:02:30 -03:00
parent 45682a6788
commit 78a0c7cd9b
5 changed files with 20 additions and 80 deletions

View File

@@ -1,11 +1,11 @@
import React from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import { makeStyles } from "@material-ui/core/styles";
import { AuthContext, AuthProvider } from "../context/Auth/AuthContext";
import { AuthContext } from "../context/Auth/AuthContext";
const useStyles = makeStyles(theme => ({
backdrop: {

View File

@@ -1,9 +1,6 @@
import React, { useContext } from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import { makeStyles } from "@material-ui/core/styles";
import React from "react";
import { BrowserRouter, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import MainDrawer from "../components/MainDrawer";
import Dashboard from "../pages/Dashboard/";
@@ -12,81 +9,24 @@ import Signup from "../pages/Signup/";
import Login from "../pages/Login/";
import WhatsAuth from "../pages/WhatsAuth/WhatsAuth";
import Contacts from "../pages/Contacts/";
import { AuthContext, AuthProvider } from "../context/Auth/AuthContext";
const useStyles = makeStyles(theme => ({
backdrop: {
zIndex: theme.zIndex.drawer + 1,
color: "#fff",
},
}));
const PrivateRoute = ({ component: Component, ...rest }) => {
const classes = useStyles();
const { isAuth, loading } = useContext(AuthContext);
if (loading)
return (
<Backdrop className={classes.backdrop} open={loading}>
<CircularProgress color="inherit" />
</Backdrop>
);
return (
<Route
{...rest}
render={props =>
isAuth ? (
<Component {...props} />
) : (
<Redirect
to={{ pathname: "/login", state: { from: props.location } }}
/>
)
}
/>
);
};
const PublicRoute = ({ component: Component, ...rest }) => {
const classes = useStyles();
const { isAuth, loading } = useContext(AuthContext);
if (loading)
return (
<Backdrop className={classes.backdrop} open={loading}>
<CircularProgress color="inherit" />
</Backdrop>
);
return (
<Route
{...rest}
render={props =>
!isAuth ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: "/", state: { from: props.location } }} />
)
}
/>
);
};
import { AuthProvider } from "../context/Auth/AuthContext";
import Route from "./Route";
const Routes = () => {
return (
<BrowserRouter>
<AuthProvider>
<Switch>
<PublicRoute exact path="/login" component={Login} />
<PublicRoute exact path="/signup" component={Signup} />
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={Signup} />
<MainDrawer>
<PrivateRoute exact path="/" component={Dashboard} />
<PrivateRoute exact path="/chat/:ticketId?" component={Chat} />
<PrivateRoute exact path="/whats-auth" component={WhatsAuth} />
<PrivateRoute exact path="/contacts" component={Contacts} />
<Route exact path="/" component={Dashboard} isPrivate />
<Route exact path="/chat/:ticketId?" component={Chat} isPrivate />
<Route exact path="/whats-auth" component={WhatsAuth} isPrivate />
<Route exact path="/contacts" component={Contacts} isPrivate />
</MainDrawer>
</Switch>
<ToastContainer autoClose={3000} />
</AuthProvider>
</BrowserRouter>
);