From 19e2252ba2fc659ca1bc34071428f38131b48787 Mon Sep 17 00:00:00 2001 From: "rawan.mohamed7129@gmail.com" Date: Tue, 30 Jan 2024 18:00:07 +0200 Subject: [PATCH] Google login --- package-lock.json | 69 +++++++++++++++--------------- package.json | 1 + src/authentication/Login/Login.tsx | 65 +++++++++++++++++++++++++--- src/services/api.tsx | 2 + 4 files changed, 98 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0c05885..4817d89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "react-date-range": "^2.0.0-alpha.4", "react-datepicker": "^4.25.0", "react-dom": "^18.2.0", + "react-google-login": "^5.2.2", "react-hook-form": "^7.49.2", "react-pro-sidebar": "^1.1.0-alpha.1", "react-router-dom": "^6.21.1", @@ -3367,12 +3368,6 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, - "node_modules/jquery": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", - "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", - "peer": true - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -3948,6 +3943,20 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, + "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==", + "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", + "dependencies": { + "@types/react": "*", + "prop-types": "^15.6.0" + }, + "peerDependencies": { + "react": "^16 || ^17", + "react-dom": "^16 || ^17" + } + }, "node_modules/react-hook-form": { "version": "7.49.2", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.2.tgz", @@ -5155,8 +5164,7 @@ "@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", - "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", - "requires": {} + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==" }, "@emotion/utils": { "version": "1.2.1", @@ -5425,8 +5433,7 @@ "@floating-ui/utils": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.0.tgz", - "integrity": "sha512-T4jNeM6dMzXONGkSjk7+O+eFQTVbw7KHi5OYuvFaBer3Wcrmpwi6fHKcT/FdSf7boWC7H9eXTyYTFZOQdJ1AMA==", - "requires": {} + "integrity": "sha512-T4jNeM6dMzXONGkSjk7+O+eFQTVbw7KHi5OYuvFaBer3Wcrmpwi6fHKcT/FdSf7boWC7H9eXTyYTFZOQdJ1AMA==" }, "@humanwhocodes/config-array": { "version": "0.11.13", @@ -5596,8 +5603,7 @@ "@mui/types": { "version": "7.2.13", "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz", - "integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==", - "requires": {} + "integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==" }, "@mui/utils": { "version": "5.15.5", @@ -6044,8 +6050,7 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true, - "requires": {} + "dev": true }, "ajv": { "version": "6.12.6", @@ -6611,15 +6616,13 @@ "version": "4.6.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", - "dev": true, - "requires": {} + "dev": true }, "eslint-plugin-react-refresh": { "version": "0.4.5", "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.5.tgz", "integrity": "sha512-D53FYKJa+fDmZMtriODxvhwrO+IOqrxoEo21gMA0sjHdU6dPVH4OhyFip9ypl8HOF5RV5KdTo+rBQLvnY2cO8w==", - "dev": true, - "requires": {} + "dev": true }, "eslint-scope": { "version": "7.2.2", @@ -7029,12 +7032,6 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, - "jquery": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", - "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", - "peer": true - }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -7448,11 +7445,19 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, + "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-hook-form": { "version": "7.49.2", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.2.tgz", - "integrity": "sha512-TZcnSc17+LPPVpMRIDNVITY6w20deMdNi6iehTFLV1x8SqThXGwu93HjlUVU09pzFgZH7qZOvLMM7UYf2ShAHA==", - "requires": {} + "integrity": "sha512-TZcnSc17+LPPVpMRIDNVITY6w20deMdNi6iehTFLV1x8SqThXGwu93HjlUVU09pzFgZH7qZOvLMM7UYf2ShAHA==" }, "react-is": { "version": "18.2.0", @@ -7475,8 +7480,7 @@ "react-onclickoutside": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", - "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==", - "requires": {} + "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==" }, "react-popper": { "version": "2.3.0", @@ -7790,8 +7794,7 @@ "slick-carousel": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", - "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", - "requires": {} + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==" }, "source-map": { "version": "0.5.7", @@ -7871,8 +7874,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz", "integrity": "sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==", - "dev": true, - "requires": {} + "dev": true }, "type-check": { "version": "0.4.0", @@ -7917,8 +7919,7 @@ "use-isomorphic-layout-effect": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", - "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", - "requires": {} + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==" }, "victory-vendor": { "version": "36.8.2", diff --git a/package.json b/package.json index 0a11ed3..d78de68 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react-date-range": "^2.0.0-alpha.4", "react-datepicker": "^4.25.0", "react-dom": "^18.2.0", + "react-google-login": "^5.2.2", "react-hook-form": "^7.49.2", "react-pro-sidebar": "^1.1.0-alpha.1", "react-router-dom": "^6.21.1", diff --git a/src/authentication/Login/Login.tsx b/src/authentication/Login/Login.tsx index 85cbdfd..5c8f3f4 100644 --- a/src/authentication/Login/Login.tsx +++ b/src/authentication/Login/Login.tsx @@ -8,12 +8,14 @@ import img from "../../assets/images/Rectangle 7.png"; import Styles from "./Login.module.scss"; import Typography from "@mui/material/Typography"; import axios from "axios"; -import { useContext } from "react"; +import { useContext, useEffect } from "react"; import { SubmitHandler, useForm } from "react-hook-form"; import { Link, useLocation, useNavigate } from "react-router-dom"; import { AuthContext } from "./../../context/AuthContext.tsx"; -import { loginUrl, userLoginUrl } from "../../services/api.tsx"; +import { googleLogin, loginUrl, userLoginUrl } from "../../services/api.tsx"; import { toast } from "react-toastify"; +import { GoogleLogin } from "react-google-login"; + const Login: React.FC = () => { const { saveUserData, userRole } = useContext(AuthContext); @@ -38,7 +40,7 @@ const Login: React.FC = () => { .then((response) => { localStorage.setItem("userToken", response?.data?.data?.token); const userRole = response?.data?.data?.user?.role; - const userName=response?.data?.data?.user?.userName; + const userName = response?.data?.data?.user?.userName; console.log(userName); // saveUserData(); @@ -57,9 +59,9 @@ const Login: React.FC = () => { toast.success("Login Successfully") - // navigate("/user/home"); + // navigate("/user/home"); - // toast.success("Login Successfully"); + // toast.success("Login Successfully"); }) .catch((error) => { @@ -67,6 +69,40 @@ const Login: React.FC = () => { }); }; + /*****facebook */ + const responseGoogle = async (response: any) => { + // const navigate = useNavigate(); + + // Gérez la réponse Facebook ici + // Vous pouvez effectuer une requête API vers votre serveur avec le jeton Facebook + try { + const { accessToken, userID } = response; + console.log(accessToken); + console.log(userID); + + // Exemple de requête API + const googleAuthResponse = await axios.post(googleLogin, { + accessToken, + }); + + // Gérez la réponse de votre serveur + const { user, token } = googleAuthResponse.data; + + // Enregistrez les données de l'utilisateur et le jeton + localStorage.setItem("userToken", token); + saveUserData(); + + // Redirigez ou naviguez vers la page appropriée + // const from = location.state?.from || "/user/home"; + // navigate(from); + navigate("/user/home"); + toast.success("Login with Google Successful"); + + } catch (error) { + toast.error("Échec de l'authentification avec Facebook"); + } + }; + return ( @@ -160,6 +196,25 @@ const Login: React.FC = () => { > Login + ( + + )} + /> diff --git a/src/services/api.tsx b/src/services/api.tsx index 5119a27..0c29ee9 100644 --- a/src/services/api.tsx +++ b/src/services/api.tsx @@ -109,3 +109,5 @@ export const getBookingdetailsUrl =`${baseUrl}/portal/booking/`;//With id // ***********Comment Curd URl************ export const commentUrl =`${baseUrl}/portal/room-comments` +// **************** google Login ********* +export const googleLogin = `${baseUrl}/portal/users/auth/google` \ No newline at end of file