feat: public recipe access (#1610)

* initial public explorer API endpoint

* public API endpoint

* cleanup recipe page

* wip: init explorer page

* use public URLs for shared recipes

* refactor private share tokens to use shared page

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue

@@ -26,7 +26,7 @@
         :max-width="landscape ? null : '50%'"
         min-height="50"
         :height="hideImage ? undefined : imageHeight"
-        :src="recipeImage(recipe.id, recipe.image, imageKey)"
+        :src="recipeImageUrl"
         class="d-print-none"
         @error="hideImage = true"
       >
@@ -34,6 +34,8 @@
     </div>
     <v-divider></v-divider>
     <RecipeActionMenu
+      v-if="user.id"
+      :recipe="recipe"
       :slug="recipe.slug"
       :locked="user.id !== recipe.userId && recipe.settings.locked"
       :name="recipe.name"
@@ -52,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, computed, ref } from "@nuxtjs/composition-api";
+import { defineComponent, useContext, computed, ref, watch } from "@nuxtjs/composition-api";
 import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
 import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
 import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
@@ -82,7 +84,7 @@ export default defineComponent({
     const { user } = usePageUser();
 
     function printRecipe() {
-      print();
+      window.print();
     }
 
     const { $vuetify } = useContext();
@@ -92,6 +94,17 @@ export default defineComponent({
       return $vuetify.breakpoint.xs ? "200" : "400";
     });
 
+    const recipeImageUrl = computed(() => {
+      return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
+    });
+
+    watch(
+      () => recipeImageUrl.value,
+      () => {
+        hideImage.value = false;
+      }
+    );
+
     return {
       setMode,
       toggleEditMode,
@@ -106,6 +119,7 @@ export default defineComponent({
       imageHeight,
       hideImage,
       isEditMode,
+      recipeImageUrl,
     };
   },
 });

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue

@@ -13,7 +13,7 @@
           hide-details
           class="pt-0 my-auto py-auto"
           color="secondary"
-          @change="toolStore.actions.updateOne(recipe.tools[index])"
+          @change="updateTool(index)"
         >
         </v-checkbox>
         <v-list-item-content>
@@ -26,7 +26,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
-import { usePageState } from "~/composables/recipe-page/shared-state";
+import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { useToolStore } from "~/composables/store";
 import { NoUndefinedField } from "~/types/api";
 import { Recipe } from "~/types/api-types/recipe";
@@ -48,12 +48,21 @@ export default defineComponent({
   },
   setup(props) {
     const toolStore = useToolStore();
-
+    const { user } = usePageUser();
     const { isEditMode } = usePageState(props.recipe.slug);
 
+    function updateTool(index: number) {
+      if (user.id) {
+        toolStore.actions.updateOne(props.recipe.tools[index]);
+      } else {
+        console.log("no user, skipping server update");
+      }
+    }
+
     return {
       toolStore,
       isEditMode,
+      updateTool,
     };
   },
 });