Merge a6559a7 into 3f44ff4

enzyme.config.js

@@ -1,4 +1,5 @@
 import { configure } from 'enzyme';
+import 'babel-polyfill';
 import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });

package.json

@@ -26,16 +26,25 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.18",
+    "@fortawesome/free-solid-svg-icons": "^5.8.2",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "axios": "^0.18.0",
+    "babel-polyfill": "^6.26.0",
+    "bootstrap": "^4.3.1",
+    "coveralls": "^3.0.3",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.13.2",
     "express": "^4.17.1",
+    "font-awesome": "^4.7.0",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.9",
     "react-dom": "^16.8.6",
     "react-redux": "^7.0.3",
     "react-router-dom": "^5.0.0",
+    "react-toastify": "^5.1.1",
     "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0",
-    "semantic-ui-react": "^0.87.1"
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
@@ -47,8 +56,8 @@
     "babel-loader": "^8.0.6",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
-    "css-loader": "^2.1.1",
     "coveralls": "^3.0.3",
+    "css-loader": "^2.1.1",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-jest-enzyme": "^7.0.2",
@@ -61,12 +70,14 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.8.0",
     "jest-enzyme": "^7.0.2",
+    "moxios": "^0.4.0",
     "node-sass": "^4.12.0",
+    "prettier": "^1.17.1",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6",
+    "redux-mock-store": "^1.5.3",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
-    "prettier": "^1.17.1",
     "webpack": "^4.32.2",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.4.1"

src/assets/styles/index.scss

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300&display=swap');
+body {
+  font-family: 'Josefin Sans', cursive;
+}

src/assets/styles/login.scss

