Added Google Oauth Signup

.env.sample

@@ -0,0 +1,2 @@
+REACT_APP_GOOGLE_CLIENT_ID=<Google App Client ID>
+REACT_APP_GOOGLE_CALLBACK_URL=<Google Callback URL>

README.md

@@ -12,16 +12,23 @@ Open Source Programs (OSP) is an application that simplifies the processing and
 To setup the project locally, go through [this wiki page](https://github.com/anitab-org/open-source-programs-web/wiki/Fork,-Clone,-Remote-and-Pull-Request).
 **Note:** Before setting up the frontend make sure to have Setup the [Backend Repo](https://github.com/anitab-org/open-source-programs-backend).
 
-1. To start the server:
+1. Create a `.env` file in the project root directory and add **Client ID** and **Callback URL** of Google like this:
+
+```
+REACT_APP_GOOGLE_CLIENT_ID=<Google App Client ID>
+REACT_APP_GOOGLE_CALLBACK_URL=<Google Callback URL>
+```
+To get **Client ID** and **Callback URL** of Google OAuth App follow [this docs](https://developers.google.com/adwords/api/docs/guides/authentication#create_a_client_id_and_client_secret).
+
+2. To start the server:
 
 ```
-cd open-source-programs-web
 npm install
 npm start
 ```
 
-2. Navigate to `http://localhost:3000/` in your browser.
-3. You can terminate the process by `Ctrl+C` in your terminal.
+3. Navigate to `http://localhost:3000/` in your browser.
+4. You can terminate the process by `Ctrl+C` in your terminal.
 
 ## Contributing
 

package.json

@@ -13,6 +13,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-google-login": "^5.2.2",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-router-redux": "^4.0.8",

src/actions/login.js

@@ -1,7 +1,8 @@
 import axios from 'axios'
 import {
     urlLogin,
-    urlRegister
+    urlRegister,
+    urlGoogleLogin,
 } from '../urls'
 import {
     LOGIN,
@@ -10,6 +11,40 @@ import {
     REGISTER_ERRORS
 } from './types'
 
+
+
+export const GoogleOauthLogin = (data,callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'application/json',
+            }
+        }
+        const obj = {
+            access_token:data.tokenObj.access_token,
+            id_token:data.tokenObj.id_token
+        }
+        console.log(obj);
+        const res = await axios.post(urlGoogleLogin(), obj , config);
+        console.log(res);
+        dispatch({
+            type: LOGIN,
+            payload: res.data
+        });
+
+        // set token value
+        localStorage.setItem('token', res.data.access_token)
+        callback()
+    }
+    catch (err) {
+        dispatch({
+            type: LOGIN_ERRORS,
+            payload: err.response
+        });
+        callback()
+    }
+};
+
 export const postLogin = (data, callback) => async dispatch => {
     try {
         const config = {

src/components/GoogleSocialAuth.js

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import GoogleLogin from 'react-google-login';
+import { GoogleOauthLogin } from '../actions/login';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import { Message } from 'semantic-ui-react'
+import "../styles/google-auth-styles.css";
+
+class GoogleSocialAuth extends Component {
+  constructor(props){
+    super(props)
+    this.state={
+      statusCode:'',
+      error:null,
+      posted:false,
+      errorText:''
+    }
+  }
+
+  responseCode = (response) => {
+    this.setState({
+        statusCode: response.code
+    })
+    const data = {
+        statusCode: this.state.code,
+        ...response
+    }
+    this.props.GoogleOauthLogin(data, this.callback)
+    this.setState({
+        statusCode: ''
+    })
+}
+
+callback = () => {
+    this.setState({
+        error: this.props.loginerror ? true : false,
+        posted: true,
+        errorText: 'Server Error: try again.'
+    })
+    console.log(this.state.error, this.state.posted);
+    if (!this.state.error) {
+        this.props.history.push('/')
+    }
+    setTimeout(() => {
+        this.setState({
+            error: false,
+            posted: false,
+        })
+    }, 4000)
+}
+
+  GoogleError = (response) => {
+    console.log(response);
+    this.setState({
+        error: true,
+        posted: true,
+        errorText: "Google API Error."
+    })
+    setTimeout(() => {
+        this.setState({
+            error: false,
+            posted: false
+        })
+    }, 4000)
+}
+
+
+  componentWillMount() {
+      this.setState({
+          statusCode: '',
+          error: null,
+          posted: false,
+          errorText: ''
+      })
+  }
+
+  componentWillUnmount() {
+      this.setState = (state, callback) => {
+          return;
+      };
+  }
+  render() {
+    const { REACT_APP_GOOGLE_CLIENT_ID, REACT_APP_GOOGLE_CALLBACK_URL } = process.env;
+    const { error, posted, errorText } = this.state;
+    const onFailure = response => this.GoogleError(response)
+
+    return (
+      <>
+          {
+              error && posted ?
+                  <Message
+                      error
+                      content={errorText}
+                  /> :
+                  <div className="google-login">
+                    <GoogleLogin 
+                        clientId={`${REACT_APP_GOOGLE_CLIENT_ID}`}
+                        onSuccess={this.responseCode}
+                        onFailure={onFailure}
+                        buttonText="SignUp with Google"
+                        redirectUri={`${REACT_APP_GOOGLE_CALLBACK_URL}`}
+                        className="google-cust-button"
+                    />
+                  </div>
+          }
+      </>
+    );
+  }
+}
+
+GoogleSocialAuth.propTypes = {
+  GoogleOauthLogin: PropTypes.func.isRequired,
+}
+const mapStateToProps = state => ({
+    login: state.login.login,
+    loginerror: state.login.loginerror
+})
+
+export default connect(
+    mapStateToProps,
+    { GoogleOauthLogin, }
+)(withRouter(GoogleSocialAuth))

src/components/Login.js

@@ -2,12 +2,12 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { postLogin } from '../actions/login'
-import { Form, Grid, Image, Divider, Icon, Message, Button } from 'semantic-ui-react'
+import { Form, Grid, Image, Divider, Icon, Message, Button ,Segment } from 'semantic-ui-react'
 import PropTypes from 'prop-types'
 import login from './../styles/Login.css'
 import orgLogo from '../assets/org-logo.jpg'
 import { register } from '../urls'
-
+import GoogleAuth from './GoogleSocialAuth'
 class Login extends Component {
     constructor(props){
         super(props)
@@ -162,6 +162,9 @@ class Login extends Component {
                             : null
                         }
                     <Divider />
+                    <Segment>
+                        <GoogleAuth />
+                    </Segment>
                     <span>Don't have an account? <Link to={register()}>Register here.</Link></span>
                     </div>
                     </Grid.Column>

src/styles/google-auth-styles.css

@@ -0,0 +1,4 @@
+.google-cust-button{
+    width: 100%;
+    justify-content: center;
+}

src/urls.js

@@ -47,6 +47,11 @@ export function urlRegister() {
     return `${urlBaseBackend()}/token_auth/register/`
 }
 
+
+export function urlGoogleLogin() {
+    return `${urlBaseBackend()}/token_auth/google/`
+}
+
 export function urlInfo() {
     return `${urlBaseBackend()}/info/`
 }