From 7db7b9b0683424a594b85ac5265c4a5ff749586b Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Tue, 19 Dec 2023 18:37:44 +0530
Subject: [PATCH] fix: fallback section for embeds if invalid link (#3673)

---
 packages/hoppscotch-common/locales/en.json    |  1 +
 .../hoppscotch-common/src/pages/e/_id.vue     | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 629c4d1c2..0125cc37e 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -295,6 +295,7 @@
     "incorrect_email": "Incorrect email",
     "invalid_link": "Invalid link",
     "invalid_link_description": "The link you clicked is invalid or expired.",
+    "invalid_embed_link": "The embed does not exist or is invalid.",
     "json_parsing_failed": "Invalid JSON",
     "json_prettify_invalid_body": "Couldn't prettify an invalid body, solve json syntax errors and try again",
     "network_error": "There seems to be a network error. Please try again.",
diff --git a/packages/hoppscotch-common/src/pages/e/_id.vue b/packages/hoppscotch-common/src/pages/e/_id.vue
index 12d132bde..94085ae1b 100644
--- a/packages/hoppscotch-common/src/pages/e/_id.vue
+++ b/packages/hoppscotch-common/src/pages/e/_id.vue
@@ -1,7 +1,19 @@
 <template>
-  <div class="flex flex-col flex-1 w-full">
+  <div class="flex flex-col justify-center">
+    <div
+      v-if="invalidLink"
+      class="flex flex-1 flex-col items-center justify-center p-8"
+    >
+      <icon-lucide-alert-triangle class="svg-icons mb-2 opacity-75" />
+      <h1 class="heading text-center">
+        {{ t("error.invalid_link") }}
+      </h1>
+      <p class="mt-2 text-center">
+        {{ t("error.invalid_embed_link") }}
+      </p>
+    </div>
     <Embeds
-      v-if="tab"
+      v-else-if="!invalidLink && tab"
       v-model:modelTab="tab"
       :properties="properties"
       :shared-request-i-d="sharedRequestID"
@@ -28,6 +40,9 @@ import {
 import { HoppTab } from "~/services/tab"
 import { HoppRESTDocument } from "~/helpers/rest/document"
 import { applySetting } from "~/newstore/settings"
+import { useI18n } from "~/composables/i18n"
+
+const t = useI18n()
 
 const route = useRoute()