Merge 9baf8ec into 15730db

src/components/Header/Header.js

@@ -34,7 +34,7 @@ export class Header extends React.Component {
           <Button type="button" text="Log in" classname="button-style" />
         </Link>
         <Link to="/signup">
-          <Button type="button" text="SignIn" classname="button-style" />
+          <Button type="button" text="Sign Up" classname="button-style" />
         </Link>
       </NavItem>
     );

src/test/actions/moduleActions.spec.js

@@ -2,7 +2,6 @@
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import nock from 'nock';
-import 'regenerator-runtime';
 import { getModules, getModule } from '../../../store/actions/moduleActions';
 
 const middlewares = [thunk];

src/test/actions/socialAuth.spec.js

@@ -0,0 +1,8 @@
+import { getToken } from '../../../store/actions/authActions/socialAuthActions';
+
+describe('social actions', () => {
+  test('should return a string', () => {
+    const token = getToken('=khsbbs');
+    expect(token).toEqual('khsbbs');
+  });
+});

src/test/views/signUp.spec.js

@@ -5,7 +5,8 @@ import { SignUp } from '../../views/Signup/SignUp';
 
 const historyMock = { push: jest.fn() };
 const props = {
-  registerUser: () => {},
+  registerAction: () => {},
+  socialSignOn: () => {},
   auth: {},
   errors: {},
 };
