Refactor Form Not Found Handling and Improve Error Response (#730)

* Refactor Form Not Found Handling and Improve Error Response

- Replace the existing "Whoops" message with a NotFoundForm component for better user experience when a form is not found.
- Enhance error handling in the loadForm function to set a 404 response status when a form cannot be loaded, improving clarity for users and developers.

These changes aim to streamline the user experience and provide clearer feedback when forms are unavailable.

* Refactor Navbar and NotFoundForm Components for Improved User Experience

- Simplify the Navbar component by removing unnecessary conditional rendering for the authentication display, enhancing clarity in the layout.
- Update the NotFoundForm component to utilize a dynamic actions array for rendering navigation options, improving maintainability and flexibility.
- Adjust text styles for better readability and consistency across the NotFoundForm component.

These changes aim to streamline the user interface and enhance the overall user experience when navigating forms and handling not found scenarios.

* Update NotFoundForm Component for Improved Action Clarity

- Adjust the text and icon in the actions array of the NotFoundForm component to enhance clarity and user experience. The "Start Fresh" action has been renamed to "Create Form" and the icon has been updated from a check-circle to a rocket-launch icon, better reflecting the action's purpose.
- Minor formatting adjustments were made to the template for improved readability.

These changes aim to provide users with clearer navigation options and a more intuitive interface when encountering a not found scenario.

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/global/Navbar.vue

@@ -21,8 +21,7 @@
           </NuxtLink>
           <workspace-dropdown class="ml-6" />
         </div>
-        <div
-          v-if="showAuth"
+        <div 
           class="hidden md:flex gap-x-2 ml-auto"
         >
           <NuxtLink
@@ -86,11 +85,9 @@
           </NuxtLink>
         </div>
         <div
-          v-if="showAuth"
           class="hidden md:block pl-5 border-gray-300 border-r h-5"
         />
         <div
-          v-if="showAuth"
           class="block"
         >
           <div class="flex items-center">
@@ -316,20 +313,15 @@ export default {
     workspace() {
       return this.workspacesStore.getCurrent
     },
-    showAuth() {
-      return this.$route.name && this.$route.name !== "forms-slug"
-    },
     hasNavbar() {
       if (this.isIframe) return false
 
       if (this.$route.name && this.$route.name === "forms-slug") {
         if (this.form) {
-          // If there is a cover, or if branding is hidden remove nav
-          if (this.form.cover_picture || this.form.no_branding) {
-            return false
-          }
-        } else {
           return false
+        } else {
+          // Form not found/404 case - show the navbar
+          return true
         }
       }
       return !this.appStore.navbarHidden

client/components/pages/NotFoundForm.vue

@@ -0,0 +1,109 @@
+<template>
+  <main class="flex justify-center items-center px-16 w-full max-md:px-5 max-md:max-w-full">
+    <section class="flex flex-col mb-4 w-full max-w-[1080px] max-md:mt-10 max-md:max-w-full">
+      <div class="text-center mx-auto">
+        <img
+          src="/img/icons/404.png"
+          alt="404 Error"
+          class="mx-auto w-1/3"
+        >
+        <h1 class="text-dark text-2xl md:text-4xl leading-none font-medium text-center pt-4 md:pt-0 mx-auto md:max-w-full">
+          We're sorry! This Form Is No Longer Here
+        </h1>
+        <p class="text-gray-500 mt-3 max-w-xl mx-auto">
+          It may have been deleted, deactivated, or the form URL might have been regenerated or updated by its owner. But don't worry—you've got plenty of other options!
+        </p>
+        
+        <h3 class="my-8 text-dark text-xl font-semibold text-center md:pt-0 mx-auto md:max-w-full">
+          What can you do?
+        </h3>
+        <div class="mt-8 grid grid-cols-2 md:grid-cols-5 gap-4">
+          <NuxtLink
+            v-for="(action, index) in actions"
+            :key="index"
+            :to="action.to"
+            :href="action.href"
+            class="bg-blue-100/50 rounded-lg px-4 py-6 text-center text-gray-700 hover:bg-blue-100 flex flex-col items-center hover:no-underline"
+            @click="action.onClick ? action.onClick() : null"
+          >
+            <Icon
+              :name="action.icon"
+              class="w-8 h-8 mb-2 text-nt-blue"
+            />
+            <span class="font-medium">
+              {{ action.text }}
+            </span>
+          </NuxtLink>
+        </div>
+        
+        <div class="mt-10 text-gray-700">
+          <h3 class="mt-8 text-dark text-xl font-semibold text-center md:pt-0 mx-auto md:max-w-full">
+            Still not sure what to do? Here are more ways to get started!
+          </h3>
+          <p class="mt-4 text-gray-500">
+            No worries! Here are some other options for you:
+          </p>
+          <ul class="mt-4 space-y-2 text-sm">
+            <li>
+              Do you want to know why users choose OpnForm? 
+              <NuxtLink class="text-blue-500 hover:text-blue-600" :to="{ name: 'ai-form-builder' }">
+                Learn more here!
+              </NuxtLink>
+            </li>
+            <li>
+              Browse Templates
+              <NuxtLink class="text-blue-500 hover:text-blue-600" :to="{ name: 'templates' }">
+                Get inspired with ready-to-use form templates!
+              </NuxtLink>
+            </li>
+            <li>
+              Check Out Our Help Center
+              <NuxtLink class="text-blue-500 hover:text-blue-600" to="https://help.opnform.com/en/">
+                Find quick answers to common questions.
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="mt-20 border-t">
+        <OpenFormFooter />
+      </div>
+      
+    </section>
+  </main>
+</template>
+
+<script setup>
+const crisp = useCrisp()
+
+const actions = [
+  {
+    to: { name: 'forms-create-guest' },
+    icon: 'i-heroicons-rocket-launch',
+    text: 'Create Form'
+  },
+  {
+    to: { name: 'login' },
+    icon: 'i-heroicons-list-bullet',
+    text: 'Find Your Forms'
+  },
+  {
+    href: '#',
+    icon: 'i-heroicons-book-open',
+    text: 'Documentation',
+    onClick: () => crisp.openHelpdesk()
+  },
+  {
+    to: { name: 'index' },
+    icon: 'i-heroicons-document-magnifying-glass',
+    text: 'Explore OpnForm'
+  },
+  {
+    href: '#',
+    icon: 'i-heroicons-chat-bubble-left-right',
+    text: 'Need Assistance?',
+    onClick: () => crisp.openChat()
+  }
+]
+</script>

client/pages/forms/[slug]/index.vue

@@ -35,18 +35,7 @@
       :class="{'mt-6':!isIframe, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form && (form.width === 'centered'), 'max-w-7xl': (form && form.width === 'full' && !isIframe)}"
     >
       <div v-if="!formLoading && !form">
-        <h1
-          class="mt-6"
-          v-text="'Whoops'"
-        />
-        <p class="mt-6">
-          Unfortunately we could not find this form. It may have been deleted.
-        </p>
-        <p class="mb-10 mt-4">
-          <router-link :to="{name:'index'}">
-            Create your form for free with OpnForm
-          </router-link>
-        </p>
+        <NotFoundForm />
       </div>
       <div v-else-if="formLoading">
         <p class="text-center mt-6 p-4">
@@ -115,12 +104,14 @@ const passwordEntered = function (password) {
 
 const loadForm = async (setup=false) => {
   if (formsStore.loading || (form.value && !form.value.is_password_protected)) return Promise.resolve()
+  const event = useRequestEvent()
 
   if (setup) {
     const {data, error} = await formsStore.publicLoad(slug)
     if (error.value) {
       console.error(`Error loading form [${slug}]:`,error.value)
       formsStore.stopLoading()
+      setResponseStatus(event, 404, 'Page Not Found')
       return
     }
     formsStore.save(data.value)
@@ -130,6 +121,7 @@ const loadForm = async (setup=false) => {
       formsStore.save(data)
     } catch (e) {
       formsStore.stopLoading()
+      setResponseStatus(event, 404, 'Page Not Found')
       return
     }
   }