From ccfaa02b036aa637e7e2376c945fe766471301f8 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Wed, 23 Feb 2022 15:04:45 -0900
Subject: [PATCH] Fix/multiple bug reports (#1002)

* fix type issues for #999

* fix regression #995

* remove error from frontend and log error #996

* cleanup darkmode on login page

* keep primary color bg
---
 .../Domain/Recipe/RecipeActionMenu.vue        | 43 ++++++++++---------
 .../Domain/Recipe/RecipeFavoriteBadge.vue     |  8 +---
 frontend/composables/use-utils.ts             | 14 ++++++
 frontend/layouts/default.vue                  | 10 +----
 frontend/pages/admin/site-settings.vue        | 20 ++++++---
 frontend/pages/login.vue                      | 42 ++++++++++++++----
 frontend/pages/recipe/_slug/index.vue         | 10 +++--
 frontend/plugins/toast.client.ts              |  6 +--
 mealie/services/email/email_senders.py        |  6 ++-
 9 files changed, 102 insertions(+), 57 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index d5844e7c72d0..a5fb4370282c 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -39,26 +39,29 @@
         <span> Locked by Owner </span>
       </v-tooltip>
 
-      <RecipeContextMenu
-        show-print
-        :menu-top="false"
-        :slug="slug"
-        :menu-icon="$globals.icons.mdiDotsHorizontal"
-        fab
-        color="info"
-        :card-menu="false"
-        :recipe-id="recipeId"
-        :use-items="{
-          delete: false,
-          edit: false,
-          download: true,
-          mealplanner: true,
-          shoppingList: true,
-          print: true,
-          share: true,
-        }"
-        @print="$emit('print')"
-      />
+      <ClientOnly>
+        <RecipeContextMenu
+          show-print
+          :menu-top="false"
+          :name="name"
+          :slug="slug"
+          :menu-icon="$globals.icons.mdiDotsHorizontal"
+          fab
+          color="info"
+          :card-menu="false"
+          :recipe-id="recipeId"
+          :use-items="{
+            delete: false,
+            edit: false,
+            download: true,
+            mealplanner: true,
+            shoppingList: true,
+            print: true,
+            share: true,
+          }"
+          @print="$emit('print')"
+        />
+      </ClientOnly>
     </div>
     <div v-if="value" class="custom-btn-group mb-">
       <v-btn
diff --git a/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue b/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
index 1252ef815d95..7e02f08a7096 100644
--- a/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
+++ b/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
@@ -23,7 +23,7 @@
 <script lang="ts">
 import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
