added_login_logic_frontend_backend

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 = () => (
-	<div>
-		{/* <Header /> */}
-		<Routes>
-			<Route path="/" element={<Home />} />
-			<Route path="/LandingPage" element={<LandingPage />} />
-			<Route path="/history" element={<History />} />
-			<Route path="/about/this/site" element={<About />} />
-		</Routes>
-		{/* <Footer /> */}
-	</div>
-);
+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 (
+		<div>
+			{/* <Header /> */}
+			<Routes>
+				<Route path="/" element={<Home user={user} />} />
+				<Route path="/LandingPage" element={<LandingPage />} />
+				<Route path="/history" element={<History />} />
+				<Route path="/about/this/site" element={<About />} />
+			</Routes>
+			{/* <Footer /> */}
+		</div>
+	);
+};
 
 export default App;

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 (
 		<>
 			<Navbar bg="light" expand="md" className="px-4">
@@ -21,7 +21,10 @@ const Header = () => {
 					xxl={2}
 					className="ms-auto justify-content-end d-flex"
 				>
-					<ProfileIcone />
+					{user ? (
+						<Card.Text style={{ marginTop: "12px" }}>{user.username}</Card.Text>
+					) : null}
+					<ProfileIcone user={user} />
 				</Col>
 			</Navbar>
 			<div
@@ -32,11 +35,15 @@ const Header = () => {
 					gridTemplateColumns: "1fr 4fr 1fr",
 				}}
 			>
-				<div></div>
-				<h6>
-					Our all-in-one writing helper tool is designed to reduce mistake,
-					improve grammar and suggest phrases
-				</h6>
+				<Col></Col>
+				<Col>
+					<div>
+						<h6>
+							Our all-in-one writing helper tool is designed to reduce mistake,
+							improve grammar and suggest phrases
+						</h6>
+					</div>
+				</Col>
 				<Col
 					xs={4}
 					md={3}

client/src/Components/ProfileIcone.js

@@ -1,17 +1,21 @@
 import { useState } from "react";
 import { Modal, Button } from "react-bootstrap";
 import icon from "../assets/Icon.png";
-const ProfileIcone = () => {
+const ProfileIcone = ({ user }) => {
 	const [show, setShow] = useState(false);
 
+	const logout = () => {
+		window.open("http://localhost:3000/api/auth/logout", "_self");
+	};
+
 	return (
 		<>
 			<Button
 				onClick={() => setShow(true)}
 				style={{ background: "transparent", border: "none" }}
 			>
 				<img
-					src={icon}
+					src={user ? user.avatar : icon}
 					alt="Icon"
 					style={{ width: "35px", height: "35px", borderRadius: "100%" }}
 				/>
@@ -26,11 +30,15 @@ const ProfileIcone = () => {
 			>
 				<Modal.Header closeButton>
 					<Modal.Title id="example-custom-modal-styling-title">
-						Profile
+						{user ? user.username : "Profile"}
 					</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
-					<Button>Sign Out</Button>
+					{user ? (
+						<Button type="submit" onClick={logout}>
+							Sign Out
+						</Button>
+					) : null}
 				</Modal.Body>
 			</Modal>
 		</>

client/src/pages/Home.js

@@ -10,7 +10,7 @@ import MainContent from "../Components/MainContent";
 import "./Home.css";
 // import logo from "./logo.svg"; //import for a logo
 
-export function Home() {
+export function Home({ user }) {
 	/* const [val, setVal] = useState("");
 	const [content, setContent] = useState("");*/
 	/*const [message, setMessage] = useState("Loading...");
@@ -73,7 +73,7 @@ export function Home() {
 
 	return (
 		<div>
-			<Header />
+			<Header user={user} />
 			{/* <p>Hello World</p>
 			 this the label
 			<form id="inputForm" onSubmit={onSubmit}>

client/src/pages/LandingPage.js

@@ -4,6 +4,10 @@ import Footer from "../Components/Footer";
 import TeamLogo from "../assets/TeamLogo.png";
 import Header from "../Components/Header";
 const LandingPage = () => {
+	const github = () => {
+		window.open("http://localhost:3000/api/auth/github", "_self");
+	};
+
 	return (
 		<>
 			<Header />
@@ -22,14 +26,14 @@ const LandingPage = () => {
 				<Card.Body>
 					<Card.Title style={{ marginTop: "10%" }}>Welcome to TOOT</Card.Title>
 					<Card.Text>
-						<h6>
-							Log in with your GitHub account to <br /> continue
-						</h6>
+						Log in with your GitHub account to <br /> continue
 					</Card.Text>
 					<Button
-						href="/about/this/site"
+						type="submit"
+						//href="/about/this/site"
 						variant="danger "
 						style={{ marginTop: "20%" }}
+						onClick={github}
 					>
 						Log in with GitHub
 					</Button>