Skip to content

Commit a9969a4

Browse files
aravind289aravind289
committed
Oauth signup and logout done.Login also done but need small change
1 parent d02b535 commit a9969a4

File tree

9 files changed

+145
-67
lines changed

9 files changed

+145
-67
lines changed

‎.env

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
REACT_APP_CLIENT_ID = 580794985194-gjre1am52q072bhig904440e5fsd7r5b.apps.googleusercontent.com

‎public/index.html

+2-5
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,8 @@
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12-
<meta name="google-signin-scope" content="profile email" />
13-
<meta
14-
name="google-signin-client_id"
15-
content="580794985194-gjre1am52q072bhig904440e5fsd7r5b.apps.googleusercontent.com"
16-
/>
12+
<meta name="google-signin-scope" content="email" />
13+
<meta name="google-signin-client_id" content="%REACT_APP_CLIENT_ID%" />
1714
<script src="https://apis.google.com/js/platform.js" async defer></script>
1815
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1916
<!--

‎src/components/common/ui/button-with-loader.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import styles from './ui.module.css'
33

44
const loader = (
5-
<div class={styles.loaderEllipse}>
5+
<div className={styles.loaderEllipse}>
66
<div></div>
77
<div></div>
88
<div></div>

‎src/components/dashboard/dashboard.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: flex;
33
flex-direction: column;
44
align-items: center;
5-
background-color: #e0e0e0;
5+
background-color: rgb(246, 248, 250);
66
padding: 45px;
77
}
88

‎src/components/homepage/index.jsx

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
import React from 'react'
22
import { navigate } from '@reach/router'
33
import { getAuthToken } from '../../helpers/storage'
4-
// import { gapi } from 'gapi-script'
54
import './index.css'
65
import NavBar from '../common/header'
7-
import Logout from '../loginSignup/logout'
86

97
export default class HomePage extends React.Component {
10-
logout = (event) => {
11-
event.preventDefault()
12-
Logout()
13-
}
14-
158
componentDidMount() {
169
// Authentication hack
1710
if (!getAuthToken()) {
1811
setTimeout(async () => {
1912
await navigate('/login', { replace: false })
20-
}, 10)
13+
}, 0)
2114
}
2215
}
2316

‎src/components/loginSignup/login.jsx

