Chenyi

back-end/test/login.test.js

@@ -33,7 +33,7 @@ describe("Login", () => {
   })
 
   describe("POST /auth/login with correct username/password", () => {
-    const formData = { username: "ginettexu", password: "ftamg3o6" } // mock form data with correct credentials
+    const formData = { username: "ginettexu", password: "jxcz12rv" } // mock form data with correct credentials
     it("it should return a 200 HTTP response code", done => {
       chai
         .request(server)

front-end/src/Home.css

@@ -14,3 +14,8 @@ nav a {
   text-decoration: none;
   color: black;
 }
+
+h2 {
+  text-align: center;
+  font-size: larger;
+}

front-end/src/Login.css

@@ -1,5 +1,20 @@
 .Login {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
 }
+
+.Login .main-content form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 10px;
+}
+
 .Login .error {
   margin-left: 20px;
   color: red;

front-end/src/Login.js

@@ -80,7 +80,7 @@ const Login = props => {
   // otherwise, if the user has successfully logged-in, redirect them to a different page
   // in this example, we simply redirect to the home page, but a real app would redirect 
   //to a page that shows content only available to logged-in users
-  else return <Navigate to="/" />
+  else return <Navigate to="/home" />
 }
 
 export default Login

front-end/src/MyIngredients.css

@@ -1,16 +1,20 @@
 .container {
     margin: 0 auto;
     width: 80%;
+    align-items: center;
   }
 
   .button-link {
     color: #ffffff;
     text-align: center;
     text-decoration: none;
+    font-size: medium;
+    max-width: 200px;
   }
 
   h1 {
     text-align: center;
+    font-size: small;
   }
 
   .form-container {

front-end/src/MyIngredients.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import './MyIngredients.css';
-import { Link } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 const MyIngredients = (props) => {
   const [ingredients, setIngredients] = useState([]);
@@ -113,6 +113,10 @@ const MyIngredients = (props) => {
     }
   };
 
+  if (!props.user || !props.user.success) {
+    return <Navigate to="/login?error=protected" />;
+  }
+
   return (
     <div>
       <h1>My Ingredients Page</h1>

front-end/src/PrimaryNav.js

@@ -10,7 +10,7 @@ const PrimaryNav = (props) => {
       <nav>
         <ul className="nav-links">
           <li>
-            <Link to="/">Home</Link>
+            <Link to="/home">Home</Link>
           </li>
           <li>
             <Link to="/recipes">Recipes</Link>
@@ -20,9 +20,9 @@ const PrimaryNav = (props) => {
           </li>
           <li>
             {isLoggedIn ? (
-              <Link to="/logout">Log Out</Link>
+              <Link to="/logout">Logout</Link>
             ) : (
-              <Link to="/login">Log In</Link>
+              <Link to="/login">Login</Link>
             )}
           </li>
         </ul>

front-end/src/Register.css

@@ -1,3 +1,20 @@
+.Register {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+}
+
+.Register .main-content form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 10px;
+}
+
 .Register .feedback {
   font-size: 0.75em;
   margin: 0 20px;
@@ -17,6 +34,7 @@
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  max-width: 300px;
 }
 
 .Register .popup p {

front-end/src/ResetPassword.css

@@ -1,3 +1,20 @@
+.ResetPassword {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+}
+
+.ResetPassword .main-content form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 10px;
+}
+
 .ResetPassword .feedback {
   font-size: 0.75em;
   margin: 0 20px;
@@ -16,6 +33,7 @@
   padding: 20px;
   border: 1px solid black;
   z-index: 9999; /* set a high z-index value */
+  max-width: 300px;
 }
 
 .ResetPassword .popup p {

front-end/src/SavedRecipes.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
-import { Link } from "react-router-dom"
+import { Link, Navigate } from "react-router-dom"
 import "./SavedRecipes.css";
 
 const SavedRecipes = (props) => {
@@ -37,6 +37,10 @@ const SavedRecipes = (props) => {
       window.removeEventListener("scroll", handleScroll);
     };
   }, [page, baseUrl, endPoint]);
+
+  if (!props.user || !props.user.success) {
+    return <Navigate to="/login?error=protected" />;
+  }
 
   return (
     <div className="RecipeList">

front-end/src/Welcome.css

@@ -6,15 +6,21 @@
   justify-content: center;
   padding: 0;
   margin: 0;
+  }
+
+.Welcome h1 {
+    width: 100%;
+    text-align: center;
+    margin: 10px 0;
 }
 
-.Welcome h1 {
+.Welcome h2 {
   width: 100%;
   text-align: center;
   margin: 10px 0;
 }
 
-.main-content {
+.Welcome .main-content {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -24,15 +30,50 @@
   margin: 0;
 }
 
-.main-content p {
-  width: 100%;
+.Welcome .main-content p {
+  width: 85%;
   text-align: center;
   margin: 20px 0;
+  font-family:Verdana, Geneva, Tahoma, sans-serif
+}
+
+.Welcome .main-content p u {
+  text-decoration-style: dotted;
+  text-decoration-color: rgb(245, 152, 59);
+  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
+}
+
+.Welcome .main-content p mark {
+  background-color: rgb(245, 152, 59);
+  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
 }
 
-.main-content a {
+.Welcome .main-content h2 a {
+  font-size: 18px;
   width: 100%;
+  max-width: 200px;
   text-align: center;
   display: block;
   margin: 10px 0;
+  color: #fff;
+  text-decoration: none;
+  background-color: #0074d9;
+  padding: 10px 20px;
+  border-radius: 5px;
+  display: inline-block;
 }
+
+.Welcome .main-content h1 a {
+  font-size: 18px;
+  width: 100%;
+  max-width: 250px;
+  text-align: center;
+  display: block;
+  margin: 10px 0;
+  color: #fff;
+  text-decoration: none;
+  background-color: #6158e0;
+  padding: 10px 20px;
+  border-radius: 5px;
+  display: inline-block;
+}

front-end/src/Welcome.js

@@ -8,20 +8,16 @@ const Welcome = (props) => {
       <h1>Welcome!</h1>
       <section className="main-content">
         <p>
-          "What's for Dinner" is an open-source web application that suggests
-          recipes based on the ingredients you have on
-          hand. With our platform, you can search for recipes using specific
-          ingredients, add or remove ingredients to see different recipe
-          suggestions, and save your favorite recipes for future use. Our app
-          also includes advanced search filters such as dietary restrictions,
-          meal type, and cooking time/difficulty to help find the perfect recipe
-          for users at all levels.
+        Welcome to "What's for Dinner", the ultimate solution for your meal planning needs. <br></br>
+        Our open-source web application provides personalized recipe suggestions based on the ingredients you have on hand. 
+        With our user-friendly platform, you can easily search for recipes, add or remove ingredients to find new and exciting dishes, and save your favorite recipes for future reference. 
+        Our advanced search filters make it easy to find recipes that fit your dietary restrictions, meal type, and cooking time/difficulty, making meal planning a breeze for users of all skill levels.
         </p>
-        <br />
-        <br />
-        <Link to="/recipes">Check out our recipes!</Link>
+        <h2>
+        <Link to="/search">Check out our recipes!</Link>
+        </h2>
         <h1>
-          <Link to="/home">Click Here to Start</Link>
+        <Link to="/home">Login for Customized Recipes</Link>
         </h1>
       </section>
     </div>