Implementado Login google account

williamdlm · Oct 18, 2021 · 131843d · 131843d · vercel · Oct 18, 2021
1 parent 3ed9b71
commit 131843d
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
  "next": "latest",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
+ "react-google-login": "^5.2.2",
  "react-is": "^17.0.2",
  "styled-components": "^5.2.3"
  },

diff --git a/pages/index.js b/pages/index.js
@@ -2,19 +2,12 @@ import Header from "../src/components/Header";
 import Background from "../src/components/Background";
 import Head from "next/head";
 import { MainComplete } from "../src/components/Main";
-import { ExperienceProvider } from "../src/contexts/ExperienceContext";
-import React from "react";
-import styled from "styled-components";
-
-function GoogleLogIn() {
- const GoogleIn = styled.img`
- margin: 50vh auto;
- display: block;
- `;
- return (
- <GoogleIn src="https://res.cloudinary.com/dhmkfekt2/image/upload/v1634500984/btn_google_signin_light_normal_web_gfq5t1.png" />
- );
-}
+import {
+ ExperienceContext,
+ ExperienceProvider,
+} from "../src/contexts/ExperienceContext";
+import React, { useContext, useEffect } from "react";
+import GoogleLogIn from "../src/components/GoogleLogIn";
 
 function LogOnScreen() {
  return (
@@ -25,18 +18,22 @@ function LogOnScreen() {
  );
 }
 
-function LogInScreen() {}
+export default function Home(props) {
+ const { isLogged } = useContext(ExperienceContext);
+ console.log(props);
 
-const screenStates = {
- //Conecte-se
- LOGIN: "LOGIN",
- //Entrar
- LOGON: "LOGON",
-};
+ const [screenState, setScreenState] = React.useState(props.isLogged);
 
-export default function Home(props) {
- const [screenState, setScreenState] = React.useState(screenStates.LOGIN);
- // console.log(props);
+ function handleStatusLogged(event) {
+ console.log("event " + event);
+ setScreenState(event);
+ }
+ useEffect(() => {}, []);
+ useEffect(() => {
+ //if (props.isLogged == 1) {
+ //setScreenState(1);
+ // }
+ }, [screenState]);
  return (
  <ExperienceProvider
  level={props.level}
@@ -46,13 +43,21 @@ export default function Home(props) {
  pointsBarTypeOne={props.pointsBarTypeOne}
  pointsBarTypeTwo={props.pointsBarTypeTwo}
  pointsBarTypeTree={props.pointsBarTypeTree}
+ isLogged={props.isLogged}
  >
  <Background>
  <Head>
  <title>TCC</title>
+ <meta
+ name="google-site-verification"
+ content="etEJ5pGxXGSqGyGM_OOMKO4UWHWrkJQ2TqDxRcR2iwY"
+ />
  </Head>
- {screenState === screenStates.LOGIN && <GoogleLogIn />}
- {screenState === screenStates.LOGON && <LogOnScreen />}
+ {screenState === 0 ? (
+ <GoogleLogIn handleStatusLogged={handleStatusLogged} />
+ ) : (
+ <LogOnScreen />
+ )}
  </Background>
  </ExperienceProvider>
  );
@@ -67,6 +72,7 @@ export const getServerSideProps = async (ctx) => {
  pointsBarTypeOne,
  pointsBarTypeTwo,
  pointsBarTypeTree,
+ isLogged,
  } = ctx.req.cookies;
  return {
  props: {
@@ -77,6 +83,7 @@ export const getServerSideProps = async (ctx) => {
  pointsBarTypeOne: Number(pointsBarTypeOne),
  pointsBarTypeTwo: Number(pointsBarTypeTwo),
  pointsBarTypeTree: Number(pointsBarTypeTree),
+ isLogged: Number(isLogged),
  },
  };
 };
diff --git a/pages/quiz.js b/pages/quiz.js
@@ -168,7 +168,7 @@ export default function QuizPage(props) {
  handleChangeQuestion(questionIndex)
  );
 
- const totalQuestions = 2;
+ const totalQuestions = 5;
 
  function handleChangeQuestion(type) {
  const questionsForType = dbQuestions.questions.filter((question) => {

diff --git a/src/components/GoogleLogIn/index.js b/src/components/GoogleLogIn/index.js
@@ -0,0 +1,42 @@
+import GoogleLogin from "react-google-login";
+import React, { useContext } from "react";
+import { ExperienceContext } from "../../contexts/ExperienceContext";
+import styled from "styled-components";
+
+export default function GoogleLogIn({ handleStatusLogged }) {
+ const { handleIsLogged } = useContext(ExperienceContext);
+ const changeStatus = () => {
+ handleStatusLogged(1);
+ };
+ const responseGoogleSucess = (response) => {
+ const {
+ profileObj: { GivenName, familyName, name, imageUrl },
+ } = response;
+ handleIsLogged();
+ changeStatus();
+ };
+
+ const responseGoogleFailed = (response) => {
+ console.log("falha resposta google");
+ console.log(response);
+ };
+ return (
+ <div
+ style={{
+ width: "100%",
+ height: "100%",
+ display: "flex",
+ justifyContent: "center",
+ marginTop: "50vh",
+ }}
+ >
+ <GoogleLogin
+ clientId="279991950987-fa92c6k1lffqtegplfqd9r1p8dos5kn6.apps.googleusercontent.com"
+ buttonText="Login"
+ onSuccess={responseGoogleSucess}
+ onFailed={responseGoogleFailed}
+ cookiePolicy={"single_host_origin"}
+ />
+ </div>
+ );
+}
diff --git a/src/contexts/ExperienceContext.js b/src/contexts/ExperienceContext.js
@@ -26,8 +26,13 @@ export function ExperienceProvider({ children, ...rest }) {
  const [pointsBarTypeTree, setPointsBarTypeTree] = useState(
  rest.pointsBarTypeTree ?? 0
  );
+ const [isLogged, setIsLogged] = useState(rest.isLogged ?? 0);
  const name = "William Mota";
 
+ console.log(rest.isLogged);
+
+ function handleIsLogged() {}
+
  function handlePointsStats(type) {
  switch (type) {
  case 0:
@@ -59,6 +64,7 @@ export function ExperienceProvider({ children, ...rest }) {
  Cookies.set("pointsBarTypeOne", pointsBarTypeOne);
  Cookies.set("pointsBarTypeTwo", pointsBarTypeTwo);
  Cookies.set("pointsBarTypeTree", pointsBarTypeTree);
+ Cookies.set("isLogged", isLogged);
  }, [
  level,
  currentExperience,
@@ -67,10 +73,15 @@ export function ExperienceProvider({ children, ...rest }) {
  pointsBarTypeOne,
  pointsBarTypeTwo,
  pointsBarTypeTree,
+ isLogged,
  ]);
 
  // console.log(typeof Cookies.get("pointsBarType"));
 
+ function handleIsLogged() {
+ setIsLogged(1);
+ }
+
  function handleTitles() {
  if (level >= 50) {
  setTitleUser(db.titulos[4]);
@@ -121,6 +132,8 @@ export function ExperienceProvider({ children, ...rest }) {
  pointsBarTypeOne,
  pointsBarTypeTwo,
  pointsBarTypeTree,
+ isLogged,
+ handleIsLogged,
  }}
  >
  {children}

diff --git a/yarn.lock b/yarn.lock
@@ -258,6 +258,25 @@
  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.4.tgz#a12f0ee7847cf17a97f6fdf1093cb7a9af23cca4"
  integrity sha512-KDazLNYAGIuJugdbULwFZULF9qQ13yNWEBFnfVpqlpgAAo6H/qnM9RjBgh0A0kmHf3XxAKLdN5mTIng9iUvVLA==
 
+"@types/prop-types@*":
+ version "15.7.4"
+ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+ integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/react@*":
+ version "17.0.30"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.30.tgz#2f8e6f5ab6415c091cc5e571942ee9064b17609e"
+ integrity sha512-3Dt/A8gd3TCXi2aRe84y7cK1K8G+N9CZRDG8kDGguOKa0kf/ZkSwTmVIDPsm/KbQOVMaDJXwhBtuOXxqwdpWVg==
+ dependencies:
+ "@types/prop-types" "*"
+ "@types/scheduler" "*"
+ csstype "^3.0.2"
+
+"@types/scheduler@*":
+ version "0.16.2"
+ resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+ integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 [email protected]:
  version "1.4.9"
  resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.9.tgz#1f85423a5dcf8da4631a341665ff675b96845760"
@@ -684,6 +703,11 @@ [email protected]:
  dependencies:
  cssnano-preset-simple "^3.0.0"
 
+csstype@^3.0.2:
+ version "3.0.9"
+ resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
+ integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
+
 [email protected]:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
@@ -1267,7 +1291,7 @@ lodash@^4.17.11:
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -1616,6 +1640,15 @@ [email protected], process@^0.11.10:
  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
+prop-types@^15.6.0:
+ version "15.7.2"
+ resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+ integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+ dependencies:
+ loose-envify "^1.4.0"
+ object-assign "^4.1.1"
+ react-is "^16.8.1"
+
 public-encrypt@^4.0.0:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
@@ -1699,12 +1732,20 @@ react-dom@^17.0.2:
  object-assign "^4.1.1"
  scheduler "^0.20.2"
 
+react-google-login@^5.2.2:
+ version "5.2.2"
+ resolved "https://registry.yarnpkg.com/react-google-login/-/react-google-login-5.2.2.tgz#a20b46440c6c1610175ef75baf427118ff0e9859"
+ integrity sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==
+ dependencies:
+ "@types/react" "*"
+ prop-types "^15.6.0"
+
 [email protected], react-is@^17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^16.7.0:
+react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==