@@ -20,10 +21,12 @@ describe('Signup component', () => {
     wrapper = setUp();
     sinon.spy(SignUp.prototype, 'onChange');
     sinon.spy(SignUp.prototype, 'onSubmit');
+    sinon.spy(SignUp.prototype, 'componentDidMount');
   });
   afterEach(() => {
     SignUp.prototype.onChange.restore();
     SignUp.prototype.onSubmit.restore();
+    SignUp.prototype.componentDidMount.restore();
   });
   it('ensure onchange is called for firstname', (done) => {
     const event = { target: { name: 'firstName', value: 'spam' } };

src/views/Login/Login.js

@@ -1,8 +1,10 @@
 /* eslint-disable react/destructuring-assignment */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { Component } from 'react';
 import { Form } from 'reactstrap';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link, Redirect } from 'react-router-dom';
 import Logo from '../../assets/images/logo3.png';
 import Navbar from '../../components/Header/Header';
@@ -11,6 +13,7 @@ import Card from '../../components/Card/Card';
 import Button from '../../components/Button';
 import Input from '../../components/Inputs/Input';
 import { loginUser } from '../../../store/actions/authActions';
+import { socialAuthPath, socialAuth, getToken } from '../../../store/actions/authActions/socialAuthActions';
 import './login.scss';
 
 export class Login extends Component {
@@ -27,6 +30,15 @@ export class Login extends Component {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
+  componentDidMount() {
+    const { location, socialSignOn } = this.props;
+    const tokenString = location && location.search;
+    if (tokenString) {
+      const token = getToken(tokenString);
+      socialSignOn(token);
+    }
+  }
+
   handleChange(e) {
     const { validationErrors } = this.state;
 
@@ -109,56 +121,88 @@ export class Login extends Component {
         <Navbar />
         <section className="l-container">
           <Card className="form-container">
-            <Form onSubmit={this.handleSubmit} id="form">
-              <div>
-                <p className="logo">
-                  <img src={Logo} alt="Logo" />
-                </p>
-                <h2 className="header"> LOGIN </h2>
-                <span className="error" id="form-feedback">
-                  {authError}
-                </span>
-              </div>
-
-              <Input
-                id="email-input"
-                onChange={this.handleChange}
-                type="text"
-                name="email"
-                value={this.state.email}
-                placeholder="Enter Email"
-              />
-              <span className="error">{email || ''}</span>
-
-              <Input
-                id="password-input"
-                onChange={this.handleChange}
-                type="password"
-                name="password"
-                value={this.state.password}
-                placeholder="Enter Password"
-              />
-              <span className="error">{password || ''}</span>
-
-              <Button
-                type="submit"
-                classname="submit"
-                text={isLoading ? 'Please wait..' : 'Submit'}
-              />
-
-              <p>
-                <Link className="forgot-password" to="/password-reset">
+            <div>
+              <Form onSubmit={this.handleSubmit} id="form">
+                <div>
+                  <p className="logo">
+                    <img src={Logo} alt="Logo" />
+                  </p>
+                  <h2 className="header"> LOGIN </h2>
+                  <span className="error" id="form-feedback">
+                    {authError}
+                  </span>
+                </div>
+
+                <Input
+                  id="email-input"
+                  onChange={this.handleChange}
+                  type="text"
+                  name="email"
+                  value={this.state.email}
+                  placeholder="Enter Email"
+                />
+                <span className="error">{email || ''}</span>
+
+                <Input
+                  id="password-input"
+                  onChange={this.handleChange}
+                  type="password"
+                  name="password"
+                  value={this.state.password}
+                  placeholder="Enter Password"
+                />
+                <span className="error">{password || ''}</span>
+
+                <Button
+                  type="submit"
+                  classname="submit"
+                  text={isLoading ? 'Please wait..' : 'Submit'}
+                />
+              </Form>
+              <div className="btm">
+                <p>
+                  <Link className="forgot-password" to="/password-reset">
                   Forgot Password?
-                </Link>
-              </p>
-              <p>
+                  </Link>
+                </p>
+                <p>
                 Dont have an account yet?
-                <Link className="sign-up" to="/sign-up">
-                  {' '}
+                  <Link className="sign-up" to="/signup">
+                    {' '}
                   Sign Up
-                </Link>
-              </p>
-            </Form>
+                  </Link>
+                </p>
+                <p className="acct">
+                  Login with Social media account
+                </p>
+                <div>
+                  <a
+                    role="button"
+                    tabIndex={0}
+                    className="font"
+                    onClick={() => socialAuthPath('twitter')}
+                  >
+                    <FontAwesomeIcon icon={['fab', 'twitter']} className="icon alt" />
+                  </a>
+                  <a
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => socialAuthPath('facebook')}
+                    className="font mid"
+                  >
+                    <FontAwesomeIcon icon={['fab', 'facebook-f']} className="icon alt" />
+                  </a>
+                  <a
+                    role="button"
+                    tabIndex={0}
+                    className="font"
+                    onClick={() => socialAuthPath('google')}
+                  >
+                    <FontAwesomeIcon icon={['fab', 'google']} className="icon alt" />
+                  </a>
+                </div>
+              </div>
+            </div>
           </Card>
         </section>
         <Footer />
@@ -169,11 +213,13 @@ export class Login extends Component {
 
 Login.propTypes = {
   loginUser: PropTypes.func.isRequired,
+  socialSignOn: PropTypes.func.isRequired,
   auth: PropTypes.shape({
     isLoading: PropTypes.bool,
     isAuthenticated: PropTypes.bool,
     errors: PropTypes.shape({ error: PropTypes.string }),
   }),
+  location: PropTypes.shape({ search: PropTypes.string }),
 };
 
 const mapStateToProps = state => ({
@@ -182,6 +228,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = {
   loginUser,
+  socialSignOn: socialAuth,
 };
 
 export default connect(

src/views/Signup/SignUp.js

@@ -1,9 +1,11 @@
 import React, { Fragment } from 'react';
-import { withRouter } from 'react-router-dom';
+import { withRouter, Redirect } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import 'bootstrap/dist/css/bootstrap.css';
 import { registerUser } from '../../../store/actions/authActions';
+import { socialAuthPath, socialAuth, getToken } from '../../../store/actions/authActions/socialAuthActions';
 import Footer from '../../components/Footer/Footer';
 import SignUpForm from './SignUpForm';
 import './signUp.scss';
@@ -22,6 +24,15 @@ class SignUp extends React.Component {
     };
   }
 
+  componentDidMount() {
+    const { location, socialSignOn } = this.props;
+    const tokenString = location && location.search;
+    if (tokenString) {
+      const token = getToken(tokenString);
+      socialSignOn(token);
+    }
+  }
+
   onChange(e) {
     const { name } = e.target;
     const { value } = e.target;
@@ -30,7 +41,7 @@ class SignUp extends React.Component {
 
   onSubmit(e) {
     const { firstName, lastName, userName, email, password, confirmPassword } = this.state;
-    const { history } = this.props;
+    const { history, registerAction } = this.props;
     e.preventDefault();
     const newUser = {
       firstName,
@@ -40,10 +51,16 @@ class SignUp extends React.Component {
       password,
       confirmPassword,
     };
-    this.props.registerUser(newUser, history);
+    registerAction(newUser, history);
   }
 
   render() {
+    const { auth } = this.props;
+    const { isAuthenticated, errors } = auth;
+    if (isAuthenticated) {
+      return <Redirect to="/dashboard" />;
+    }
+
     let valError;
     let authError;
     const { firstName, lastName, userName, email, password, confirmPassword } = this.state;
@@ -56,8 +73,6 @@ class SignUp extends React.Component {
       confirmPassword,
     };
 
-    const { auth } = this.props;
-    const { errors } = auth;
     if (errors && !(Object.keys(errors).length === 0 && errors.constructor === Object)) {
       const { validationErrors, isValid } = validateSignupInput(newUser);
       if (typeof errors === 'string') {
@@ -75,6 +90,7 @@ class SignUp extends React.Component {
           onChange={e => this.onChange(e)}
           valError={valError}
           authError={authError}
+          socialAuthPath={socialAuthPath}
         />
         <Footer />
       </Fragment>
@@ -83,20 +99,37 @@ class SignUp extends React.Component {
 }
 
 SignUp.propTypes = {
-  registerUser: PropTypes.func.isRequired,
+  socialSignOn: PropTypes.func.isRequired,
+  registerAction: PropTypes.func.isRequired,
   auth: PropTypes.shape({
     root: PropTypes.string,
     errors: PropTypes.any,
+    isAuthenticated: PropTypes.bool,
   }),
   history: PropTypes.shape({ root: PropTypes.string }),
+  location: PropTypes.shape({ search: PropTypes.string }),
 };
 const mapStateToProps = state => ({
   auth: state.auth,
 });
 
+/**
+ * @method mapDispatchToProps
+ * @description maps redux actions to props
+ * @param {callback} dispatch destructured reducer state object
+ * @returns {object} state
+ */
+export const mapDispatchToProps = dispatch => bindActionCreators(
+  {
+    registerAction: registerUser,
+    socialSignOn: socialAuth,
+  },
+  dispatch,
+);
+
 const signUpPage = connect(
   mapStateToProps,
-  { registerUser },
+  mapDispatchToProps,
 )(withRouter(SignUp));
 export default signUpPage;
 export { SignUp };