Oauth signup and logout done.Login also done but need small change

aravind289 · aravind289 · commit a9969a4ce7db · 2020-07-21T21:54:25.000+05:30
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_CLIENT_ID = 580794985194-gjre1am52q072bhig904440e5fsd7r5b.apps.googleusercontent.com
diff --git a/public/index.html b/public/index.html
@@ -9,11 +9,8 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <meta name="google-signin-scope" content="profile email" />
-    <meta
-      name="google-signin-client_id"
-      content="580794985194-gjre1am52q072bhig904440e5fsd7r5b.apps.googleusercontent.com"
-    />
+    <meta name="google-signin-scope" content="email" />
+    <meta name="google-signin-client_id" content="%REACT_APP_CLIENT_ID%" />
     <script src="https://apis.google.com/js/platform.js" async defer></script>
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
diff --git a/src/components/common/ui/button-with-loader.jsx b/src/components/common/ui/button-with-loader.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styles from './ui.module.css'
 
 const loader = (
-  <div class={styles.loaderEllipse}>
+  <div className={styles.loaderEllipse}>
     <div></div>
     <div></div>
     <div></div>
diff --git a/src/components/dashboard/dashboard.module.css b/src/components/dashboard/dashboard.module.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: #e0e0e0;
+  background-color: rgb(246, 248, 250);
   padding: 45px;
 }
 
diff --git a/src/components/homepage/index.jsx b/src/components/homepage/index.jsx
@@ -1,23 +1,16 @@
 import React from 'react'
 import { navigate } from '@reach/router'
 import { getAuthToken } from '../../helpers/storage'
-// import { gapi } from 'gapi-script'
 import './index.css'
 import NavBar from '../common/header'
-import Logout from '../loginSignup/logout'
 
 export default class HomePage extends React.Component {
-  logout = (event) => {
-    event.preventDefault()
-    Logout()
-  }
-
   componentDidMount() {
     // Authentication hack
     if (!getAuthToken()) {
       setTimeout(async () => {
         await navigate('/login', { replace: false })
-      }, 10)
+      }, 0)
     }
   }
 
diff --git a/src/components/loginSignup/login.jsx b/src/components/loginSignup/login.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { login } from '../../helpers/api'
+import { login, googleLoginSignup } from '../../helpers/api'
 import { navigate } from '@reach/router'
 import { setAuthToken } from '../../helpers/storage'
 import Para from './bgpara'
