Merge d369d40 into 599bdd9

package.json

@@ -25,17 +25,21 @@
   },
   "homepage": "https://github.com/andela/dahlia-ah-frontend#readme",
   "dependencies": {
+    "axios": "^0.19.0",
     "cssnano": "^4.1.10",
     "dotenv": "^8.1.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "express": "^4.17.1",
     "materialize-css": "^1.0.0",
     "postcss-preset-env": "^6.7.0",
+    "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-hot-loader": "^4.12.11",
-    "react-router-dom": "^5.0.1"
+    "react-router-dom": "^5.0.1",
+    "react-router-prop-types": "^1.0.4",
+    "validator": "^11.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",

src/components/ConfirmationPage/ConfirmationPage.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import ReactRouterPropTypes from 'react-router-prop-types';
+
+const ConfirmationPage = ({ history }) => {
+  const user = JSON.parse(localStorage.getItem('AuthorsHavenUser'));
+
+  const checkVerification = () => {
+    if (user && user.isVerified) {
+      history.push('/homepage');
+    } else if (!user) {
+      history.push('/');
+    }
+  };
+
+  return (
+    <>
+      {checkVerification()}
+      <div>
+        <h3>Congratulations</h3>
+        <p>
+          You have been sent an email, please click on the link in your email to verify your account
+        </p>
+        <p> if you dont receive the email click here to be resent the email</p>
+      </div>
+    </>
+  );
+};
+
+ConfirmationPage.propTypes = {
+  history: ReactRouterPropTypes.history.isRequired,
+};
+export default withRouter(ConfirmationPage);

src/components/LandingPage/Banner/banner.scss

@@ -26,7 +26,7 @@ $black: #000008;
     height: 100%;
     overflow: hidden;
     background: rgba(0,0,0,0.3);
-    box-shadow: 0px 0px 40px 40px rgba(0,0,0,0.3);
+    // box-shadow: 0px 0px 40px 40px rgba(0,0,0,0.3);
     align-items: center;
     padding: 4em;
     padding-top: 16em;

src/components/LandingPage/LandingPage.jsx

@@ -1,52 +1,67 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
+import ReactRouterPropTypes from 'react-router-prop-types';
 import Banner from './Banner/Banner';
 import NovelOfTheWeek from './NovelOfTheWeek/NovelOfTheWeek';
 import './landingPage.scss';
 
-const LandingPage = () => (
-  <div>
-    <div className="landingPage">
-      <Banner />
-      <NovelOfTheWeek />
-      <section id="writingCaption">
-        <p>The Best Place To Express Yourself and Collaborate</p>
-        <button type="button" className="btnLarge">Start Writing</button>
-      </section>
-      <section id="membership">
-        <h2>Membership</h2>
-        <div className="membershipBox">
-          <div className="freeMembership">
-            <div>
-              <h4>Free</h4>
-              <ul>
-                <li>Read Novels</li>
-                <li>Bookmark Novels</li>
-                <li>Follow Authors</li>
-              </ul>
-            </div>
-            <div>
-              <p>SIGN UP</p>
-            </div>
-          </div>
-          <div className="subscribeMembership">
-            <div>
-              <h4>Subscription</h4>
-              <ul>
-                <li>Read Novels</li>
-                <li>Bookmark Novels</li>
-                <li>Follow and Collaborate with other Authors</li>
-                <li>Like and Comment on Novels</li>
-                <li>Novel Review and Analytics</li>
-              </ul>
-            </div>
-            <div>
-              <p>SUBSCRIBE</p>
+const LandingPage = ({ history }) => {
+  const user = JSON.parse(localStorage.getItem('AuthorsHavenUser'));
+
+  return (
+    <>
+      {
+        user ? history.push('/homepage') : null
+      }
+      <div>
+        <div className="landingPage">
+          <Banner />
+          <NovelOfTheWeek />
+          <section id="writingCaption">
+            <p>The Best Place To Express Yourself and Collaborate</p>
+            <button type="button" className="btnLarge">Start Writing</button>
+          </section>
+          <section id="membership">
+            <h2>Membership</h2>
+            <div className="membershipBox">
+              <div className="freeMembership">
+                <div>
+                  <h4>Free</h4>
+                  <ul>
+                    <li>Read Novels</li>
+                    <li>Bookmark Novels</li>
+                    <li>Follow Authors</li>
+                  </ul>
+                </div>
+                <div>
+                  <p>SIGN UP</p>
+                </div>
+              </div>
+              <div className="subscribeMembership">
+                <div>
+                  <h4>Subscription</h4>
+                  <ul>
+                    <li>Read Novels</li>
+                    <li>Bookmark Novels</li>
+                    <li>Follow and Collaborate with other Authors</li>
+                    <li>Like and Comment on Novels</li>
+                    <li>Novel Review and Analytics</li>
+                  </ul>
+                </div>
+                <div>
+                  <p>SUBSCRIBE</p>
+                </div>
+              </div>
             </div>
-          </div>
+          </section>
         </div>
-      </section>
-    </div>
-  </div>
-);
+      </div>
+    </>
+  );
+};
+
+LandingPage.propTypes = {
+  history: ReactRouterPropTypes.history.isRequired,
+};
 
-export default LandingPage;
+export default withRouter(LandingPage);

src/components/LandingPage/NovelOfTheWeek/novelOfTheWeek.scss

@@ -64,5 +64,17 @@ $black: #000008;
   .weekNovelBox {
     grid-template-columns: 1fr;
     text-align: center;
+    padding: 0;
+  }
+}
+
+@media(max-width: 400px){
+  .weekNovelBox {
+    .weekNovelImage {
+      img {
+        width: 170px;
+        height: 170px;
+      }
+    }
   }
 }

