Added github login and authentication with backend.

README.md

@@ -1 +1 @@
-##Projectwise App
+## Projectwise - Frontend

src/api/index.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import qs from 'qs'
 
 const PUBLIC_URI = process.env.NODE_ENV === 'production'
   ? process.env.PUBLIC_URL
@@ -9,6 +10,11 @@ class API {
     this.axios = axios.create({
       baseURL: `${PUBLIC_URI}/api`
     })
+    this.githubAuthUrl = `https://github.com/login/oauth/authorize?${qs.stringify({
+      client_id: '6cbc3c175543c707c180',
+      redirect_uri: window.location.origin + '/auth/github/callback',
+      scope: 'user'
+    })}`
   }
   setAuthHeader (token) {
     this.axios.defaults.headers.common['Authorization'] = `bearer ${token}`
@@ -19,6 +25,12 @@ class API {
   signup (userDetails) {
     return this.axios.post('/signup', userDetails)
   }
+  githubToken (code) {
+    return this.axios.get(`/auth/token/github?code=${code}`)
+  }
+  githubAuthenticate (accessToken) {
+    return this.axios.get(`/auth/github?access_token=${accessToken}`)
+  }
   login (userDetails) {
     return this.axios.post('/login', userDetails)
   }

src/components/Notification/index.js

@@ -8,7 +8,7 @@ const ListItem = styled.li`
   align-items: 'flex-start';
   border-radius: 3px;
   display: flex;
-  color: ${colors.secondary};
+  color: ${colors.white};
   padding: 0.75em 1em;
   box-shadow: 0px 2px 4px #8798A4
 
@@ -27,7 +27,7 @@ const DismissButton = styled.button`
   -moz-appearance: none;
   background: transparent;
   border: 0;
-  color: ${colors.secondary};
+  color: ${colors.white};
   cursor: pointer;
   display: block;
   flex: 0 0 auto;

src/screens/Auth/GithubAuth.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react'
+import { Redirect } from 'react-router-dom'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+import qs from 'qs'
+
+import Container from '../../components/Container'
+import Navbar from '../../containers/Navbar'
+import colors from '../../styles/colors'
+import API from '../../api'
+
+import login from '../../store/actions/login'
+import { addNotification } from '../../store/actions/notifications'
+
+const WrappedContainer = styled(Container)`
+  min-height: calc(100vh - 130px);
+`
+
+const Text = styled.h3`
+  font-weight: bold;
+  padding-bottom: 1.2em;
+`
+
+class GithubAuth extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isAuthenticated: false,
+      isError: false
+    }
+  }
+
+  async componentDidMount () {
+    const query = qs.parse(this.props.location.search.split('?')[1])
+    const { addNotification, login } = this.props
+    if (query.code) {
+      try {
+        const req = await API.githubToken(query.code)
+        const accessToken = qs.parse(req.data.token)['access_token']
+        console.log(accessToken)
+        const authResponse = await API.githubAuthenticate(accessToken)
+        login(authResponse.data.user)
+        addNotification({
+          text: `Successfully authenticated with Github`
+        })
+        this.setState({ isAuthenticated: true })
+      } catch (e) {
+        this.setState({ isError: true })
+        addNotification({
+          text: `Something went wrong, please try again.`
+        })
+      }
+    }
+  }
+
+  render () {
+    const { isAuthenticated, isError } = this.state
+
+    if (isAuthenticated) {
+      return <Redirect to='/' />
+    }
+
+    if (isError) {
+      return <Redirect to='/login' />
+    }
+    return (
+      <React.Fragment>
+        <Navbar />
+        <WrappedContainer fluid color={colors.light} className='py-5'>
+          <Container className='mx-5 my-3 mx-auto'>
+            <Text className='text-muted text-center mb-4'>Authenticating with Github</Text>
+          </Container>
+        </WrappedContainer>
+      </React.Fragment>
+    )
+  }
+}
+
+export default connect(null, { login, addNotification })(GithubAuth)

src/screens/Auth/index.js

@@ -0,0 +1,3 @@
+import Github from './GithubAuth'
+
+export { Github }

src/screens/Login/LoginForm.js

@@ -86,7 +86,7 @@ class LoginForm extends Component {
             </FullButton>
           </Col>
           <Col lg={6}>
-            <FullButton color='secondary'>
+            <FullButton color='secondary' tag='a' href={`${API.githubAuthUrl}`}>
               <i className='fa fa-github' aria-hidden='true' />&nbsp;&nbsp;Login with Github
             </FullButton>
           </Col>

src/screens/Login/index.js

@@ -28,16 +28,18 @@ const Login = ({ permission, auth }) => {
   if (auth.isAuthenticated) {
     return (<Redirect to='/' />)
   }
-  return ([
-    <Navbar />,
-    <WrappedContainer fluid color={colors.light} className='py-5'>
-      <Text className='text-muted text-center mb-4'>Welcome Back</Text>
-      <Card body className='mx-5 my-3 mx-auto'>
-        <LoginForm />
-      </Card>
-      <p className='mt-1 text-center'>New to Projectwise? <Link to='/signup'>Signup</Link></p>
-    </WrappedContainer>
-  ])
+  return (
+    <React.Fragment>
+      <Navbar />
+      <WrappedContainer fluid color={colors.light} className='py-5'>
+        <Text className='text-muted text-center mb-4'>Welcome Back</Text>
+        <Card body className='mx-5 my-3 mx-auto'>
+          <LoginForm />
+        </Card>
+        <p className='mt-1 text-center'>New to Projectwise? <Link to='/signup'>Signup</Link></p>
+      </WrappedContainer>
+    </React.Fragment>
+  )
 }
 
 const mapStateToProps = (state) => ({

src/screens/Root.js

@@ -8,6 +8,7 @@ import Container from '../components/Container'
 
 import Home from './Home'
 import Login from './Login'
+import { Github } from './Auth'
 import Signup from './Signup'
 import Projects from './Projects'
 import Project from './Project'
@@ -20,6 +21,7 @@ const Root = () => {
       <Switch>
         <Route path='/login' component={Login} />
         <Route path='/signup' component={Signup} />
+        <Route path='/auth/github/callback' component={Github} />
         <PrivateRoute path='/new' component={AddProject} />
         <Route path='/projects/:projectId' component={Project} />
         <Route path='/projects' component={Projects} />

src/screens/Signup/SignupForm.js

@@ -104,7 +104,7 @@ class SignupForm extends Component {
             </FullButton>
           </Col>
           <Col lg={6}>
-            <FullButton color='secondary'>
+            <FullButton color='secondary' tag='a' href={`${API.githubAuthUrl}`}>
               <i class='fa fa-github' aria-hidden='true' />&nbsp;&nbsp;Signup with Github
             </FullButton>
           </Col>