Merge pull request #11 from andela/ft-signup-register-165305221

#165305221 Users should be able to Signup

.babelrc

@@ -1,11 +1,11 @@
 {
   "presets": ["@babel/env", "@babel/preset-react"],
   "plugins": [
-      [
-        "@babel/plugin-proposal-class-properties",
-        {
-          "loose": true
-        }
-      ]
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
     ]
+  ]
 }

.eslintrc

@@ -4,6 +4,10 @@
     "browser": true,
     "node": true
   },
+  "parserOptions": {
+    "sourceType": "module",
+    "allowImportExportEverywhere": true
+  },
   "extends": "airbnb",
   "plugins": ["babel", "import", "jsx-a11y", "react", "prettier"],
   "rules": {

axiosconfig.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+/* istanbul ignore file */
+import store from './src/redux/store';
+/* istanbul ignore file */
+import BASE_URL from './src/redux/constants';
+/* istanbul ignore file */
+import 'babel-polyfill';
+/* istanbul ignore file */
+
+// configure base url
+const instance = axios.create({
+  baseURL: BASE_URL,
+});
+
+// intercept requests and add authorization token
+instance.interceptors.request.use(config => {
+  const token = store.getState().auth.token;
+  if (token) {
+    config.headers.authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default instance;

jest.config.js

@@ -36,4 +36,6 @@ module.exports = {
 
   // A list of paths to directories that Jest should use to search for files in
   roots: ['<rootDir>/tests/'],
+
+  modulePathIgnorePatterns: ['<rootDir>/axiosconfig.js'],
 };

package.json

@@ -26,29 +26,45 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@babel/runtime": "^7.4.5",
+    "axios": "^0.18.0",
+    "bootstrap": "^4.3.1",
+    "coveralls": "^3.0.3",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.13.2",
     "express": "^4.17.1",
+    "file-loader": "^3.0.1",
+    "image-webpack-loader": "^4.6.0",
+    "prop-types": "^15.7.2",
     "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.2.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
-    "semantic-ui-react": "^0.87.1"
+    "semantic-ui-react": "^0.87.1",
+    "url-loader": "^1.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
+    "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.6",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-latest": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "css-loader": "^2.1.1",
+    "babel-preset-stage-0": "^6.24.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,14 +77,27 @@
     "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"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!<rootDir>/node_modules/",
+      "!<rootDir>/path/to/dir/",
+      "!<rootDir>/axiosconfig.js"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/axiosconfig.js"
+    ]
   }
 }

src/assets/styles/emailsent.scss

@@ -0,0 +1,38 @@
+.emailsent-page {
+  h1 {
+    text-align: center;
+    margin-top: 2%;
+  }
+
+  .emailsent-view {
+    display: flex;
+    align-items: center;
+    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: 50px 90px 50px 90px;
+    width: 40%;
+    height: 75%;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    margin-top: 2%;
+    border-radius: 5px;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: center;
+    &-home {
+      font-size: 20px;
+      margin-right: 15px;
+      margin-top: 1%;
+    }
+    &-login {
+      font-size: 20px;
+      margin-top: 1%;
+    }
+  }
+}

src/assets/styles/header.scss

@@ -0,0 +1,12 @@
+@import './variables.scss';
+.navbar-light {
+  background-color: white !important;
+  box-shadow: $box-shadow;
+
+  .logo {
+    width: 3%;
+    height: 3%;
+    margin-left: 5px;
+    margin-right: 15px;
+  }
+}

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/signup.scss

@@ -0,0 +1,62 @@
+@import './variables.scss';
+.signup-page {
+  h1 {
+    text-align: center;
+    margin-top: 2%;
+  }
+  .hidden {
+    display: none;
+  }
+  .show {
+    display: block;
+  }
+  @media (min-width: 992px) {
+    .signup-form {
+      display: inline-block;
+      box-shadow: $box-shadow;
+      padding: 70px 80px 40px 80px;
+      width: 40%;
+      height: 75%;
+      margin: auto;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      margin-top: 1%;
+      border-radius: 5px;
+    }
+  }
+  .separator {
+    display: flex;
+    align-items: center;
+    &-line {
+      height: 2px;
+      background: $background;
+      width: 48%;
+    }
+    &-text {
+      background: transparent;
+      border-radius: 50%;
+      margin: 0 5px 0 5px;
+      border: 2px solid $background;
+      padding: 1%;
+    }
+    margin-bottom: 4%;
+    margin-top: 5%;
+  }
+  .social {
+    display: flex;
+    justify-content: center;
+  }
+  .submit-btn {
+    background: $blue;
+    margin-top: 30px;
+  }
+  .login {
+    display: flex;
+    align-items: center;
+    margin-top: 10%;
+    &-text {
+      margin: -14px 5px 0 5px;
+    }
+  }
+}

src/assets/styles/variables.scss

@@ -0,0 +1,3 @@
+$box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.5);
+$background: #cecece;
+$blue: #3472d6;

src/components/auth/Signup.js

@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Form, Button, Spinner } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import '../../assets/styles/signup.scss';
+
+class SignupForm extends Component {
+  render() {
+    const { onSubmit, onChange, error, handleConfirmPassword, isLoading } = this.props;
+    return (
+      <div className="signup-page">
+        <h1>Authors Haven</h1>
+        <div className="signup-form" id="form">
+          <Form onSubmit={onSubmit}>
+            <Form.Group>
+              <Form.Label>Email</Form.Label>
+              <Form.Control
+                isInvalid={error.errors && error.errors.email && error.errors.email[0]}
+                type="email"
+                placeholder="Enter email"
+                id="email"
+                name="email"
+                onChange={onChange}
+                required
+              />
+              <Form.Control.Feedback type="invalid">
+                {error.errors && error.errors.email && error.errors.email[0]}
+              </Form.Control.Feedback>
+            </Form.Group>
+
+            <Form.Group>
+              <Form.Label>Username</Form.Label>
+              <Form.Control
+                isInvalid={error.errors && error.errors.username && error.errors.username[0]}
+                placeholder="Enter username"
+                name="username"
+                id="username"
+                onChange={onChange}
+                required
+              />
+              <Form.Control.Feedback id="username-error" type="invalid">
+                {error.errors && error.errors.username && error.errors.username[0]}
+              </Form.Control.Feedback>
+            </Form.Group>
+
+            <Form.Group>
+              <Form.Label>Password</Form.Label>
+              <Form.Control
+                isInvalid={error.errors && error.errors.password && error.errors.password[0]}
+                type="password"
+                placeholder="Enter password"
+                name="password"
+                id="password"
+                onChange={onChange}
+                required
+              />
+              <Form.Control.Feedback type="invalid">
+                {error.errors && error.errors.password && error.errors.password[0]}
+              </Form.Control.Feedback>
+            </Form.Group>
+
+            <Form.Group>
+              <Form.Label>Confirm Password</Form.Label>
+              <Form.Control
+                type="password"
+                placeholder="Confirm password"
+                id="match"
+                onChange={handleConfirmPassword}
+                name="confirm_password"
+                required
+              />
+            </Form.Group>
+
+            <div />
+
+            {!isLoading ? (
+              <Button className="submit-btn" id="btn" type="submit" block>
+                Sign Up
+              </Button>
+            ) : (
+              <Button id="spinner-loading" 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="login">
+              <p>Already have an account?</p>
+              <Link className="login-text" to="/Login">
+                {' '}
+                Login
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+SignupForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default SignupForm;

src/components/home/Home.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 
+
 export class Home extends Component {
+
   render() {
     return (
       <div>