User Authentication

package.json

@@ -9,9 +9,12 @@
     "react": "^16.8.6",
     "react-bootstrap": "^1.0.0-beta.9",
     "react-dom": "^16.8.6",
+    "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
-    "react-sidebar": "^3.0.2"
+    "react-sidebar": "^3.0.2",
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,35 +1,82 @@
 import React, { Component } from "react";
 import NavBar from "./header/index";
 import CoreBody from "./main/index";
-import ImageFR from "./main/Homepage/image_upload/index"
+import ImageFR from "./main/Homepage/image_upload/index";
 import EmbedNow from "./main/Homepage/embed/index";
 import VideoFR from "./main/Homepage/video_upload/index";
 import FeedBack from "./main/Homepage/feedback/index";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
-import APIsDOC from"./main/Homepage/doc/index";
-
+import APIsDOC from "./main/Homepage/doc/index";
+import { connect } from "react-redux";
+import * as actions from "./store/actions/auth";
+import SignIn from "./containers/login";
+import SignUp from "./containers/signup";
+import MyProfileView from "./containers/profile";
 
 class App extends Component {
+    componentDidMount() {
+        this.props.onTryAutoSignup();
+    }
     render() {
         return (
             <div>
-                <div>
+                <div {...this.props}>
                     <BrowserRouter>
-                        <NavBar/>
+                        <NavBar isAuthenticated={this.props.isAuthenticated} />
                         <Switch>
-                            <Route path="/" component={CoreBody} exact />
-                            <Route path="/image" component={ImageFR} exact />
-                            <Route path="/embed" component={EmbedNow} exact />
-                            <Route path="/video" component={VideoFR} exact />
-                            <Route path="/feedback" component={FeedBack} exact />
-                            <Route path ="/doc" component ={APIsDOC} exact/>
+                            <Route path="/" render={() => <CoreBody />} exact />
+                            <Route
+                                path="/image"
+                                render={() => <ImageFR />}
+                                exact
+                            />
+                            <Route
+                                path="/embed"
+                                render={() => <EmbedNow />}
+                                exact
+                            />
+                            <Route
+                                path="/video"
+                                render={() => <VideoFR />}
+                                exact
+                            />
+                            <Route
+                                path="/feedback"
+                                render={() => <FeedBack />}
+                                exact
+                            />
+                            <Route
+                                path="/doc"
+                                render={() => <APIsDOC />}
+                                exact
+                            />
+                            <Route path="/login" component={SignIn} exact />
+                            <Route path="/register" component={SignUp} exact />
+                            <Route
+                                path="/profile"
+                                render={() => <MyProfileView />}
+                                exact
+                            />
                         </Switch>
                     </BrowserRouter>
-
                 </div>
             </div>
         );
     }
 }
 
-export default App;
+const mapStateToProps = state => {
+    return {
+        isAuthenticated: localStorage.getItem("token") !== null
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onTryAutoSignup: () => dispatch(actions.authCheckState())
+    };
+};
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(App);

src/containers/login.js

@@ -0,0 +1,150 @@
+import React, { useState } from "react";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import TextField from "@material-ui/core/TextField";
+import Link from "@material-ui/core/Link";
+import Grid from "@material-ui/core/Grid";
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
+import { connect } from "react-redux";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import * as actions from "../store/actions/auth";
+import  { Redirect } from 'react-router-dom'
+
+
+const useStyles = makeStyles(theme => ({
+    "@global": {
+        body: {
+            backgroundColor: theme.palette.common.white
+        }
+    },
+    paper: {
+        marginTop: theme.spacing(8),
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+    },
+    avatar: {
+        margin: theme.spacing(1),
+        backgroundColor: theme.palette.secondary.main
+    },
+    form: {
+        width: "100%", // Fix IE 11 issue.
+        marginTop: theme.spacing(1)
+    },
+    submit: {
+        margin: theme.spacing(3, 0, 2)
+    },
+    progress: {
+        margin: theme.spacing(2)
+    }
+}));
+
+function SignIn(props) {
+    const classes = useStyles();
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+
+    const handleSubmit = e => {
+        e.preventDefault();
+        console.log({ email: username, password: password });
+        props.onAuth(username, password);
+        props.history.push(`/`);
+
+    };
+    return (
+        <div>
+            {props.loading ? (
+                <CircularProgress className={classes.progress} />
+            ) : (
+                <Container component="main" maxWidth="xs">
+                    <CssBaseline />
+                    <div className={classes.paper}>
+                        <Avatar className={classes.avatar}>
+                            <LockOutlinedIcon />
+                        </Avatar>
+                        <Typography component="h1" variant="h5">
+                            Sign in
+                        </Typography>
+                        <form
+                            className={classes.form}
+                            yesValidate
+                            onSubmit={handleSubmit}
+                        >
+                            <TextField
+                                variant="outlined"
+                                margin="normal"
+                                required
+                                fullWidth
+                                id="email"
+                                label="username"
+                                name="username"
+                                autoFocus
+                                value={username}
+                                onChange={e => setUsername(e.target.value)}
+                            />
+                            <TextField
+                                variant="outlined"
+                                margin="normal"
+                                required
+                                fullWidth
+                                name="password"
+                                label="Password"
+                                type="password"
+                                id="password"
+                                autoComplete="current-password"
+                                value={password}
+                                onChange={e => setPassword(e.target.value)}
+                            />
+
+                            <Button
+                                type="submit"
+                                fullWidth
+                                variant="contained"
+                                color="primary"
+                                className={classes.submit}
+                                value="Submit"
+
+                            >
+                                Sign In
+                            </Button>
+                            <Grid container>
+                                <Grid item xs>
+                                    <Link href="#" variant="body2">
+                                        Forgot password?
+                                    </Link>
+                                </Grid>
+                                <Grid item>
+                                    <Link href="/register" variant="body2">
+                                        {"Don't have an account? Sign Up"}
+                                    </Link>
+                                </Grid>
+                            </Grid>
+                        </form>
+                    </div>
+                </Container>
+            )}
+        </div>
+    );
+}
+
+const mapStateToProps = state => {
+    return {
+        loading: state.loading,
+        error: state.error
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onAuth: (username, password) =>
+            dispatch(actions.authLogin(username, password))
+    };
+};
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(SignIn);

src/containers/profile.js

@@ -0,0 +1,48 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import * as actions from "../store/actions/auth";
+
+class MyProfileView extends Component {
+    componentDidMount() {
+        console.log("isauthenticated in profile: ", this.props.isAuthenticated);
+    }
+    render() {
+        return (
+            <div>
+                <div>
+                    {" "}
+                    {this.props.isAuthenticated ? (
+                        <div>
+                            want to{" "}
+                            <a onClick={() => actions.logout()} href="/">
+                                logout ?
+                            </a>{" "}
+                        </div>
+                    ) : (
+                        <div>
+                            You're logout please login here{" "}
+                            <a href="/login">Login </a>
+                        </div>
+                    )}
+                </div>
+                Hola
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        isAuthenticated: localStorage.getItem("token") !== null
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onTryAutoSignup: () => dispatch(actions.authCheckState())
+    };
+};
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(MyProfileView);