Log in demo branch rebwar

client/src/App.js

@@ -1,13 +1,92 @@
-import { Route, Routes } from "react-router-dom";
+import { useState, useEffect } from "react";
+import "react-toastify/dist/ReactToastify.css";
+import {
+	BrowserRouter as Router,
+	Routes,
+	Route,
+	Navigate,
+} from "react-router-dom";
+import { toast } from "react-toastify";
 
-import About from "./pages/About";
+import CreateYourProfilePage from "./components/CreateProfile/CreateYourProfilePage";
+import About from "./components/About/About";
+import Contact from "./components/Contact/Contact";
 import Home from "./pages/Home";
+import Login from "./components/Sign-In/SignIn";
+import Register from "./components/Sign-Up/SignUp";
+import Dashboard from "./components/Dashboard/Dashboard";
+import NavBar from "./components/HomePage/NavBar/NavBar";
 
-const App = () => (
-	<Routes>
-		<Route path="/" element={<Home />} />
-		<Route path="/about/this/site" element={<About />} />
-	</Routes>
-);
+toast.configure();
+
+function App() {
+	const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+	const checkAuthenticated = async () => {
+		try {
+			const res = await fetch("/api/verify", {
+				method: "GET",
+				headers: { token: localStorage.token },
+			});
+
+			const parseRes = await res.json();
+
+			parseRes === true ? setIsAuthenticated(true) : setIsAuthenticated(false);
+		} catch (err) {
+			console.error(err.message);
+		}
+	};
+
+	useEffect(() => {
+		checkAuthenticated();
+	}, []);
+
+	const setAuth = (boolean) => {
+		setIsAuthenticated(boolean);
+	};
+
+	return (
+		<div>
+			<NavBar isAuthenticated={isAuthenticated} setAuth={setAuth} />
+			<Routes>
+				<Route path="/" element={<Home />} />
+				<Route path="/createprofile" element={<CreateYourProfilePage />} />
+				<Route path="/about" element={<About />} />
+				<Route path="/contact" element={<Contact />} />
+
+				<Route
+					path="/signin"
+					element={
+						!isAuthenticated ? (
+							<Login setAuth={setAuth} />
+						) : (
+							<Navigate to="/dashboard" replace />
+						)
+					}
+				/>
+				<Route
+					path="/signup"
+					element={
+						!isAuthenticated ? (
+							<Register setAuth={setAuth} />
+						) : (
+							<Navigate to="/dashboard" replace />
+						)
+					}
+				/>
+				<Route
+					path="/dashboard"
+					element={
+						isAuthenticated ? (
+							<Dashboard setAuth={setAuth} />
+						) : (
+							<Navigate to="/signin" replace />
+						)
+					}
+				/>
+			</Routes>
+		</div>
+	);
+}
 
 export default App;

client/src/assets/css/general.css

@@ -0,0 +1,18 @@
+@font-face {
+	font-family: PlayfairDisplay;
+	src: url(../fonts/PlayfairDisplay.ttf);
+}
+
+body {
+	font-family: PlayfairDisplay !important;
+}
+.content {
+	margin: 2em 5em;
+	background-color: #d4e3e4;
+	padding: 2em;
+}
+.header h2 {
+	color: white;
+	font-size: 25px;
+	text-align: center;
+}

client/src/assets/scss/dashboard.scss

@@ -0,0 +1,8 @@
+.dashboard {
+	line-height: 30px;
+}
+.Required {
+	font-size: 1rem;
+	font-weight: 600;
+	color: red;
+}

client/src/assets/scss/footer.scss

@@ -0,0 +1,7 @@
+footer {
+	text-align: center;
+}
+.pfooter {
+	font-size: 1.5rem;
+	font-weight: 600;
+}

client/src/assets/scss/header.scss

@@ -0,0 +1,5 @@
+.header h2 {
+	color: white;
+	font-size: 25px;
+	text-align: center;
+}

client/src/components/About/About.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const About = () => {
+  return (
+    <div>About</div>
+  );
+};
+
+export default About;

client/src/components/AddUser/AddUser.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const AddUser = () => {
+  return (
+	<div>Add User</div>
+  );
+};
+
+export default AddUser;

client/src/components/Contact/Contact.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Contact = () => {
+  return (
+    <div>Contact</div>
+  );
+};
+
+export default Contact;

client/src/components/CreateProfile/CreateYourProfilePage.css

@@ -0,0 +1,77 @@
+/* Global styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+}
+
+h1 {
+  font-size: 2rem;
+  margin: 1rem 0;
+}
+
+.form-group {
+  margin: 1rem 0;
+}
+
+label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+input,
+button {
+  font-size: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid #ccc;
+}
+
+input:focus,
+button:focus {
+  outline: none;
+  border-color: #4d90fe;
+  box-shadow: 0 0 5px #4d90fe;
+}
+
+button {
+  background-color: #4d90fe;
+  color: #fff;
+  cursor: pointer;
+  margin-right: 1rem;
+}
+
+button:hover {
+  background-color: #357ae8;
+}
+
+/* Styles for the CreateProfilePage component */
+.create-profile-page {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+@media screen and (max-width: 600px) {
+  .create-profile-page {
+    padding: 1rem;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  input,
+  button {
+    font-size: 0.8rem;
+    padding: 0.25rem;
+  }
+}
+
+@media screen and (max-width: 300px) {
+  h1 {
+    font-size: 1.5rem;
+  }
+}