BackEnd-contact page-ahmed

client/src/App.js

@@ -1,13 +1,89 @@
-import { Route, Routes } from "react-router-dom";
-
-import About from "./pages/About";
+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 "./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";
+
+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="/about" element={<About />} />
+ <Route path="/contact" element={<Contact />} />
 
-const App = () => (
- <Routes>
- <Route path="/" element={<Home />} />
- <Route path="/about/this/site" element={<About />} />
- </Routes>
-);
+ <Route
+ path="/signin"
+ element={
+ !isAuthenticated ? (
+ <Login setAuth={setAuth} />
+ ) : (
+ <Navigate to="/dashboard" replace />
+ )
+ }
+ />
+ <Route
+ path="/signup"
+ element={
+ !isAuthenticated ? (
+ <Register setAuth={setAuth} />
+ ) : (
+ <Navigate to="/signin" 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/Contact/Contact.css

@@ -0,0 +1,43 @@
+.cont{
+ margin-left: 10rem;
+ margin-top: 10rem;
+}
+ form {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ width: 50%;
+ font-size: 16px;
+ }
+ input {
+ width: 50%;
+ height: 35px;
+ padding: 7px;
+ outline: none;
+ border-radius: 5px;
+ border: 1px solid rgb(220, 220, 220);
+ }
+
+ textarea {
+ max-width: 50%;
+ min-width: 100%;
+ width: 100%;
+ max-height: 100px;
+ min-height: 100px;
+ padding: 7px;
+ outline: none;
+ border-radius: 5px;
+ border: 1px solid rgb(220, 220, 220);
+
+ }
+ label {
+ margin-top: 1rem;
+ }
+ input[type="submit"] {
+ margin-top: 2rem;
+ cursor: pointer;
+ background: rgb(89, 203, 248);
+ color: white;
+ border: none;
+ }
+

client/src/components/Contact/Contact.js

@@ -0,0 +1,35 @@
+import React , { useRef } from "react";
+import emailjs from "@emailjs/browser";
+import "./Contact.css";
+
+
+const Contact = () => {
+ const form = useRef();
+ const sendEmail = (e) => {
+ e.preventDefault();
+ emailjs.sendForm("service_v6xbs76", "template_tcusoju", form.current, "XTtiq2GJ_9G06NXit")
+ .then((result) => {
+ console.log(result.text);
+ console.log("Your Message has been sented");
+ }, (error) => {
+ console.log(error.text);
+ });
+ };
+
+ return (
+ <div className="cont">
+ <h1 style={{ color :"black", marginLeft:250 }} >contact</h1>
+ <form ref={form} onSubmit={sendEmail}>
+ <label>Name</label>
+ <input type="text" name="user_name" />
+ <label>Email</label>
+ <input type="email" name="user_email" />
+ <label>Message</label>
+ <textarea name="message" />
+ <input type="submit" value="Send" />
+ </form>
+ </div>
+);
+};
+
+export default Contact;

client/src/components/CreateEvents/CreateEvents.js

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

client/src/components/Dashboard/Dashboard.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { Layout } from "antd";
+import Sidebar from "../../components/SideBar/SideBar";
+import Profile from "../../components/Profile/Profile";
+import EditProfile from "../../components/EditProfile/EditProfile";
+import UserLists from "../../components/ListUsers/ListUsers";
+import SearchCity from "../../components/SearchCity/SearchCity";
+import SearchLanguage from "../../components/SearchLanguage/SearchLanguage";
+import SearchCountry from "../../components/SearchCountry/SearchCountry";
+import CreateEvents from "../../components/CreateEvents/CreateEvents";
+import EventLists from "../../components/EventLists/EventLists";
+import Logout from "../../components/Logout/Logout";
+
+const { Content } = Layout;
+
+function Dashboard({ setAuth }) {
+ const [selectedMenu, setSelectedMenu] = useState("profile");
+
+ const handleMenuClick = (key) => {
+ setSelectedMenu(key);
+ };
+
+ const renderContent = () => {
+ switch (selectedMenu) {
+ case "profile":
+ return <Profile setAuth={setAuth} />;
+ case "edit-profile":
+ return <EditProfile />;
+ case "user-lists":
+ return <UserLists />;
+ case "create-events":
+ return <CreateEvents />;
+ case "event-lists":
+ return <EventLists />;
+ case "search-city":
+ return <SearchCity />;
+ case "search-language":
+ return <SearchLanguage />;
+ case "search-country":
+ return <SearchCountry />;
+ case "logout":
+ return <Logout setAuth={setAuth} />;
+ default:
+ return <Profile />;
+ }
+ };
+
+ return (
+ <Layout style={{ minHeight: "100vh" }}>
+ <Sidebar onMenuClick={handleMenuClick} />
+ <Layout className="site-layout">
+ <Content style={{ margin: "0 16px" }}>{renderContent()}</Content>
+ </Layout>
+ </Layout>
+ );
+}
+
+export default Dashboard;

client/src/components/EditProfile/EditProfile.css

@@ -0,0 +1,87 @@
+.signup-page {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+
+.signup-page h1 {
+ font-size: 2rem;
+ margin-bottom: 2rem;
+ color: #000;
+}
+
+.form-group {
+ margin-bottom: 1rem;
+ width: 100%;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+}
+
+.form-group input,
+.form-group select {
+ width: 100%;
+ padding: 0.5rem;
+ border: 1px solid #ccc;
+ border-radius: 0.25rem;
+ font-size: 1rem;
+ line-height: 1.5;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+ outline: none;
+ border-color: #0077ff;
+ box-shadow: 0 0 0 0.125em rgba(0, 119, 255, 0.25);
+}
+
+.language {
+ margin-bottom: 0.5rem;
+}
+
+.signup,
+.cancel {
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 0.25rem;
+ font-size: 1rem;
+ line-height: 1.5;
+ cursor: pointer;
+}
+
+.signup {
+ background-color: #0077ff;
+ color: #fff;
+ margin-right: 0.5rem;
+}
+
+.cancel {
+ background-color: #fff;
+ color: #000;
+}
+
+.login_button {
+ margin-top: 1rem;
+ font-size: 1rem;
+ line-height: 1.5;
+ color: #0077ff;
+ cursor: pointer;
+}
+
+.signup-page {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 0 auto;
+ max-width: 600px;
+ padding: 20px;
+
+ /* Media query for screens with max width of 768px */
+ @media only screen and (max-width: 768px) {
+ max-width: 90%;
+ }
+}