feat login google account

li-sense-app/src/_auth/LoginGoogle.js

@@ -0,0 +1,2 @@
+export const clientId = "1067309386646-50clshggtngc6skcchmru1bgrqknpnqa.apps.googleusercontent.com";
+

li-sense-app/src/_components/DropDown/DropDownUser.js

@@ -6,9 +6,11 @@ import { FaUser } from 'react-icons/fa'
 import { MdOutlineLogout } from 'react-icons/md'
 import { AiFillSetting, AiFillDollarCircle } from 'react-icons/ai'
 
-export default function DropDownUser() {
+
+export default function DropDownUser(props) {
   const navigate = useNavigate()
 
+
   return (
     <>
       <ul className="DropDownUser">
@@ -42,7 +44,7 @@ export default function DropDownUser() {
             navigate('#')
           }}
         >
-          <DropDownItens icon={<MdOutlineLogout />} text={'Sair da conta'} />
+          <DropDownItens  icon={<MdOutlineLogout />} text={'Sair da conta'} />
         </li>
       </ul>
     </>

li-sense-app/src/_components/DropDown/DropDownUserItens.js

@@ -1,11 +1,31 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import './DropDownUserItens.css'
-
+import LisenseContext from '../../_context/LisenseContext'
+import { GoogleLogout } from 'react-google-login'
+import { clientId } from '../../_auth/LoginGoogle'
 function DropDownUserItens(props) {
+
+  const onSuccess = () => {
+    setUser(false)
+    console.log('Success logout')
+    useNavigate('/home')
+  }
+  const { setUser } = React.useContext(LisenseContext);
+
   return (
     <div className="DropDownUserItens">
+
       <i>{props.icon}</i>
       <span>{props.text}</span>
+      {
+        props.text =='Sair da conta' &&
+        <GoogleLogout
+      clientId={clientId}
+      buttonText={'Logout'}
+      onLogoutSuccess={onSuccess}
+      />
+      }
     </div>
   )
 }

li-sense-app/src/_components/Header/Header.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
+import LisenseContext from '../../_context/LisenseContext'
 import './header.css'
 import Logo from '../../_assets/img/logo.png'
 import DropDownRegister from '../DropDown/DropDownRegister'
@@ -10,7 +11,7 @@ export default function Header() {
   const navigate = useNavigate()
   const [open, setOpen] = useState(false)
   const [isUserLogin, setIsUserLogin] = useState(false)
-
+  const { user } = React.useContext(LisenseContext)
   let menuRef = useRef()
 
   useEffect(() => {
@@ -67,7 +68,7 @@ export default function Header() {
                 <i>
                   <FaUser />
                 </i>
-                {!isUserLogin && (
+                {!user && (
                   <>
                     <span>
                       Olá, faça seu login <br />
@@ -77,13 +78,13 @@ export default function Header() {
                 )}
               </a>
               <div className={`dropdown-user ${open ? 'active' : 'inactive'} `}>
-                {!isUserLogin ? (
+                {!user ? (
                   <>
                     <DropDownRegister />
                   </>
                 ) : (
                   <>
-                    <DropDownUser />
+                    <DropDownUser/>
                   </>
                 )}
               </div>

li-sense-app/src/_context/LisenseProvider.js

@@ -5,6 +5,6 @@ export const LisenseProvider = ({ children }) => {
   const [currentProduct, setCurrentProduct] = useState([]);
   const [user, setUser] = useState([])
   return (
-    <LisenseContext.Provider value={{currentProduct, setCurrentProduct, setUser}}>{children}</LisenseContext.Provider>
+    <LisenseContext.Provider value={{currentProduct, setCurrentProduct, setUser, user}}>{children}</LisenseContext.Provider>
   );
 }

li-sense-app/src/_pages/Login/Login.js

@@ -1,21 +1,45 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import './Login.css';
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import "./Login.css";
 import Logocentral from "../../_assets/img/logoredonda.png";
-import LisenseContext from '../../_context/LisenseContext';
+import LisenseContext from "../../_context/LisenseContext";
 import { FaLock } from "react-icons/fa";
 import { FcGoogle } from "react-icons/fc";
 import { HiOutlineMail } from "react-icons/hi";
-import userLogin from '../../_service/userLogin';
-
+import userLogin from "../../_service/userLogin";
+import { GoogleLogin } from "react-google-login";
+import { gapi } from "gapi-script";
+import { clientId } from "../../_auth/LoginGoogle";
 // import Logobackground from "../../_assets/img/tela6.png";
 // import Logofinal from "../../_assets/img/logoc.png";
 
 export default function Login() {
-   const navigate = useNavigate();
-   const [userData, setUserData] = React.useState({email: '', password: ''});
-   const { setUser } = React.useContext(LisenseContext);
+  const navigate = useNavigate();
+  const [userData, setUserData] = React.useState({ email: "", password: "" });
+  const { setUser } = React.useContext(LisenseContext);
+
+  useEffect(() => {
+    function start() {
+      gapi.client.init({
+        clientId: clientId,
+        scope: "",
+      });
+    }
+    gapi.load("client:auth2", start);
+  }, []);
 
+  const onSuccess = (res) => {
+    console.log("LOGIN SUCCESS", res);
+    setUser(res)
+    if(res) {
+      navigate("/profile");
+    }
+
+  };
+
+  const onFailure = (res) => {
+    console.log("LOGIN FAIL", res);
+  };
   return (
     <div className="container-geral">
       <div className="containerTexto">
@@ -31,49 +55,84 @@ export default function Login() {
           <h1>Login</h1>
           <form>
             <div className="mb-login">
-              <span className='span-input'>E-mail</span>
-              <div className='container-input'>
+              <span className="span-input">E-mail</span>
+              <div className="container-input">
                 <input
                   type="email"
                   className="form-control"
                   placeholder="[email protected]"
-                  onChange={(event) => {setUserData({email: event.target.value, password:userData.password})}}
+                  onChange={(event) => {
+                    setUserData({
+                      email: event.target.value,
+                      password: userData.password,
+                    });
+                  }}
                 />
-                <HiOutlineMail size={24} className='icon' />
+                <HiOutlineMail size={24} className="icon" />
               </div>
             </div>
             <div className="mb-login">
-              <span className='span-input'>Password</span>
-              <div className='container-input'>
+              <span className="span-input">Password</span>
+              <div className="container-input">
                 <input
                   type="password"
                   className="form-control"
                   placeholder="**********"
-                  onChange={(event) => {setUserData({email: userData.email, password:event.target.value})}}
+                  onChange={(event) => {
+                    setUserData({
+                      email: userData.email,
+                      password: event.target.value,
+                    });
+                  }}
                 />
-                <FaLock size={20} className='icon' />
+                <FaLock size={20} className="icon" />
               </div>
             </div>
-            <p className="esq" onClick={() => {navigate('/recovery')}}>Esqueceu a senha?</p>
-            <button type="submit" className="btn" onClick={() => {userLogin(userData, setUser)}}> Entrar</button>
+            <p
+              className="esq"
+              onClick={() => {
+                navigate("/recovery");
+              }}
+            >
+              Esqueceu a senha?
+            </p>
+            <button
+              type="submit"
+              className="btn"
+              onClick={() => {
+                userLogin(userData, setUser);
+              }}
+            >
+              {" "}
+              Entrar
+            </button>
           </form>
           <p className="cadastrar">
-            <a onClick={() => {navigate('/register')}}>Criar uma conta</a>
+            <a
+              onClick={() => {
+                navigate("/register");
+              }}
+            >
+              Criar uma conta
+            </a>
           </p>
           <p className="entarg">
             <a>Ou</a>
           </p>
           <button type="submit" className="btn1">
-            <div className='content-btn1'>
-              <FcGoogle size={24} /> <span>Sign in with Google</span>
+            <div className="content-btn1">
+              <GoogleLogin
+                clientId={clientId}
+                buttonText="Login"
+                onSuccess={(onSuccess)}
+                onFailure={onFailure}
+                cookiePolicy={"single_host_origin"}
+                isSignedIn={true}
+              />
             </div>
           </button>
         </div>
       </div>
-
-
     </div>
-
-
   );
-}
+}

li-sense-app/src/_pages/Profile/Profile.js

@@ -1,12 +1,15 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './Profile.css';
 import Logocentral from "../../_assets/img/logoredonda.png";
+import LisenseContext from '../../_context/LisenseContext';
+import { useNavigate } from 'react-router-dom';
 export default function Profile(props){
   const [nome, setNome] = useState(props.nome);
   const [senha, setSenha] = useState(props.senha);
   const [email, setEmail] = useState(props.email);
   const [cpf, setCpf] = useState(props.cpf);
   const [telefone, setTelefone] = useState(props.telefone);
+  const { user } = React.useContext(LisenseContext);
 
   return (
     <div className="w-screen">
@@ -29,7 +32,7 @@ export default function Profile(props){
                 <input
                   name='username'
                   className='form-control'
-                  placeholder={`${nome}`}
+                  placeholder={user.profileObj ? user.profileObj.name : ''}
                 />
                 <div className='px-6 text-sm text-justify'>
                   Esse é nome como você deverá ser mencionado nas compras ou registros.
@@ -44,7 +47,7 @@ export default function Profile(props){
                 <input
                   name='email'
                   className='form-control'
-                  placeholder={`${email}@mail.com`}
+                  placeholder={user.profileObj ? user.profileObj.email : ''}
                 />
                 <div className='px-6 text-sm text-justify'>
                   Você pode adicionar novos emails para facilitar a verificação.
@@ -54,7 +57,7 @@ export default function Profile(props){
             <div className='flex-1 py-4 px-5'>
               {/*Componente da foto de perfil não esta otimizado e tende a distorcer com o tamanho da tela */}
               <label forhtml='avatar' className='mb-3 block text-base font-medium'>Foto de Perfil</label> 
-              <img src={Logocentral} name='avatar' className='rounded-full w-[160px] h-[160px]' />
+              <img src={user.profileObj ? user.profileObj.imageUrl : ''} name='avatar' className='rounded-full w-[160px] h-[160px]' />
             </div>
           </div>
         </div>