From b1029b2e74d657fb8890d15107f7be900b8209e3 Mon Sep 17 00:00:00 2001
From: BryanV <bveith2000@gmail.com>
Date: Fri, 2 Dec 2022 23:37:26 -0500
Subject: [PATCH 1/4] Addressed Issue 41: was annoying

---
 src/components/AddIngredientView.vue    |  19 ++++
 src/components/HomeView.vue             |  54 +--------
 src/components/IngredientFeed.vue       |  38 ++++---
 src/components/LoginView.vue            | 139 ++++++++----------------
 src/components/ModalView.vue            |  11 +-
 src/components/RecipeFeed.vue           |  82 ++++----------
 src/components/ShoppingListFeed.vue     |  69 +++---------
 src/components/css/FeedStyles.css       | 106 ++++++++++++++++++
 src/components/css/HomeView.css         |  55 ++++++++++
 src/components/css/IngredientFeed.css   |  39 +++++++
 src/components/css/RecipeFeed.css       |  44 ++++++++
 src/components/css/ShoppingListFeed.css |  57 ++++++++++
 12 files changed, 437 insertions(+), 276 deletions(-)
 create mode 100644 src/components/css/FeedStyles.css
 create mode 100644 src/components/css/HomeView.css
 create mode 100644 src/components/css/IngredientFeed.css
 create mode 100644 src/components/css/RecipeFeed.css
 create mode 100644 src/components/css/ShoppingListFeed.css

