evangadi-forum group project

client/src/pages/EmnetHeader/Header.css

@@ -0,0 +1,41 @@
+.link {
+  text-decoration: none;
+  color: black;
+}
+.nav {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 30px;
+}
+
+.nav__image {
+  padding-left: 110px;
+}
+
+.nav__bar {
+  padding-right: 190px;
+  font-size: 19px;
+}
+.nav__bar button {
+  height: 45px;
+  width: 250px;
+  margin: 15px 0;
+  background-color: #516cf0;
+  border: 1px solid #3a59ef;
+  border-radius: 4px;
+  color: aliceblue;
+  font-size: 17px;
+}
+.nav__bar button:hover {
+  background: #db7405;
+  border: #fe8402;
+  cursor: pointer;
+  color: aliceblue;
+}
+
+.nav__bar .nav__works {
+  padding: 35px;
+}
+.nav__bar :hover {
+  color: #da7000;
+}

client/src/pages/EmnetHeader/Header.js

@@ -0,0 +1,41 @@
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import { UserContext } from "../../CONTEXT/UserContext";
+import "./Header.css";
+
+const Header = ({loginRes}) => {
+  const [userData, setUserData] = useContext(UserContext);
+
+  // const handleAuthentication = () => {
+  //   if (userData) {
+  //     
+  //   }
+  // };
+
+  return (
+    <div className="nav">
+      <Link to="/">
+      <img
+        className="nav__image"
+        src="https://www.evangadi.com/themes/humans//assets/images/misc/evangadi-logo-home.png"
+        alt=""
+      />
+      </Link>
+
+        <Link to={!userData && "/login"} className="link">
+      <div className="nav__bar">
+        <span>Home</span>
+        <span className="nav__works">How it Works</span>
+          {/* <div onClick={handleAuthentication} className=""> */}
+            <button>{!userData ? "SIGN IN" : "LogOut"}</button>
+          {/* </div> */}
+      </div>
+        </Link>
+
+
+
+    </div>
+  );
+};
+
+export default Header;

client/src/pages/EmnetSignIn/Login.css

@@ -0,0 +1,115 @@
+.account__link {
+  color: #e47703;
+}
+.login {
+  display: flex;
+}
+.login__container {
+  margin-left: 290px;
+  text-align: center;
+}
+
+.login__title {
+  width: 530px;
+  height: 520px;
+  margin-top: 30px;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgb(158 158 158 / 90%);
+  border-radius: 10px;
+  position: relative;
+  top: 0;
+}
+
+.login__title h2 {
+  padding-top: 120px;
+}
+.login__form input {
+  height: 40px;
+  margin-bottom: 9px;
+  width: 450px;
+  border: 1.9px solid #ddd;
+  border-radius: 4px;
+}
+
+.login__container button {
+  height: 45px;
+  width: 250px;
+  margin: 15px 0;
+  background-color: #516cf0;
+  border: 1px solid #3a59ef;
+  border-radius: 4px;
+  color: aliceblue;
+  font-size: 17px;
+}
+.login__container button:hover {
+  background: #fe8402;
+  border: #fe8402;
+  cursor: pointer;
+}
+
+.login__about {
+  padding-top: 120px;
+  width: 600px;
+  padding-left: 40px;
+}
+#about {
+  color: #f88409;
+}
+.login__about button {
+  background: #f17f04;
+  border: 1px solid #fe8402;
+  border-radius: 4px;
+  padding: 12px;
+  color: #fff;
+  width: 190px;
+  margin-top: 20px;
+}
+
+.footer {
+  height: 200px;
+  background-color: #1e2f3f;
+  padding-left: 100px;
+  margin-top: 210px;
+  display: flex;
+}
+
+.footer__image {
+  padding-top: 30px;
+}
+.footer_socialLink a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.footer__instagram {
+  padding: 15px;
+}
+
+.footer__linkList {
+  display: flex;
+  padding-left: 300px;
+  padding-top: 13px;
+  color: #fff;
+
+  /* padding-bottom: 60px; */
+}
+.footer__linkList ul li {
+  list-style: none;
+  opacity: 0.3;
+}
+.footer__linkUseful ul li:hover {
+  text-decoration: underline;
+  opacity: 1;
+}
+.footer__linkUseful {
+  padding-right: 100px;
+}
+.footer__linkList h3 {
+  padding-left: 37px;
+  font-weight: 500;
+  font-size: 20px;
+}
+.footer__linkContact {
+  padding-left: 300px;
+  padding-right: 180px;
+}

