diff --git a/React-frontend/package-lock.json b/React-frontend/package-lock.json
index ce2194e4..0351b672 100644
--- a/React-frontend/package-lock.json
+++ b/React-frontend/package-lock.json
@@ -20,6 +20,8 @@
"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",
"react-scripts": "3.4.1",
@@ -13380,6 +13382,27 @@
"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",
+ "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 +28966,21 @@
"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",
+ "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..b0f9bc18 100644
--- a/React-frontend/package.json
+++ b/React-frontend/package.json
@@ -15,6 +15,8 @@
"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",
"react-scripts": "3.4.1",
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
new file mode 100644
index 00000000..5c7aeb63
--- /dev/null
+++ b/React-frontend/src/components/GoogleAuth/GoogleAuthBtn.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { GoogleLogin } from 'react-google-login';
+
+
+function GoogleAuthBtn() {
+
+ const responseGoogle = (res ) => {
+ console.log(res)
+ }
+
+ const errorResponse = (e) =>{
+ console.log(e)
+ }
+ return (
+
+
+
+ )
+}
+
+export default GoogleAuthBtn
+
diff --git a/React-frontend/src/components/LoginForm.js b/React-frontend/src/components/LoginForm.js
index 49482454..ad1f1e61 100644
--- a/React-frontend/src/components/LoginForm.js
+++ b/React-frontend/src/components/LoginForm.js
@@ -4,6 +4,8 @@ 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();
@@ -113,6 +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"
+ }
+}