From 5e3dd46a37c24734e590e250776b769432fd17fc Mon Sep 17 00:00:00 2001
From: Roman-hal <85693082+Roman-Hal@users.noreply.github.com>
Date: Sun, 7 May 2023 09:59:57 +0100
Subject: [PATCH] added_login_logic_frontend_backend
added oauth2 login logic for the front end and backend. Some corrections to the frontend.
---
client/src/App.js | 58 +++++++--
client/src/Components/Header.js | 23 ++--
client/src/Components/ProfileIcone.js | 16 ++-
client/src/pages/Home.js | 4 +-
client/src/pages/LandingPage.js | 12 +-
package-lock.json | 172 ++++++++++++++++++++++++++
package.json | 3 +
server/api.js | 45 +++++++
server/app.js | 18 ++-
server/passport.js | 40 ++++++
10 files changed, 356 insertions(+), 35 deletions(-)
create mode 100644 server/passport.js
diff --git a/client/src/App.js b/client/src/App.js
index 15e8d4d..b3cbb21 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,4 +1,5 @@
import { Route, Routes } from "react-router-dom";
+import { useEffect, useState } from "react";
import About from "./pages/About";
import Home from "./pages/Home";
@@ -7,17 +8,50 @@ import History from "./pages/History";
// import Header from "./Components/Header";
// import Footer from "./Components/Footer";
-const App = () => (
-
- {/* */}
-
- } />
- } />
- } />
- } />
-
- {/* */}
-
-);
+const App = () => {
+ const [user, setUser] = useState();
+
+ useEffect(() => {
+ const fetchUser = async () => {
+ try {
+ const response = await fetch(
+ "http://localhost:3000/api/auth/login/success" ??
+ "/api/auth/login/success",
+ {
+ method: "GET",
+ credentials: "include",
+ headers: {
+ Accept: "application/json",
+ "Content-type": "application/json",
+ "Access-Control-Allow-Credentials": true,
+ },
+ }
+ );
+ const json = await response.json();
+ const result = json;
+ //console.log(result);
+ //console.log("hey");
+ setUser(result);
+ } catch (error) {
+ //console.log("error", error);
+ return error;
+ }
+ };
+ fetchUser();
+ }, []);
+
+ return (
+
+ {/* */}
+
+ } />
+ } />
+ } />
+ } />
+
+ {/* */}
+
+ );
+};
export default App;
diff --git a/client/src/Components/Header.js b/client/src/Components/Header.js
index 1867de9..0ba1c7c 100644
--- a/client/src/Components/Header.js
+++ b/client/src/Components/Header.js
@@ -1,9 +1,9 @@
import React from "react";
import logo from "../assets/cyf_brand.png";
-import { Navbar, Button, Col } from "react-bootstrap";
+import { Navbar, Button, Col, Card } from "react-bootstrap";
import ProfileIcone from "./ProfileIcone";
//header component
-const Header = () => {
+const Header = ({ user }) => {
return (
<>
@@ -21,7 +21,10 @@ const Header = () => {
xxl={2}
className="ms-auto justify-content-end d-flex"
>
-
+ {user ? (
+ {user.username}
+ ) : null}
+
{
gridTemplateColumns: "1fr 4fr 1fr",
}}
>
-
-
- Our all-in-one writing helper tool is designed to reduce mistake,
- improve grammar and suggest phrases
-
+
+
+
+
+ Our all-in-one writing helper tool is designed to reduce mistake,
+ improve grammar and suggest phrases
+
+
+
{
+const ProfileIcone = ({ user }) => {
const [show, setShow] = useState(false);
+ const logout = () => {
+ window.open("http://localhost:3000/api/auth/logout", "_self");
+ };
+
return (
<>