Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into enable-and-active-jobs

src/components/AuthPages/Login/index.jsx

@@ -8,8 +8,8 @@ import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
-//import { GoogleOAuthProvider } from '@react-oauth/google';
-// import { googleLogout, useGoogleLogin } from '@react-oauth/google';
+// import { GoogleOAuthProvider } from '@react-oauth/google';
+import { googleLogout, useGoogleLogin } from '@react-oauth/google';
 
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
@@ -120,6 +120,18 @@ export default function Login() {
       });
   };
 
+  const googleLogin = useGoogleLogin({
+    onSuccess: async (tokenResponse) => {
+      console.log(tokenResponse);
+      // const userInfo = await axios.get(
+      //   'https://www.googleapis.com/oauth2/v3/userinfo',
+      //   { headers: { Authorization: `Bearer ${tokenResponse.access_token}` } },
+      // );
+      // console.log(userInfo);
+    },
+    onError: errorResponse => console.log(errorResponse),
+  });
+
   useEffect(()=>{
     setMail('')
     setPassword('')
@@ -246,7 +258,7 @@ export default function Login() {
                         </button>
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                        <BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
+                        <BrandBtn link="#" imgSrc={googleLogo} brand="Google" onClick={googleLogin} />
                         <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
@@ -347,10 +359,10 @@ export default function Login() {
   );
 }
 
-const BrandBtn = ({ link, imgSrc, brand }) => {
-  const doGoogle = async () => {
-    alert("start google");
-  };
+const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
+  // const doGoogle = async () => {
+  //   alert("start google");
+  // };
 
   //  onSuccess: (codeResponse) => setUser(codeResponse),
 
@@ -359,26 +371,26 @@ const BrandBtn = ({ link, imgSrc, brand }) => {
   //   onError: (error) => console.log('Login Failed:', error)
   // });
 
-  const doApple = async () => {
-    alert("start apple");
-  };
+  // const doApple = async () => {
+  //   alert("start apple");
+  // };
 
-  const doFacebook = async () => {
-    alert("start facebook");
-  };
+  // const doFacebook = async () => {
+  //   alert("start facebook");
+  // };
 
   return (
     <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
-      <a
-        // onClick={doGoogle}
-        href="#dd"
+      <button
+        onClick={onClick}
+        // href="#dd"
         className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
       >
         <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
         <span className="text-lg text-thin-light-gray font-normal text-[15px]">
           Continue with {brand}
         </span>
-      </a>
+      </button>
     </div>
   );
 };