makersacademy · Shakhrai8 · Jul 3, 2023 · Jul 3, 2023 · Jul 3, 2023 · Jul 4, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/api/.DS_Store b/api/.DS_Store
diff --git a/api/models/user.js b/api/models/user.js
@@ -3,6 +3,7 @@ const mongoose = require("mongoose");
 const UserSchema = new mongoose.Schema({
   email: { type: String, required: true },
   password: { type: String, required: true },
+  username: { type: String, reqquired: true },
 });
 
 const User = mongoose.model("User", UserSchema);

diff --git a/api/package-lock.json b/api/package-lock.json
diff --git a/frontend/cypress/e2e/signing_in.cy.js b/frontend/cypress/e2e/signing_in.cy.js
@@ -1,13 +1,14 @@
 describe("Signing in", () => {
 
   before(() => {
-    cy.signup("[email protected]", "12345678")
+    cy.signup("[email protected]", "12345678", "username_test")
   })
 
   it("with valid credentials, redirects to '/posts'", () => {
     cy.visit("/login");
     cy.get("#email").type("[email protected]");
     cy.get("#password").type("password");
+    cy.get("#username_test").type("username_test");
     cy.get("#submit").click();
 
     cy.url().should("include", "/posts");

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="portal"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/frontend/src/components/app/App.css b/frontend/src/components/app/App.css
@@ -0,0 +1,112 @@
+/* App.css */
+
+/* Global styles */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100vh;
+}
+
+.content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.top-left {
+  flex-grow: 1;
+}
+
+.top-right {
+  display: flex;
+  align-items: center;
+}
+
+.feed-container {
+  background-color: #f0f0f0;
+  padding: 20px;
+}
+
+/* Navbar styles */
+.navbar {
+  background-color: #f0f0f0;
+  padding: 10px;
+}
+
+/* SearchBar styles */
+.search-bar {
+  margin-bottom: 10px;
+}
+
+.search-bar input {
+  width: 100%;
+  padding: 5px;
+  border: 1px solid #ccc;
+}
+
+/* NotificationButton styles */
+.notification-button {
+  margin-right: 10px;
+}
+
+/* ProfileButton styles */
+.profile-button {
+  margin-right: 10px;
+}
+
+/* Feed styles */
+.feed {
+  background-color: #fff;
+  padding: 10px;
+}
+
+/* LoginForm styles */
+.login-form {
+  margin-top: 20px;
+}
+
+.login-form input {
+  width: 100%;
+  padding: 5px;
+  border: 1px solid #ccc;
+}
+
+.login-form button {
+  padding: 5px 10px;
+  background-color: #ccc;
+  border: none;
+  cursor: pointer;
+}
+
+/* SignUpForm styles */
+.sign-up-form {
+  margin-top: 20px;
+}
+
+.sign-up-form input {
+  width: 100%;
+  padding: 5px;
+  border: 1px solid #ccc;
+}
+
+.sign-up-form button {
+  padding: 5px 10px;
+  background-color: #ccc;
+  border: none;
+  cursor: pointer;
+}
diff --git a/frontend/src/components/app/App.js b/frontend/src/components/app/App.js
@@ -1,22 +1,57 @@
-import './App.css';
-import LoginForm from '../auth/LoginForm'
-import SignUpForm from '../user/SignUpForm'
-import React, { useState } from 'react';
-import Feed from '../feed/Feed'
-import {
-  useNavigate,
-  Routes,
-  Route,
-} from "react-router-dom";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import LoginForm from "../auth/LoginForm";
+import SignUpForm from "../user/SignUpForm";
+import Feed from "../feed/Feed";
+import Navbar from "../navbar/Navbar";
+import SearchBar from "../searchbar/SearchBar";
+import NotificationButton from "../notification/NotificationButton";
+import ProfileButton from "../profile/ProfileButton";
+import "./App.css";
 
 const App = () => {
-    return (
-        <Routes>
-          <Route path='/posts'  element={<Feed navigate={ useNavigate() }/>}/>
-          <Route path='/login'  element={<LoginForm  navigate={ useNavigate() }/>}/>
-          <Route path='/signup' element={<SignUpForm navigate={ useNavigate() }/>}/>
-        </Routes>
-    );
-}
+  const [showLoginForm, setShowLoginForm] = useState(false);
+  const [showSignUpForm, setShowSignUpForm] = useState(false);
+
+  const navigate = useNavigate();
+
+  const openLoginForm = () => setShowLoginForm(true);
+  const closeLoginForm = () => setShowLoginForm(false);
+
+  const openSignUpForm = () => setShowSignUpForm(true);
+  const closeSignUpForm = () => setShowSignUpForm(false);
+
+  return (
+    <div className="app-container">
+      <Navbar />
+
+      <div className="content">
+        <div className="top-bar">
+          <div className="top-left">
+            <SearchBar />
+          </div>
+          <div className="top-right">
+            <NotificationButton />
+            <button onClick={openLoginForm}>Log In</button>
+            <button onClick={openSignUpForm}>Sign Up</button>
+            <ProfileButton />
+          </div>
+        </div>
+
+        <div className="feed-container">
+          <Feed navigate={navigate} />
+        </div>
+      </div>
+
+      {showLoginForm && (
+        <LoginForm navigate={navigate} onClose={closeLoginForm} />
+      )}
+
+      {showSignUpForm && (
+        <SignUpForm navigate={navigate} onClose={closeSignUpForm} />
+      )}
+    </div>
+  );
+};
 
 export default App;
diff --git a/frontend/src/components/auth/LoginForm.css b/frontend/src/components/auth/LoginForm.css
@@ -0,0 +1,37 @@
+/* Style the form itself */
+.login-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  width: 300px;
+  padding: 20px;
+  background-color: #f2f2f2;
+  border-radius: 8px;
+}
+
+/* Style the form input fields */
+.login-form input[type="text"],
+.login-form input[type="password"] {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+
+/* Style the submit button */
+.login-form input[type="submit"] {
+  padding: 10px;
+  background-color: #0099cc;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.login-form input[type="submit"]:hover {
+  background-color: #006699;
+}
diff --git a/frontend/src/components/auth/LoginForm.js b/frontend/src/components/auth/LoginForm.js
@@ -1,47 +1,65 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
+// import "./LoginForm.css";
+import Modal from "../common/Modal";
 
-const LogInForm = ({ navigate }) => {
+const LogInForm = ({ navigate, onClose }) => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
   const handleSubmit = async (event) => {
     event.preventDefault();
 
-    let response = await fetch( '/tokens', {
-      method: 'post',
+    let response = await fetch("/tokens", {
+      method: "post",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
-      body: JSON.stringify({ email: email, password: password })
-    })
+      body: JSON.stringify({ email: email, password: password }),
+    });
 
-    if(response.status !== 201) {
-      console.log("yay")
-      navigate('/login')
+    if (response.status !== 201) {
+      console.log("yay");
     } else {
-      console.log("oop")
-      let data = await response.json()
-      window.localStorage.setItem("token", data.token)
-      navigate('/posts');
+      console.log("oop");
+      let data = await response.json();
+      window.localStorage.setItem("token", data.token);
+      navigate("/posts");
+      onClose(); // Close the form when the submission is successful
     }
-  }
+  };
 
   const handleEmailChange = (event) => {
-    setEmail(event.target.value)
-  }
+    setEmail(event.target.value);
+  };
 
   const handlePasswordChange = (event) => {
-    setPassword(event.target.value)
-  }
-
-
-    return (
-      <form onSubmit={handleSubmit}>
-        <input placeholder='Email' id="email" type='text' value={ email } onChange={handleEmailChange} />
-        <input placeholder='Password' id="password" type='password' value={ password } onChange={handlePasswordChange} />
-        <input role='submit-button' id='submit' type="submit" value="Submit" />
-      </form>
-    );
-}
+    setPassword(event.target.value);
+  };
+
+  return (
+    <Modal open={true} onClose={onClose}>
+      <div className="modal-content">
+        <button onClick={onClose}>Close</button>
+        <form onSubmit={handleSubmit}>
+          <input
+            placeholder="Email"
+            id="email"
+            type="text"
+            value={email}
+            onChange={handleEmailChange}
+          />
+          <input
+            placeholder="Password"
+            id="password"
+            type="password"
+            value={password}
+            onChange={handlePasswordChange}
+          />
+          <input id="submit" type="submit" value="Submit" />
+        </form>
+      </div>
+    </Modal>
+  );
+};
 
 export default LogInForm;
diff --git a/frontend/src/components/common/Modal.css b/frontend/src/components/common/Modal.css
@@ -0,0 +1,38 @@
+/* Modal.css */
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.modal-content {
+  /* Add styles for the background body */
+  background-color: #f8f8f8;
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
+  color: #888;
+}