Merge 7eeb567 into 022bbf1

.babelrc

@@ -1,5 +1,7 @@
 {
-  "presets": [
-    "@babel/preset-env", "@babel/preset-react"
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/transform-runtime"
   ]
 }

.eslintignore

@@ -1 +1,4 @@
 /node_modules/*
+dist/*
+*.test.js
+*.config.js

.eslintrc.json

@@ -10,14 +10,15 @@
   },
   "parserOptions": {
     "ecmaFeatures": {
-    "jsx": true
+      "jsx": true
     },
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": [
-    "react"
-  ],
+  "plugins": ["react"],
   "rules": {
+    "no-unused-vars": "off",
+    "no-undef": "off",
+    "no-console": "off"
   }
 }

.gitignore

@@ -3,3 +3,4 @@
 coverage/
 package-lock.json
 dist/
+src/tests/__snapshots__/*

.hound.yml

@@ -2,4 +2,3 @@ eslint:
   enabled: true
   config_file: .eslintrc
   ignore_file: .eslintignore
-

app.json

@@ -1,21 +1,17 @@
 {
-  "addons": [
-
-  ],
+  "addons": [],
   "buildpacks": [
     {
       "url": "heroku/nodejs"
     }
   ],
-  "env": {
-  },
+  "env": {},
   "formation": {
     "web": {
       "quantity": 1
     }
   },
   "name": "ah-frontend-prime",
-  "scripts": {
-  },
+  "scripts": {},
   "stack": "heroku-18"
 }

package.json

@@ -13,7 +13,7 @@
     "test:coveralls": "jest --coverage --coverageReporters=text-lcov | coveralls",
     "start": "webpack-dev-server --open --hot --mode development",
     "build": "webpack --mode production",
-    "lint": "eslint . --ignore-path .gitignore",
+    "lint": "eslint . --ignore-path .eslintignore",
     "lint:fix": "eslint . --ignore-path .gitignore --fix"
   },
   "repository": {
@@ -30,20 +30,25 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
     "axios": "^0.18.0",
+    "babel-jest": "^24.8.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "express": "^4.16.4",
     "moment": "^2.24.0",
     "moxios": "^0.4.0",
+    "react-loader": "^2.4.5",
     "react-redux": "^7.0.3",
     "react-router-dom": "^5.0.0",
     "react-test-renderer": "^16.8.6",
+    "react-toastify": "^5.1.0",
     "redux": "^4.0.1",
     "redux-mock-store": "^1.5.3",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.5",
@@ -54,7 +59,8 @@
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.7.1",
+    "jest": "^24.8.0",
+    "moxios": "^0.4.0",
     "node-sass": "^4.12.0",
     "prettier": "^1.17.0",
     "react": "^16.8.6",

server.js

@@ -1,12 +1,12 @@
-const express = require('express');
+const express = require("express");
 
 const app = express();
-const path = require('path');
+const path = require("path");
 
-app.use(express.static('dist'));
-app.get('*', (req, res) => {
-  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
+app.use(express.static("dist"));
+app.get("*", (req, res) => {
+  res.sendFile(path.resolve(__dirname, "dist", "index.html"));
 });
 
 const PORT = process.env.PORT || 5000;
-app.listen(PORT, () => console.log(`Authors Haven running on port ${PORT}`))
+app.listen(PORT, () => console.log(`Authors Haven running on port ${PORT}`));

src/actions/LoginAction.js

@@ -0,0 +1,44 @@
+import axios from "axios";
+
+import { toast } from "react-toastify";
+import { LOGIN_STARTED, LOGIN_FAIL, SUCCESSFUL } from "./types";
+
+export const successLogin = data => {
+  return {
+    type: SUCCESSFUL,
+    payload: data.data.user.token
+  };
+};
+
+export const userLoginRequest = (userData, props) => async dispatch => {
+  toast.dismiss();
+  dispatch({
+    type: LOGIN_STARTED
+  });
+  try {
+    const response = await axios.post(
+      "https://ah-backend-prime-staging.herokuapp.com/api/v1/users/login/",
+      userData
+    );
+    dispatch(successLogin(response));
+    sessionStorage.setItem("token", response.data.user.token);
+    toast.success(`Welcome ${response.data.user.username}. Login Successful`, {
+      position: toast.POSITION.TOP_RIGHT,
+      autoClose: 2000,
+      hideProgressBar: false
+    });
+  } catch (error) {
+    dispatch({
+      type: LOGIN_FAIL
+    });
+    const errors = error.response.data.errors;
+
+    errors.error.forEach(err => {
+      toast.error(` ${err}`, {
+        position: toast.POSITION.TOP_RIGHT,
+        autoClose: false,
+        hideProgressBar: false
+      });
+    });
+  }
+};

src/actions/types.js

@@ -1 +1,4 @@
 export const FETCH_ARTICLES_SUCCESS = "FETCH_ARTICLES_SUCCESS";
+export const LOGIN_STARTED = "LOGIN_STARTED";
+export const LOGIN_FAIL = "LOGIN_FAIL";
+export const SUCCESSFUL = "SUCCESSFUL";

src/components/header.js

@@ -105,9 +105,11 @@ function TopAppBar(props) {
               Sign In
             </a>
             &nbsp;&nbsp; | &nbsp;&nbsp;
-            <a href="register" className="nav-links">
-              Get Started
-            </a>
+            <div className="top-button">
+              <a href="register" className="nav-links">
+                &nbsp;&nbsp;Get Started &nbsp;&nbsp;
+              </a>
+            </div>
           </div>
         </Toolbar>
       </AppBar>

src/components/login/LoginModal.js

@@ -0,0 +1,131 @@
+import React from "react";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import { withStyles } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import "../../styles/register.scss";
+
+const styles = themes => ({
+  floatingLabelFocusStyle: {
+    color: "black",
+    fontFamily: "Quantico",
+    fontSize: "15px",
+    fontWeight: "bold"
+  }
+});
+const LoginComponent = props => {
+  const {
+    classes,
+    password,
+    email,
+    handleChange,
+    handleSubmit,
+    isProcessing
+  } = props;
+
+  let Loader = require("react-loader");
+
+  return (
+    <div>
+      <Grid container spacing={24}>
+        <Grid item lg={2} md={2} />
+        <Grid item lg={8} md={8}>
+          <Paper className="Paper">
+            <h3>Welcome back!</h3>
+            <p>
+              SignIn to like, dislike, favorite and unfavorite various articles,
+              <br />
+              follow authors and comment on articles.
+            </p>
+            <Grid container spacing={24}>
+              <Grid item lg={6} md={6}>
+                <div className="button-collective">
+                  <Button className="face-book">
+                    <img
+                      src="https://img.icons8.com/color/96/000000/facebook.png"
+                      width="=40px"
+                      height="40px"
+                      alt="facebook"
+                    />
+                    Login with Facebook
+                  </Button>
+                  <Button className="twitter">
+                    <img
+                      src="https://img.icons8.com/color/96/000000/twitter-circled.png"
+                      width="=40px"
+                      height="40px"
+                      alt="twitter"
+                    />
+                    Login with Twitter
+                  </Button>
+                  <Button className="google">
+                    <img
+                      src="https://img.icons8.com/color/96/000000/google-logo.png"
+                      width="=40px"
+                      height="40px"
+                      alt="google"
+                    />
+                    Login with Google
+                  </Button>
+                </div>
+              </Grid>
+              <Grid item lg={6} md={6} className="grid-register">
+                <form method="post" onSubmit={handleSubmit}>
+                  <TextField
+                    InputLabelProps={{
+                      className: classes.floatingLabelFocusStyle
+                    }}
+                    id="email"
+                    label="email"
+                    name="email"
+                    type="text"
+                    required
+                    className="textField"
+                    value={email}
+                    onChange={handleChange}
+                  />
+
+                  <TextField
+                    InputLabelProps={{
+                      className: classes.floatingLabelFocusStyle
+                    }}
+                    id="password"
+                    label="password"
+                    name="password"
+                    required
+                    minLength={6}
+                    maxLength={16}
+                    type="password"
+                    className="textField"
+                    value={password}
+                    onChange={handleChange}
+                  />
+
+                  <Loader loaded={!isProcessing} />
+                  <Button type="submit" className="button-success">
+                    Login
+                  </Button>
+                </form>
+              </Grid>
+            </Grid>
+            <p>
+              Don't have an account yet?{" "}
+              <a href="/register" id="link">
+                create one now
+              </a>
+            </p>
+            <p>
+              Forgot your password?{" "}
+              <a href="/passwordreset" id="link">
+                reset now
+              </a>
+            </p>
+          </Paper>
+        </Grid>
+        <Grid item lg={2} md={2} />
+      </Grid>
+    </div>
+  );
+};
+export default withStyles(styles)(LoginComponent);

src/components/routes.js

@@ -1,19 +1,17 @@
 import React, { Component } from "react";
 import { BrowserRouter, Route } from "react-router-dom";
-
-import Login from "./loginComponent";
+import LoginContainer from "../containers/Login/LoginContainer";
 import Home from "./home";
 
 class Routes extends Component {
   render() {
     return (
       <BrowserRouter>
         <Route exact path="/" component={Home} />
-        <Route path="/login" component={Login} />
         <Route exact path="/home" component={Home} />
+        <Route path="/login" component={LoginContainer} />
       </BrowserRouter>
     );
   }
 }
-
 export default Routes;