diff --git a/src/components/AddIngredientView.vue b/src/components/AddIngredientView.vue
index d5c4357..105ac30 100644
--- a/src/components/AddIngredientView.vue
+++ b/src/components/AddIngredientView.vue
@@ -165,4 +165,23 @@ export default {
 .next {
   text-align: right;
 }
+
+.btn-primary {
+  width: fit-content;
+  box-shadow: none;
+}
+
+.col-md-2 {
+  background-color: #ffffff00 !important;
+}
+
+.col-md-10,
+.col-md-2 {
+  padding-left: 15px !important;
+  padding-right: 15px !important;
+}
+
+.container {
+  background-color: white;
+}
 </style>
diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
index b3d11cc..0a17b2f 100644
--- a/src/components/HomeView.vue
+++ b/src/components/HomeView.vue
@@ -71,57 +71,5 @@ export default {
 </script>
 
 <style scoped>
-/* TODO(#16): set script to have the inital tab (IngredientFeed) button active */
-/* TODO(#9): replace this icon with the ones we're using in the figma diagrams */
-.container {
-  padding: 0 !important;
-  margin: 0 !important;
-  max-width: 100%;
-}
-
-.col-md-2,
-.col-md-10 {
-  padding: 0;
-}
-
-.list-group {
-  margin: 0 !important;
-}
-
-.sectionicons {
-  margin-right: 10px;
-}
-
-.pb-2,
-.py-2 {
-  padding: 1.5rem !important;
-  margin: 0 !important;
-}
-
-button {
-  width: 100%;
-  padding: 20px;
-  border: none;
-  background-color: white;
-  text-align: left;
-}
-
-button:hover {
-  color: green;
-  font-weight: bold;
-}
-
-.svg-inline--fa {
-  margin-right: 10px;
-  font-size: 20px;
-}
-
-.white {
-  color: black;
-}
-
-.green {
-  color: #008600;
-  font-weight: bold;
-}
+@import "css/HomeView.css";
 </style>
diff --git a/src/components/IngredientFeed.vue b/src/components/IngredientFeed.vue
index 03b8fc0..f6e15e8 100644
--- a/src/components/IngredientFeed.vue
+++ b/src/components/IngredientFeed.vue
@@ -39,7 +39,7 @@
             placeholder="Search Inventory..."
             v-model="searchString"
             type="text"
-            class="form-control"
+            class="form-control search-feeds"
           />
         </div>
         <button
@@ -298,7 +298,9 @@ export default {
 
 <style scoped>
 /* TODO(41): Extract css into separate file */
-.container {
+@import "css/FeedStyles.css";
+@import "css/IngredientFeed.css";
+/* .container {
   padding: 0 !important;
   margin: 0 !important;
   background-color: #f9f9f9;
@@ -338,9 +340,9 @@ export default {
   border-radius: 50%;
   height: fit-content;
   align-self: center;
-}
+} */
 
-.type-of-food {
+/* .type-of-food {
   width: 10vw;
   height: 5vw;
   border-radius: 15px;
@@ -378,19 +380,19 @@ export default {
     url("../assets/food.png");
   margin: 15px;
   padding: 0;
-}
+} */
 
-.col-md-auto {
+/* .col-md-auto {
   padding: 0;
   margin: 0;
-}
+} */
 
-.categories {
+/* .categories {
   list-style: none;
   display: flex;
-}
+} */
 
-ul {
+/* ul {
   margin: 0;
   display: flex;
   max-width: 80vw;
@@ -402,16 +404,18 @@ ul {
 h3 {
   padding-left: 15px;
   padding-top: 15px;
-}
+} */
 
-.dropdown-menu {
+/* .dropdown-menu {
   display: none;
-}
+} */
 
-.btn-sortBy {
+/* .btn-sortBy {
   color: black !important;
   background-color: white !important;
   border: none;
+  border-radius: 100px;
+  box-shadow: 0px 3px 3px #bdbdbd;
 }
 
 .btn-sortBy:hover,
@@ -419,9 +423,9 @@ h3 {
 .btn-sortBy:focus {
   color: white !important;
   background-color: #008600 !important;
-}
+} */
 
-.dropdown-item.active,
+/* .dropdown-item.active,
 .dropdown-item:active {
   background-color: #008600;
 }
@@ -430,5 +434,5 @@ h3 {
   user-select: none;
   cursor: pointer;
   width: 100%;
-}
+} */
 </style>
diff --git a/src/components/LoginView.vue b/src/components/LoginView.vue
index 0057502..0a17b2f 100644
--- a/src/components/LoginView.vue
+++ b/src/components/LoginView.vue
@@ -1,84 +1,60 @@
 <template>
-  <div class="container">
-    <div class="row">
-      <!-- TODO(#8): Animate the banner to move to the other side when register is pushed -->
-      <div class="col-md-6 no-float">
-        <div class="banner">
-          <div class="d-flex justify-content-center fill">
-            <div
-              class="content_center my-class position-absolute top-50 start-50 translate-middle"
-            >
-              <h2>Don't have an account?</h2>
-              <router-link to="/register" class="nav-link">
-                <button class="btn btn-secondary btn-block">Register</button>
-              </router-link>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-md-6 no-float">
-        <div class="card card-container">
-          <img
-            id="profile-img"
-            src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
-            class="profile-img-card"
-          />
-          <Form @submit="handleLogin" :validation-schema="schema">
-            <div class="form-group">
-              <label for="username">Username</label>
-              <Field name="username" type="text" class="form-control" />
-              <ErrorMessage name="username" class="error-feedback" />
-            </div>
-            <div class="form-group">
-              <label for="password">Password</label>
-              <Field name="password" type="password" class="form-control" />
-              <ErrorMessage name="password" class="error-feedback" />
-            </div>
-
-            <div class="form-group">
-              <button class="btn btn-primary btn-block" :disabled="loading">
-                <span
-                  v-show="loading"
-                  class="spinner-border spinner-border-sm"
-                ></span>
-                <span>Login</span>
-              </button>
-            </div>
-
-            <div class="form-group">
-              <div v-if="message" class="alert alert-danger" role="alert">
-                {{ message }}
-              </div>
-            </div>
-          </Form>
+  <div class="row">
+    <div class="col-md-2">
+      <nav id="sidebarMenu" class="sidebar">
+        <div class="position-sticky">
+          <button
+            @click="currentTab = 'IngredientFeed'"
+            v-bind:class="{
+              white: currentTab != 'IngredientFeed',
+              green: currentTab == 'IngredientFeed',
+            }"
+          >
+            <font-awesome-icon icon="carrot" />My Ingredients
+          </button>
+          <button
+            @click="currentTab = 'RecipeFeed'"
+            v-bind:class="{
+              white: currentTab != 'RecipeFeed',
+              green: currentTab == 'RecipeFeed',
+            }"
+          >
+            <font-awesome-icon icon="hamburger" />Recipes
+          </button>
+          <button
+            @click="currentTab = 'ShoppingListFeed'"
+            v-bind:class="{
+              white: currentTab != 'ShoppingListFeed',
+              green: currentTab == 'ShoppingListFeed',
+            }"
+          >
+            <font-awesome-icon icon="shopping-cart" />Shopping List
+          </button>
         </div>
+      </nav>
+    </div>
+    <div class="col-md-10">
+      <div class="container">
+        <component :is="currentTab"></component>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { Form, Field, ErrorMessage } from "vee-validate";
-import * as yup from "yup";
-import { util } from "@/globals.js";
-
+import IngredientFeed from "@/components/IngredientFeed.vue";
+import RecipeFeed from "@/components/RecipeFeed.vue";
+import ShoppingListFeed from "@/components/ShoppingListFeed.vue";
 export default {
-  name: "LoginView",
+  name: "HomeView",
   components: {
-    Form,
-    Field,
-    ErrorMessage,
+    IngredientFeed,
+    RecipeFeed,
+    ShoppingListFeed,
   },
   data() {
-    const schema = yup.object().shape({
-      username: yup.string().required("Username is required!"),
-      password: yup.string().required("Password is required!"),
-    });
-
     return {
-      loading: false,
-      message: "",
-      schema,
+      currentTab: "IngredientFeed",
     };
   },
   computed: {
@@ -86,33 +62,14 @@ export default {
       return this.$store.state.auth.status.loggedIn;
     },
   },
-  created() {
-    if (this.loggedIn) {
-      this.$router.push("/home");
+  mounted() {
+    if (!this.loggedIn) {
+      this.$router.push("/login");
     }
   },
-  methods: {
-    handleLogin(user) {
-      this.loading = true;
-
-      this.$store.dispatch("auth/login", user).then(
-        () => {
-          this.$router.push("/home");
-        },
-        (error) => {
-          // 403 indicates that username exists, but they haven't verified their email
-          if (error.response.status === 403) {
-            this.$router.push("/confirm");
-          }
-          this.loading = false;
-          this.message = util.getErrorString(error);
-        }
-      );
-    },
-  },
 };
 </script>
 
 <style scoped>
-@import "css/LoginRegisterForm.css";
+@import "css/HomeView.css";
 </style>
diff --git a/src/components/ModalView.vue b/src/components/ModalView.vue
index c203cef..e573607 100644
--- a/src/components/ModalView.vue
+++ b/src/components/ModalView.vue
@@ -80,4 +80,13 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.btn-secondary {
+  width: fit-content;
+  box-shadow: none;
+}
+.btn-primary {
+  width: fit-content;
+  box-shadow: none;
+}
+</style>
diff --git a/src/components/RecipeFeed.vue b/src/components/RecipeFeed.vue
index 20688a9..af76ef7 100644
--- a/src/components/RecipeFeed.vue
+++ b/src/components/RecipeFeed.vue
@@ -40,7 +40,7 @@
             placeholder="Search Recipes..."
             v-model="searchString"
             type="text"
-            class="form-control"
+            class="form-control search-feeds"
           />
         </div>
         <!-- TODO(59): Add a button for search -->
@@ -74,7 +74,7 @@
                 <div v-for="(recipe, name) in types" :key="name">
                   <div class="col-md-auto">
                     <button type="button" class="btn recipe-item">
-                      <div class="col-md-auto text-center recipe-text">
+                      <div class="col-md-auto recipe-text">
                         {{ name }}
                       </div>
                     </button>
@@ -179,49 +179,10 @@ export default {
 <style scoped>
 /* TODO(41): If the styles for this and ingredient are identical, make them share
 css. If not, just extract this into a separate css file */
-.container {
-  padding: 0 !important;
-  margin: 0 !important;
-  background-color: #f9f9f9;
-  max-width: 100%;
-}
-
-.btn {
-  background-color: white;
-  border-radius: 100px;
-  box-shadow: 0px 3px 3px #bdbdbd;
-}
-
-.tool-bar {
-  margin: 0 !important;
-  flex-wrap: wrap;
-  height: fit-content;
-  display: flex;
-  justify-content: space-between;
-}
-
-.form-outline {
-  padding-right: 20px;
-}
-.form-control {
-  border: none;
-  border-radius: 100px !important;
-  box-shadow: 0px 3px 3px #bdbdbd;
-  display: inline-block;
-}
-
-.tool-bar-container {
-  display: flex;
-  padding: 20px;
-}
-
-.btn-floating {
-  border-radius: 50%;
-  height: fit-content;
-  align-self: center;
-}
+@import "css/FeedStyles.css";
+@import "css/RecipeFeed.css";
 
-.type-of-recipe {
+/* .type-of-recipe {
   width: 10vw;
   height: 5vw;
   border-radius: 15px;
@@ -250,7 +211,7 @@ css. If not, just extract this into a separate css file */
   width: 12vw;
   height: 19vw;
   border-radius: 15px;
-  /* TODO(40): Update this to display the image from the ingredient in inventory */
+  /* TODO(40): Update this to display the image from the ingredient in inventory
   background-size: auto;
   background-image: linear-gradient(
       to bottom,
@@ -262,21 +223,22 @@ css. If not, just extract this into a separate css file */
   padding: 0;
 }
 
+li {
+  list-style: none;
+} */
+
+/* 
 .col-md-auto {
   padding: 0;
   margin: 0;
-}
-
-li {
-  list-style: none;
-}
+} */
 
-.categories {
+/* .categories {
   list-style: none;
   display: flex;
-}
+} */
 
-ul {
+/* ul {
   margin: 0;
   display: flex;
   max-width: 80vw;
@@ -288,13 +250,13 @@ ul {
 h3 {
   padding-left: 15px;
   padding-top: 15px;
-}
+} */
 
-.dropdown-menu {
+/* .dropdown-menu {
   display: none;
-}
+} */
 
-.btn-sortBy {
+/* .btn-sortBy {
   color: black !important;
   background-color: white !important;
   border: none;
@@ -305,9 +267,9 @@ h3 {
 .btn-sortBy:focus {
   color: white !important;
   background-color: #008600 !important;
-}
+} */
 
-.dropdown-item.active,
+/* .dropdown-item.active,
 .dropdown-item:active {
   background-color: #008600;
 }
@@ -316,5 +278,5 @@ h3 {
   user-select: none;
   cursor: pointer;
   width: 100%;
-}
+} */
 </style>
diff --git a/src/components/ShoppingListFeed.vue b/src/components/ShoppingListFeed.vue
index 76413c1..934f075 100644
--- a/src/components/ShoppingListFeed.vue
+++ b/src/components/ShoppingListFeed.vue
@@ -37,7 +37,7 @@
             placeholder="Search Shopping List..."
             v-model="searchString"
             type="text"
-            class="form-control"
+            class="form-control search-feeds"
           />
         </div>
         <button
@@ -367,49 +367,10 @@ export default {
 
 <style scoped>
 /* TODO(41): Extract css into separate file */
-.container {
-  padding: 0 !important;
-  margin: 0 !important;
-  background-color: #f9f9f9;
-  max-width: 100%;
-}
-
-.btn {
-  background-color: white;
-  border-radius: 100px;
-  box-shadow: 0px 3px 3px #bdbdbd;
-}
-
-.tool-bar {
-  margin: 0 !important;
-  flex-wrap: wrap;
-  height: fit-content;
-  display: flex;
-  justify-content: space-between;
-}
-
-.form-outline {
-  padding-right: 20px;
-}
-.form-control {
-  border: none;
-  border-radius: 100px !important;
-  box-shadow: 0px 3px 3px #bdbdbd;
-  display: inline-block;
-}
+@import "css/FeedStyles.css";
+@import "css/ShoppingListFeed.css";
 
-.tool-bar-container {
-  display: flex;
-  padding: 20px;
-}
-
-.btn-floating {
-  border-radius: 50%;
-  height: fit-content;
-  align-self: center;
-}
-
-ul {
+/* ul {
   margin: 0;
   display: flex;
   max-width: 80vw;
@@ -421,13 +382,13 @@ ul {
 h3 {
   padding-left: 15px;
   padding-top: 15px;
-}
+} */
 
-.dropdown-menu {
+/* .dropdown-menu {
   display: none;
-}
+} */
 
-.btn-sortBy {
+/* .btn-sortBy {
   color: black !important;
   background-color: white !important;
   border: none;
@@ -438,14 +399,14 @@ h3 {
 .btn-sortBy:focus {
   color: white !important;
   background-color: #008600 !important;
-}
+} */
 
-.dropdown-item.active,
+/* .dropdown-item.active,
 .dropdown-item:active {
   background-color: #008600;
-}
+} */
 
-.shopping-item {
+/* .shopping-item {
   width: 65vw;
   height: 10vw;
   border-radius: 15px;
@@ -506,11 +467,11 @@ h3 {
 .confirm:focus {
   background-color: #33ff00;
   color: white;
-}
+} */
 
-.options {
+/* .options {
   user-select: none;
   cursor: pointer;
   width: 100%;
-}
+} */
 </style>
diff --git a/src/components/css/FeedStyles.css b/src/components/css/FeedStyles.css
new file mode 100644
index 0000000..b99dae4
--- /dev/null
+++ b/src/components/css/FeedStyles.css
@@ -0,0 +1,106 @@
+.container {
+  padding: 0 !important;
+  margin: 0 !important;
+  background-color: #f9f9f9;
+  max-width: 100%;
+}
+
+.btn {
+  border-radius: 100px;
+  box-shadow: 0px 3px 3px #bdbdbd;
+}
+
+.tool-bar {
+  margin: 0 !important;
+  flex-wrap: wrap;
+  height: fit-content;
+  display: flex;
+  justify-content: space-between;
+}
+
+.form-outline {
+  padding-right: 20px;
+}
+
+.col-md-auto {
+  padding: 0;
+  margin: 0;
+}
+
+.search-feeds {
+  border: none !important;
+  border-radius: 100px !important;
+  box-shadow: 0px 3px 3px #bdbdbd !important;
+  display: inline-block !important;
+}
+
+.search-feeds:focus {
+  border-color: #80bdff !important;
+  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%) !important;
+}
+
+.tool-bar-container {
+  display: flex;
+  padding: 20px;
+}
+
+.categories {
+  list-style: none;
+  display: flex;
+}
+
+.btn-floating {
+  border-radius: 50% !important;
+  width: fit-content;
+  height: fit-content;
+  align-self: center;
+}
+
+.btn-sortBy {
+  color: black !important;
+  background-color: white;
+  border: none;
+  border-radius: 100px !important;
+  box-shadow: 0px 3px 3px #bdbdbd !important;
+}
+
+.btn-sortBy:hover,
+.btn-sortBy:active,
+.btn-sortBy:focus {
+  color: white !important;
+  background-color: #008600;
+}
+
+ul {
+  margin: 0 !important;
+  display: flex;
+  max-width: 80vw;
+  padding: 0;
+  overflow: auto;
+  overflow-y: hidden;
+}
+
+h3 {
+  padding-left: 15px;
+  padding-top: 15px;
+}
+
+.dropdown-menu {
+  display: none;
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+  background-color: #008600 !important;
+}
+
+.options {
+  user-select: none;
+  cursor: pointer;
+  width: 100%;
+}
+
+.btn-group {
+  margin: 0 !important;
+  border-radius: 15px !important;
+}
diff --git a/src/components/css/HomeView.css b/src/components/css/HomeView.css
new file mode 100644
index 0000000..6865133
--- /dev/null
+++ b/src/components/css/HomeView.css
@@ -0,0 +1,55 @@
+.container {
+  padding: 0 !important;
+  margin: 0 !important;
+  max-width: 100%;
+}
+
+.col-md-2,
+.col-md-10 {
+  padding: 0 !important;
+}
+
+.col-md-2 {
+  background-color: white !important;
+}
+
+.list-group {
+  margin: 0 !important;
+}
+
+.sectionicons {
+  margin-right: 10px;
+}
+
+.pb-2,
+.py-2 {
+  padding: 1.5rem !important;
+  margin: 0 !important;
+}
+
+button {
+  width: 100%;
+  padding: 20px;
+  border: none;
+  background-color: white;
+  text-align: left;
+}
+
+button:hover {
+  color: green;
+  font-weight: bold;
+}
+
+.svg-inline--fa {
+  margin-right: 10px;
+  font-size: 20px;
+}
+
+.white {
+  color: black;
+}
+
+.green {
+  color: #008600;
+  font-weight: bold;
+}
diff --git a/src/components/css/IngredientFeed.css b/src/components/css/IngredientFeed.css
new file mode 100644
index 0000000..6808321
--- /dev/null
+++ b/src/components/css/IngredientFeed.css
@@ -0,0 +1,39 @@
+.type-of-food {
+  width: 10vw;
+  height: 5vw;
+  border-radius: 15px;
+  align-items: center;
+  color: black;
+  background-color: lightgrey;
+  margin: 15px;
+}
+
+.food-text {
+  text-align: left !important;
+  font-size: 1rem;
+  color: white;
+  top: 30%;
+  padding: 8% !important;
+}
+
+.type-of-food,
+.food-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.food-item {
+  width: 12vw;
+  height: 19vw;
+  border-radius: 15px;
+  background-size: auto;
+  background-image: linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 0%),
+      rgb(0 0 0 / 73%)
+    ),
+    url("../../assets/food.png");
+  margin: 15px;
+  padding: 0;
+}
diff --git a/src/components/css/RecipeFeed.css b/src/components/css/RecipeFeed.css
new file mode 100644
index 0000000..62992c0
--- /dev/null
+++ b/src/components/css/RecipeFeed.css
@@ -0,0 +1,44 @@
+.type-of-recipe {
+  width: 10vw;
+  height: 5vw;
+  border-radius: 15px !important;
+  align-items: center;
+  color: black;
+  background-color: lightgrey !important;
+  margin: 15px !important;
+}
+
+.recipe-text {
+  text-align: left !important;
+  font-size: 1rem;
+  color: white;
+  top: 30%;
+  padding: 8% !important;
+}
+
+.type-of-recipe,
+.recipe-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: normal;
+}
+
+.recipe-item {
+  width: 12vw;
+  height: 19vw;
+  border-radius: 15px !important;
+  background-size: auto;
+  background-image: linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 0%),
+      rgb(0 0 0 / 73%)
+    ),
+    url("../../assets/food.png");
+  margin: 15px !important;
+  padding: 0 !important;
+}
+
+li {
+  list-style: none;
+}
diff --git a/src/components/css/ShoppingListFeed.css b/src/components/css/ShoppingListFeed.css
new file mode 100644
index 0000000..79f06a6
--- /dev/null
+++ b/src/components/css/ShoppingListFeed.css
@@ -0,0 +1,57 @@
+.shopping-item {
+  width: 65vw;
+  height: 10vw;
+  border-radius: 15px !important;
+  padding: 0 !important;
+  display: flex;
+}
+
+.shopping-item-pic {
+  width: 10vw;
+  height: 10vw;
+  border-radius: 15px !important;
+  background-size: auto;
+  background-image: linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 0%),
+      rgb(0 0 0 / 73%)
+    ),
+    url("../../assets/food.png");
+  padding: 0;
+}
+
+.shopping-text,
+.amount-needed {
+  display: contents;
+  text-align: left !important;
+  color: black;
+  padding: 10px !important;
+}
+
+.shopping-text {
+  font-size: 1.5rem;
+}
+
+.amount-needed {
+  font-size: 1rem;
+}
+
+.dropdown-toggle-split {
+  width: 5vw;
+  border-radius: 15px !important;
+  font-size: 1.5rem;
+}
+
+.cancel:hover,
+.cancel:active,
+.cancel:focus {
+  background-color: red !important;
+  color: white !important;
+}
+
+.confirm:hover,
+.confirm:active,
+.confirm:focus {
+  background-color: #33ff00 !important;
+  color: white !important;
+}

From d177050e5c7e5c5844c01cf3a90b47f0c8cd0b85 Mon Sep 17 00:00:00 2001
From: BryanV <bveith2000@gmail.com>
Date: Fri, 2 Dec 2022 23:52:16 -0500
Subject: [PATCH 2/4] fixed login back to normal

---
 src/components/LoginView.vue | 139 +++++++++++++++++++++++------------
 1 file changed, 91 insertions(+), 48 deletions(-)

diff --git a/src/components/LoginView.vue b/src/components/LoginView.vue
index 0a17b2f..0057502 100644
--- a/src/components/LoginView.vue
+++ b/src/components/LoginView.vue
@@ -1,60 +1,84 @@
 <template>
-  <div class="row">
-    <div class="col-md-2">
-      <nav id="sidebarMenu" class="sidebar">
-        <div class="position-sticky">
-          <button
-            @click="currentTab = 'IngredientFeed'"
-            v-bind:class="{
-              white: currentTab != 'IngredientFeed',
-              green: currentTab == 'IngredientFeed',
-            }"
-          >
-            <font-awesome-icon icon="carrot" />My Ingredients
-          </button>
-          <button
-            @click="currentTab = 'RecipeFeed'"
-            v-bind:class="{
-              white: currentTab != 'RecipeFeed',
-              green: currentTab == 'RecipeFeed',
-            }"
-          >
-            <font-awesome-icon icon="hamburger" />Recipes
-          </button>
-          <button
-            @click="currentTab = 'ShoppingListFeed'"
-            v-bind:class="{
-              white: currentTab != 'ShoppingListFeed',
-              green: currentTab == 'ShoppingListFeed',
-            }"
-          >
-            <font-awesome-icon icon="shopping-cart" />Shopping List
-          </button>
+  <div class="container">
+    <div class="row">
+      <!-- TODO(#8): Animate the banner to move to the other side when register is pushed -->
+      <div class="col-md-6 no-float">
+        <div class="banner">
+          <div class="d-flex justify-content-center fill">
+            <div
+              class="content_center my-class position-absolute top-50 start-50 translate-middle"
+            >
+              <h2>Don't have an account?</h2>
+              <router-link to="/register" class="nav-link">
+                <button class="btn btn-secondary btn-block">Register</button>
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6 no-float">
+        <div class="card card-container">
+          <img
+            id="profile-img"
+            src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
+            class="profile-img-card"
+          />
+          <Form @submit="handleLogin" :validation-schema="schema">
+            <div class="form-group">
+              <label for="username">Username</label>
+              <Field name="username" type="text" class="form-control" />
+              <ErrorMessage name="username" class="error-feedback" />
+            </div>
+            <div class="form-group">
+              <label for="password">Password</label>
+              <Field name="password" type="password" class="form-control" />
+              <ErrorMessage name="password" class="error-feedback" />
+            </div>
+
+            <div class="form-group">
+              <button class="btn btn-primary btn-block" :disabled="loading">
+                <span
+                  v-show="loading"
+                  class="spinner-border spinner-border-sm"
+                ></span>
+                <span>Login</span>
+              </button>
+            </div>
+
+            <div class="form-group">
+              <div v-if="message" class="alert alert-danger" role="alert">
+                {{ message }}
+              </div>
+            </div>
+          </Form>
         </div>
-      </nav>
-    </div>
-    <div class="col-md-10">
-      <div class="container">
-        <component :is="currentTab"></component>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import IngredientFeed from "@/components/IngredientFeed.vue";
-import RecipeFeed from "@/components/RecipeFeed.vue";
-import ShoppingListFeed from "@/components/ShoppingListFeed.vue";
+import { Form, Field, ErrorMessage } from "vee-validate";
+import * as yup from "yup";
+import { util } from "@/globals.js";
+
 export default {
-  name: "HomeView",
+  name: "LoginView",
   components: {
-    IngredientFeed,
-    RecipeFeed,
-    ShoppingListFeed,
+    Form,
+    Field,
+    ErrorMessage,
   },
   data() {
+    const schema = yup.object().shape({
+      username: yup.string().required("Username is required!"),
+      password: yup.string().required("Password is required!"),
+    });
+
     return {
-      currentTab: "IngredientFeed",
+      loading: false,
+      message: "",
+      schema,
     };
   },
   computed: {
@@ -62,14 +86,33 @@ export default {
       return this.$store.state.auth.status.loggedIn;
     },
   },
-  mounted() {
-    if (!this.loggedIn) {
-      this.$router.push("/login");
+  created() {
+    if (this.loggedIn) {
+      this.$router.push("/home");
     }
   },
+  methods: {
+    handleLogin(user) {
+      this.loading = true;
+
+      this.$store.dispatch("auth/login", user).then(
+        () => {
+          this.$router.push("/home");
+        },
+        (error) => {
+          // 403 indicates that username exists, but they haven't verified their email
+          if (error.response.status === 403) {
+            this.$router.push("/confirm");
+          }
+          this.loading = false;
+          this.message = util.getErrorString(error);
+        }
+      );
+    },
+  },
 };
 </script>
 
 <style scoped>
-@import "css/HomeView.css";
+@import "css/LoginRegisterForm.css";
 </style>

From 4b0e5dc539e84741d433dd0bec64c3bb412c5815 Mon Sep 17 00:00:00 2001
From: BryanV <bveith2000@gmail.com>
Date: Sat, 3 Dec 2022 00:15:45 -0500
Subject: [PATCH 3/4] fixed the login/register button

---
 src/components/css/LoginRegisterForm.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/css/LoginRegisterForm.css b/src/components/css/LoginRegisterForm.css
index 46bfeb5..95baafa 100644
--- a/src/components/css/LoginRegisterForm.css
+++ b/src/components/css/LoginRegisterForm.css
@@ -97,6 +97,7 @@ h1 {
 .btn-primary {
   background-color: #008600 !important;
   border-color: #008600 !important;
+  box-shadow: none;
 }
 
 .btn-primary:hover,
@@ -105,12 +106,14 @@ h1 {
 .show > .btn-primary.dropdown-toggle {
   background-color: #006600 !important;
   border-color: #005600 !important;
+  font-weight: normal;
 }
 
 .btn-secondary {
   color: #008600 !important;
   background-color: white !important;
   border-color: white !important;
+  box-shadow: none;
 }
 
 .btn-secondary:hover,
@@ -119,4 +122,5 @@ h1 {
 .show > .btn-secondary.dropdown-toggle {
   background-color: lightgrey !important;
   border-color: lightgrey !important;
+  font-weight: normal;
 }

From d50d8c05b852a47b9845706f44ce01e3419feb8e Mon Sep 17 00:00:00 2001
From: BryanV <bveith2000@gmail.com>
Date: Sat, 3 Dec 2022 00:51:00 -0500
Subject: [PATCH 4/4] issue 30 create vars for multiple colors

---
 src/components/css/FeedStyles.css        | 21 ++++++++++------
 src/components/css/HomeView.css          | 24 ++++++++++--------
 src/components/css/IngredientFeed.css    |  9 +++++--
 src/components/css/LoginRegisterForm.css | 31 ++++++++++++++++--------
 src/components/css/RecipeFeed.css        |  9 +++++--
 src/components/css/ShoppingListFeed.css  | 12 ++++++---
 6 files changed, 72 insertions(+), 34 deletions(-)

diff --git a/src/components/css/FeedStyles.css b/src/components/css/FeedStyles.css
index b99dae4..8285b93 100644
--- a/src/components/css/FeedStyles.css
+++ b/src/components/css/FeedStyles.css
@@ -1,13 +1,20 @@
+:root {
+  --our-green: #008600;
+  --button-shadows: #bdbdbd;
+  --feed-background: #f9f9f9;
+  --button-focus-blue: #80bdff;
+}
+
 .container {
   padding: 0 !important;
   margin: 0 !important;
-  background-color: #f9f9f9;
+  background-color: var(--feed-background);
   max-width: 100%;
 }
 
 .btn {
   border-radius: 100px;
-  box-shadow: 0px 3px 3px #bdbdbd;
+  box-shadow: 0px 3px 3px var(--button-shadows);
 }
 
 .tool-bar {
@@ -30,12 +37,12 @@
 .search-feeds {
   border: none !important;
   border-radius: 100px !important;
-  box-shadow: 0px 3px 3px #bdbdbd !important;
+  box-shadow: 0px 3px 3px var(--button-shadows) !important;
   display: inline-block !important;
 }
 
 .search-feeds:focus {
-  border-color: #80bdff !important;
+  border-color: var(----button-focus-blue) !important;
   box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%) !important;
 }
 
@@ -61,14 +68,14 @@
   background-color: white;
   border: none;
   border-radius: 100px !important;
-  box-shadow: 0px 3px 3px #bdbdbd !important;
+  box-shadow: 0px 3px 3px var(--button-shadows) !important;
 }
 
 .btn-sortBy:hover,
 .btn-sortBy:active,
 .btn-sortBy:focus {
   color: white !important;
-  background-color: #008600;
+  background-color: var(--our-green);
 }
 
 ul {
@@ -91,7 +98,7 @@ h3 {
 
 .dropdown-item.active,
 .dropdown-item:active {
-  background-color: #008600 !important;
+  background-color: var(--our-green) !important;
 }
 
 .options {
diff --git a/src/components/css/HomeView.css b/src/components/css/HomeView.css
index 6865133..d5f7ce9 100644
--- a/src/components/css/HomeView.css
+++ b/src/components/css/HomeView.css
@@ -1,3 +1,8 @@
+:root {
+  --our-green: #008600;
+  --side-bar-color: white;
+}
+
 .container {
   padding: 0 !important;
   margin: 0 !important;
@@ -10,7 +15,7 @@
 }
 
 .col-md-2 {
-  background-color: white !important;
+  background-color: var(--side-bar-color) !important;
 }
 
 .list-group {
@@ -27,29 +32,28 @@
   margin: 0 !important;
 }
 
-button {
+.svg-inline--fa {
+  margin-right: 10px;
+  font-size: 20px;
+}
+
+.white, .green {
   width: 100%;
   padding: 20px;
   border: none;
   background-color: white;
   text-align: left;
 }
-
-button:hover {
+.white:hover, .green:hover {
   color: green;
   font-weight: bold;
 }
 
-.svg-inline--fa {
-  margin-right: 10px;
-  font-size: 20px;
-}
-
 .white {
   color: black;
 }
 
 .green {
-  color: #008600;
+  color: var(--our-green);
   font-weight: bold;
 }
diff --git a/src/components/css/IngredientFeed.css b/src/components/css/IngredientFeed.css
index 6808321..046901d 100644
--- a/src/components/css/IngredientFeed.css
+++ b/src/components/css/IngredientFeed.css
@@ -1,17 +1,22 @@
+:root {
+  --type-color: lightgrey;
+  --text-color: white;
+}
+
 .type-of-food {
   width: 10vw;
   height: 5vw;
   border-radius: 15px;
   align-items: center;
   color: black;
-  background-color: lightgrey;
+  background-color: var(--type-color);
   margin: 15px;
 }
 
 .food-text {
   text-align: left !important;
   font-size: 1rem;
-  color: white;
+  color: var(--text-color);
   top: 30%;
   padding: 8% !important;
 }
diff --git a/src/components/css/LoginRegisterForm.css b/src/components/css/LoginRegisterForm.css
index 95baafa..59d8607 100644
--- a/src/components/css/LoginRegisterForm.css
+++ b/src/components/css/LoginRegisterForm.css
@@ -1,3 +1,12 @@
+:root {
+  --our-green: #008600;
+  --error-color: red;
+  --login-register-btn-color: #006600;
+  --login-register-btn-color-hover: #005600;
+  --login-register-dont-have-account-color: white;
+  --login-register-dont-have-account-color-hover: lightgrey;
+}
+
 label {
   display: block;
   margin-top: 10px;
@@ -64,7 +73,7 @@ body,
 }
 
 .error-feedback {
-  color: red;
+  color: var(--error-color);
 }
 
 .content_center {
@@ -95,8 +104,8 @@ h1 {
 }
 
 .btn-primary {
-  background-color: #008600 !important;
-  border-color: #008600 !important;
+  background-color: var(--our-green) !important;
+  border-color: var(--our-green) !important;
   box-shadow: none;
 }
 
@@ -104,15 +113,15 @@ h1 {
 .btn-primary:focus,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
-  background-color: #006600 !important;
-  border-color: #005600 !important;
+  background-color: var(--login-register-btn-color) !important;
+  border-color: var(--login-register-btn-color-hover) !important;
   font-weight: normal;
 }
 
 .btn-secondary {
-  color: #008600 !important;
-  background-color: white !important;
-  border-color: white !important;
+  color: var(--our-green) !important;
+  background-color: var(--login-register-dont-have-account-color) !important;
+  border-color: var(--login-register-dont-have-account-color) !important;
   box-shadow: none;
 }
 
@@ -120,7 +129,9 @@ h1 {
 .btn-secondary:focus,
 .btn-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-secondary.dropdown-toggle {
-  background-color: lightgrey !important;
-  border-color: lightgrey !important;
+  background-color: var(
+    --login-register-dont-have-account-color-hover
+  ) !important;
+  border-color: var(--login-register-dont-have-account-color-hover) !important;
   font-weight: normal;
 }
diff --git a/src/components/css/RecipeFeed.css b/src/components/css/RecipeFeed.css
index 62992c0..1275699 100644
--- a/src/components/css/RecipeFeed.css
+++ b/src/components/css/RecipeFeed.css
@@ -1,17 +1,22 @@
+:root {
+  --type-color: lightgrey;
+  --text-color: white;
+}
+
 .type-of-recipe {
   width: 10vw;
   height: 5vw;
   border-radius: 15px !important;
   align-items: center;
   color: black;
-  background-color: lightgrey !important;
+  background-color: var(--type-color) !important;
   margin: 15px !important;
 }
 
 .recipe-text {
   text-align: left !important;
   font-size: 1rem;
-  color: white;
+  color: var(--text-color);
   top: 30%;
   padding: 8% !important;
 }
diff --git a/src/components/css/ShoppingListFeed.css b/src/components/css/ShoppingListFeed.css
index 79f06a6..32a5ac0 100644
--- a/src/components/css/ShoppingListFeed.css
+++ b/src/components/css/ShoppingListFeed.css
@@ -1,3 +1,9 @@
+:root {
+  --confirm-color: red;
+  --cancel-color: #33ff00;
+  --shopping-text: black;
+}
+
 .shopping-item {
   width: 65vw;
   height: 10vw;
@@ -24,7 +30,7 @@
 .amount-needed {
   display: contents;
   text-align: left !important;
-  color: black;
+  color: var(--shopping-text);
   padding: 10px !important;
 }
 
@@ -45,13 +51,13 @@
 .cancel:hover,
 .cancel:active,
 .cancel:focus {
-  background-color: red !important;
+  background-color: var(--confirm-color) !important;
   color: white !important;
 }
 
 .confirm:hover,
 .confirm:active,
 .confirm:focus {
-  background-color: #33ff00 !important;
+  background-color: var(--cancel-color) !important;
   color: white !important;
 }