diff --git a/li-sense-app/src/_auth/LoginGoogle.js b/li-sense-app/src/_auth/LoginGoogle.js new file mode 100644 index 0000000..b4fc423 --- /dev/null +++ b/li-sense-app/src/_auth/LoginGoogle.js @@ -0,0 +1,2 @@ +export const clientId = "1067309386646-50clshggtngc6skcchmru1bgrqknpnqa.apps.googleusercontent.com"; + diff --git a/li-sense-app/src/_components/DropDown/DropDownUser.js b/li-sense-app/src/_components/DropDown/DropDownUser.js index fc5cb0e..4eb4375 100644 --- a/li-sense-app/src/_components/DropDown/DropDownUser.js +++ b/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 ( <> diff --git a/li-sense-app/src/_components/DropDown/DropDownUserItens.js b/li-sense-app/src/_components/DropDown/DropDownUserItens.js index c417c71..2e1813c 100644 --- a/li-sense-app/src/_components/DropDown/DropDownUserItens.js +++ b/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 (
+ {props.icon} {props.text} + { + props.text =='Sair da conta' && + + }
) } diff --git a/li-sense-app/src/_components/Header/Header.js b/li-sense-app/src/_components/Header/Header.js index 0c7cf72..ba50d6a 100644 --- a/li-sense-app/src/_components/Header/Header.js +++ b/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() { - {!isUserLogin && ( + {!user && ( <> Olá, faça seu login
@@ -77,13 +78,13 @@ export default function Header() { )}
- {!isUserLogin ? ( + {!user ? ( <> ) : ( <> - + )}
diff --git a/li-sense-app/src/_context/LisenseProvider.js b/li-sense-app/src/_context/LisenseProvider.js index 8e138da..7d7df5b 100644 --- a/li-sense-app/src/_context/LisenseProvider.js +++ b/li-sense-app/src/_context/LisenseProvider.js @@ -5,6 +5,6 @@ export const LisenseProvider = ({ children }) => { const [currentProduct, setCurrentProduct] = useState([]); const [user, setUser] = useState([]) return ( - {children} + {children} ); } diff --git a/li-sense-app/src/_pages/Login/Login.js b/li-sense-app/src/_pages/Login/Login.js index cea77f6..5a1af49 100644 --- a/li-sense-app/src/_pages/Login/Login.js +++ b/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 (
@@ -31,49 +55,84 @@ export default function Login() {

Login

- E-mail -
+ E-mail +
{setUserData({email: event.target.value, password:userData.password})}} + onChange={(event) => { + setUserData({ + email: event.target.value, + password: userData.password, + }); + }} /> - +
- Password -
+ Password +
{setUserData({email: userData.email, password:event.target.value})}} + onChange={(event) => { + setUserData({ + email: userData.email, + password: event.target.value, + }); + }} /> - +
-

{navigate('/recovery')}}>Esqueceu a senha?

- +

{ + navigate("/recovery"); + }} + > + Esqueceu a senha? +

+

- {navigate('/register')}}>Criar uma conta + { + navigate("/register"); + }} + > + Criar uma conta +

Ou

- -
- - ); -} \ No newline at end of file +} diff --git a/li-sense-app/src/_pages/Profile/Profile.js b/li-sense-app/src/_pages/Profile/Profile.js index 3a2cb58..a76bc45 100644 --- a/li-sense-app/src/_pages/Profile/Profile.js +++ b/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 (
@@ -29,7 +32,7 @@ export default function Profile(props){
Esse é nome como você deverá ser mencionado nas compras ou registros. @@ -44,7 +47,7 @@ export default function Profile(props){
Você pode adicionar novos emails para facilitar a verificação. @@ -54,7 +57,7 @@ export default function Profile(props){
{/*Componente da foto de perfil não esta otimizado e tende a distorcer com o tamanho da tela */} - +