From c8e90f759d5207cdb0cdf3b033a0dbfd4ac47842 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Wed, 24 Feb 2021 21:32:26 -0900
Subject: [PATCH] login form refactor/split v-container

---
 frontend/src/App.vue                          |   4 +-
 frontend/src/api/category.js                  |   5 +-
 frontend/src/components/Login/LoginDialog.vue |   2 +-
 frontend/src/components/Login/LoginForm.vue   | 162 +++++++++---------
 .../src/components/MealPlan/MealPlanNew.vue   |   2 +-
 frontend/src/pages/404Page.vue                |   4 +-
 frontend/src/pages/Admin/index.vue            |   4 +-
 frontend/src/pages/AllRecipesPage.vue         |   4 +-
 frontend/src/pages/CategoryPage.vue           |   4 +-
 frontend/src/pages/Debug.vue                  |   4 +-
 frontend/src/pages/HomePage.vue               |   4 +-
 frontend/src/pages/LoginPage.vue              |  32 +++-
 frontend/src/pages/MealPlanPage.vue           |  12 +-
 frontend/src/pages/RecipeNewPage.vue          |  70 ++++----
 frontend/src/pages/RecipePage.vue             | 106 ++++++------
 frontend/src/pages/SearchPage.vue             |   4 +-
 frontend/src/routes/admin.js                  |   6 +
 frontend/src/utils/index.js                   |   3 -
 mealie/routes/recipe/all_recipe_routes.py     |   2 +-
 19 files changed, 232 insertions(+), 202 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 78e21ae02..d5a3310b7 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -31,10 +31,8 @@
       <LanguageMenu />
     </v-app-bar>
     <v-main>
-      <v-container>
-        <AddRecipeFab />
+      <AddRecipeFab />
         <router-view></router-view>
-      </v-container>
       <FlashMessage :position="'right bottom'"></FlashMessage>
     </v-main>
   </v-app>
