add buttons to pages

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="SignUp" classname="button-style" />
+          <Button type="button" text="Sign Up" classname="button-style" />
         </Link>
       </NavItem>
     );

src/test/actions/socialAuth.spec.js

@@ -1,16 +1,8 @@
-import { getToken, socialAuthPath } from '../../../store/actions/authActions/socialAuthActions';
-// export const getToken = (tokenString) => {
-//     const startIndex = tokenString.indexOf('=') + 1;
-//     const token = tokenString.slice(startIndex);
-//     return token;
-//   };
+import { getToken } from '../../../store/actions/authActions/socialAuthActions';
 
 describe('social actions', () => {
   test('should return a string', () => {
     const token = getToken('=khsbbs');
     expect(token).toEqual('khsbbs');
   });
-  test('should ', () => {
-    expect(socialAuthPath('google')).toBe(null);
-  });
 });

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="/signup">
-                  {' '}
+                  <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/SignUpForm.js

@@ -2,7 +2,7 @@
 import React, { Fragment } from 'react';
 import 'bootstrap/dist/css/bootstrap.css';
 import { Link } from 'react-router-dom';
-import { Card, CardBody } from 'reactstrap';
+import { Card } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import Logo from '../../assets/images/logo3.png';
@@ -80,13 +80,17 @@ const SignUpForm = ({
             <Button text="Sign up" />
           </form>
           <div className="btm">
-            <Link to="/login" className="acct">
-              Already have an account
-            </Link>
             <br />
+            <p className="acct">
+              Already have an account?
+              <Link className="sign-up" to="/login">
+                {' '}
+                login
+              </Link>
+            </p>
 
-            <p className="soc-media">
-              Register with Social media
+            <p className="acct">
+              Register with Social media account
             </p>
             <div>
               <a
@@ -115,7 +119,6 @@ const SignUpForm = ({
               </a>
             </div>
           </div>
-          <CardBody />
         </Card>
       </div>
     </section>

src/views/Signup/signUp.scss

@@ -44,14 +44,14 @@ html {
   }
 }
 
-.font {
+a.font {
   width: 30%;
   padding: 10px;
   font-size: 2rem;
   cursor: pointer;
-}
-a.font:focus {
-  outline: none;
+  :hover {
+    color: $orangecolor;
+  }
 }
 
 .boxx-tex {
@@ -67,6 +67,7 @@ a.font:focus {
   margin: auto;
 }
 
+
 .sign-form .b-button {
   background-color: $orangecolor;
   border: 0.5px solid $orangecolor;
@@ -106,15 +107,25 @@ a.font:focus {
 }
 
 .btm {
+  text-align: center;
   a:hover {
     color: $orangecolor;
     text-decoration: none;
+    box-shadow: 0 4px 4px rgba(54, 52, 52, 0.4);
+  }
+  a:focus{
+    outline: none;
   }
 
   a {
     color: $linkcolor;
     font-weight: normal;
   }
+  a.sign-up {
+    color: $orangecolor;
+    font-size: 15px;
+    padding: 3px;
+  }
 
   .mid {
     padding: 0 3%;
@@ -125,11 +136,10 @@ a.font:focus {
   padding: 1.5rem;
 }
 
-.acct,
-.soc-media {
+.acct {
   color: $linkcolor;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 14px;
   margin-bottom: 5%;
   margin-top: 0.8%;
 }

store/actions/authActions/socialAuthActions.js

@@ -16,7 +16,6 @@ export const socialAuth = token => async (dispatch) => {
 export const socialAuthPath = (authType) => {
   const url = 'https://freyja-ah-backend.herokuapp.com';
   window.location.href = `${url}/api/auth/${authType}`;
-  return null;
 };
 
 export const getToken = (tokenString) => {