@@ -1,4 +1,77 @@
-.login h2 {
-  color: blue;
-  font-size: 18px;
+.sign-in-page {
+  h1 {
+    text-align: center;
+    margin-top: 2%;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .show {
+    display: block;
+  }
+  @media (min-width: 992px) {
+    .signin-form {
+      display: inline-block;
+      -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+      -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+      box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+      padding: 70px 90px 40px 90px;
+      width: 40%;
+      height: 75%;
+      margin: auto;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      margin-top: 2%;
+      border-radius: 5px;
+    }
+  }
+
+  .separator {
+    display: flex;
+    align-items: center;
+    &-line {
+      height: 2px;
+      background: #cecece;
+      width: 48%;
+    }
+    &-text {
+      background: transparent;
+      border-radius: 50%;
+      margin: 0 5px 0 5px;
+      border: 2px solid #cecece;
+      padding: 1%;
+    }
+    margin-bottom: 4%;
+    margin-top: 4%;
+  }
+
+  .social {
+    display: flex;
+    justify-content: center;
+    &-facebook {
+      color: white;
+      background-color: #3b5998;
+      margin-right: 10%;
+    }
+    &-google {
+      color: white;
+      background-color: #db4437;
+    }
+  }
+
+  .submit-btn {
+    background: #3472d6;
+  }
+
+  .login {
+    display: flex;
+    align-items: center;
+    margin-top: 10%;
+    &-text {
+      margin: -14px 5px 0 5px;
+    }
+  }
 }

src/components/App.js

@@ -1,12 +1,15 @@
 import React, { Component, Fragment } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
 import Header from './layout/Header';
 import routes from '../routes';
+import 'react-toastify/dist/ReactToastify.css';
 
 class App extends Component {
   render() {
     return (
       <div>
+        <ToastContainer />
         <Router>
           <Fragment>
             <Header />

src/components/auth/LoginForm.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import '../../assets/styles/login.scss';
+import { Link } from 'react-router-dom';
+import { Button, Form, Spinner, Alert } from 'react-bootstrap';
+
+class LoginForm extends Component {
+  render() {
+    const { onSubmit, onChange, email, password, isLoading } = this.props;
+    return (
+      <div className="sign-in-page">
+        <h1>Authors Haven</h1>
+        <div className="signin-form " data-set="loginTestDiv">
+          <h1>Login</h1>
+          <Form onSubmit={onSubmit} data-set="formTestDiv">
+            <Form.Group>
+              <Form.Label>Email</Form.Label>
+              <Form.Control
+                placeholder="Enter email"
+                type="email"
+                id="email"
+                data-test="email1"
+                onChange={onChange}
+                required
+              />
+            </Form.Group>
+
+            <Form.Group>
+              <Form.Label>Password</Form.Label>
+              <Form.Control
+                placeholder="Enter password"
+                id="password"
+                data-test="password"
+                className="password"
+                onChange={onChange}
+                type="Password"
+                required
+              />
+            </Form.Group>
+            {!isLoading ? (
+              <Button
+                className="submit-btn"
+                type="submit"
+                block
+                disabled={
+                  !email.match(/^[a-zA-z0-9_.]+@[a-zA-z0-9-]+\.[a-z]+$/) ||
+                  !password.match(/^[a-zA-Z0-9]{8,}$/)
+                }
+              >
+                Login
+              </Button>
+            ) : (
+              <Button variant="primary" disabled block>
+                <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" />
+                Loading...
+              </Button>
+            )}
+          </Form>
+          <div>
+            <div className="separator">
+              <div className="separator-line" />
+              <p className="separator-text">OR</p>
+              <div className="separator-line" />
+            </div>
+            <div className="social">
+              <p>Social login icons here</p>
+            </div>
+            <div className="login">
+              <p>No account?</p>
+              <Link className="login-text" to="/signup">
+                Signup here.
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LoginForm;

src/components/layout/Header.js

@@ -1,21 +1,44 @@
 import React, { Component } from 'react';
-import { Menu } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import LoggedInLinks from './LoggedInLinks';
+import LoggedOutLinks from './LoggedOutLinks';
+import { isLoggedIn } from '../../helpers';
 import { NavLink } from 'react-router-dom';
 
-export default class Header extends Component {
+class Header extends Component {
   render() {
+    const { login } = this.props;
+    const links = login.isAuthentincated || isLoggedIn() ? <LoggedInLinks /> : <LoggedOutLinks />;
     return (
-      <Menu>
-        <NavLink to="/">
-          <Menu.Item header>Authors Haven</Menu.Item>
+      <nav className="navbar navbar-expand-lg navbar-light bg-light" data-set="nav-bar-test">
+        <NavLink className="navbar-brand" to="/" data-set="nav-bar-brand-test">
+          Authors Haven
         </NavLink>
-        <NavLink to="/">
-          <Menu.Item name="Home" />
-        </NavLink>
-        <NavLink to="/login">
-          <Menu.Item name="login" />
-        </NavLink>
-      </Menu>
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-toggle="collapse"
+          data-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span className="navbar-toggler-icon" />
+        </button>
+
+        <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul className="navbar-nav ml-auto">{links}</ul>
+        </div>
+      </nav>
     );
   }
 }
+
+const mapStateToProps = state => ({
+  login: state.LoginReducer,
+});
+
+export default connect(
+  mapStateToProps,
+  null,
+)(Header);

src/components/layout/LoggedInLinks.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { NavLink, withRouter } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { logoutUser } from '../../redux/actions/loginActions';
+
+class LoggedInLinks extends React.Component {
+  handleLogout = () => {
+    localStorage.clear();
+    const { logoutUser } = this.props;
+    logoutUser();
+  };
+
+  render() {
+    return (
+      <>
+      <NavLink className="nav-link" onClick={this.handleLogout} to="/login" data-set="nav-bar-logout-test">
+        Logout
+      </NavLink>
+    </>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  login: state.loginUser,
+  error: state.LoginReducer.error,
+});
+
+const mapDispatchToProps = () => ({
+  logoutUser,
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps(),
+)(withRouter(LoggedInLinks));

src/components/layout/LoggedOutLinks.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+const LoggedOutLinks = () => (
+  <>
+    <NavLink className="nav-link" to="/signup">
+      Sign up
+    </NavLink>
+    <NavLink className="nav-link" to="/login">
+      Login
+    </NavLink>
+  </>
+);
+
+export default LoggedOutLinks;

src/helpers/index.js

@@ -0,0 +1,26 @@
+import { toast } from 'react-toastify';
+
+export const successToast = message => {
+  toast.success(message, {
+    position: toast.POSITION.TOP_CENTER,
+    autoClose: 3000,
+    hideProgressBar: true,
+    pauseOnHover: true,
+  });
+};
+
+export const errorToast = message => {
+  toast.error(message, {
+    position: toast.POSITION.TOP_CENTER,
+    autoClose: 3000,
+    hideProgressBar: true,
+    pauseOnHover: true,
+  });
+};
+
+export const isLoggedIn = () => {
+  if (localStorage.getItem('token')) {
+    return true;
+  }
+  return false;
+};