From d40d0b44203a92e065dfb756d1a319202a6e2ff6 Mon Sep 17 00:00:00 2001
From: Amisha Bagri <amishabagri04@gmail.com>
Date: Tue, 3 Dec 2024 07:33:57 +0000
Subject: [PATCH 1/2] fixed bug and added message for image upload button

---
 .../Domain/Recipe/RecipeImageUploadBtn.vue    | 255 +++++++++++++++---
 frontend/components/global/WakelockSwitch.vue |   6 +-
 frontend/lang/messages/en-US.json             |   3 +
 3 files changed, 218 insertions(+), 46 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue b/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
index ab16c760fc1..d6d2c02211e 100644
--- a/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
+++ b/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
@@ -1,47 +1,46 @@
-<template>
-  <div class="text-center">
-    <v-menu v-model="menu" offset-y top nudge-top="6" :close-on-content-click="false">
-      <template #activator="{ on, attrs }">
-        <v-btn color="accent" dark v-bind="attrs" v-on="on">
-          <v-icon left>
-            {{ $globals.icons.fileImage }}
-          </v-icon>
-          {{ $t("general.image") }}
-        </v-btn>
-      </template>
-      <v-card width="400">
-        <v-card-title class="headline flex mb-0">
-          <div>
-            {{ $t("recipe.recipe-image") }}
-          </div>
-          <AppButtonUpload
-            class="ml-auto"
-            url="none"
-            file-name="image"
-            :text-btn="false"
-            :post="false"
-            @uploaded="uploadImage"
-          />
-        </v-card-title>
-        <v-card-text class="mt-n5">
-          <div>
-            <v-text-field v-model="url" :label="$t('general.url')" class="pt-5" clearable :messages="messages">
-              <template #append-outer>
-                <v-btn class="ml-2" color="primary" :loading="loading" :disabled="!slug" @click="getImageFromURL">
-                  {{ $t("general.get") }}
-                </v-btn>
-              </template>
-            </v-text-field>
-          </div>
-        </v-card-text>
-      </v-card>
-    </v-menu>
-  </div>
+<!-- <template>
+  <v-menu v-model="menu" offset-y top nudge-top="6" :close-on-content-click="false">
+    <template #activator="{ on, attrs }">
+      <v-btn color="accent" dark v-bind="attrs" v-on="on">
+        <v-icon left>
+          {{ $globals.icons.fileImage }}
+        </v-icon>
+        {{ $t("general.image") }}
+      </v-btn>
+    </template>
+    <v-card width="400">
+      <v-card-title class="headline flex mb-0">
+        <div>
+          {{ $t("recipe.recipe-image") }}
+        </div>
+        <AppButtonUpload
+          class="ml-auto"
+          url="none"
+          file-name="image"
+          :text-btn="false"
+          :post="false"
+          @uploaded="uploadImage"
+        />
+      </v-card-title>
+      <v-card-text class="mt-n5">
+        <div>
+          <v-text-field v-model="url" :label="$t('general.url')" class="pt-5" clearable :messages="messages">
+            <template #append-outer>
+              <v-btn class="ml-2" color="primary" :loading="loading" :disabled="!slug" @click="getImageFromURL">
+                {{ $t("general.get") }}
+              </v-btn>
+            </template>
+          </v-text-field>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-menu>
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast"; // Import the alert functions
 
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
@@ -58,7 +57,8 @@ export default defineComponent({
       url: "",
       loading: false,
       menu: false,
-    })
+      messages: [],
+    });
 
     function uploadImage(fileObject: File) {
       context.emit(UPLOAD_EVENT, fileObject);
@@ -66,23 +66,192 @@ export default defineComponent({
     }
 
     const api = useUserApi();
+    const { i18n } = useContext();
+
+    // Function to check if the URL is reachable
+    async function isURLReachable(url: string) {
+      try {
+        const response = await fetch(url, { method: "HEAD" });
+        return response.ok; // If status is 200, response.ok will be true
+      } catch (error) {
+        return false; // Network error or invalid URL
+      }
+    }
+
+    // Function to get image from URL
     async function getImageFromURL() {
       state.loading = true;
-      if (await api.recipes.updateImagebyURL(props.slug, state.url)) {
+
+      // Check if the URL is reachable it uses HTTP codes
+      const isReachable = await isURLReachable(state.url);
+
+      if (!isReachable) {
+        alert.error(i18n.tc("general.invalid-url"));
+        state.loading = false;
+        return;
+      }
+
+      // If the URL is reachable, make the API request to update the image using the URL
+      const response = await api.recipes.updateImagebyURL(props.slug, state.url);
+
+      // Check the response from the API and show appropriate alert
+      if (response) {
+        alert.success(i18n.tc("general.image-uploaded"));
         context.emit(REFRESH_EVENT);
+      } else {
+        alert.error(i18n.tc("general.invalid-url"));
       }
+
+      // Finalize loading state and menu visibility
       state.loading = false;
       state.menu = false;
     }
 
+    return {
+      ...toRefs(state),
+      uploadImage,
+      getImageFromURL,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>
+ -->
+ <template>
+  <v-menu v-model="menu" offset-y top nudge-top="6" :close-on-content-click="false">
+    <template #activator="{ on, attrs }">
+      <v-btn color="accent" dark v-bind="attrs" v-on="on">
+        <v-icon left>
+          {{ $globals.icons.fileImage }}
+        </v-icon>
+        {{ $t("general.image") }}
+      </v-btn>
+    </template>
+    <v-card width="400">
+      <v-card-title class="headline flex mb-0">
+        <div>
+          {{ $t("recipe.recipe-image") }}
+        </div>
+        <AppButtonUpload
+          class="ml-auto"
+          url="none"
+          file-name="image"
+          :text-btn="false"
+          :post="false"
+          @uploaded="uploadImage"
+        />
+      </v-card-title>
+      <v-card-text class="mt-n5">
+        <div>
+          <v-text-field v-model="url" :label="$t('general.url')" class="pt-5" clearable :messages="messages">
+            <template #append-outer>
+              <v-btn class="ml-2" color="primary" :loading="loading" :disabled="!slug" @click="getImageFromURL">
+                {{ $t("general.get") }}
+              </v-btn>
+            </template>
+          </v-text-field>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
+import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast"; // Import the alert functions
+
+const REFRESH_EVENT = "refresh";
+const UPLOAD_EVENT = "upload";
+
+export default defineComponent({
+  props: {
+    slug: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    const state = reactive({
+      url: "",
+      loading: false,
+      menu: false,
+      messages: [],
+    });
+
+
+   // Function to upload the image file
+   function uploadImage(fileObject: File) {
+    try{
+       // Check if the file has an acceptable extension
+       const allowedExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp"];
+      const fileExtension = fileObject.name.split(".").pop()?.toLowerCase();
+
+      // If the file extension is not in the allowed extensions list, show an error message
+      if (!fileExtension || !allowedExtensions.includes(`.${fileExtension}`)) {
+        alert.error(i18n.tc("general.invalid-image-extension"));
+        return;
+      }
+
+      context.emit(UPLOAD_EVENT, fileObject);
+      state.menu = false;
+
+      // Show success message for image upload
+      alert.success(i18n.tc("general.image-uploaded"));
+    }
+      catch(error){
+        alert.error(i18n.tc("general.image-upload-failed"));
+      }
+    }
+
+
+    const api = useUserApi();
     const { i18n } = useContext();
-    const messages = props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")];
+
+    // Function to check if the URL is reachable
+    async function isURLReachable(url: string) {
+      try {
+        const response = await fetch(url, { method: "HEAD" });
+        return response.ok; // If status is 200, response.ok will be true
+      } catch (error) {
+        return false; // Network error or invalid URL
+      }
+    }
+
+    // Function to get image from URL
+    async function getImageFromURL() {
+      state.loading = true;
+
+      // Check if the URL is reachable it uses HTTP codes
+      const isReachable = await isURLReachable(state.url);
+
+      if (!isReachable) {
+        alert.error(i18n.tc("general.invalid-url"));
+        state.loading = false;
+        return;
+      }
+
+      // If the URL is reachable, make the API request to update the image using the URL
+      const response = await api.recipes.updateImagebyURL(props.slug, state.url);
+
+      // Check the response from the API and show appropriate alert
+      if (response) {
+        alert.success(i18n.tc("general.image-uploaded"));
+        context.emit(REFRESH_EVENT);
+      } else {
+        alert.error(i18n.tc("general.invalid-url"));
+      }
+
+      // Finalize loading state and menu visibility
+      state.loading = false;
+      state.menu = false;
+    }
 
     return {
       ...toRefs(state),
       uploadImage,
       getImageFromURL,
-      messages,
     };
   },
 });
diff --git a/frontend/components/global/WakelockSwitch.vue b/frontend/components/global/WakelockSwitch.vue
index d5d31f139aa..955130d94b0 100644
--- a/frontend/components/global/WakelockSwitch.vue
+++ b/frontend/components/global/WakelockSwitch.vue
@@ -16,7 +16,7 @@ export default defineComponent({
     setup() {
         const { isSupported: wakeIsSupported, isActive, request, release } = useWakeLock();
         const wakeLock = computed({
-            get: () => isActive,
+            get: () => isActive.value,
             set: () => {
                 if (isActive.value) {
                     unlockScreen();
@@ -27,13 +27,13 @@ export default defineComponent({
         });
         async function lockScreen() {
             if (wakeIsSupported) {
-                console.log("Wake Lock Requested");
+                console.debug("Wake Lock Requested");
                 await request("screen");
             }
         }
         async function unlockScreen() {
             if (wakeIsSupported || isActive) {
-                console.log("Wake Lock Released");
+                console.debug("Wake Lock Released");
                 await release();
             }
         }
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 9b5c04f4186..a7c575a6430 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -114,6 +114,9 @@
     "home": "Home",
     "image": "Image",
     "image-upload-failed": "Image upload failed",
+    "image-uploaded": "Image Uploaded",
+    "invalid-url": "The provided URL is invalid. Please check and try again.",
+    "invalid-image-extension": "Invalid file extension",
     "import": "Import",
     "json": "JSON",
     "keyword": "Keyword",

From 7c55bdd7f322b780a6548bb8bfd04dfd562687f5 Mon Sep 17 00:00:00 2001
From: Amisha Bagri <amishabagri04@gmail.com>
Date: Tue, 3 Dec 2024 07:34:40 +0000
Subject: [PATCH 2/2] fixed bug and added message for image upload button

---
 .../Domain/Recipe/RecipeImageUploadBtn.vue    | 120 ------------------
 1 file changed, 120 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue b/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
index d6d2c02211e..4943e2ffbf5 100644
--- a/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
+++ b/frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
@@ -1,123 +1,3 @@
-<!-- <template>
-  <v-menu v-model="menu" offset-y top nudge-top="6" :close-on-content-click="false">
-    <template #activator="{ on, attrs }">
-      <v-btn color="accent" dark v-bind="attrs" v-on="on">
-        <v-icon left>
-          {{ $globals.icons.fileImage }}
-        </v-icon>
-        {{ $t("general.image") }}
-      </v-btn>
-    </template>
-    <v-card width="400">
-      <v-card-title class="headline flex mb-0">
-        <div>
-          {{ $t("recipe.recipe-image") }}
-        </div>
-        <AppButtonUpload
-          class="ml-auto"
-          url="none"
-          file-name="image"
-          :text-btn="false"
-          :post="false"
-          @uploaded="uploadImage"
-        />
-      </v-card-title>
-      <v-card-text class="mt-n5">
-        <div>
-          <v-text-field v-model="url" :label="$t('general.url')" class="pt-5" clearable :messages="messages">
-            <template #append-outer>
-              <v-btn class="ml-2" color="primary" :loading="loading" :disabled="!slug" @click="getImageFromURL">
-                {{ $t("general.get") }}
-              </v-btn>
-            </template>
-          </v-text-field>
-        </div>
-      </v-card-text>
-    </v-card>
-  </v-menu>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
-import { useUserApi } from "~/composables/api";
-import { alert } from "~/composables/use-toast"; // Import the alert functions
-
-const REFRESH_EVENT = "refresh";
-const UPLOAD_EVENT = "upload";
-
-export default defineComponent({
-  props: {
-    slug: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props, context) {
-    const state = reactive({
-      url: "",
-      loading: false,
-      menu: false,
-      messages: [],
-    });
-
-    function uploadImage(fileObject: File) {
-      context.emit(UPLOAD_EVENT, fileObject);
-      state.menu = false;
-    }
-
-    const api = useUserApi();
-    const { i18n } = useContext();
-
-    // Function to check if the URL is reachable
-    async function isURLReachable(url: string) {
-      try {
-        const response = await fetch(url, { method: "HEAD" });
-        return response.ok; // If status is 200, response.ok will be true
-      } catch (error) {
-        return false; // Network error or invalid URL
-      }
-    }
-
-    // Function to get image from URL
-    async function getImageFromURL() {
-      state.loading = true;
-
-      // Check if the URL is reachable it uses HTTP codes
-      const isReachable = await isURLReachable(state.url);
-
-      if (!isReachable) {
-        alert.error(i18n.tc("general.invalid-url"));
-        state.loading = false;
-        return;
-      }
-
-      // If the URL is reachable, make the API request to update the image using the URL
-      const response = await api.recipes.updateImagebyURL(props.slug, state.url);
-
-      // Check the response from the API and show appropriate alert
-      if (response) {
-        alert.success(i18n.tc("general.image-uploaded"));
-        context.emit(REFRESH_EVENT);
-      } else {
-        alert.error(i18n.tc("general.invalid-url"));
-      }
-
-      // Finalize loading state and menu visibility
-      state.loading = false;
-      state.menu = false;
-    }
-
-    return {
-      ...toRefs(state),
-      uploadImage,
-      getImageFromURL,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped></style>
- -->
  <template>
   <v-menu v-model="menu" offset-y top nudge-top="6" :close-on-content-click="false">
     <template #activator="{ on, attrs }">