From 822663905d7b44e91729676ad6b5af543d742af0 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Tue, 25 May 2021 21:01:22 -0700
Subject: [PATCH] feature/mobile-layout (#431)

* lazy load cards

* shopping list recipe search bug

* admin layout fluid

* site loader

* username support

* mobile tabs

* set username at signup

* update user tests

* patch bug on shopping list

* public mealplan links

* support link (I'm a monster)

* icon only on mobile

* padding

Co-authored-by: hay-kot <hay-kot@pm.me>
---
 frontend/src/api/mealplan.js                  |  6 ++
 .../components/ImportSummaryDialog/index.vue  |  2 +-
 frontend/src/components/Login/LoginForm.vue   |  2 +-
 frontend/src/components/Login/SignUpForm.vue  | 12 +++-
 .../components/UI/Buttons/TheCopyButton.vue   |  2 +-
 frontend/src/components/UI/CardSection.vue    | 63 +++++++++----------
 .../components/UI/Dialogs/SearchDialog.vue    | 41 +++++++-----
 frontend/src/components/UI/SiteLoader.vue     | 25 ++++++++
 frontend/src/components/UI/TheAppBar.vue      |  9 +--
 frontend/src/components/UI/TheSidebar.vue     |  8 +++
 frontend/src/locales/messages/en-US.json      |  1 +
 frontend/src/pages/Admin/About/index.vue      | 28 +++++++++
 .../pages/Admin/ManageUsers/TheUserTable.vue  |  1 +
 .../src/pages/Admin/ManageUsers/index.vue     |  2 +-
 .../pages/Admin/Migration/MigrationDialog.vue |  2 +-
 frontend/src/pages/Admin/Profile/UserCard.vue | 13 +++-
 frontend/src/pages/Admin/ToolBox/index.vue    |  2 +-
 frontend/src/pages/Admin/index.vue            | 12 ++--
 frontend/src/pages/MealPlan/Planner.vue       |  8 ++-
 frontend/src/pages/MealPlan/ThisWeek.vue      | 13 +++-
 frontend/src/pages/Recipes/AllRecipes.vue     |  6 +-
 frontend/src/pages/Recipes/CustomPage.vue     |  2 +-
 frontend/src/pages/ShoppingList/index.vue     | 32 +++++-----
 frontend/src/routes/admin.js                  | 16 ++---
 frontend/src/routes/meal.js                   |  7 +++
 frontend/src/routes/recipes.js                | 10 +--
 frontend/src/store/modules/recipes.js         |  1 +
 mealie/core/security.py                       |  5 ++
 mealie/db/models/users.py                     | 25 ++++----
 mealie/routes/mealplans/crud.py               | 10 +++
 mealie/routes/users/auth.py                   |  4 +-
 mealie/schema/user.py                         |  2 +
 tests/integration_tests/test_user_routes.py   | 20 +++++-
 33 files changed, 273 insertions(+), 119 deletions(-)
 create mode 100644 frontend/src/components/UI/SiteLoader.vue

diff --git a/frontend/src/api/mealplan.js b/frontend/src/api/mealplan.js
index 4d396a1cf..5296b694d 100644
--- a/frontend/src/api/mealplan.js
+++ b/frontend/src/api/mealplan.js
@@ -9,6 +9,7 @@ const mealPlanURLs = {
   all: `${prefix}all`,
   create: `${prefix}create`,
   thisWeek: `${prefix}this-week`,
+  byId: planID => `${prefix}${planID}`,
   update: planID => `${prefix}${planID}`,
   delete: planID => `${prefix}${planID}`,
   today: `${prefix}today`,
@@ -40,6 +41,11 @@ export const mealplanAPI = {
     return response;
   },
 
+  async getById(id) {
+    let response = await apiReq.get(mealPlanURLs.byId(id));
+    return response.data;
+  },
+
   delete(id) {
     return apiReq.delete(
       mealPlanURLs.delete(id),
diff --git a/frontend/src/components/ImportSummaryDialog/index.vue b/frontend/src/components/ImportSummaryDialog/index.vue
index aa816aa41..608d9953e 100644
--- a/frontend/src/components/ImportSummaryDialog/index.vue
+++ b/frontend/src/components/ImportSummaryDialog/index.vue
@@ -24,7 +24,7 @@
             </div>
           </v-row>
         </v-card-text>
-        <v-tabs v-model="tab">
+        <v-tabs v-model="tab" show-arrows="">
           <v-tab>{{ $t("general.recipes") }}</v-tab>
           <v-tab>{{ $t("general.themes") }}</v-tab>
           <v-tab>{{ $t("general.settings") }}</v-tab>
diff --git a/frontend/src/components/Login/LoginForm.vue b/frontend/src/components/Login/LoginForm.vue
index 2499457e6..63f9654fb 100644
--- a/frontend/src/components/Login/LoginForm.vue
+++ b/frontend/src/components/Login/LoginForm.vue
@@ -22,7 +22,7 @@
           v-model="user.email"
           prepend-icon="mdi-email"
           validate-on-blur
-          :label="$t('user.email')"
+          :label="`${$t('user.email')} or ${$t('user.username')} `"
           type="email"
         ></v-text-field>
         <v-text-field
diff --git a/frontend/src/components/Login/SignUpForm.vue b/frontend/src/components/Login/SignUpForm.vue
index c8904594a..e2f1110c1 100644
--- a/frontend/src/components/Login/SignUpForm.vue
+++ b/frontend/src/components/Login/SignUpForm.vue
@@ -21,8 +21,15 @@
           :prepend-icon="$globals.icons.user"
           validate-on-blur
           :rules="[existsRule]"
-          :label="$t('signup.display-name')"
-          type="email"
+          :label="$t('user.full-name')"
+        ></v-text-field>
+        <v-text-field
+          v-model="user.username"
+          light="light"
+          :prepend-icon="$globals.icons.user"
+          validate-on-blur
+          :rules="[existsRule]"
+          :label="$t('user.username')"
         ></v-text-field>
         <v-text-field
           v-model="user.email"
@@ -111,6 +118,7 @@ export default {
 
       const userData = {
         fullName: this.user.name,
+        username: this.user.username,
         email: this.user.email,
         group: "default",
         password: this.user.password,
diff --git a/frontend/src/components/UI/Buttons/TheCopyButton.vue b/frontend/src/components/UI/Buttons/TheCopyButton.vue
index 6633eda71..aa8eb557e 100644
--- a/frontend/src/components/UI/Buttons/TheCopyButton.vue
+++ b/frontend/src/components/UI/Buttons/TheCopyButton.vue
@@ -27,7 +27,7 @@
       <v-icon left dark>
         mdi-clipboard-check
       </v-icon>
-      {{ $t("general.coppied") }}!
+      <slot> {{ $t("general.coppied") }}! </slot>
     </span>
   </v-tooltip>
 </template>
diff --git a/frontend/src/components/UI/CardSection.vue b/frontend/src/components/UI/CardSection.vue
index 54ceb4c84..5c80074d8 100644
--- a/frontend/src/components/UI/CardSection.vue
+++ b/frontend/src/components/UI/CardSection.vue
@@ -1,24 +1,24 @@
 <template>
   <div v-if="recipes">
-    <v-app-bar color="transparent" flat class="mt-n1 rounded" v-if="!disableToolbar">
+    <v-app-bar color="transparent" flat class="mt-n1 flex-sm-wrap  rounded " v-if="!disableToolbar">
       <v-icon large left v-if="title">
         {{ displayTitleIcon }}
       </v-icon>
       <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
       <v-spacer></v-spacer>
-      <v-btn text @click="navigateRandom">
-        <v-icon left>
+      <v-btn :icon="$vuetify.breakpoint.xsOnly" text @click="navigateRandom">
+        <v-icon :left="!$vuetify.breakpoint.xsOnly">
           mdi-dice-multiple
         </v-icon>
-        {{ $t("general.random") }}
+        {{ $vuetify.breakpoint.xsOnly ? null : $t("general.random") }}
       </v-btn>
       <v-menu offset-y left v-if="$listeners.sort">
         <template v-slot:activator="{ on, attrs }">
-          <v-btn text v-bind="attrs" v-on="on" :loading="sortLoading">
-            <v-icon left>
+          <v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on" :loading="sortLoading">
+            <v-icon :left="!$vuetify.breakpoint.xsOnly">
               mdi-sort
             </v-icon>
-            {{ $t("general.sort") }}
+            {{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
           </v-btn>
         </template>
         <v-list>
@@ -58,14 +58,16 @@
     <div v-if="recipes" class="mt-2">
       <v-row v-if="!viewScale">
         <v-col :sm="6" :md="6" :lg="4" :xl="3" v-for="recipe in recipes.slice(0, cardLimit)" :key="recipe.name">
-          <RecipeCard
-            :name="recipe.name"
-            :description="recipe.description"
-            :slug="recipe.slug"
-            :rating="recipe.rating"
-            :image="recipe.image"
-            :tags="recipe.tags"
-          />
+          <v-lazy>
+            <RecipeCard
+              :name="recipe.name"
+              :description="recipe.description"
+              :slug="recipe.slug"
+              :rating="recipe.rating"
+              :image="recipe.image"
+              :tags="recipe.tags"
+            />
+          </v-lazy>
         </v-col>
       </v-row>
       <v-row v-else dense>
@@ -78,33 +80,29 @@
           v-for="recipe in recipes.slice(0, cardLimit)"
           :key="recipe.name"
         >
-          <MobileRecipeCard
-            :name="recipe.name"
-            :description="recipe.description"
-            :slug="recipe.slug"
-            :rating="recipe.rating"
-            :image="recipe.image"
-            :tags="recipe.tags"
-          />
+          <v-lazy>
+            <MobileRecipeCard
+              :name="recipe.name"
+              :description="recipe.description"
+              :slug="recipe.slug"
+              :rating="recipe.rating"
+              :image="recipe.image"
+              :tags="recipe.tags"
+            />
+          </v-lazy>
         </v-col>
       </v-row>
     </div>
     <div v-intersect="bumpList" class="d-flex">
       <v-expand-x-transition>
-        <v-progress-circular
-          v-if="loading"
-          class="mx-auto mt-1"
-          :size="50"
-          :width="7"
-          color="primary"
-          indeterminate
-        ></v-progress-circular>
+        <SiteLoader v-if="loading" :loading="loading" :size="150" />
       </v-expand-x-transition>
     </div>
   </div>
 </template>
 
 <script>
+import SiteLoader from "@/components/UI/SiteLoader";
 import RecipeCard from "../Recipe/RecipeCard";
 import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
 import { utils } from "@/utils";
@@ -114,6 +112,7 @@ export default {
   components: {
     RecipeCard,
     MobileRecipeCard,
+    SiteLoader,
   },
   props: {
     disableToolbar: {
@@ -139,7 +138,7 @@ export default {
   data() {
     return {
       sortLoading: false,
-      cardLimit: 30,
+      cardLimit: 50,
       loading: false,
       EVENTS: {
         az: "az",
diff --git a/frontend/src/components/UI/Dialogs/SearchDialog.vue b/frontend/src/components/UI/Dialogs/SearchDialog.vue
index e77e88a00..d1bf0e4c1 100644
--- a/frontend/src/components/UI/Dialogs/SearchDialog.vue
+++ b/frontend/src/components/UI/Dialogs/SearchDialog.vue
@@ -43,25 +43,31 @@
           </div>
           <router-link to="/search"> Advanced Search </router-link>
         </v-card-actions>
-        <MobileRecipeCard
-          v-for="(recipe, index) in results.slice(0, 10)"
-          :tabindex="index"
-          :key="index"
-          class="ma-1 arrow-nav"
-          :name="recipe.name"
-          :description="recipe.description"
-          :slug="recipe.slug"
-          :rating="recipe.rating"
-          :image="recipe.image"
-          :route="true"
-          v-on="$listeners.selected ? { selected: () => grabRecipe(recipe) } : {}"
-        />
+        <v-card-actions v-if="loading">
+          <SiteLoader :loading="loading" />
+        </v-card-actions>
+        <div v-else>
+          <MobileRecipeCard
+            v-for="(recipe, index) in results.slice(0, 10)"
+            :tabindex="index"
+            :key="index"
+            class="ma-1 arrow-nav"
+            :name="recipe.name"
+            :description="recipe.description"
+            :slug="recipe.slug"
+            :rating="recipe.rating"
+            :image="recipe.image"
+            :route="true"
+            v-on="$listeners.selected ? { selected: () => grabRecipe(recipe) } : {}"
+          />
+        </div>
       </v-card>
     </v-dialog>
   </div>
 </template>
 
 <script>
+import SiteLoader from "@/components/UI/SiteLoader";
 const SELECTED_EVENT = "selected";
 import FuseSearchBar from "@/components/UI/Search/FuseSearchBar";
 import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
@@ -69,9 +75,11 @@ export default {
   components: {
     FuseSearchBar,
     MobileRecipeCard,
+    SiteLoader,
   },
   data() {
     return {
+      loading: false,
       selectedIndex: -1,
       dialog: false,
       searchString: "",
@@ -82,14 +90,17 @@ export default {
     $route() {
       this.dialog = false;
     },
-    dialog(val) {
+    async dialog(val) {
       if (!val) {
         this.resetSelected();
+      } else if (this.allItems.length <= 0) {
+        this.loading = true;
+        await this.$store.dispatch("requestAllRecipes");
+        this.loading = false;
       }
     },
   },
   mounted() {
-    this.$store.dispatch("requestAllRecipes");
     document.addEventListener("keydown", this.onUpDown);
   },
   beforeDestroy() {
diff --git a/frontend/src/components/UI/SiteLoader.vue b/frontend/src/components/UI/SiteLoader.vue
new file mode 100644
index 000000000..cc8e92e6f
--- /dev/null
+++ b/frontend/src/components/UI/SiteLoader.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-progress-circular class="mx-auto" :width="size / 20" :size="size" color="primary lighten-2" indeterminate>
+    <div class="text-center">
+      <v-icon :size="size / 2" color="primary lighten-2">
+        {{ $globals.icons.primary }}
+      </v-icon>
+      <div>
+        Loading Recipes
+      </div>
+    </div>
+  </v-progress-circular>
+</template>
+
+<script>
+export default {
+  props: {
+    loading: {
+      default: true,
+    },
+    size: {
+      default: 200,
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/UI/TheAppBar.vue b/frontend/src/components/UI/TheAppBar.vue
index 74ba24f22..2e6593e53 100644
--- a/frontend/src/components/UI/TheAppBar.vue
+++ b/frontend/src/components/UI/TheAppBar.vue
@@ -18,12 +18,9 @@
       </div>
 
       <v-spacer></v-spacer>
-      <SearchBar
-        v-if="!isMobile"
-        :show-results="true"
-        @selected="navigateFromSearch"
-        :max-width="isMobile ? '100%' : '450px'"
-      />
+      <div v-if="!isMobile" style="width: 350px;">
+        <SearchBar :show-results="true" @selected="navigateFromSearch" :max-width="isMobile ? '100%' : '450px'" />
+      </div>
       <div v-else>
         <v-btn icon @click="$refs.recipeSearch.open()">
           <v-icon> mdi-magnify </v-icon>
diff --git a/frontend/src/components/UI/TheSidebar.vue b/frontend/src/components/UI/TheSidebar.vue
index 100739ef7..adc67e5c6 100644
--- a/frontend/src/components/UI/TheSidebar.vue
+++ b/frontend/src/components/UI/TheSidebar.vue
@@ -29,6 +29,14 @@
 
       <!-- Version List Item -->
       <v-list nav dense class="fixedBottom" v-if="!isMain">
+        <v-list-item href="https://github.com/sponsors/hay-kot" target="_target">
+          <v-list-item-icon >
+            <v-icon color="pink">
+              mdi-heart
+            </v-icon>
+          </v-list-item-icon>
+          <v-list-item-title> Support </v-list-item-title>
+        </v-list-item>
         <v-list-item to="/admin/about">
           <v-list-item-icon class="mr-3 pt-1">
             <v-icon :color="newVersionAvailable ? 'red--text' : ''">
diff --git a/frontend/src/locales/messages/en-US.json b/frontend/src/locales/messages/en-US.json
index 85886f1a1..b8b6914ff 100644
--- a/frontend/src/locales/messages/en-US.json
+++ b/frontend/src/locales/messages/en-US.json
@@ -377,6 +377,7 @@
     "untagged-count": "Untagged {count}"
   },
   "user": {
+    "username": "Username",
     "admin": "Admin",
     "are-you-sure-you-want-to-delete-the-link": "Are you sure you want to delete the link <b>{link}<b/>?",
     "are-you-sure-you-want-to-delete-the-user": "Are you sure you want to delete the user <b>{activeName} ID: {activeId}<b/>?",
diff --git a/frontend/src/pages/Admin/About/index.vue b/frontend/src/pages/Admin/About/index.vue
index eabfcc7fb..be086065c 100644
--- a/frontend/src/pages/Admin/About/index.vue
+++ b/frontend/src/pages/Admin/About/index.vue
@@ -1,5 +1,33 @@
 <template>
   <div>
+    <v-app-bar color="primary">
+      <v-spacer></v-spacer>
+      <v-btn href="https://github.com/sponsors/hay-kot" target="_blank" class="mx-1" color="secondary">
+        <v-icon left>
+          mdi-heart
+        </v-icon>
+        Support
+      </v-btn>
+      <v-btn href="https://github.com/hay-kot" target="_blank" class="mx-1" color="secondary">
+        <v-icon left>
+          mdi-github
+        </v-icon>
+        Github
+      </v-btn>
+      <v-btn href="https://hay-kot.dev" target="_blank" class="mx-1" color="secondary">
+        <v-icon left>
+          mdi-account
+        </v-icon>
+        Portfolio
+      </v-btn>
+      <v-btn href="https://hay-kot.github.io/mealie/" target="_blank" class="mx-1" color="secondary">
+        <v-icon left>
+          mdi-folder-outline
+        </v-icon>
+        Docs
+      </v-btn>
+      <v-spacer></v-spacer>
+    </v-app-bar>
     <v-card class="mt-3">
       <v-card-title class="headline">
         {{ $t("about.about-mealie") }}
diff --git a/frontend/src/pages/Admin/ManageUsers/TheUserTable.vue b/frontend/src/pages/Admin/ManageUsers/TheUserTable.vue
index bbca28242..7d295c483 100644
--- a/frontend/src/pages/Admin/ManageUsers/TheUserTable.vue
+++ b/frontend/src/pages/Admin/ManageUsers/TheUserTable.vue
@@ -155,6 +155,7 @@ export default {
           sortable: false,
           value: "id",
         },
+        { text: this.$t("user.username"), value: "username" },
         { text: this.$t("user.full-name"), value: "fullName" },
         { text: this.$t("user.email"), value: "email" },
         { text: this.$t("group.group"), value: "group" },
diff --git a/frontend/src/pages/Admin/ManageUsers/index.vue b/frontend/src/pages/Admin/ManageUsers/index.vue
index 375ef36a6..1589131d0 100644
--- a/frontend/src/pages/Admin/ManageUsers/index.vue
+++ b/frontend/src/pages/Admin/ManageUsers/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-card flat>
-      <v-tabs v-model="tab" background-color="primary" centered dark icons-and-text>
+      <v-tabs v-model="tab" background-color="primary" centered dark icons-and-text show-arrows>
         <v-tabs-slider></v-tabs-slider>
 
         <v-tab href="#users">
diff --git a/frontend/src/pages/Admin/Migration/MigrationDialog.vue b/frontend/src/pages/Admin/Migration/MigrationDialog.vue
index 6a520bca0..69e36bea2 100644
--- a/frontend/src/pages/Admin/Migration/MigrationDialog.vue
+++ b/frontend/src/pages/Admin/Migration/MigrationDialog.vue
@@ -24,7 +24,7 @@
             </div>
           </v-row>
         </v-card-text>
-        <v-tabs v-model="tab">
+        <v-tabs v-model="tab" show-arrows="">
           <v-tab>{{ $t("general.recipes") }}</v-tab>
         </v-tabs>
         <v-tabs-items v-model="tab">
diff --git a/frontend/src/pages/Admin/Profile/UserCard.vue b/frontend/src/pages/Admin/Profile/UserCard.vue
index 73e659f0a..3d26108f5 100644
--- a/frontend/src/pages/Admin/Profile/UserCard.vue
+++ b/frontend/src/pages/Admin/Profile/UserCard.vue
@@ -67,7 +67,15 @@
     </template>
     <template v-slot:bottom>
       <v-card-text>
-        <v-form>
+        <v-form ref="userUpdate">
+          <v-text-field
+            :label="$t('user.username')"
+            required
+            v-model="user.username"
+            :rules="[existsRule]"
+            validate-on-blur
+          >
+          </v-text-field>
           <v-text-field
             :label="$t('user.full-name')"
             required
@@ -151,6 +159,9 @@ export default {
       this.user.avatar = avatar;
     },
     async updateUser() {
+      if (!this.$refs.userUpdate.validate()) {
+        return;
+      }
       this.loading = true;
 
       const response = await api.users.update(this.user);
diff --git a/frontend/src/pages/Admin/ToolBox/index.vue b/frontend/src/pages/Admin/ToolBox/index.vue
index 5fd93d0b9..a66e28a6b 100644
--- a/frontend/src/pages/Admin/ToolBox/index.vue
+++ b/frontend/src/pages/Admin/ToolBox/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-card flat>
-      <v-tabs v-model="tab" background-color="primary" centered dark icons-and-text>
+      <v-tabs v-model="tab" background-color="primary" centered dark icons-and-text show-arrows>
         <v-tabs-slider></v-tabs-slider>
 
         <v-tab href="#event-notifications">
diff --git a/frontend/src/pages/Admin/index.vue b/frontend/src/pages/Admin/index.vue
index bd978f2d5..55456e5b9 100644
--- a/frontend/src/pages/Admin/index.vue
+++ b/frontend/src/pages/Admin/index.vue
@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <v-container>
-      <v-slide-x-transition hide-on-leave>
-        <router-view></router-view>
-      </v-slide-x-transition>
-    </v-container>
-  </div>
+  <v-container fluid class="pa-5">
+    <v-slide-x-transition hide-on-leave>
+      <router-view></router-view>
+    </v-slide-x-transition>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/pages/MealPlan/Planner.vue b/frontend/src/pages/MealPlan/Planner.vue
index 4b1f19095..73b916ca5 100644
--- a/frontend/src/pages/MealPlan/Planner.vue
+++ b/frontend/src/pages/MealPlan/Planner.vue
@@ -37,6 +37,8 @@
               </v-icon>
               Shopping List
             </v-btn>
+            <v-spacer></v-spacer>
+            <TheCopyButton color="info" :copy-text="mealPlanURL(mealplan.uid)"> Link Coppied </TheCopyButton>
           </v-card-actions>
 
           <v-list class="mt-0 pt-0">
@@ -84,11 +86,12 @@ import { api } from "@/api";
 import { utils } from "@/utils";
 import NewMeal from "@/components/MealPlan/MealPlanNew";
 import EditPlan from "@/components/MealPlan/MealPlanEditor";
-
+import TheCopyButton from "@/components/UI/Buttons/TheCopyButton";
 export default {
   components: {
     NewMeal,
     EditPlan,
+    TheCopyButton,
   },
   data: () => ({
     plannedMeals: [],
@@ -103,6 +106,9 @@ export default {
       this.plannedMeals = response.data;
       console.log(this.plannedMeals);
     },
+    mealPlanURL(uid) {
+      return window.location.origin + "/meal-plan?id=" + uid;
+    },
     generateKey(name, index) {
       return utils.generateUniqueKey(name, index);
     },
diff --git a/frontend/src/pages/MealPlan/ThisWeek.vue b/frontend/src/pages/MealPlan/ThisWeek.vue
index f06bf3718..648eba8bb 100644
--- a/frontend/src/pages/MealPlan/ThisWeek.vue
+++ b/frontend/src/pages/MealPlan/ThisWeek.vue
@@ -46,11 +46,20 @@ export default {
     };
   },
   async mounted() {
-    this.mealPlan = await api.mealPlans.thisWeek();
+    if (this.mealplanId) {
+      this.mealPlan = await api.mealPlans.getById(this.mealplanId);
+    } else {
+      this.mealPlan = await api.mealPlans.thisWeek();
+    }
+    console.log(this.mealPlans);
     if (!this.mealPlan) {
       utils.notify.warning(this.$t("meal-plan.no-meal-plan-defined-yet"));
     }
-    console.log(this.mealPlan);
+  },
+  computed: {
+    mealplanId() {
+      return this.$route.query.id || false;
+    },
   },
   methods: {
     getOrder(index) {
diff --git a/frontend/src/pages/Recipes/AllRecipes.vue b/frontend/src/pages/Recipes/AllRecipes.vue
index aa0fe6ea1..6e58adc13 100644
--- a/frontend/src/pages/Recipes/AllRecipes.vue
+++ b/frontend/src/pages/Recipes/AllRecipes.vue
@@ -1,6 +1,5 @@
 <template>
   <v-container>
-    <v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
     <CardSection
       title-icon=""
       :sortable="true"
@@ -8,14 +7,19 @@
       :recipes="shownRecipes"
       @sort="assignSorted"
     />
+    <v-row class="d-flex">
+      <SiteLoader class="mx-auto" v-if="loading" :loading="loading" :size="200" />
+    </v-row>
   </v-container>
 </template>
 
 <script>
+import SiteLoader from "@/components/UI/SiteLoader";
 import CardSection from "@/components/UI/CardSection";
 
 export default {
   components: {
+    SiteLoader,
     CardSection,
   },
   data() {
diff --git a/frontend/src/pages/Recipes/CustomPage.vue b/frontend/src/pages/Recipes/CustomPage.vue
index e9af6fe37..53a830d83 100644
--- a/frontend/src/pages/Recipes/CustomPage.vue
+++ b/frontend/src/pages/Recipes/CustomPage.vue
@@ -6,7 +6,7 @@
     </v-app-bar>
 
     <div v-if="render">
-      <v-tabs v-model="tab" background-color="transparent" grow>
+      <v-tabs v-model="tab" background-color="transparent" grow show-arrows="">
         <v-tab v-for="item in page.categories" :key="item.slug" :href="`#${item.slug}`">
           {{ item.name }}
         </v-tab>
diff --git a/frontend/src/pages/ShoppingList/index.vue b/frontend/src/pages/ShoppingList/index.vue
index 66667bcc4..e966205b3 100644
--- a/frontend/src/pages/ShoppingList/index.vue
+++ b/frontend/src/pages/ShoppingList/index.vue
@@ -57,7 +57,7 @@
         </v-card-title>
         <v-divider class="mx-2 mb-1"></v-divider>
 
-        <SearchDialog ref="searchRecipe" @select="importIngredients" />
+        <SearchDialog ref="searchRecipe" @selected="importIngredients" />
         <v-card-text>
           <v-row dense v-for="(item, index) in activeList.items" :key="index">
             <v-col v-if="edit" cols="12" class="d-flex no-wrap align-center">
@@ -80,7 +80,7 @@
               </v-btn>
             </v-col>
 
-            <v-col cols="12" class="d-flex no-wrap align-center">
+            <v-col cols="12" class="no-wrap align-center" :class="!edit ? 'd-flex' : null">
               <v-checkbox
                 v-if="!edit"
                 hide-details
@@ -97,18 +97,16 @@
               </v-icon>
 
               <v-lazy>
-                <div>
-                  <vue-markdown v-if="!edit" class="dense-markdown" :source="item.text"> </vue-markdown>
-                  <v-textarea
-                    single-line
-                    rows="1"
-                    auto-grow
-                    class="mb-n2 pa-0"
-                    dense
-                    v-else
-                    v-model="activeList.items[index].text"
-                  ></v-textarea>
-                </div>
+                <vue-markdown v-if="!edit" class="dense-markdown" :source="item.text"> </vue-markdown>
+                <v-textarea
+                  single-line
+                  rows="1"
+                  auto-grow
+                  class="mb-n2 pa-0"
+                  dense
+                  v-else
+                  v-model="activeList.items[index].text"
+                ></v-textarea>
               </v-lazy>
             </v-col>
             <v-divider class="ma-1"></v-divider>
@@ -137,7 +135,7 @@
 
 <script>
 import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
-import SearchDialog from "@/components/UI/Search/SearchDialog";
+import SearchDialog from "@/components/UI/Dialogs/SearchDialog";
 import TheCopyButton from "@/components/UI/Buttons/TheCopyButton";
 import VueMarkdown from "@adapttive/vue-markdown";
 import { api } from "@/api";
@@ -194,8 +192,8 @@ export default {
     openSearch() {
       this.$refs.searchRecipe.open();
     },
-    async importIngredients(_, slug) {
-      const recipe = await api.recipes.requestDetails(slug);
+    async importIngredients(selected) {
+      const recipe = await api.recipes.requestDetails(selected.slug);
 
       const ingredients = recipe.recipeIngredient.map(x => ({
         title: "",
diff --git a/frontend/src/routes/admin.js b/frontend/src/routes/admin.js
index 62e99a4c7..38f8a67df 100644
--- a/frontend/src/routes/admin.js
+++ b/frontend/src/routes/admin.js
@@ -1,11 +1,11 @@
-const Admin = () => import("@/pages/Admin");
-const Migration = () => import("@/pages/Admin/Migration");
-const Profile = () => import("@/pages/Admin/Profile");
-const ManageUsers = () => import("@/pages/Admin/ManageUsers");
-const Settings = () => import("@/pages/Admin/Settings");
-const About = () => import("@/pages/Admin/About");
-const ToolBox = () => import("@/pages/Admin/ToolBox");
-const Dashboard = () => import("@/pages/Admin/Dashboard");
+const Admin = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin");
+const Migration = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Migration");
+const Profile = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Profile");
+const ManageUsers = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/ManageUsers");
+const Settings = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Settings");
+const About = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/About");
+const ToolBox = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/ToolBox");
+const Dashboard = () => import(/* webpackChunkName: "admin" */ "@/pages/Admin/Dashboard");
 import { store } from "../store";
 
 export const adminRoutes = {
diff --git a/frontend/src/routes/meal.js b/frontend/src/routes/meal.js
index 5dfc042d7..4aca00dd8 100644
--- a/frontend/src/routes/meal.js
+++ b/frontend/src/routes/meal.js
@@ -5,6 +5,13 @@ import { utils } from "@/utils";
 import i18n from "@/i18n.js";
 
 export const mealRoutes = [
+  {
+    path: "/meal-plan",
+    component: ThisWeek,
+    meta: {
+      title: "meal-plan.dinner-this-week",
+    },
+  },
   {
     path: "/meal-plan/planner",
     component: Planner,
diff --git a/frontend/src/routes/recipes.js b/frontend/src/routes/recipes.js
index 77ae04d38..d2dcf307f 100644
--- a/frontend/src/routes/recipes.js
+++ b/frontend/src/routes/recipes.js
@@ -1,8 +1,8 @@
-const ViewRecipe = () => import("@/pages/Recipe/ViewRecipe");
-const NewRecipe = () => import("@/pages/Recipe/NewRecipe");
-const CustomPage = () => import("@/pages/Recipes/CustomPage");
-const AllRecipes = () => import("@/pages/Recipes/AllRecipes");
-const CategoryTagPage = () => import("@/pages/Recipes/CategoryTagPage");
+const ViewRecipe = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipe/ViewRecipe");
+const NewRecipe = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipe/NewRecipe");
+const CustomPage = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipes/CustomPage");
+const AllRecipes = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipes/AllRecipes");
+const CategoryTagPage = () => import(/* webpackChunkName: "recipes" */ "@/pages/Recipes/CategoryTagPage");
 import { api } from "@/api";
 
 export const recipeRoutes = [
diff --git a/frontend/src/store/modules/recipes.js b/frontend/src/store/modules/recipes.js
index f2270eb94..c9f9586be 100644
--- a/frontend/src/store/modules/recipes.js
+++ b/frontend/src/store/modules/recipes.js
@@ -41,6 +41,7 @@ const actions = {
     this.commit("setRecentRecipes", hash);
   },
   async requestAllRecipes({ getters }) {
+    console.log("All Recipes");
     const all = getters.getAllRecipes;
     const payload = await api.recipes.allSummary(all.length, 9999);
     const hash = Object.fromEntries([...all, ...payload].map(e => [e.id, e]));
diff --git a/mealie/core/security.py b/mealie/core/security.py
index 12cbe2257..a7a2d847c 100644
--- a/mealie/core/security.py
+++ b/mealie/core/security.py
@@ -28,8 +28,13 @@ def create_file_token(file_path: Path) -> bool:
 
 def authenticate_user(session, email: str, password: str) -> UserInDB:
     user: UserInDB = db.users.get(session, email, "email", any_case=True)
+
+    if not user:
+        user = db.users.get(session, email, "username", any_case=True)
     if not user:
         return False
+
+    print(user)
     if not verify_password(password, user.password):
         return False
     return user
diff --git a/mealie/db/models/users.py b/mealie/db/models/users.py
index 537b2b17a..5ab7d715c 100644
--- a/mealie/db/models/users.py
+++ b/mealie/db/models/users.py
@@ -22,6 +22,11 @@ class User(SqlAlchemyBase, BaseMixins):
     __tablename__ = "users"
     id = Column(Integer, primary_key=True)
     full_name = Column(String, index=True)
+    username = Column(
+        String,
+        index=True,
+        unique=True,
+    )
     email = Column(String, unique=True, index=True)
     password = Column(String)
     group_id = Column(Integer, ForeignKey("groups.id"))
@@ -32,16 +37,7 @@ class User(SqlAlchemyBase, BaseMixins):
     )
 
     def __init__(
-        self,
-        session,
-        full_name,
-        email,
-        password,
-        group: str = settings.DEFAULT_GROUP,
-        admin=False,
-        id=None,
-        *args,
-        **kwargs
+        self, session, full_name, email, password, group: str = settings.DEFAULT_GROUP, admin=False, **_
     ) -> None:
 
         group = group or settings.DEFAULT_GROUP
@@ -51,12 +47,19 @@ class User(SqlAlchemyBase, BaseMixins):
         self.admin = admin
         self.password = password
 
-    def update(self, full_name, email, group, admin, session=None, id=None, password=None, *args, **kwargs):
+        if self.username is None:
+            self.username = full_name
+
+    def update(self, full_name, email, group, admin, username, session=None, id=None, password=None, *args, **kwargs):
+        self.username = username
         self.full_name = full_name
         self.email = email
         self.group = Group.get_ref(session, group)
         self.admin = admin
 
+        if self.username is None:
+            self.username = full_name
+
         if password:
             self.password = password
 
diff --git a/mealie/routes/mealplans/crud.py b/mealie/routes/mealplans/crud.py
index 4e471f407..59dceb0c4 100644
--- a/mealie/routes/mealplans/crud.py
+++ b/mealie/routes/mealplans/crud.py
@@ -23,6 +23,16 @@ def get_all_meals(
     return db.groups.get_meals(session, current_user.group)
 
 
+@router.get("/{id}", response_model=MealPlanOut)
+def get_meal_plan(
+    id,
+    session: Session = Depends(generate_session),
+):
+    """ Returns a single Meal Plan from the Database """
+
+    return db.meals.get(session, id, "uid")
+
+
 @router.post("/create", status_code=status.HTTP_201_CREATED)
 def create_meal_plan(
     background_tasks: BackgroundTasks,
diff --git a/mealie/routes/users/auth.py b/mealie/routes/users/auth.py
index bfcb02982..b5b5ddb9e 100644
--- a/mealie/routes/users/auth.py
+++ b/mealie/routes/users/auth.py
@@ -23,7 +23,7 @@ def get_token(
     email = data.username
     password = data.password
 
-    user = authenticate_user(session, email, password)
+    user: UserInDB = authenticate_user(session, email, password)
 
     if not user:
         background_tasks.add_task(
@@ -34,7 +34,7 @@ def get_token(
             headers={"WWW-Authenticate": "Bearer"},
         )
 
-    access_token = security.create_access_token(dict(sub=email))
+    access_token = security.create_access_token(dict(sub=user.email))
     return {"access_token": access_token, "token_type": "bearer"}
 
 
diff --git a/mealie/schema/user.py b/mealie/schema/user.py
index 4bba3e556..9ee1b0b8f 100644
--- a/mealie/schema/user.py
+++ b/mealie/schema/user.py
@@ -43,6 +43,7 @@ class GroupBase(CamelModel):
 
 
 class UserBase(CamelModel):
+    username: Optional[str]
     full_name: Optional[str] = None
     email: constr(to_lower=True, strip_whitespace=True)
     admin: bool
@@ -59,6 +60,7 @@ class UserBase(CamelModel):
             }
 
         schema_extra = {
+            "username": "ChangeMe",
             "fullName": "Change Me",
             "email": "changeme@email.com",
             "group": settings.DEFAULT_GROUP,
diff --git a/tests/integration_tests/test_user_routes.py b/tests/integration_tests/test_user_routes.py
index 5d9b96d8e..b11b9f4ea 100644
--- a/tests/integration_tests/test_user_routes.py
+++ b/tests/integration_tests/test_user_routes.py
@@ -10,12 +10,28 @@ from tests.app_routes import AppRoutes
 
 @fixture(scope="session")
 def default_user():
-    return UserOut(id=1, fullName="Change Me", email="changeme@email.com", group="Home", admin=True, tokens=[])
+    return UserOut(
+        id=1,
+        fullName="Change Me",
+        username="Change Me",
+        email="changeme@email.com",
+        group="Home",
+        admin=True,
+        tokens=[],
+    )
 
 
 @fixture(scope="session")
 def new_user():
-    return UserOut(id=3, fullName="My New User", email="newuser@email.com", group="Home", admin=False, tokens=[])
+    return UserOut(
+        id=3,
+        fullName="My New User",
+        username="My New User",
+        email="newuser@email.com",
+        group="Home",
+        admin=False,
+        tokens=[],
+    )
 
 
 def test_superuser_login(api_client: TestClient, api_routes: AppRoutes, token):