Google login integration
This commit is contained in:
parent
38c8515814
commit
cae61d189d
39
package-lock.json
generated
39
package-lock.json
generated
@ -2356,11 +2356,26 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.3.0.tgz",
|
||||
"integrity": "sha512-hkc1DATxFLQo4VxPDpMH1gCkPpBbpOoJ/4nhuXw4n63/0R6bCpQECj4+K226UJ4JO/eJQz+1mC2I7JsWanAdQw=="
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
|
||||
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
|
||||
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "17.0.19",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.19.tgz",
|
||||
"integrity": "sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A==",
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"@types/resolve": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
|
||||
@ -2369,6 +2384,11 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/scheduler": {
|
||||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
|
||||
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
|
||||
},
|
||||
"@types/source-list-map": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
|
||||
@ -4403,6 +4423,11 @@
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
|
||||
"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
|
||||
},
|
||||
"cookie-handler": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/cookie-handler/-/cookie-handler-1.2.3.tgz",
|
||||
"integrity": "sha512-TVP5m5HrBCfgUnHqY6lynUNjDUGZBieC3pe4yht7OBWywH4/Elq64hK30AZ4E4xUh662SmJv2MyJcxC3JmyAWw=="
|
||||
},
|
||||
"cookie-signature": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
|
||||
@ -4876,6 +4901,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
|
||||
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
|
||||
},
|
||||
"csv-parse": {
|
||||
"version": "4.16.0",
|
||||
"resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.16.0.tgz",
|
||||
@ -12833,6 +12863,15 @@
|
||||
"resolved": "https://registry.npmjs.org/react-global-key-down-hook/-/react-global-key-down-hook-0.2.1.tgz",
|
||||
"integrity": "sha512-7bi/jJlD6VlRird5VJTKow3q28pWn6H36zhOzBmKGgklAdEjqqwyjX0vxBcHlohd08VcUUBiLxRJ/7oz3IZOiQ=="
|
||||
},
|
||||
"react-google-login": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
|
||||
"integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
|
||||
"requires": {
|
||||
"@types/react": "*",
|
||||
"prop-types": "^15.6.0"
|
||||
}
|
||||
},
|
||||
"react-helmet": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
"axios": "^0.21.1",
|
||||
"cookie-handler": "^1.2.3",
|
||||
"csv-parse": "^4.16.0",
|
||||
"express": "^4.17.1",
|
||||
"gh-pages": "^3.2.3",
|
||||
@ -17,6 +18,7 @@
|
||||
"react-bootstrap-icons": "^1.5.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-global-key-down-hook": "^0.2.1",
|
||||
"react-google-login": "^5.2.2",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-modal": "^3.14.3",
|
||||
"react-router": "^5.2.0",
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
|
||||
<title>NGS Planner</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
47
src/App.js
47
src/App.js
@ -8,6 +8,8 @@ import {TrashFill, PlusCircle, LifePreserver, Server, CloudUploadFill} from 'rea
|
||||
|
||||
import { SkillTreeEditor } from './skilltree/skillTreeEditor'
|
||||
|
||||
import { GoogleLogin } from 'react-google-login';
|
||||
|
||||
import {
|
||||
HashRouter,
|
||||
Switch,
|
||||
@ -652,6 +654,7 @@ function LoginForm(p) {
|
||||
const [rememberMe,setRememberMe] = useState(false)
|
||||
const [error,setError] = useState("")
|
||||
const [loading,setLoading] = useState(false)
|
||||
const [message,setMessage] = useState("")
|
||||
|
||||
const history = useHistory()
|
||||
|
||||
@ -686,6 +689,37 @@ function LoginForm(p) {
|
||||
})
|
||||
}
|
||||
|
||||
function responseGoogle(response) {
|
||||
if (response.error) {
|
||||
setMessage(JSON.stringify(response))
|
||||
} else
|
||||
if (response.profileObj.googleId&&
|
||||
response.profileObj.imageUrl&&
|
||||
response.profileObj.email&&
|
||||
response.profileObj.name&&
|
||||
response.tokenId){
|
||||
axios.post(GetBackendURL(p)+"/registerUser",{
|
||||
username:response.profileObj.name,
|
||||
email:response.profileObj.email,
|
||||
password:response.profileObj.tokenId,
|
||||
avatar:response.profileObj.imageUrl,
|
||||
userID:response.profileObj.googleId,
|
||||
})
|
||||
.then((data)=>{
|
||||
if (data.data.verified) {
|
||||
p.setLOGGEDINUSER(response.profileObj.name)
|
||||
p.setLOGGEDINHASH(response.profileObj.tokenId)
|
||||
setUsername("")
|
||||
setPassword("")
|
||||
setRememberMe(false)
|
||||
history.push("/")
|
||||
} else {
|
||||
setError("Could not authenticate!")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return <>
|
||||
<Box title="Login Form">
|
||||
{loading?
|
||||
@ -694,7 +728,18 @@ function LoginForm(p) {
|
||||
<FormField field="username" label="Username: " value={username} maxlength={20} onChange={(p)=>{setUsername(p.currentTarget.value)}} placeholder="Username"/><br/>
|
||||
<FormField field="password" label="Password: " type="password" value={password} onChange={(p)=>{setPassword(p.currentTarget.value)}} placeholder="Password"/><br/>
|
||||
<FormField field="rememberMe" label="Remember Me " type="toggle" checked={rememberMe} onChange={(p)=>{setRememberMe(p.currentTarget.checked)}}/><br/>
|
||||
<button type="submit" onClick={SubmitLogin}>Login</button></div></>
|
||||
<button type="submit" onClick={SubmitLogin}>Login</button></div>
|
||||
<hr/>
|
||||
{message}<br/>
|
||||
<GoogleLogin
|
||||
theme="dark"
|
||||
clientId="1081276553893-r50huhr0f9hkpcd7fdbb0oe4qcpglcpp.apps.googleusercontent.com"
|
||||
buttonText="Login"
|
||||
onSuccess={responseGoogle}
|
||||
onFailure={responseGoogle}
|
||||
cookiePolicy={'single_host_origin'}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</Box></>
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user