client/src/pages/EmnetSignIn/Login.js

@@ -0,0 +1,146 @@
+import axios from "axios";
+import React, { useContext, useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { UserContext } from "../../CONTEXT/UserContext";
+import "./Login.css";
+
+const Login = () => {
+  const [userData, setUserData] = useContext(UserContext);
+  const navigate = useNavigate();
+  const [form, setForm] = useState({});
+
+  useEffect(() => {
+    if (userData.user) navigate("/");
+  }, [userData.user, navigate]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      //sending user data to database to be logged in
+      const loginRes = await axios.post(
+        "http://localhost:3500/api/users/login",
+        {
+          email: form.email,
+          password: form.password,
+        }
+      );
+
+      //updating global state with response from backend(user-info)
+      setUserData({
+        token: loginRes.data.token,
+        user: loginRes.data.user,
+      });
+
+      //setting localstorage with the token
+      localStorage.setItem("auth-token", loginRes.data.token);
+      navigate("/"); //navigating user to homepage
+    } catch (err) {
+      console.log("problem", err.response.data.msg);
+      alert(err.response.data.msg);
+    }
+  };
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+  return (
+    <div>
+    <div className="login">
+      <div className="login__container">
+        <div className="login__title">
+          <h2>Login to your account</h2>
+          <p>
+            Don't have an account?{" "}
+            <Link className="account__link" to="/signup">
+              Create a new account
+            </Link>
+          </p>
+
+          <form className="login__form" onSubmit={handleSubmit}>
+            {/* <label>Email</label> */}
+            <input
+              type="email"
+              name="email"
+              placeholder="Your Email"
+              onChange={handleChange}
+            />{" "}
+            <br />
+            {/* <label>Password</label> */}
+            <input
+              type="password"
+              name="password"
+              placeholder="Your Password"
+              onChange={handleChange}
+            />
+            <br />
+            <button>Submit</button>
+          </form>
+          <Link className="account__link" to="/signup">
+            Create an Account?
+          </Link>
+        </div>
+      </div>
+
+        <div className="login__about">
+          <p id="about">About</p>
+          <h1>Evangadi Networks Q&A</h1>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium,
+            molestias! Expedita ex nostrum officia harum quos numquam pariatur
+            quas sequi nulla itaque molestias ullam fugit aut voluptatem at,
+            laudantium reprehenderit.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
+            porro quidem maxime in nostrum asperiores quos totam quia, molestias
+            facere, consectetur dolores quod soluta aspernatur obcaecati, ipsam
+            mollitia? Assumenda, fugiat?
+          </p>{" "}
+          <p>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
+            obcaecati corporis a reiciendis vitae repellat. Repellendus
+            voluptatum et sapiente possimus, reiciendis, necessitatibus voluptas
+            laudantium accusamus totam eligendi consectetur dolorem quae.
+          </p>
+          <button>HOW IT WORKS</button>
+        </div>
+            </div>
+
+        <div className="footer">
+            <div>
+            <img className="footer__image" src="https://www.evangadi.com/themes/humans//assets/images/misc/evangadi-logo-footer.png"
+        alt=""
+      />
+      <div className="footer_socialLink">
+      <span><a href="">facebook</a></span> 
+      <span className="footer__instagram"><a href="">insta</a></span> 
+      <span><a href="">youtube</a></span>
+      </div>
+      </div>
+
+<div className="footer__linkList">
+    <div className="footer__linkUseful">
+      <h3>Useful Link</h3>
+      <ul>
+        <li>How it works</li>
+        <li>Terms of Service</li>
+        <li>Privacy policy</li>
+      </ul>
+      </div>
+<div className="footer__linkContact">
+      <h3>Contact Info</h3>
+      <ul>
+        <li>Evangadi Networks</li>
+        <li>support@evangadi.com</li>
+        <li>+1-202-386-2702</li>
+      </ul>
+      </div>
+
+      </div>
+
+        </div>
+        </div>
+  );
+};
+
+export default Login;