feat(login): implement user login

- implement user login functionality

[Delivers #165305223]

src/assets/styles/login.scss

@@ -1,8 +1,80 @@
-.login h2 {
-  color: blue;
-  font-size: 18px;
-}
+.sign-in-page {
+  h1 {
+    text-align: center;
+    margin-top: 2%;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .show {
+    display: block;
+  }
+
+  .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 90px 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 {
+    margin-bottom: 5%;
+    background: #3472d6;
+    color: white;
+    padding: 4%;
+    margin-top: 5%;
+  }
 
-#email_error {
-  display: none;
+  .login {
+    display: flex;
+    align-items: center;
+    margin-top: 10%;
+    &-text {
+      margin: -14px 5px 0 5px;
+    }
+  }
 }

src/components/App.js

@@ -1,8 +1,8 @@
 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 { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 class App extends Component {

src/components/auth/Login.js

@@ -1,67 +1,26 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { Button, Form, Card, Grid, Image } from 'semantic-ui-react';
-import { loginUser } from '../../redux/actions/LoginActions';
+import { Button, Form, Icon } from 'semantic-ui-react';
 import '../../assets/styles/login.scss';
-import { toast } from 'react-toastify';
-
-class Login extends Component {
-  state = {
-    email: '',
-    password: '',
-    isLoading: false
-  };
-
-  onChange = e => {
-    this.setState({
-      [e.target.id]: e.target.value
-    });
-  };
-
-  onSubmit = event => {
-    console.log(this.state);
-    // console.log(this.props);
-    event.preventDefault();
-    const { loginUser, history } = this.props;
-    loginUser(
-      {
-        user: {
-          email: this.state.email,
-          password: this.state.password
-        }
-      },
-      history
-    );
-  };
-
-  componentWillReceiveProps(nextProps) {
-    // console.log('next', nextProps);
-    const { errors } = nextProps.error;
-    if (errors && errors.error) {
-      console.log(errors.error);
-
-      toast.error(errors.error[0], {
-        position: toast.POSITION.TOP_CENTER,
-        autoClose: 3000,
-        hideProgressBar: true,
-        pauseOnHover: true
-      });
-    }
-  }
+import { Link } from 'react-router-dom';
 
+class LoginForm extends Component {
   render() {
+    const {
+      onSubmit, onChange, email, password,
+    } = this.props;
     return (
-      <Grid>
-        <Grid.Column width={6} />
-        <Grid.Column width={4}>
-          <Form onSubmit={this.onSubmit}>
+      <div className="sign-in-page">
+        <h1>Authors Haven</h1>
+        <div className="signin-form">
+          <h1>Login</h1>
+          <Form onSubmit={onSubmit}>
             <Form.Field>
               <label id="test">Email</label>
               <input
                 placeholder="email"
                 id="email"
                 type="email"
-                onChange={this.onChange}
+                onChange={onChange}
                 required
               />
             </Form.Field>
@@ -70,39 +29,54 @@ class Login extends Component {
               <input
                 placeholder="password"
                 id="password"
-                onChange={this.onChange}
+                onChange={onChange}
                 type="Password"
                 required
               />
             </Form.Field>
             <Button
+              fluid
+              className="submit-btn"
               disabled={
-                !this.state.email.match(
-                  /^[a-zA-z0-9_.]+@[a-zA-z0-9-]+\.[a-z]+$/
-                ) || !this.state.password.match(/^[a-zA-Z0-9]{8,}$/)
+                !email.match(/^[a-zA-z0-9_.]+@[a-zA-z0-9-]+\.[a-z]+$/)
+                || !password.match(/^[a-zA-Z0-9]{8,}$/)
               }
               type="submit"
             >
               Login
             </Button>
           </Form>
-        </Grid.Column>
-        <Grid.Column width={6} />
-      </Grid>
+          <div>
+            <div className="separator">
+              <div className="separator-line" />
+              <p className="separator-text">OR</p>
+              <div className="separator-line" />
+            </div>
+            <div className="social">
+              <Icon
+                name="facebook f"
+                size="large"
+                circular
+                className="social-facebook"
+              />
+              <Icon
+                name="google"
+                size="large"
+                circular
+                className="social-google"
+              />
+            </div>
+            <div className="login">
+              <p>No account?</p>
+              <Link className="login-text" to="/signup">
+                Signup here.
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
     );
   }
 }
 
-const mapDispatchToProps = () => ({
-  loginUser
-});
-
-const mapStateToProps = state => ({
-  login: state.loginUser,
-  error: state.LoginReducer.error
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps()
-)(Login);
+export default LoginForm;

src/components/layout/Header.js

@@ -1,9 +1,19 @@
 import React, { Component } from 'react';
 import { Menu } from 'semantic-ui-react';
 import { NavLink } from 'react-router-dom';
+import { connect } from 'react-redux';
+import LoggedInLinks from './LoggedInLinks';
+import LoggedOutLinks from './LoggedOutLinks';
+import { isLoggedIn } from '../../helpers';
 
-export default class Header extends Component {
+class Header extends Component {
   render() {
+    const { login } = this.props;
+    const links = login.isAuthentincated ? (
+      <LoggedInLinks />
+    ) : (
+      <LoggedOutLinks />
+    );
     return (
       <Menu>
         <NavLink to="/">
@@ -13,20 +23,18 @@ export default class Header extends Component {
           <NavLink to="/">
             <Menu.Item name="Home" />
           </NavLink>
-          {!localStorage.getItem('token') ? (
-            <NavLink to="/login">
-              <Menu.Item name="login" />
-            </NavLink>
-          ) : (
-            <NavLink to="/">
-              <Menu.Item name="logout" />
-            </NavLink>
-          )}
-          {/* <NavLink to="/login">
-            <Menu.Item name="login" />
-          </NavLink> */}
+          {links}
         </Menu.Menu>
       </Menu>
     );
   }
 }
+
+const mapStateToProps = state => ({
+  login: state.LoginReducer,
+});
+
+export default connect(
+  mapStateToProps,
+  null,
+)(Header);

src/components/layout/LoggedInLinks.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { NavLink, withRouter } from 'react-router-dom';
+import { Menu } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { logoutUser } from '../../redux/actions/loginActions';
+
+
+class LoggedInLinks extends React.Component {
+  handleLogout = () => {
+    localStorage.clear();
+    const { logoutUser } = this.props;
+    logoutUser();
+    this.props.history.push('/login');
+  };
+
+  render() {
+    return <Menu.Item onClick={this.handleLogout} name="Logout" />;
+  }
+}
+
+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,11 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { Menu } from 'semantic-ui-react';
+
+const LoggedOutLinks = () => (
+  <NavLink to="/login">
+    <Menu.Item name="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;
+};

src/index.js

@@ -8,5 +8,5 @@ ReactDOM.render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.getElementById('app')
+  document.getElementById('app'),
 );