src/components/Router/Protect.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+let user;
+
+const UserProtected = ({ component: Component, path }) => {
+  user = JSON.parse(window.localStorage.getItem('AuthorsHavenUser'));
+
+  return (
+    <Route
+      path={path}
+      render={({ location }) => (
+        user && user.isVerified
+          ? <Component />
+          : <Redirect to={{ pathname: '/confirmation-page', state: { from: location } }} />
+      )}
+    />
+  );
+};
+
+UserProtected.propTypes = {
+  component: PropTypes.func.isRequired,
+  path: PropTypes.string.isRequired,
+};
+
+export default UserProtected;

src/components/Router/Router.jsx

@@ -1,19 +1,39 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Switch, Route } from 'react-router-dom';
 import Navbar from '../layout/Navbar';
 import Footer from '../layout/Footer/Footer';
 import LandingPage from '../LandingPage/LandingPage';
 import NotFound from '../NotFound/NotFound';
+import SignUpFormContainer from '../SignupForm/SignupFormContainer';
+import ConfirmationPage from '../ConfirmationPage/ConfirmationPage';
 
-const Router = () => (
-  <div>
-    <Navbar />
-    <Switch>
-      <Route exact path="/" component={LandingPage} />
-      <Route component={NotFound} />
-    </Switch>
-    <Footer />
-  </div>
-);
+const Router = () => {
+  const [isOpenSignup, setIsOpenSignup] = useState(false);
+
+  const handleOpenModal = () => {
+    setIsOpenSignup(true);
+    document.body.style.height = '100vh';
+    document.body.style.overflowY = 'hidden';
+  };
+
+  const handleCloseModal = () => {
+    setIsOpenSignup(false);
+    document.body.style.height = '100vh';
+    document.body.style.overflowY = 'auto';
+  };
+
+  return (
+    <div>
+      <SignUpFormContainer closeModal={handleCloseModal} isOpen={isOpenSignup} />
+      <Navbar openModal={handleOpenModal} />
+      <Switch>
+        <Route exact path="/" component={LandingPage} />
+        <Route exact path="/confirmation-page" component={ConfirmationPage} />
+        <Route component={NotFound} />
+      </Switch>
+      <Footer />
+    </div>
+  );
+};
 
 export default Router;

src/components/SignupForm/SignupForm.jsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import Input from '../helpers/TextInput/TextInput';
+import AuthModalContainer from '../helpers/AuthModal/AuthModalContainer';
+import SocialLogin from '../helpers/SocialLogin/SocialLogin';
+import Separator from '../helpers/Separator/Separator';
+import './SignupForm.scss';
+
+const SignupForm = ({
+  formdata, onChange, handleSubmit, resourceLoading, closeModal, isOpen,
+}) => (
+  <AuthModalContainer desc="Sign up to create an account" title="CREATE AN ACCOUNT" isOpen={isOpen} closeModal={closeModal}>
+    <SocialLogin />
+    <Separator />
+    <form onSubmit={handleSubmit}>
+      {formdata.map((formField, index) => (
+        <Input
+          key={formField.id}
+          onChange={onChange}
+          formField={formField}
+          index={index}
+        />
+      ))}
+      <button type="submit" disabled={resourceLoading} className="btn">{resourceLoading ? <i className="fa fa-spinner fa-spin loader" /> : 'signup'}</button>
+      <p className="small-text">
+          Already have an account?
+        {' '}
+        <a href="abc">Sign In</a>
+      </p>
+    </form>
+  </AuthModalContainer>
+);
+
+export default SignupForm;