@@ -88,7 +88,9 @@ export default class Login extends Component {
         })
         navigate('/', { replace: true })
       } catch (e) {
+        console.log(e.response.data)
         const { non_field_errors } = e.response.data
+
         this.setState({
           isLoading: false,
           errors: {
@@ -108,8 +110,7 @@ export default class Login extends Component {
 
     gapi.load('auth2', () => {
       var auth2 = gapi.auth2.init({
-        client_id:
-          '580794985194-gjre1am52q072bhig904440e5fsd7r5b.apps.googleusercontent.com',
+        client_id: process.env.REACT_CLIENT_ID,
       })
 
       // Sign the user in, and then retrieve their ID.
@@ -132,23 +133,17 @@ export default class Login extends Component {
       console.log('Email: ' + profile.getEmail())
       var id_token = googleUser.getAuthResponse().id_token
       console.log(id_token)
-      // try {
-      //   const response = await id_token(id_token)
-      //   const token = response.data.token
-      //   setAuthToken(token)
-      //   this.setState({
-      //     isLoading: false,
-      //   })
-      //   navigate('/', { replace: true })
-      // } catch (e) {
-      //   const { non_field_errors } = e.response.data
-      //   this.setState({
-      //     isLoading: false,
-      //     errors: {
-      //       credentials: non_field_errors[0],
-      //     },
-      //   })
-      // }
+      let obj = {
+        token: id_token,
+      }
+
+      try {
+        const response = await googleLoginSignup(obj)
+        setAuthToken(response.data.token)
+        navigate('/')
+      } catch (e) {
+        console.log(e.response.data.error)
+      }
     }
   }
 
diff --git a/src/components/loginSignup/logout.js b/src/components/loginSignup/logout.js
@@ -1,13 +1,16 @@
 import { removeAuthToken } from '../../helpers/storage'
 // import { gapi } from 'gapi-script'
+import { logout } from '../../helpers/api'
 
 import { navigate } from '@reach/router'
 
-export default function Logout() {
-  removeAuthToken()
+export default async function Logout() {
   navigate('/login')
-  // var auth2 = gapi.auth2.getAuthInstance()
-  // auth2.signOut().then(function () {
-  //     console.log('User signed out.')
-  // })
+  try {
+    const response = await logout()
+    console.log(response)
+    removeAuthToken()
+  } catch (e) {
+    console.log('error')
+  }
 }
diff --git a/src/components/loginSignup/signup.jsx b/src/components/loginSignup/signup.jsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import { navigate } from '@reach/router'
-import { signup } from '../../helpers/api'
+import { signup, googleLoginSignup } from '../../helpers/api'
 import { setAuthToken } from '../../helpers/storage'
 import './loginsignup.css'
 import Logo from '../../images/Keyboard.png'
 import Para from './bgpara'
+import { gapi } from 'gapi-script'
 
 export default class Login extends React.Component {
   constructor(props) {
@@ -18,7 +19,9 @@ export default class Login extends React.Component {
         password: '',
         email: '',
       },
+      manualSignup: true,
     }
+    this.user_id = null
   }
 
   handleInput = (stateName) => (e) => {
@@ -41,7 +44,6 @@ export default class Login extends React.Component {
 
   submitForm = async (event) => {
     event.preventDefault()
-
     const { username: name, password: pwd, email } = this.state
 
     if (!pwd && !name) {
@@ -115,6 +117,70 @@ export default class Login extends React.Component {
     }
   }
 
+  onSignIn = () => {
+    // Useful data for your client-side scripts:
+
+    gapi.load('auth2', () => {
+      var auth2 = gapi.auth2.init({
+        client_id: process.env.REACT_CLIENT_ID,
+      })
+
+      // Sign the user in, and then retrieve their ID.
+      auth2.signIn().then((googleUser) => {
+        console.log('chcek')
+        console.log(googleUser)
+        this.displayGoogelUser(googleUser)
+      })
+    })
+  }
+
+  displayGoogelUser = async (googleUser) => {
+    if (googleUser) {
+      var profile = googleUser.getBasicProfile()
+      console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
+      console.log('Full Name: ' + profile.getName())
+      console.log('Given Name: ' + profile.getGivenName())
+      console.log('Family Name: ' + profile.getFamilyName())
+      console.log('Image URL: ' + profile.getImageUrl())
+      console.log('Email: ' + profile.getEmail())
+      var id_token = googleUser.getAuthResponse().id_token
+      if (id_token) {
+        this.setState({
+          manualSignup: false,
+          email: profile.getEmail(),
+          errors: {
+            username: 'Please fill unique username',
+          },
+        })
+        this.user_id = id_token
+      }
+    }
+  }
+
+  submitUsername = async (event) => {
+    event.preventDefault()
+    const { username: name } = this.state
+    if (!name) {
+      this.setState({
+        errors: {
+          username: 'Please fill the empty field',
+        },
+      })
+    } else {
+      let obj = {
+        username: name,
+        token: this.user_id,
+      }
+      try {
+        const response = await googleLoginSignup(obj)
+        setAuthToken(response.data.token)
+        navigate('/')
+      } catch (e) {
+        console.log(e.response.data.error)
+      }
+    }
+  }
+
   render() {
     return (
       <div className="login">
@@ -150,6 +216,7 @@ export default class Login extends React.Component {
                     </h6>
                   }
                 </div>
+
                 <div className="detailsdiv" style={{ marginTop: '7%' }}>
                   <label className="label">Email</label>
                   <br></br>
@@ -161,6 +228,7 @@ export default class Login extends React.Component {
                     type="text"
                     placeholder="Enter email"
                     onChange={this.handleInput('email')}
+                    value={this.state.email}
                   />
                   {
                     <h6
@@ -169,34 +237,50 @@ export default class Login extends React.Component {
                     </h6>
                   }
                 </div>
+                {this.state.manualSignup && (
+                  <div className="detailsdiv" style={{ marginTop: '7%' }}>
+                    <label className="label">Password</label>
 
-                <div className="detailsdiv" style={{ marginTop: '7%' }}>
-                  <label className="label">Password</label>
+                    <br></br>
 
-                  <br></br>
-
-                  <input
-                    className={
-                      this.state.errors.password
-                        ? ' txtbox txtboxRed'
-                        : 'txtbox'
+                    <input
+                      className={
+                        this.state.errors.password
+                          ? ' txtbox txtboxRed'
+                          : 'txtbox'
+                      }
+                      type="password"
+                      placeholder="Password"
+                      onChange={this.handleInput('password')}
+                    />
+                    {
+                      <h6
+                        style={{
+                          color: 'red',
+                          fontSize: '16px',
+                          margin: '5px',
+                        }}>
+                        {this.state.errors.password}
+                      </h6>
                     }
-                    type="password"
-                    placeholder="Password"
-                    onChange={this.handleInput('password')}
-                  />
-                  {
-                    <h6
-                      style={{ color: 'red', fontSize: '16px', margin: '5px' }}>
-                      {this.state.errors.password}
-                    </h6>
-                  }
-                </div>
+                  </div>
+                )}
               </form>
-              <div style={{ display: "flex", justifyContent: "center" }}>
-                <button className="loginBtn" type="submit" onClick={this.submitForm}>
+              <div>
+                <button
+                  className="loginBtn"
+                  type="submit"
+                  onClick={
+                    Boolean(this.state.manualSignup)
+                      ? this.submitForm
+                      : this.submitUsername
+                  }>
                   Sign Up
                 </button>
+                <div
+                  className="g-signin2"
+                  onClick={this.onSignIn}
+                  data-theme="dark"></div>
               </div>
             </div>
           </div>
diff --git a/src/helpers/api.js b/src/helpers/api.js
@@ -3,7 +3,11 @@ import { getAuthToken } from './storage'
 const baseUrl = 'https://typeforslack.herokuapp.com'
 
 export async function login(obj) {
-  return await axios.post(`${baseUrl}/api-token-auth/ `, obj)
+  return await axios.post(`${baseUrl}/auth/api-token-auth/ `, obj)
+}
+
+export async function googleLoginSignup(obj) {
+  return await axios.post(`${baseUrl}/auth/google/login`, obj)
 }
 
 export function id_token(id) {
@@ -23,7 +27,8 @@ export function fetchPara() {
 }
 
 export function logout() {
-  return axios.get(`${baseUrl}/logout `, {
+  console.log(getAuthToken())
+  return axios.get(`${baseUrl}/auth/logout `, {
     headers: {
       Authorization: `token ${getAuthToken()}`,
     },

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+REACT_APP_CLIENT_ID = 580794985194-gjre1am52q072bhig904440e5fsd7r5b.apps.googleusercontent.com`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`display: flex;`
`3`	`3`	`flex-direction: column;`
`4`	`4`	`align-items: center;`
`5`		`- background-color: #e0e0e0;`
	`5`	`+ background-color: rgb(246, 248, 250);`
`6`	`6`	`padding: 45px;`
`7`	`7`	`}`
`8`	`8`