From cae61d189d259a983a4df16f5b2410bbe29f8d56 Mon Sep 17 00:00:00 2001 From: Nic0Nic0Nii Date: Wed, 1 Sep 2021 03:53:18 +0000 Subject: [PATCH] Google login integration --- package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ public/index.html | 1 + src/App.js | 47 ++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 88 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 49d8918..873bd5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index d404543..ca5012f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/index.html b/public/index.html index 265a696..9325aaa 100644 --- a/public/index.html +++ b/public/index.html @@ -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`. --> + NGS Planner diff --git a/src/App.js b/src/App.js index 46e3fd7..8d92adf 100644 --- a/src/App.js +++ b/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 <> {loading? @@ -694,7 +728,18 @@ function LoginForm(p) { {setUsername(p.currentTarget.value)}} placeholder="Username"/>
{setPassword(p.currentTarget.value)}} placeholder="Password"/>
{setRememberMe(p.currentTarget.checked)}}/>
- + +
+ {message}
+ + } }