login form refactor/split v-container

frontend/src/App.vue

@@ -31,10 +31,8 @@
       <LanguageMenu />
     </v-app-bar>
     <v-main>
-      <v-container>
       <AddRecipeFab />
         <router-view></router-view>
-      </v-container>
       <FlashMessage :position="'right bottom'"></FlashMessage>
     </v-main>
   </v-app>

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) {

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>

frontend/src/components/Login/LoginForm.vue

@@ -1,8 +1,7 @@
 <template>
-  <div>
-    <v-card max-width="500px">
+  <v-card width="500px">
     <v-divider></v-divider>
-      <v-app-bar dark color="primary mt-n1">
+    <v-app-bar  dark color="primary" class="mt-n1">
       <v-icon large left v-if="!loading">
         mdi-account
       </v-icon>
@@ -88,7 +87,6 @@
         </v-btn>
       </v-card-actions> -->
   </v-card>
-  </div>
 </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");
+      }
 
       let user = await api.users.self();
       this.$store.commit("setUserData", user);

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);
   },
 

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>

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>

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>

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>

frontend/src/pages/Debug.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <v-container>
     <LastRecipe />
     <LogFile class="mt-2" />
-  </div>
+  </v-container>
 </template>
 
 <script>

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>

frontend/src/pages/LoginPage.vue

@@ -1,9 +1,12 @@
 <template>
-  <v-row justify="start" height="100%">
-    <v-col align="center">
-      <LoginForm />
-    </v-col>
+  <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>
 

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>

frontend/src/pages/RecipeNewPage.vue

@@ -1,4 +1,5 @@
 <template>
+  <v-container>
     <v-card :loading="isLoading">
       <v-img v-if="image" height="400" :src="image">
         <template v-slot:placeholder>
@@ -36,6 +37,7 @@
         @upload="getImage"
       />
     </v-card>
+  </v-container>
 </template>
 
 <script>

frontend/src/pages/RecipePage.vue

@@ -1,4 +1,5 @@
 <template>
+  <v-container>
     <v-card id="myRecipe">
       <v-img
         height="400"
@@ -53,6 +54,7 @@
         @upload="getImageFile"
       />
     </v-card>
+  </v-container>
 </template>
 
 <script>

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>

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: "",

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";
 
 

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