+15-20
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react'
2-
import { login } from '../../helpers/api'
2+
import { login, googleLoginSignup } from '../../helpers/api'
33
import { navigate } from '@reach/router'
44
import { setAuthToken } from '../../helpers/storage'
55
import Para from './bgpara'
@@ -88,7 +88,9 @@ export default class Login extends Component {
8888
})
8989
navigate('/', { replace: true })
9090
} catch (e) {
91+
console.log(e.response.data)
9192
const { non_field_errors } = e.response.data
93+
9294
this.setState({
9395
isLoading: false,
9496
errors: {
@@ -108,8 +110,7 @@ export default class Login extends Component {
108110

109111
gapi.load('auth2', () => {
110112
var auth2 = gapi.auth2.init({
111-
client_id:
112-
'580794985194-gjre1am52q072bhig904440e5fsd7r5b.apps.googleusercontent.com',
113+
client_id: process.env.REACT_CLIENT_ID,
113114
})
114115

115116
// Sign the user in, and then retrieve their ID.
@@ -132,23 +133,17 @@ export default class Login extends Component {
132133
console.log('Email: ' + profile.getEmail())
133134
var id_token = googleUser.getAuthResponse().id_token
134135
console.log(id_token)
135-
// try {
136-
// const response = await id_token(id_token)
137-
// const token = response.data.token
138-
// setAuthToken(token)
139-
// this.setState({
140-
// isLoading: false,
141-
// })
142-
// navigate('/', { replace: true })
143-
// } catch (e) {
144-
// const { non_field_errors } = e.response.data
145-
// this.setState({
146-
// isLoading: false,
147-
// errors: {
148-
// credentials: non_field_errors[0],
149-
// },
150-
// })
151-
// }
136+
let obj = {
137+
token: id_token,
138+
}
139+
140+
try {
141+
const response = await googleLoginSignup(obj)
142+
setAuthToken(response.data.token)
143+
navigate('/')
144+
} catch (e) {
145+
console.log(e.response.data.error)
146+
}
152147
}
153148
}
154149

‎src/components/loginSignup/logout.js

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import { removeAuthToken } from '../../helpers/storage'
22
// import { gapi } from 'gapi-script'
3+
import { logout } from '../../helpers/api'
34

45
import { navigate } from '@reach/router'
56

6-
export default function Logout() {
7-
removeAuthToken()
7+
export default async function Logout() {
88
navigate('/login')
9-
// var auth2 = gapi.auth2.getAuthInstance()
10-
// auth2.signOut().then(function () {
11-
// console.log('User signed out.')
12-
// })
9+
try {
10+
const response = await logout()
11+
console.log(response)
12+
removeAuthToken()
13+
} catch (e) {
14+
console.log('error')
15+
}
1316
}

‎src/components/loginSignup/signup.jsx

+108-24
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react'
22
import { navigate } from '@reach/router'
3-
import { signup } from '../../helpers/api'
3+
import { signup, googleLoginSignup } from '../../helpers/api'
44
import { setAuthToken } from '../../helpers/storage'
55
import './loginsignup.css'
66
import Logo from '../../images/Keyboard.png'
77
import Para from './bgpara'
8+
import { gapi } from 'gapi-script'
89

910
export default class Login extends React.Component {
1011
constructor(props) {
@@ -18,7 +19,9 @@ export default class Login extends React.Component {
1819
password: '',
1920
email: '',
2021
},
22+
manualSignup: true,
2123
}
24+
this.user_id = null
2225
}
2326

2427
handleInput = (stateName) => (e) => {
@@ -41,7 +44,6 @@ export default class Login extends React.Component {
4144

4245
submitForm = async (event) => {
4346
event.preventDefault()
44-
4547
const { username: name, password: pwd, email } = this.state
4648

4749
if (!pwd && !name) {
@@ -115,6 +117,70 @@ export default class Login extends React.Component {
115117
}
116118
}
117119

120+
onSignIn = () => {
121+
// Useful data for your client-side scripts:
122+
123+
gapi.load('auth2', () => {
124+
var auth2 = gapi.auth2.init({
125+
client_id: process.env.REACT_CLIENT_ID,
126+
})
127+
128+
// Sign the user in, and then retrieve their ID.
129+
auth2.signIn().then((googleUser) => {
130+
console.log('chcek')
131+
console.log(googleUser)
132+
this.displayGoogelUser(googleUser)
133+
})
134+
})
135+
}
136+
137+
displayGoogelUser = async (googleUser) => {
138+
if (googleUser) {
139+
var profile = googleUser.getBasicProfile()
140+
console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
141+
console.log('Full Name: ' + profile.getName())
142+
console.log('Given Name: ' + profile.getGivenName())
143+
console.log('Family Name: ' + profile.getFamilyName())
144+
console.log('Image URL: ' + profile.getImageUrl())
145+
console.log('Email: ' + profile.getEmail())
146+
var id_token = googleUser.getAuthResponse().id_token
147+
if (id_token) {
148+
this.setState({
149+
manualSignup: false,
150+
email: profile.getEmail(),
151+
errors: {
152+
username: 'Please fill unique username',
153+
},
154+
})
155+
this.user_id = id_token
156+
}
157+
}
158+
}
159+
160+
submitUsername = async (event) => {
161+
event.preventDefault()
162+
const { username: name } = this.state
163+
if (!name) {
164+
this.setState({
165+
errors: {
166+
username: 'Please fill the empty field',
167+
},
168+
})
169+
} else {
170+
let obj = {
171+
username: name,
172+
token: this.user_id,
173+
}
174+
try {
175+
const response = await googleLoginSignup(obj)
176+
setAuthToken(response.data.token)
177+
navigate('/')
178+
} catch (e) {
179+
console.log(e.response.data.error)
180+
}
181+
}
182+
}
183+
118184
render() {
119185
return (
120186
<div className="login">
@@ -150,6 +216,7 @@ export default class Login extends React.Component {
150216
</h6>
151217
}
152218
</div>
219+
153220
<div className="detailsdiv" style={{ marginTop: '7%' }}>
154221
<label className="label">Email</label>
155222
<br></br>
@@ -161,6 +228,7 @@ export default class Login extends React.Component {
161228
type="text"
162229
placeholder="Enter email"
163230
onChange={this.handleInput('email')}
231+
value={this.state.email}
164232
/>
165233
{
166234
<h6
@@ -169,34 +237,50 @@ export default class Login extends React.Component {
169237
</h6>
170238
}
171239
</div>
240+
{this.state.manualSignup && (
241+
<div className="detailsdiv" style={{ marginTop: '7%' }}>
242+
<label className="label">Password</label>
172243

173-
<div className="detailsdiv" style={{ marginTop: '7%' }}>
174-
<label className="label">Password</label>
244+
<br></br>
175245

176-
<br></br>
177-
178-
<input
179-
className={
180-
this.state.errors.password
181-
? ' txtbox txtboxRed'
182-
: 'txtbox'
246+
<input
247+
className={
248+
this.state.errors.password
249+
? ' txtbox txtboxRed'
250+
: 'txtbox'
251+
}
252+
type="password"
253+
placeholder="Password"
254+
onChange={this.handleInput('password')}
255+
/>
256+
{
257+
<h6
258+
style={{
259+
color: 'red',
260+
fontSize: '16px',
261+
margin: '5px',
262+
}}>
263+
{this.state.errors.password}
264+
</h6>
183265
}
184-
type="password"
185-
placeholder="Password"
186-
onChange={this.handleInput('password')}
187-
/>
188-
{
189-
<h6
190-
style={{ color: 'red', fontSize: '16px', margin: '5px' }}>
191-
{this.state.errors.password}
192-
</h6>
193-
}
194-
</div>
266+
</div>
267+
)}
195268
</form>
196-
<div style={{ display: "flex", justifyContent: "center" }}>
197-
<button className="loginBtn" type="submit" onClick={this.submitForm}>
269+
<div>
270+
<button
271+
className="loginBtn"
272+
type="submit"
273+
onClick={
274+
Boolean(this.state.manualSignup)
275+
? this.submitForm
276+
: this.submitUsername
277+
}>
198278
Sign Up
199279
</button>
280+
<div
281+
className="g-signin2"
282+
onClick={this.onSignIn}
283+
data-theme="dark"></div>
200284
</div>
201285
</div>
202286
</div>

‎src/helpers/api.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ import { getAuthToken } from './storage'
33
const baseUrl = 'https://typeforslack.herokuapp.com'
44

55
export async function login(obj) {
6-
return await axios.post(`${baseUrl}/api-token-auth/ `, obj)
6+
return await axios.post(`${baseUrl}/auth/api-token-auth/ `, obj)
7+
}
8+
9+
export async function googleLoginSignup(obj) {
10+
return await axios.post(`${baseUrl}/auth/google/login`, obj)
711
}
812

913
export function id_token(id) {
@@ -23,7 +27,8 @@ export function fetchPara() {
2327
}
2428

2529
export function logout() {
26-
return axios.get(`${baseUrl}/logout `, {
30+
console.log(getAuthToken())
31+
return axios.get(`${baseUrl}/auth/logout `, {
2732
headers: {
2833
Authorization: `token ${getAuthToken()}`,
2934
},

0 commit comments

Comments
 (0)