landing page fix

[Finish #169995342]

src/__tests__/components/landingpage/LandingPage.test.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { shallow } from "enzyme"
+import { LandingPage } from "../../../components/landing-page/LandingPage";
+
+let landingPage;
+const props = {
+    isAuthenticated: false
+}
+
+describe('Landing page when user is not authenticated', () => {
+    landingPage = shallow(<LandingPage {...props}/>);
+    test('should load the landing page', () => {
+        expect(landingPage.find("Connect(LoginForm)").exists()).toBe(true);
+    })
+
+})
+
+describe('Landing page when user is authenticated', () => {
+    beforeEach(() => {
+        props.isAuthenticated = true;
+    });
+
+    landingPage = shallow(<LandingPage {...props}/>);
+    test('should load the landing page', () => {
+        // console.log('landingPage.debug()', landingPage.debug())
+    })
+
+})

src/__tests__/components/protected-route/ProtectedRoute.test.js

@@ -20,6 +20,6 @@ describe('Protected Route', () => {
   );
 
   test('should redirect to login when user is not authenticated', () => {
-    expect(protectedRoute.instance().history.location.pathname).toEqual('/login');
+    expect(protectedRoute.instance().history.location.pathname).toEqual('/');
   });
 });

src/__tests__/components/shared/map/MapContainer.test.js

@@ -0,0 +1,11 @@
+import React from "react"
+import { shallow } from "enzyme";
+import {MapContainer} from "../../../../components/shared/map/MapContainer"
+
+describe('Map container', () => {
+    let map = shallow(<MapContainer />)
+    test('should map should render', () => {
+        expect(map.find("InfoWindow").exists()).toBe(true)
+    })
+
+})

src/components/App.js

@@ -17,7 +17,7 @@ if (token && token !== "null") {
   const currentTime = Date.now() / 1000;
   if (exp < currentTime) {
     localStorage.removeItem("token");
-    window.location.replace("/login");
+    window.location.replace("/");
   }
   store.dispatch(setToken(localStorage.token));
 }

src/components/Router.js