-import {UserOut} from "~/types/api-types/user";
+import { UserOut } from "~/types/api-types/user";
 export default defineComponent({
   props: {
     slug: {
@@ -49,19 +49,15 @@ export default defineComponent({
     const isFavorite = computed(() => user.value?.favoriteRecipes?.includes(props.slug));
 
     async function toggleFavorite() {
-      console.log("Favorited?");
       if (!isFavorite.value) {
         await api.users.addFavorite(user.value?.id, props.slug);
       } else {
         await api.users.removeFavorite(user.value?.id, props.slug);
       }
       $auth.fetchUser();
-    };
+    }
 
     return { isFavorite, toggleFavorite };
   },
 });
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/frontend/composables/use-utils.ts b/frontend/composables/use-utils.ts
index 014024a8e47b..fde5504db575 100644
--- a/frontend/composables/use-utils.ts
+++ b/frontend/composables/use-utils.ts
@@ -1,4 +1,18 @@
 import { IncomingMessage } from "connect";
+import { useDark } from "@vueuse/core";
+import { useContext } from "@nuxtjs/composition-api";
+
+export const useToggleDarkMode = () => {
+  const isDark = useDark();
+  const { $vuetify } = useContext();
+
+  function toggleDark() {
+    isDark.value = !$vuetify.theme.dark;
+    $vuetify.theme.dark = !$vuetify.theme.dark;
+  }
+
+  return toggleDark;
+};
 
 export const useAsyncKey = function () {
   return String(Date.now());
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 96ec4c5ccfd5..bc3a40d3fe51 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -62,11 +62,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, useContext } from "@nuxtjs/composition-api";
-import { useDark } from "@vueuse/core";
 import AppHeader from "@/components/Layout/AppHeader.vue";
 import AppSidebar from "@/components/Layout/AppSidebar.vue";
 import TheSnackbar from "@/components/Layout/TheSnackbar.vue";
 import { useCookbooks } from "~/composables/use-group-cookbooks";
+import { useToggleDarkMode } from "~/composables/use-utils";
 
 export default defineComponent({
   components: { AppHeader, AppSidebar, TheSnackbar },
@@ -77,13 +77,7 @@ export default defineComponent({
 
     const isAdmin = computed(() => $auth.user?.admin);
 
-    const isDark = useDark();
-
-    function toggleDark() {
-      isDark.value = !$vuetify.theme.dark;
-      $vuetify.theme.dark = !$vuetify.theme.dark;
-      console.log("toggleDark");
-    }
+    const toggleDark = useToggleDarkMode();
 
     const sidebar = ref<boolean | null>(null);
 
diff --git a/frontend/pages/admin/site-settings.vue b/frontend/pages/admin/site-settings.vue
index 2d16d5fa0d34..83e00488d985 100644
--- a/frontend/pages/admin/site-settings.vue
+++ b/frontend/pages/admin/site-settings.vue
@@ -45,10 +45,19 @@
             {{ $t("general.test") }}
           </BaseButton>
           <template v-if="tested">
-            <v-divider class="my-x"></v-divider>
-            <v-card-text>
-              Email Test Result: {{ success ? "Succeeded" : "Failed" }}
-              <div>Errors: {{ error }}</div>
+            <v-divider class="my-x mt-6"></v-divider>
+            <v-card-text class="px-0">
+              <h4>Email Test Results</h4>
+              <span class="pl-4">
+                {{ success ? "Succeeded" : "Failed" }}
+              </span>
+
+              <!-- <template v-if="errors">
+                <h4>Errors:</h4>
+                <span class="pl-4">
+                  {{ errors }}
+                </span>
+              </template> -->
             </v-card-text>
           </template>
         </div>
@@ -296,5 +305,4 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index b07400b7d76f..a173dd381f02 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -1,5 +1,12 @@
 <template>
-  <v-container fill-height fluid class="d-flex justify-center align-center" style="background: #f5f8fa">
+  <v-container
+    fill-height
+    fluid
+    class="d-flex justify-center align-center"
+    :class="{
+      'bg-off-white': !$vuetify.theme.dark,
+    }"
+  >
     <v-card tag="section" class="d-flex flex-column align-center" width="600px">
       <v-toolbar width="100%" color="primary" class="d-flex justify-center mb-4" dark>
         <v-toolbar-title class="headline text-h4"> Mealie </v-toolbar-title>
@@ -7,14 +14,12 @@
 
       <div class="icon-container">
         <v-divider class="icon-divider"></v-divider>
-        <v-avatar size="102" color="grey lighten-2">
-          <v-avatar class="pa-2 icon-avatar" color="white" size="100">
-            <svg class="icon-primary" style="width: 100px; height: 100px" viewBox="0 0 24 24">
-              <path
-                d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
-              />
-            </svg>
-          </v-avatar>
+        <v-avatar class="pa-2 icon-avatar" color="primary" size="100">
+          <svg class="icon-white" style="width: 100px; height: 100px" viewBox="0 0 24 24">
+            <path
+              d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
+            />
+          </svg>
         </v-avatar>
       </div>
 
@@ -91,16 +96,26 @@
         </div>
       </v-card-text>
     </v-card>
+
+    <v-btn absolute bottom center @click="toggleDark">
+      <v-icon left>
+        {{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
+      </v-icon>
+      {{ $vuetify.theme.dark ? "Light Mode" : "Dark Mode" }}
+    </v-btn>
   </v-container>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, useContext, computed, reactive } from "@nuxtjs/composition-api";
 import { alert } from "~/composables/use-toast";
+import { useToggleDarkMode } from "~/composables/use-utils";
 export default defineComponent({
   layout: "blank",
 
   setup() {
+    const toggleDark = useToggleDarkMode();
+
     const { $auth } = useContext();
     const context = useContext();
 
@@ -147,6 +162,7 @@ export default defineComponent({
       loggingIn,
       allowSignup,
       authenticate,
+      toggleDark,
     };
   },
 
@@ -167,6 +183,10 @@ export default defineComponent({
   fill: var(--v-primary-base);
 }
 
+.icon-white {
+  fill: white;
+}
+
 .icon-container {
   display: flex;
   flex-direction: column;
@@ -185,4 +205,8 @@ export default defineComponent({
   border-color: rgba(0, 0, 0, 0.12);
   border: 2px;
 }
+
+.bg-off-white {
+  background: #f5f8fa;
+}
 </style>
diff --git a/frontend/pages/recipe/_slug/index.vue b/frontend/pages/recipe/_slug/index.vue
index f80048b89ed3..aeecf2ab2c79 100644
--- a/frontend/pages/recipe/_slug/index.vue
+++ b/frontend/pages/recipe/_slug/index.vue
@@ -504,10 +504,12 @@ export default defineComponent({
   async beforeRouteLeave(_to, _from, next) {
     const isSame = JSON.stringify(this.recipe) === JSON.stringify(this.originalRecipe);
 
-    console.log({ working: this.recipe, saved: this.originalRecipe });
-
     if (this.form && !isSame && this.recipe?.slug !== undefined) {
-      if (window.confirm("You have unsaved changes. Do you want to save before leaving?")) {
+      if (
+        window.confirm(
+          "You have unsaved changes. Do you want to save before leaving?\n\nOkay to save, Cancel to discard changes."
+        )
+      ) {
         await this.api.recipes.updateOne(this.recipe.slug, this.recipe);
       }
     }
@@ -558,7 +560,6 @@ export default defineComponent({
 
     invoke(async () => {
       await until(recipe).not.toBeNull();
-
       originalRecipe.value = deepCopy(recipe.value);
     });
 
@@ -746,6 +747,7 @@ export default defineComponent({
     useMeta(metaData);
 
     return {
+      originalRecipe,
       createApiExtra,
       apiNewKey,
       enableLandscape,
diff --git a/frontend/plugins/toast.client.ts b/frontend/plugins/toast.client.ts
index 088cd88d0097..06a56feb63a5 100644
--- a/frontend/plugins/toast.client.ts
+++ b/frontend/plugins/toast.client.ts
@@ -1,10 +1,10 @@
-import { Plugin } from "@nuxt/types"
+import { Plugin } from "@nuxt/types";
 import { NuxtAxiosInstance } from "@nuxtjs/axios";
 import { alert } from "~/composables/use-toast";
 
 const toastPlugin: Plugin = ({ $axios }: { $axios: NuxtAxiosInstance }) => {
   $axios.onResponse((response) => {
-    if (response.data.message) {
+    if (response?.data?.message) {
       alert.info(response.data.message);
     }
   });
@@ -13,6 +13,6 @@ const toastPlugin: Plugin = ({ $axios }: { $axios: NuxtAxiosInstance }) => {
       alert.error(error.response.data.detail.message);
     }
   });
-}
+};
 
 export default toastPlugin;
diff --git a/mealie/services/email/email_senders.py b/mealie/services/email/email_senders.py
index c7c3f81bf4ac..0b7bfe4c027f 100644
--- a/mealie/services/email/email_senders.py
+++ b/mealie/services/email/email_senders.py
@@ -1,6 +1,7 @@
 from abc import ABC, abstractmethod
 
 import emails
+from emails.backend.response import SMTPResponse
 
 from mealie.core.root_logger import get_logger
 from mealie.services._base_service import BaseService
@@ -29,7 +30,10 @@ class DefaultEmailSender(ABCEmailSender, BaseService):
             smtp_options["user"] = self.settings.SMTP_USER
         if self.settings.SMTP_PASSWORD:
             smtp_options["password"] = self.settings.SMTP_PASSWORD
-        response = message.send(to=email_to, smtp=smtp_options)
+        response: SMTPResponse = message.send(to=email_to, smtp=smtp_options)
         logger.info(f"send email result: {response}")
 
+        if not response.success:
+            logger.error(f"send email error: {response.error}")
+
         return response.status_code in [250]