From a6869e7117f43ed9b7b0e613f6913b4b937a94fd Mon Sep 17 00:00:00 2001 From: sachin Date: Sun, 28 Feb 2021 23:16:01 -0800 Subject: [PATCH 1/2] Implemented googleAuth in frontend --- React-frontend/package-lock.json | 23 +++++++++++++++++ React-frontend/package.json | 1 + .../components/GoogleAuth/GoogleAuthBtn.js | 25 +++++++++++++++++++ React-frontend/src/components/LoginForm.js | 2 ++ 4 files changed, 51 insertions(+) create mode 100644 React-frontend/src/components/GoogleAuth/GoogleAuthBtn.js diff --git a/React-frontend/package-lock.json b/React-frontend/package-lock.json index ce2194e4..85f2f842 100644 --- a/React-frontend/package-lock.json +++ b/React-frontend/package-lock.json @@ -20,6 +20,7 @@ "react-bootstrap": "^1.0.1", "react-bootstrap-sidebar": "0.0.1", "react-dom": "^16.13.1", + "react-google-login": "^5.2.2", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", @@ -13380,6 +13381,19 @@ "warning": "^4.0.1" } }, + "node_modules/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==", + "dependencies": { + "@types/react": "*", + "prop-types": "^15.6.0" + }, + "peerDependencies": { + "react": "^16 || ^17", + "react-dom": "^16 || ^17" + } + }, "node_modules/react-image-lightbox": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.1.tgz", @@ -28943,6 +28957,15 @@ "warning": "^4.0.1" } }, + "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-image-lightbox": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.1.tgz", diff --git a/React-frontend/package.json b/React-frontend/package.json index 78c2399d..b7ec2c58 100644 --- a/React-frontend/package.json +++ b/React-frontend/package.json @@ -15,6 +15,7 @@ "react-bootstrap": "^1.0.1", "react-bootstrap-sidebar": "0.0.1", "react-dom": "^16.13.1", + "react-google-login": "^5.2.2", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", diff --git a/React-frontend/src/components/GoogleAuth/GoogleAuthBtn.js b/React-frontend/src/components/GoogleAuth/GoogleAuthBtn.js new file mode 100644 index 00000000..c3020679 --- /dev/null +++ b/React-frontend/src/components/GoogleAuth/GoogleAuthBtn.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { GoogleLogin } from 'react-google-login'; + + +function GoogleAuthBtn() { + + const responseGoogle = (res ) => { + console.log(res) + console.log(res.profileObj) + } + return ( +
+ +
+ ) +} + +export default GoogleAuthBtn + diff --git a/React-frontend/src/components/LoginForm.js b/React-frontend/src/components/LoginForm.js index 49482454..25d26744 100644 --- a/React-frontend/src/components/LoginForm.js +++ b/React-frontend/src/components/LoginForm.js @@ -4,6 +4,7 @@ import { MDBContainer, MDBInput, MDBBtn, MDBCard, MDBCardBody } from 'mdbreact'; import { login } from '../store/actions/auth'; import formReducer from '../utils/formReducer'; +import GoogleAuthBtn from './GoogleAuth/GoogleAuthBtn'; const FormPage = () => { const dispatch = useDispatch(); @@ -113,6 +114,7 @@ const FormPage = () => { Password?

+
Date: Mon, 1 Mar 2021 23:16:55 -0800 Subject: [PATCH 2/2] Implemented googleAuth and FacebookAuth in frontend --- React-frontend/package-lock.json | 15 +++ React-frontend/package.json | 1 + .../FacebookAuth/FacebookAuthBtn.js | 27 +++++ .../components/FacebookAuth/facebookAuth.css | 11 +++ .../components/GoogleAuth/GoogleAuthBtn.js | 9 +- React-frontend/src/components/LoginForm.js | 7 +- package-lock.json | 99 +++++++++++++++++++ package.json | 5 + 8 files changed, 170 insertions(+), 4 deletions(-) create mode 100644 React-frontend/src/components/FacebookAuth/FacebookAuthBtn.js create mode 100644 React-frontend/src/components/FacebookAuth/facebookAuth.css create mode 100644 package-lock.json create mode 100644 package.json diff --git a/React-frontend/package-lock.json b/React-frontend/package-lock.json index 85f2f842..0351b672 100644 --- a/React-frontend/package-lock.json +++ b/React-frontend/package-lock.json @@ -20,6 +20,7 @@ "react-bootstrap": "^1.0.1", "react-bootstrap-sidebar": "0.0.1", "react-dom": "^16.13.1", + "react-facebook-login": "^4.1.1", "react-google-login": "^5.2.2", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", @@ -13381,6 +13382,14 @@ "warning": "^4.0.1" } }, + "node_modules/react-facebook-login": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-facebook-login/-/react-facebook-login-4.1.1.tgz", + "integrity": "sha512-COnHEHlYGTKipz4963safFAK9PaNTcCiXfPXMS/yxo8El+/AJL5ye8kMJf23lKSSGGPgqFQuInskIHVqGqTvSw==", + "peerDependencies": { + "react": "^16.0.0" + } + }, "node_modules/react-google-login": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz", @@ -28957,6 +28966,12 @@ "warning": "^4.0.1" } }, + "react-facebook-login": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-facebook-login/-/react-facebook-login-4.1.1.tgz", + "integrity": "sha512-COnHEHlYGTKipz4963safFAK9PaNTcCiXfPXMS/yxo8El+/AJL5ye8kMJf23lKSSGGPgqFQuInskIHVqGqTvSw==", + "requires": {} + }, "react-google-login": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz", diff --git a/React-frontend/package.json b/React-frontend/package.json index b7ec2c58..b0f9bc18 100644 --- a/React-frontend/package.json +++ b/React-frontend/package.json @@ -15,6 +15,7 @@ "react-bootstrap": "^1.0.1", "react-bootstrap-sidebar": "0.0.1", "react-dom": "^16.13.1", + "react-facebook-login": "^4.1.1", "react-google-login": "^5.2.2", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", diff --git a/React-frontend/src/components/FacebookAuth/FacebookAuthBtn.js b/React-frontend/src/components/FacebookAuth/FacebookAuthBtn.js new file mode 100644 index 00000000..9b792b63 --- /dev/null +++ b/React-frontend/src/components/FacebookAuth/FacebookAuthBtn.js @@ -0,0 +1,27 @@ +import React, { Component } from 'react'; +import FacebookLogin from 'react-facebook-login'; +import FacebookIcon from '@material-ui/icons/Facebook'; +import './facebookAuth.css'; +export default class FacebookAuthBtn extends Component { + responseFacebook = (res) => { + console.log(res) + } + loginError = (e) => { + console.log(e) + } + render() { + return ( +
+ } + /> +
+ ) + } +} diff --git a/React-frontend/src/components/FacebookAuth/facebookAuth.css b/React-frontend/src/components/FacebookAuth/facebookAuth.css new file mode 100644 index 00000000..243b8606 --- /dev/null +++ b/React-frontend/src/components/FacebookAuth/facebookAuth.css @@ -0,0 +1,11 @@ +.facebook-button-class{ + width: 170px; + height: 43px; + font-size: smaller; + background-color: rgb(255, 255, 255); + border: .5px solid #f0f0f0; + font-weight: 500; + color: #444; + box-shadow: 0 2px 0 0 #888888; + margin-left: 5px; + } \ No newline at end of file diff --git a/React-frontend/src/components/GoogleAuth/GoogleAuthBtn.js b/React-frontend/src/components/GoogleAuth/GoogleAuthBtn.js index c3020679..5c7aeb63 100644 --- a/React-frontend/src/components/GoogleAuth/GoogleAuthBtn.js +++ b/React-frontend/src/components/GoogleAuth/GoogleAuthBtn.js @@ -6,15 +6,18 @@ function GoogleAuthBtn() { const responseGoogle = (res ) => { console.log(res) - console.log(res.profileObj) + } + + const errorResponse = (e) =>{ + console.log(e) } return (
diff --git a/React-frontend/src/components/LoginForm.js b/React-frontend/src/components/LoginForm.js index 25d26744..ad1f1e61 100644 --- a/React-frontend/src/components/LoginForm.js +++ b/React-frontend/src/components/LoginForm.js @@ -5,6 +5,7 @@ import { MDBContainer, MDBInput, MDBBtn, MDBCard, MDBCardBody } from 'mdbreact'; import { login } from '../store/actions/auth'; import formReducer from '../utils/formReducer'; import GoogleAuthBtn from './GoogleAuth/GoogleAuthBtn'; +import FacebookAuthBtn from './FacebookAuth/FacebookAuthBtn'; const FormPage = () => { const dispatch = useDispatch(); @@ -114,7 +115,11 @@ const FormPage = () => { Password?

- +
+
+ + +
=0.10.0" + } + }, + "node_modules/react": { + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz", + "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-icons": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz", + "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==", + "peerDependencies": { + "react": "*" + } + } + }, + "dependencies": { + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "peer": true + }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "peer": true + }, + "react": { + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz", + "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "react-icons": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz", + "integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==", + "requires": {} + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..bb4eacc0 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-icons": "^4.2.0" + } +}