@@ -26,13 +26,13 @@ import {
 
 const Router = () => (
   <Switch>
+    <Route exact path="/" component={LandingPage} />
     <Route path="/login" component={LoginPage} />
     <Route path="/register" component={Register} />
     <Route path="/reset-password" component={passwordReset} />
     <Route path="/password-change/:token" component={PasswordChange} />
     <ProtectedRoute path="/profile" component={Profile} />
     <ProtectedRoute path="/requests/:id" component={SingleRequest} />
-    <Route exact path="/" component={LandingPage} />
     <Route path="/requests/:id" component={SingleRequest} />
     <Route path="/host/reset" component={HostReset} />
     <ProtectedRoute path="/accommodations/new" component={AddAccommodation} />

src/components/accommodation/AccommodationsPage.js

@@ -46,8 +46,6 @@ AccommodationsPage.propTypes = {
 };
 
 const mapStateToProps = (state) => { 
-  console.log(state);
-
   return {
   accommodations: state.accommodations.accommodations,
   user: state.profile.user,

src/components/form/form.jsx

@@ -39,7 +39,7 @@ class Form extends Component {
   };
 
   componentDidUpdate() {
-    console.log("the DATA IS : ", this.state);
+    // console.log("the DATA IS : ", this.state);
   }
 
   validate = () => {

src/components/form/form.scss

@@ -12,15 +12,18 @@ $hoverColor: #2a89f5;
 
 .card-container {
   text-align: center;
+  margin: auto;
 
   .card {
-    background-color: yellowgreen;
     display: inline-block;
     margin: 50px 0px 10px 0px;
     background-color: white;
     border-radius: 8px;
     width: 320px;
     height: auto;
+    &--login {
+      background-color: rgba(white, .9) !important;
+    }
   }
 
   .title {

src/components/home-nav/HomeNav.js

@@ -27,7 +27,7 @@ export const HomeNav = ({ user, toggleNotPaneHandler, notificationCounter }) =>
     toggleMenu();
     await authLogout();
     localStorage.removeItem("token");
-    window.location.replace("/login");
+    window.location.replace("/");
   }
   const showHideSideBar = () => {
     document.querySelector('.side-bar');

src/components/landing-page/LandingPage.js

@@ -1,18 +1,45 @@
-import React from "react";
-import "./LandingPage.scss";
-import NavBar from "../navbar/navbar";
+import React, { Component } from 'react';
+import { connect } from "react-redux";
+import LoginForm from '../login-page/LoginForm';
 
-const LandingPage = () => (
-  <div className="container">
-    <NavBar />
-    <div className="cover">
-      <div className="welcome">
-        <h5> Welcome to </h5>
-        <h1> Barefoot Nomad</h1>
-        <h4>Making company travel and accommodation easy and convinient.</h4>
-      </div>
-    </div>
-  </div>
-);
+export class LandingPage extends Component {
+  componentDidMount () {
+    if(this.props.isAuthenticated) {
+      this.props.history.push("/dashboard");
+    }
+  }
+  render() {
+    return (
+      <header className="header">
+        <div className="bg-video">
+          <video className="bg-video__content" autoPlay muted loop>
+            <source src="video/video.mp4" type="video/mp4" />
+            <source src="video/video.webm" type="video/webm" />
+            Your browser is not supported!
+          </video>
+        </div>
+        <div className="row">
+          <div className="col-2-of-3--landingpage header--left-side">
+            <div className="header__text-box">
+              <h1 className="heading">
+                <span className="heading--main">barefoot</span>
+                <span className="heading--sub">
+                  easy & convinient company travel
+                </span>
+              </h1>
+            </div>
+          </div>
+          <div className="col-1-of-3--landingpage header--right-side">
+            <LoginForm />
+          </div>
+        </div>
+      </header>
+    );
+  }
+}
 
-export default LandingPage;
+const mapStateToProps = ({ loginState }) => ({
+  isAuthenticated: loginState.isAuthenticated
+});
+
+export default connect(mapStateToProps)(LandingPage);

src/components/login-page/LoginForm.js

@@ -3,14 +3,13 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable react/button-has-type */
 /* eslint-disable quotes */
-import React from "react";
-import { Link } from "react-router-dom";
-import { connect } from "react-redux";
-import Joi from "joi-browser";
-import "../form/form.scss";
-import Form from "../form/form";
-import SocialLogins from "./SocialLogins";
-import { loginUser } from "../../redux/actions/loginAction";
+import React from 'react';
+import { connect } from 'react-redux';
+import Joi from 'joi-browser';
+import '../form/form.scss';
+import Form from '../form/form';
+import SocialLogins from './SocialLogins';
+import { loginUser } from '../../redux/actions/loginAction';
 
 export class LoginForm extends Form {
   doSubmit = () => {
@@ -21,30 +20,35 @@ export class LoginForm extends Form {
     email: Joi.string()
       .email()
       .required()
-      .label("Email"),
+      .label('Email'),
     password: Joi.string()
       .required()
       .min(6)
-      .label("Password")
+      .label('Password')
   };
 
   render() {
     return (
-      <div className="card-container center">
-        <div className="card">
-          <div className="title">Login</div>
-          {this.renderInput("email", "Email")}
-          {this.renderInput("password", "Password", "password")}
-          {this.renderButton("Login", 'login')}
-          <p className="login-alt">
-            <span>or</span>
-          </p>
-          <SocialLogins />
-          <p>
-            Forgot password?
-            <a href="/reset-password"> Reset </a><br /><br />
-            <a href="/register">New User?</a><br /> <br />
-          </p>
+      <div className="container">
+        <div className="card-container header__login-card">
+          <div className="card card--login">
+            <div className="title">Login</div>
+            {this.renderInput('email', 'Email')}
+            {this.renderInput('password', 'Password', 'password')}
+            {this.renderButton('Login', 'login')}
+            <p>
+              Forgot password?
+              <a href="/reset-password"> Reset </a>
+            </p>
+            <p className="login-alt">
+              <span>or</span>
+            </p>
+            <SocialLogins />
+            <p>
+              Don't have an account
+              <a href="/register"> Register </a>
+            </p>
+          </div>
         </div>
       </div>
     );