diff --git a/frontend/src/api/category.js b/frontend/src/api/category.js
index 20b72d458..d3a71d860 100644
--- a/frontend/src/api/category.js
+++ b/frontend/src/api/category.js
@@ -5,13 +5,14 @@ const prefix = baseURL + "categories";
 
 const categoryURLs = {
   get_all: `${prefix}`,
-  get_category: (category) => `${prefix}/${category}`,
-  delete_category: (category) => `${prefix}/${category}`,
+  get_category: category => `${prefix}/${category}`,
+  delete_category: category => `${prefix}/${category}`,
 };
 
 export default {
   async get_all() {
     let response = await apiReq.get(categoryURLs.get_all);
+    console.log("All Cats", response.data);
     return response.data;
   },
   async get_recipes_in_category(category) {
diff --git a/frontend/src/components/Login/LoginDialog.vue b/frontend/src/components/Login/LoginDialog.vue
index 5b7eb02be..bf2646f77 100644
--- a/frontend/src/components/Login/LoginDialog.vue
+++ b/frontend/src/components/Login/LoginDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="text-center">
-    <v-dialog v-model="dialog" width="500">
+    <v-dialog v-model="dialog" width="500px">
       <LoginForm @logged-in="dialog = false" />
     </v-dialog>
   </div>
diff --git a/frontend/src/components/Login/LoginForm.vue b/frontend/src/components/Login/LoginForm.vue
index 24017ddaa..3d12703b2 100644
--- a/frontend/src/components/Login/LoginForm.vue
+++ b/frontend/src/components/Login/LoginForm.vue
@@ -1,80 +1,79 @@
 <template>
-  <div>
-    <v-card max-width="500px">
-      <v-divider></v-divider>
-      <v-app-bar dark color="primary mt-n1">
-        <v-icon large left v-if="!loading">
-          mdi-account
-        </v-icon>
-        <v-progress-circular
-          v-else
-          indeterminate
-          color="white"
-          large
-          class="mr-2"
+  <v-card width="500px">
+    <v-divider></v-divider>
+    <v-app-bar  dark color="primary" class="mt-n1">
+      <v-icon large left v-if="!loading">
+        mdi-account
+      </v-icon>
+      <v-progress-circular
+        v-else
+        indeterminate
+        color="white"
+        large
+        class="mr-2"
+      >
+      </v-progress-circular>
+      <v-toolbar-title class="headline"> Login </v-toolbar-title>
+
+      <v-spacer></v-spacer>
+    </v-app-bar>
+
+    <v-card-text>
+      <v-form>
+        <v-text-field
+          v-if="!options.isLoggingIn"
+          v-model="user.name"
+          light="light"
+          prepend-icon="person"
+          :label="$t('general.name')"
+        ></v-text-field>
+        <v-text-field
+          v-model="user.email"
+          light="light"
+          prepend-icon="mdi-email"
+          validate-on-blur
+          :label="$t('login.email')"
+          type="email"
+        ></v-text-field>
+        <v-text-field
+          v-model="user.password"
+          light="light"
+          prepend-icon="mdi-lock"
+          :label="$t('login.password')"
+          :type="showPassword ? 'text' : 'password'"
+          :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+          @click:append="showPassword = !showPassword"
+        ></v-text-field>
+        <v-checkbox
+          class="mb-2 mt-0"
+          v-if="options.isLoggingIn"
+          v-model="options.shouldStayLoggedIn"
+          light="light"
+          :label="$t('login.stay-logged-in')"
+          hide-details="hide-details"
+        ></v-checkbox>
+        <v-btn
+          v-if="options.isLoggingIn"
+          @click.prevent="login"
+          dark
+          color="primary"
+          block="block"
+          type="submit"
+          >{{ $t("login.sign-in") }}</v-btn
         >
-        </v-progress-circular>
-        <v-toolbar-title class="headline"> Login </v-toolbar-title>
-
-        <v-spacer></v-spacer>
-      </v-app-bar>
-
-      <v-card-text>
-        <v-form>
-          <v-text-field
-            v-if="!options.isLoggingIn"
-            v-model="user.name"
-            light="light"
-            prepend-icon="person"
-            :label="$t('general.name')"
-          ></v-text-field>
-          <v-text-field
-            v-model="user.email"
-            light="light"
-            prepend-icon="mdi-email"
-            validate-on-blur
-            :label="$t('login.email')"
-            type="email"
-          ></v-text-field>
-          <v-text-field
-            v-model="user.password"
-            light="light"
-            prepend-icon="mdi-lock"
-            :label="$t('login.password')"
-            :type="showPassword ? 'text' : 'password'"
-            :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-            @click:append="showPassword = !showPassword"
-          ></v-text-field>
-          <v-checkbox
-            class="mb-2 mt-0"
-            v-if="options.isLoggingIn"
-            v-model="options.shouldStayLoggedIn"
-            light="light"
-            :label="$t('login.stay-logged-in')"
-            hide-details="hide-details"
-          ></v-checkbox>
-          <v-btn
-            v-if="options.isLoggingIn"
-            @click.prevent="login"
-            dark
-            color="primary"
-            block="block"
-            type="submit"
-            >{{ $t("login.sign-in") }}</v-btn
-          >
-          <v-btn
-            v-else
-            block="block"
-            type="submit"
-            @click.prevent="options.isLoggingIn = true"
-            >{{ $t("login.sign-up") }}</v-btn
-          >
-        </v-form>
-        <v-alert v-if="error" outlined class="mt-3 mb-0" type="error">
-          Could Not Validate Credentials
-        </v-alert>
-      </v-card-text>
-      <!-- <v-card-actions v-if="options.isLoggingIn" class="card-actions">
+        <v-btn
+          v-else
+          block="block"
+          type="submit"
+          @click.prevent="options.isLoggingIn = true"
+          >{{ $t("login.sign-up") }}</v-btn
+        >
+      </v-form>
+      <v-alert v-if="error" outlined class="mt-3 mb-0" type="error">
+        Could Not Validate Credentials
+      </v-alert>
+    </v-card-text>
+    <!-- <v-card-actions v-if="options.isLoggingIn" class="card-actions">
         <div>
           Don't have an account?
         </div>
@@ -87,8 +86,7 @@
           Sign up
         </v-btn>
       </v-card-actions> -->
-    </v-card>
-  </div>
+  </v-card>
 </template>
 
 <script>
@@ -129,12 +127,14 @@ export default {
       } catch {
         this.error = true;
       }
-      if (key.status != 200) this.error = true;
-      else {
-        this.$emit("logged-in");
+      if (key.status != 200) {
+        this.error = true;
+        this.loading = false;
+      } else {
         this.clear();
+        this.$store.commit("setToken", key.data.access_token);
+        this.$emit("logged-in");
       }
-      this.$store.commit("setToken", key.data.access_token);
 
       let user = await api.users.self();
       this.$store.commit("setUserData", user);
diff --git a/frontend/src/components/MealPlan/MealPlanNew.vue b/frontend/src/components/MealPlan/MealPlanNew.vue
index c5ec0d8b7..988e38465 100644
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/frontend/src/components/MealPlan/MealPlanNew.vue
@@ -76,7 +76,6 @@
         <v-btn color="success" @click="save" text :disabled="meals.length == 0">
           {{ $t("general.save") }}
         </v-btn>
-
       </v-card-actions>
     </v-row>
   </v-card>
@@ -118,6 +117,7 @@ export default {
   },
   async mounted() {
     let settings = await api.settings.requestAll();
+    console.log("Settings", settings.planCategories);
     this.items = await api.recipes.getAllByCategory(settings.planCategories);
   },
 
diff --git a/frontend/src/pages/404Page.vue b/frontend/src/pages/404Page.vue
index f36fdc917..0b31adbfb 100644
--- a/frontend/src/pages/404Page.vue
+++ b/frontend/src/pages/404Page.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center">
+  <v-container class="text-center">
     <v-row>
       <v-col cols="2"></v-col>
       <v-col>
@@ -12,7 +12,7 @@
       </v-col>
       <v-col cols="2"></v-col>
     </v-row>
-  </div>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/pages/Admin/index.vue b/frontend/src/pages/Admin/index.vue
index 5f0528fca..6c0f2483f 100644
--- a/frontend/src/pages/Admin/index.vue
+++ b/frontend/src/pages/Admin/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-container>
     <AdminSidebar />
     <v-slide-x-transition hide-on-leave>
       <router-view></router-view>
@@ -23,7 +23,7 @@
         </a>
       </v-col>
     </v-footer> -->
-  </div>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/pages/AllRecipesPage.vue b/frontend/src/pages/AllRecipesPage.vue
index 7df8c422a..9989769f2 100644
--- a/frontend/src/pages/AllRecipesPage.vue
+++ b/frontend/src/pages/AllRecipesPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-container>
     <CategorySidebar />
     <CardSection
       :sortable="true"
@@ -9,7 +9,7 @@
       @sort="sortAZ"
       @sort-recent="sortRecent"
     />
-  </div>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/pages/CategoryPage.vue b/frontend/src/pages/CategoryPage.vue
index 7b1c50456..bbc1c19e1 100644
--- a/frontend/src/pages/CategoryPage.vue
+++ b/frontend/src/pages/CategoryPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-container>
     <CategorySidebar />
     <CardSection
       :sortable="true"
@@ -9,7 +9,7 @@
       @sort="sortAZ"
       @sort-recent="sortRecent"
     />
-  </div>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/pages/Debug.vue b/frontend/src/pages/Debug.vue
index 14711b2f7..da7658645 100644
--- a/frontend/src/pages/Debug.vue
+++ b/frontend/src/pages/Debug.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <v-container>
     <LastRecipe />
     <LogFile class="mt-2" />
-  </div>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index 3b14ac1a5..2ad542734 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-container>
     <CategorySidebar />
     <CardSection
       v-if="showRecent"
@@ -17,7 +17,7 @@
       @sort="sortAZ(index)"
       @sort-recent="sortRecent(index)"
     />
-  </div>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index 3d8da7d63..b1c62f769 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -1,9 +1,12 @@
 <template>
-  <v-row justify="start" height="100%">
-    <v-col align="center">
-      <LoginForm />
-    </v-col>
-  </v-row>
+  <v-container fill-height class="text-center">
+    <v-row>
+      <v-flex class="d-flex justify-center" width="500px">
+        <LoginForm @logged-in="redirectMe" class="ma-1" />
+      </v-flex>
+    </v-row>
+    <v-row></v-row>
+  </v-container>
 </template>
 
 <script>
@@ -12,6 +15,25 @@ export default {
   components: {
     LoginForm,
   },
+  computed: {
+    viewScale() {
+      switch (this.$vuetify.breakpoint.name) {
+        case "xs":
+          return true;
+        case "sm":
+          return true;
+        default:
+          return false;
+      }
+    },
+  },
+  methods: {
+    redirectMe() {
+      if (this.$route.query.redirect) {
+        this.$router.push(this.$route.query.redirect);
+      } else this.$router.push({ path: "/" });
+    },
+  },
 };
 </script>
 
diff --git a/frontend/src/pages/MealPlanPage.vue b/frontend/src/pages/MealPlanPage.vue
index eb87f34b7..864480745 100644
--- a/frontend/src/pages/MealPlanPage.vue
+++ b/frontend/src/pages/MealPlanPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-container>
     <EditPlan
       v-if="editMealPlan"
       :meal-plan="editMealPlan"
@@ -25,8 +25,8 @@
       >
         <v-card class="mt-1">
           <v-card-title>
-            {{ $d( new Date(mealplan.startDate), 'short' ) }} -
-            {{ $d( new Date(mealplan.endDate), 'short' ) }}
+            {{ $d(new Date(mealplan.startDate), "short") }} -
+            {{ $d(new Date(mealplan.endDate), "short") }}
           </v-card-title>
           <v-list nav>
             <v-list-item-group color="primary">
@@ -43,7 +43,9 @@
                 </v-list-item-avatar>
                 <v-list-item-content>
                   <v-list-item-title v-text="meal.name"></v-list-item-title>
-                  <v-list-item-subtitle v-text="$d( new Date(meal.date), 'short' )" >
+                  <v-list-item-subtitle
+                    v-text="$d(new Date(meal.date), 'short')"
+                  >
                   </v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>
@@ -79,7 +81,7 @@
         </v-card>
       </v-col>
     </v-row>
-  </div>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/pages/RecipeNewPage.vue b/frontend/src/pages/RecipeNewPage.vue
index a6d4b93eb..4af1f9474 100644
--- a/frontend/src/pages/RecipeNewPage.vue
+++ b/frontend/src/pages/RecipeNewPage.vue
@@ -1,41 +1,43 @@
 <template>
-  <v-card :loading="isLoading">
-    <v-img v-if="image" height="400" :src="image">
-      <template v-slot:placeholder>
-        <v-row class="fill-height ma-0" align="center" justify="center">
-          <v-progress-circular
-            indeterminate
-            color="grey lighten-5"
-          ></v-progress-circular>
-        </v-row>
-      </template>
-    </v-img>
-    <br v-else />
+  <v-container>
+    <v-card :loading="isLoading">
+      <v-img v-if="image" height="400" :src="image">
+        <template v-slot:placeholder>
+          <v-row class="fill-height ma-0" align="center" justify="center">
+            <v-progress-circular
+              indeterminate
+              color="grey lighten-5"
+            ></v-progress-circular>
+          </v-row>
+        </template>
+      </v-img>
+      <br v-else />
 
-    <EditorButtonRow
-      @json="jsonEditor = true"
-      @editor="jsonEditor = false"
-      @save="createRecipe"
-    />
-
-    <div v-if="jsonEditor">
-      <!-- Probably not the best way, but it works! -->
-      <br />
-      <br />
-      <VJsoneditor
-        v-model="recipeDetails"
-        height="1500px"
-        :options="jsonEditorOptions"
+      <EditorButtonRow
+        @json="jsonEditor = true"
+        @editor="jsonEditor = false"
+        @save="createRecipe"
       />
-    </div>
 
-    <RecipeEditor
-      ref="recipeEditor"
-      v-else
-      v-model="recipeDetails"
-      @upload="getImage"
-    />
-  </v-card>
+      <div v-if="jsonEditor">
+        <!-- Probably not the best way, but it works! -->
+        <br />
+        <br />
+        <VJsoneditor
+          v-model="recipeDetails"
+          height="1500px"
+          :options="jsonEditorOptions"
+        />
+      </div>
+
+      <RecipeEditor
+        ref="recipeEditor"
+        v-else
+        v-model="recipeDetails"
+        @upload="getImage"
+      />
+    </v-card>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/pages/RecipePage.vue b/frontend/src/pages/RecipePage.vue
index 90bc18fd7..ab0967a96 100644
--- a/frontend/src/pages/RecipePage.vue
+++ b/frontend/src/pages/RecipePage.vue
@@ -1,58 +1,60 @@
 <template>
-  <v-card id="myRecipe">
-    <v-img
-      height="400"
-      :src="getImage(recipeDetails.image)"
-      class="d-print-none"
-      :key="imageKey"
-    >
-      <RecipeTimeCard
-        class="force-bottom"
-        :prepTime="recipeDetails.prepTime"
-        :totalTime="recipeDetails.totalTime"
-        :performTime="recipeDetails.performTime"
+  <v-container>
+    <v-card id="myRecipe">
+      <v-img
+        height="400"
+        :src="getImage(recipeDetails.image)"
+        class="d-print-none"
+        :key="imageKey"
+      >
+        <RecipeTimeCard
+          class="force-bottom"
+          :prepTime="recipeDetails.prepTime"
+          :totalTime="recipeDetails.totalTime"
+          :performTime="recipeDetails.performTime"
+        />
+      </v-img>
+      <EditorButtonRow
+        :open="showIcons"
+        @json="jsonEditor = true"
+        @editor="
+          jsonEditor = false;
+          form = true;
+        "
+        @save="saveRecipe"
+        @delete="deleteRecipe"
+        class="sticky"
       />
-    </v-img>
-    <EditorButtonRow
-      :open="showIcons"
-      @json="jsonEditor = true"
-      @editor="
-        jsonEditor = false;
-        form = true;
-      "
-      @save="saveRecipe"
-      @delete="deleteRecipe"
-      class="sticky"
-    />
 
-    <RecipeViewer
-      v-if="!form"
-      :name="recipeDetails.name"
-      :ingredients="recipeDetails.recipeIngredient"
-      :description="recipeDetails.description"
-      :instructions="recipeDetails.recipeInstructions"
-      :tags="recipeDetails.tags"
-      :categories="recipeDetails.categories"
-      :notes="recipeDetails.notes"
-      :rating="recipeDetails.rating"
-      :yields="recipeDetails.recipeYield"
-      :orgURL="recipeDetails.orgURL"
-    />
-    <VJsoneditor
-      @error="logError()"
-      class="mt-10"
-      v-else-if="showJsonEditor"
-      v-model="recipeDetails"
-      height="1500px"
-      :options="jsonEditorOptions"
-    />
-    <RecipeEditor
-      v-else
-      v-model="recipeDetails"
-      ref="recipeEditor"
-      @upload="getImageFile"
-    />
-  </v-card>
+      <RecipeViewer
+        v-if="!form"
+        :name="recipeDetails.name"
+        :ingredients="recipeDetails.recipeIngredient"
+        :description="recipeDetails.description"
+        :instructions="recipeDetails.recipeInstructions"
+        :tags="recipeDetails.tags"
+        :categories="recipeDetails.categories"
+        :notes="recipeDetails.notes"
+        :rating="recipeDetails.rating"
+        :yields="recipeDetails.recipeYield"
+        :orgURL="recipeDetails.orgURL"
+      />
+      <VJsoneditor
+        @error="logError()"
+        class="mt-10"
+        v-else-if="showJsonEditor"
+        v-model="recipeDetails"
+        height="1500px"
+        :options="jsonEditorOptions"
+      />
+      <RecipeEditor
+        v-else
+        v-model="recipeDetails"
+        ref="recipeEditor"
+        @upload="getImageFile"
+      />
+    </v-card>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/pages/SearchPage.vue b/frontend/src/pages/SearchPage.vue
index faeb813b5..77f6b6d66 100644
--- a/frontend/src/pages/SearchPage.vue
+++ b/frontend/src/pages/SearchPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-container>
     <v-row justify="center">
       <v-col cols="1"> </v-col>
       <v-col>
@@ -30,7 +30,7 @@
         />
       </v-col>
     </v-row>
-  </div>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/routes/admin.js b/frontend/src/routes/admin.js
index ee7f47e24..e7637007b 100644
--- a/frontend/src/routes/admin.js
+++ b/frontend/src/routes/admin.js
@@ -6,10 +6,16 @@ import Migration from "@/pages/Admin/Migration";
 import Profile from "@/pages/Admin/Profile";
 import ManageUsers from "@/pages/Admin/ManageUsers";
 import Settings from "@/pages/Admin/Settings";
+import { store } from "../store";
 
 export default {
   path: "/admin",
   component: Admin,
+  beforeEnter: (to, _from, next) => {
+    if (store.getters.getIsLoggedIn) {
+      next();
+    } else next({ path: "/login", query: { redirect: to.fullPath } });
+  },
   children: [
     {
       path: "",
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 37b105c35..9abdb83cd 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -1,6 +1,3 @@
-// import utils from "@/utils";
-// import Vue from "vue";
-// import Vuetify from "./plugins/vuetify";
 import { vueApp } from "../main";
 
 
diff --git a/mealie/routes/recipe/all_recipe_routes.py b/mealie/routes/recipe/all_recipe_routes.py
index 5e3c7ab87..38d90928e 100644
--- a/mealie/routes/recipe/all_recipe_routes.py
+++ b/mealie/routes/recipe/all_recipe_routes.py
@@ -79,7 +79,7 @@ def filter_by_category(categories: list, session: Session = Depends(generate_ses
     in_category = [
         db.categories.get(session, slugify(cat), limit=1) for cat in categories
     ]
-    in_category = [cat.get("recipes") for cat in in_category]
+    in_category = [cat.get("recipes") for cat in in_category if cat]
     in_category = [item for sublist in in_category for item in sublist]
     return in_category