diff --git a/src/.env b/.env similarity index 65% rename from src/.env rename to .env index f704736..81e6405 100644 --- a/src/.env +++ b/.env @@ -3,3 +3,4 @@ REACT_APP_API_KEY = fe7f525d019d7186e76683b4233c4a0c //b1e66cf7b4d8b4bb07238f7a3e8bfe15 //bba2ad02b4ec7888859b671bb039179f //b290e192611b0edd8fef1d95bb9a17ae; +REACT_APP_GOOGLE_CLIENT_ID=423678433872-li4489tkutnb0kk944olk1je7ramfdh9.apps.googleusercontent.com diff --git a/Login.js b/Login.js new file mode 100644 index 0000000..e69de29 diff --git a/Logout.js b/Logout.js new file mode 100644 index 0000000..e69de29 diff --git a/package-lock.json b/package-lock.json index b41417d..d017401 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,10 +14,12 @@ "@material-ui/icons": "^4.11.3", "@material-ui/lab": "^4.0.0-alpha.61", "@mui/material": "^5.8.2", + "@react-oauth/google": "^0.12.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", "@testing-library/user-event": "^13.5.0", "axios": "^0.27.2", + "jwt-decode": "^4.0.0", "nvm": "^0.0.4", "react": "^18.1.0", "react-alice-carousel": "^2.6.1", @@ -4704,6 +4706,16 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-oauth/google": { + "version": "0.12.2", + "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.2.tgz", + "integrity": "sha512-d1GVm2uD4E44EJft2RbKtp8Z1fp/gK8Lb6KHgs3pHlM0PxCXGLaq8LLYQYENnN4xPWO1gkL4apBtlPKzpLvZwg==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@remix-run/router": { "version": "1.16.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", @@ -4931,6 +4943,13 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/@serverless/platform-client/node_modules/jwt-decode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz", + "integrity": "sha512-86GgN2vzfUu7m9Wcj63iUkuDzFNYFVmjeDm2GzWpUk+opB0pEpMsw6ePCMrhYkumz2C1ihqtZzOMAg7FiXcNoQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@serverless/platform-client/node_modules/querystring": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz", @@ -15731,11 +15750,13 @@ } }, "node_modules/jwt-decode": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz", - "integrity": "sha512-86GgN2vzfUu7m9Wcj63iUkuDzFNYFVmjeDm2GzWpUk+opB0pEpMsw6ePCMrhYkumz2C1ihqtZzOMAg7FiXcNoQ==", - "dev": true, - "license": "MIT" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz", + "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==", + "license": "MIT", + "engines": { + "node": ">=18" + } }, "node_modules/keyv": { "version": "4.5.4", diff --git a/package.json b/package.json index b9cf7e4..015c6de 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,12 @@ "@material-ui/icons": "^4.11.3", "@material-ui/lab": "^4.0.0-alpha.61", "@mui/material": "^5.8.2", + "@react-oauth/google": "^0.12.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", "@testing-library/user-event": "^13.5.0", "axios": "^0.27.2", + "jwt-decode": "^4.0.0", "nvm": "^0.0.4", "react": "^18.1.0", "react-alice-carousel": "^2.6.1", diff --git a/src/App.js b/src/App.js index cd5c32b..0633bf8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import Container from "@material-ui/core/Container"; -import React from "react"; +import React, { useState } from "react"; import { Route, BrowserRouter as Router, Switch } from "react-router-dom"; import ConsentDialog from "./components/ConsentDialog/ConsentDialog"; import Header from "./components/Header/Header"; @@ -9,13 +9,27 @@ import Search from "./components/Pages/Search/Search"; import Series from "./components/Pages/Series/Series"; import Trending from "./components/Pages/Trending/Trending"; import useGTM from "./hooks/useGTM"; +import Login from './components/Login'; +import Logout from './components/Logout'; function App() { const { consentGiven, handleConsent } = useGTM(); + const [user, setUser] = useState(null); return (
+
+ {user ? ( +
+ {user.name} + Welcome, {user.name} + +
+ ) : ( + + )} +
diff --git a/src/components/Login.js b/src/components/Login.js new file mode 100644 index 0000000..4cb01ab --- /dev/null +++ b/src/components/Login.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { GoogleLogin } from '@react-oauth/google'; +import { jwtDecode } from 'jwt-decode'; + +const Login = ({ setUser }) => { + const onSuccess = (res) => { + const userObject = jwtDecode(res.credential); + console.log('Login Success:', userObject); + setUser(userObject); + // Here, you would typically send the token (res.credential) to your backend + // to verify the user and create a session. + }; + + const onError = () => { + console.log('Login Failed'); + }; + + return ( +
+ +
+ ); +}; + +export default Login; + diff --git a/src/components/Logout.js b/src/components/Logout.js new file mode 100644 index 0000000..a45936d --- /dev/null +++ b/src/components/Logout.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { googleLogout } from '@react-oauth/google'; + +const Logout = ({ setUser }) => { + const handleLogout = () => { + googleLogout(); + setUser(null); + console.log('Logout Successful'); + }; + + return ( + + ); +}; + +export default Logout; + diff --git a/src/components/Pages/Search/Search.css b/src/components/Pages/Search/Search.css index 0bf0661..a5d364b 100644 --- a/src/components/Pages/Search/Search.css +++ b/src/components/Pages/Search/Search.css @@ -2,4 +2,4 @@ display: flex; margin: 15px 0; padding-top: 100px; -} \ No newline at end of file +} diff --git a/src/components/Pages/Search/Search.js b/src/components/Pages/Search/Search.js index edf3f7d..d94d2ae 100644 --- a/src/components/Pages/Search/Search.js +++ b/src/components/Pages/Search/Search.js @@ -27,6 +27,13 @@ const Search = () => { main: "#fff", }, }, + overrides: { + MuiFilledInput: { + input: { + color: "#5548ceff", // A light blue for better contrast + }, + }, + }, }); const fetchSearch = async () => { diff --git a/src/index.js b/src/index.js index 8e2d7b4..2658eb6 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,15 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import { GoogleOAuthProvider } from '@react-oauth/google'; import './index.css'; import App from './App'; ReactDOM.render( - - ,document.getElementById("root") + + + + , + document.getElementById('root'), ); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 8a931b8..2f74f8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2468,6 +2468,11 @@ resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz" integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== +"@react-oauth/google@^0.12.2": + version "0.12.2" + resolved "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.2.tgz" + integrity sha512-d1GVm2uD4E44EJft2RbKtp8Z1fp/gK8Lb6KHgs3pHlM0PxCXGLaq8LLYQYENnN4xPWO1gkL4apBtlPKzpLvZwg== + "@remix-run/router@1.16.1": version "1.16.1" resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz" @@ -8905,6 +8910,11 @@ jwt-decode@^3.1.2: resolved "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz" integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A== +jwt-decode@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz" + integrity sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA== + keyv@^4.0.0, keyv@^4.5.3: version "4.5.4" resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz"