From 6ee56ac4cc134fe1697588dbb5506f25dd448de6 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Sat, 9 Dec 2023 17:02:23 +0100
Subject: [PATCH] Started to refactor pages

---
 client/app.vue                                |  1 +
 client/components/global/Navbar.vue           |  2 +-
 .../forms/components/FormFieldsEditor.vue     |  2 +-
 client/components/pages/welcome/AiFeature.vue |  2 +-
 .../components/pages/welcome/Testimonials.vue | 11 ++++---
 client/layouts/default.vue                    |  2 +-
 client/nuxt.config.ts                         | 11 +++++++
 client/pages/ai-form-builder.vue              |  6 ++--
 .../{create-guest.vue => create/guest.vue}    | 12 +++----
 client/pages/index.vue                        | 32 +++++++++----------
 10 files changed, 48 insertions(+), 33 deletions(-)
 rename client/pages/forms/{create-guest.vue => create/guest.vue} (90%)

diff --git a/client/app.vue b/client/app.vue
index a8b8c3a..a4c5786 100644
--- a/client/app.vue
+++ b/client/app.vue
@@ -23,6 +23,7 @@
 
     <transition name="page" mode="out-in">
       <NuxtLayout>
+        <NuxtLoadingIndicator color="#2563eb"/>
         <NuxtPage/>
       </NuxtLayout>
     </transition>
diff --git a/client/components/global/Navbar.vue b/client/components/global/Navbar.vue
index 15d3047..d7941d4 100644
--- a/client/components/global/Navbar.vue
+++ b/client/components/global/Navbar.vue
@@ -119,7 +119,7 @@
                     Login
                   </router-link>
 
-                  <v-button v-track.nav_create_form_click size="small" :to="{ name: 'forms.create.guest' }" color="outline-blue" :arrow="true">
+                  <v-button v-track.nav_create_form_click size="small" :to="{ name: 'forms-create-guest' }" color="outline-blue" :arrow="true">
                     Create a form
                   </v-button>
                 </div>
diff --git a/client/components/open/forms/components/FormFieldsEditor.vue b/client/components/open/forms/components/FormFieldsEditor.vue
index 219115d..7abef66 100644
--- a/client/components/open/forms/components/FormFieldsEditor.vue
+++ b/client/components/open/forms/components/FormFieldsEditor.vue
@@ -279,7 +279,7 @@ export default {
       ]
     },
     init () {
-      if (this.$route.name === 'forms.create' || this.$route.name === 'forms.create.guest') { // Set Default fields
+      if (this.$route.name === 'forms.create' || this.$route.name === 'forms-create-guest') { // Set Default fields
         this.formFields = (this.form.properties.length > 0) ? clonedeep(this.form.properties) : this.getDefaultFields()
       } else {
         this.formFields = clonedeep(this.form.properties).map((field) => {
diff --git a/client/components/pages/welcome/AiFeature.vue b/client/components/pages/welcome/AiFeature.vue
index ec02268..2287324 100644
--- a/client/components/pages/welcome/AiFeature.vue
+++ b/client/components/pages/welcome/AiFeature.vue
@@ -64,7 +64,7 @@
               </ul>
 
               <div class="mt-6 sm:mt-8 flex text-center justify-center lg:justify-start">
-<!--                <v-button v-if="!authenticated" class="mr-2 block" :to="{ name: 'forms.create.guest' }" :arrow="true">-->
+<!--                <v-button v-if="!authenticated" class="mr-2 block" :to="{ name: 'forms-create-guest' }" :arrow="true">-->
 <!--                  Get started for free-->
 <!--                </v-button>-->
 <!--                <v-button v-else class="mr-2 block" :to="{ name: 'forms.create' }" :arrow="true">-->
diff --git a/client/components/pages/welcome/Testimonials.vue b/client/components/pages/welcome/Testimonials.vue
index c5bddeb..e5ead78 100644
--- a/client/components/pages/welcome/Testimonials.vue
+++ b/client/components/pages/welcome/Testimonials.vue
@@ -1,5 +1,5 @@
 <template>
-  <iframe v-if="!isDarkMode" id="testimonialto-carousel-all-notionforms"
+  <iframe v-if="!isDark" id="testimonialto-carousel-all-notionforms"
           loading="lazy"
           src="https://embed.testimonial.to/carousel/all/notionforms?theme=light&autoplay=on&showmore=on&one-row=on&same-height=off"
           frameBorder="0" scrolling="no" width="100%"
@@ -8,6 +8,8 @@
 </template>
 
 <script>
+import {useDark} from "@vueuse/core";
+
 export default {
 
   props: {
@@ -18,9 +20,10 @@ export default {
   },
   data: () => ({}),
 
-  computed: {
-    isDarkMode () {
-      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  setup () {
+    const isDark = useDark()
+    return {
+      isDark
     }
   },
 
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index ff11615..648fac2 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="main-layout min-h-screen flex flex-col">
-<!--    <Navbar />-->
+    <Navbar />
 
     <slot class="flex-grow">
     </slot>
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index a9bb830..e22da17 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -29,5 +29,16 @@ export default defineNuxtConfig({
     },
     sentry: {
         dsn: opnformConfig.sentry_dsn,
+    },
+    routeRules: {
+        '/ai-form-builder': {
+            swr: 60*60
+        },
+        '/privacy-policy': {
+            swr: 60*60
+        },
+        '/terms-conditions': {
+            swr: 60*60
+        },
     }
 })
diff --git a/client/pages/ai-form-builder.vue b/client/pages/ai-form-builder.vue
index 068faf0..1f16b2d 100644
--- a/client/pages/ai-form-builder.vue
+++ b/client/pages/ai-form-builder.vue
@@ -19,7 +19,7 @@
             </p>
 
             <div class="mt-8 flex justify-center">
-              <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms.create.guest' }" :arrow="true">
+              <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms-create-guest' }" :arrow="true">
                 Get started for free
               </v-button>
               <v-button v-else class="mr-1" :to="{ name: 'forms.create' }" :arrow="true">
@@ -270,7 +270,7 @@
 <!--&lt;!&ndash;            </p>&ndash;&gt;-->
 
 <!--&lt;!&ndash;            <div class="mt-8 flex justify-center">&ndash;&gt;-->
-<!--&lt;!&ndash;              <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms.create.guest' }" :arrow="true">&ndash;&gt;-->
+<!--&lt;!&ndash;              <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms-create-guest' }" :arrow="true">&ndash;&gt;-->
 <!--&lt;!&ndash;                Get started for free&ndash;&gt;-->
 <!--&lt;!&ndash;              </v-button>&ndash;&gt;-->
 <!--&lt;!&ndash;              <v-button v-else class="mr-1" :to="{ name: 'forms.create' }" :arrow="true">&ndash;&gt;-->
@@ -443,7 +443,7 @@
           </p>
 
           <div class="mt-8 flex justify-center">
-            <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms.create.guest' }" :arrow="true">
+            <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms-create-guest' }" :arrow="true">
               Get started for free
             </v-button>
             <v-button v-else class="mr-1" :to="{ name: 'forms.create' }" :arrow="true">
diff --git a/client/pages/forms/create-guest.vue b/client/pages/forms/create/guest.vue
similarity index 90%
rename from client/pages/forms/create-guest.vue
rename to client/pages/forms/create/guest.vue
index c38a194..300c363 100644
--- a/client/pages/forms/create-guest.vue
+++ b/client/pages/forms/create/guest.vue
@@ -26,13 +26,13 @@
 <script>
 import { computed } from 'vue'
 import Form from 'vform'
-import { useTemplatesStore } from '../../stores/templates'
-import { useWorkingFormStore } from '../../stores/working_form'
-import { useWorkspacesStore } from '../../stores/workspaces'
+import { useTemplatesStore } from '../../../stores/templates.js'
+import { useWorkingFormStore } from '../../../stores/working_form.js'
+import { useWorkspacesStore } from '../../../stores/workspaces.js'
 import QuickRegister from '~/components/pages/auth/components/QuickRegister.vue'
-import initForm from '../../mixins/form_editor/initForm.js'
-import SeoMeta from '../../mixins/seo-meta.js'
-import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'
+import initForm from '../../../mixins/form_editor/initForm.js'
+import SeoMeta from '../../../mixins/seo-meta.js'
+import CreateFormBaseModal from '../../../components/pages/forms/create/CreateFormBaseModal.vue'
 
 const loadTemplates = function () {
   const templatesStore = useTemplatesStore()
diff --git a/client/pages/index.vue b/client/pages/index.vue
index fbbd0bc..42fd28f 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -44,12 +44,12 @@
           </p>
 
           <div class="mt-8 flex justify-center">
-<!--            <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms.create.guest' }" :arrow="true">-->
-<!--              Create a form for FREE-->
-<!--            </v-button>-->
-<!--            <v-button v-else class="mr-1" :to="{ name: 'forms.create' }" :arrow="true">-->
-<!--              Create a form for FREE-->
-<!--            </v-button>-->
+            <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms-create-guest' }" :arrow="true">
+              Create a form for FREE
+            </v-button>
+            <v-button v-else class="mr-1" :to="{ name: 'forms.create' }" :arrow="true">
+              Create a form for FREE
+            </v-button>
           </div>
 
           <div class="justify-center flex gap-2 mt-10">
@@ -118,13 +118,13 @@
         </template>
       </pricing-table>
 
-      <!--      <div class="pt-20 pb-5 text-center bg-white dark:bg-notion-dark-light">-->
-      <!--        <h3 class="font-semibold text-3xl">See what people are saying</h3>-->
-      <!--        <p class="w-full mt-2 mb-8">-->
-      <!--          These are the stories of our customers who have joined us with great pleasure when using this crazy feature.-->
-      <!--        </p>-->
-      <!--        <testimonials/>-->
-      <!--      </div>-->
+<!--      <div class="pt-20 pb-5 text-center bg-white dark:bg-notion-dark-light">-->
+<!--        <h3 class="font-semibold text-3xl">See what people are saying</h3>-->
+<!--        <p class="w-full mt-2 mb-8">-->
+<!--          These are the stories of our customers who have joined us with great pleasure when using this crazy feature.-->
+<!--        </p>-->
+<!--        <testimonials/>-->
+<!--      </div>-->
 
 <!--      <templates-slider class="max-w-full mb-12"/>-->
 
@@ -136,9 +136,9 @@
           Generous, unlimited free plan.
         </p>
         <div class="mt-6 flex justify-center">
-<!--          <v-button v-track.welcome_create_form_click :to="{ name: 'forms.create.guest' }" :arrow="true" color="blue">-->
-<!--            Create a form for FREE-->
-<!--          </v-button>-->
+          <v-button v-track.welcome_create_form_click :to="{ name: 'forms-create-guest' }" :arrow="true" color="blue">
+            Create a form for FREE
+          </v-button>
         </div>
         <div class="flex justify-center mt-6">
           <a target="_blank" :href="configLinks.twitter" class="mr-4">