fix: fallback section for embeds if invalid link (#3673)

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.",

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()
 

packages/hoppscotch-common/src/services/persistence/index.ts

@@ -244,9 +244,13 @@ export class PersistenceService extends Service {
   private setupSettingsPersistence() {
     const settingsKey = "settings"
     let settingsData = JSON.parse(
-      window.localStorage.getItem(settingsKey) || "{}"
+      window.localStorage.getItem(settingsKey) ?? "null"
     )
 
+    if (!settingsData) {
+      settingsData = getDefaultSettings()
+    }
+
     // Validate data read from localStorage
     const result = SETTINGS_SCHEMA.safeParse(settingsData)
     if (result.success) {

packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts

@@ -36,7 +36,7 @@ const SettingsDefSchema = z.object({
     httpUser: z.boolean(),
     httpPassword: z.boolean(),
     bearerToken: z.boolean(),
-    oauth2Token: z.boolean(),
+    oauth2Token: z.optional(z.boolean()),
   }),
   THEME_COLOR: ThemeColorSchema,
   BG_COLOR: BgColorSchema,
@@ -103,13 +103,10 @@ export const LOCAL_STATE_SCHEMA = z.union([
     .strict(),
 ])
 
-export const SETTINGS_SCHEMA = z.union([
-  z.object({}).strict(),
-  SettingsDefSchema.extend({
-    EXTENSIONS_ENABLED: z.optional(z.boolean()),
-    PROXY_ENABLED: z.optional(z.boolean()),
-  }),
-])
+export const SETTINGS_SCHEMA = SettingsDefSchema.extend({
+  EXTENSIONS_ENABLED: z.optional(z.boolean()),
+  PROXY_ENABLED: z.optional(z.boolean()),
+})
 
 export const REST_HISTORY_ENTRY_SCHEMA = z
   .object({
@@ -208,7 +205,7 @@ export const MQTT_REQUEST_SCHEMA = z.nullable(
   z
     .object({
       endpoint: z.string(),
-      clientID: z.string(),
+      clientID: z.optional(z.string()),
     })
     .strict()
 )