From 5c4dc2a3d63bb530047a1f572d44389baeca0489 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Mon, 11 Dec 2023 11:56:21 +0100
Subject: [PATCH] WIP

---
 client/components/forms/FileInput.vue         |  2 +-
 client/components/forms/FlatSelectInput.vue   |  2 +-
 client/components/forms/ImageInput.vue        |  2 +-
 .../components/forms/components/VSelect.vue   |  4 +--
 client/components/global/Breadcrumb.vue       |  8 ++---
 client/components/global/Navbar.vue           | 36 +++++++++----------
 client/components/global/VButton.vue          | 10 +++---
 client/components/open/forms/OpenForm.vue     |  2 +-
 .../components/open/forms/OpenFormButton.vue  |  2 +-
 .../open/forms/components/FormEditor.vue      |  2 +-
 .../open/forms/components/FormStats.vue       |  2 +-
 .../open/forms/components/FormSubmissions.vue |  2 +-
 .../components/templates/QuestionsEditor.vue  |  4 +--
 client/components/open/tables/OpenTable.vue   |  4 +--
 client/components/pages/OpenFormFooter.vue    | 12 +++----
 .../pages/auth/components/RegisterForm.vue    | 11 +++---
 .../components/pages/forms/show/ExtraMenu.vue |  2 +-
 .../pages/templates/TemplatesList.vue         | 10 +++---
 client/components/tools/StopImpersonation.vue |  2 +-
 client/nuxt.config.ts                         | 17 +++++++--
 client/pages/forms/create.vue                 |  2 +-
 client/pages/forms/create/guest.vue           |  2 +-
 client/pages/forms/edit.vue                   |  2 +-
 client/pages/forms/show-public.vue            |  4 +--
 client/pages/forms/show/index.vue             |  2 +-
 client/pages/home.vue                         |  2 +-
 client/pages/login.vue                        | 12 ++-----
 client/pages/register.vue                     | 11 ++----
 client/pages/settings/workspace.vue           |  2 +-
 client/pages/subscriptions/success.vue        |  2 +-
 client/pages/templates/industries-show.vue    |  4 +--
 client/pages/templates/show.vue               |  2 +-
 client/pages/templates/types-show.vue         |  4 +--
 client/stores/auth.js                         |  1 +
 34 files changed, 92 insertions(+), 96 deletions(-)

diff --git a/client/components/forms/FileInput.vue b/client/components/forms/FileInput.vue
index 984ab91ee..423e46808 100644
--- a/client/components/forms/FileInput.vue
+++ b/client/components/forms/FileInput.vue
@@ -19,7 +19,7 @@
         v-if="loading"
         class="text-gray-600 dark:text-gray-400"
       >
-        <loader class="mx-auto h-6 w-6" />
+        <Loader class="mx-auto h-6 w-6" />
         <p class="mt-2 text-center text-sm text-gray-500">
           Uploading your file...
         </p>
diff --git a/client/components/forms/FlatSelectInput.vue b/client/components/forms/FlatSelectInput.vue
index c7e73627c..bfc727e28 100644
--- a/client/components/forms/FlatSelectInput.vue
+++ b/client/components/forms/FlatSelectInput.vue
@@ -6,7 +6,7 @@
       <slot name="label" />
     </template>
 
-    <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
+    <Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
     <div v-for="(option, index) in options" v-else :key="option[optionKey]" role="button"
          :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
          @click="onSelect(option[optionKey])"
diff --git a/client/components/forms/ImageInput.vue b/client/components/forms/ImageInput.vue
index ff92f73c4..a8274629a 100644
--- a/client/components/forms/ImageInput.vue
+++ b/client/components/forms/ImageInput.vue
@@ -59,7 +59,7 @@
               @drop.prevent="onUploadDropEvent($event)"
             >
               <div v-if="loading" class="text-gray-600 dark:text-gray-400">
-                <loader class="h-6 w-6 mx-auto m-10" />
+                <Loader class="h-6 w-6 mx-auto m-10" />
                 <p class="text-center mt-6">
                   Uploading your file...
                 </p>
diff --git a/client/components/forms/components/VSelect.vue b/client/components/forms/components/VSelect.vue
index 22236dc89..c5e709024 100644
--- a/client/components/forms/components/VSelect.vue
+++ b/client/components/forms/components/VSelect.vue
@@ -9,7 +9,7 @@
       >
         <div :class="{'h-6': !multiple, 'min-h-8': multiple && !loading}">
           <transition name="fade" mode="out-in">
-            <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
+            <Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
             <div v-else-if="modelValue" key="value" class="flex" :class="{'min-h-8': multiple}">
               <slot name="selected" :option="modelValue" />
             </div>
@@ -45,7 +45,7 @@
           />
         </div>
         <div v-if="loading" class="w-full py-2 flex justify-center">
-          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+          <Loader class="h-6 w-6 text-nt-blue mx-auto" />
         </div>
         <template v-if="filteredOptions.length > 0">
           <li v-for="item in filteredOptions" :key="item[optionKey]" role="option" :style="optionStyle"
diff --git a/client/components/global/Breadcrumb.vue b/client/components/global/Breadcrumb.vue
index 03e9f2b58..16b7e39ff 100644
--- a/client/components/global/Breadcrumb.vue
+++ b/client/components/global/Breadcrumb.vue
@@ -6,7 +6,7 @@
     <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
       <div class="flex items-center justify-center space-x-4">
         <div v-if="displayHome" class="flex items-center">
-          <router-link class="text-gray-400 hover:text-gray-500" :to="{ name: (authenticated) ? 'home' : 'index' }">
+          <NuxtLink class="text-gray-400 hover:text-gray-500" :to="{ name: (authenticated) ? 'home' : 'index' }">
             <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <path fill-rule="evenodd"
                     d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
@@ -14,7 +14,7 @@
               />
             </svg>
             <span class="sr-only">Home</span>
-          </router-link>
+          </NuxtLink>
           <svg class="flex-shrink-0 w-5 h-5 text-gray-400 ml-4" viewBox="0 0 20 20" fill="currentColor"
                aria-hidden="true"
           >
@@ -26,11 +26,11 @@
         </div>
 
         <div v-for="(item,index) in path" :key="index" class="flex items-center">
-          <router-link v-if="item.route" class="text-sm font-semibold text-gray-500 hover:text-gray-700 truncate"
+          <NuxtLink v-if="item.route" class="text-sm font-semibold text-gray-500 hover:text-gray-700 truncate"
                        :to="item.route"
           >
             {{ item.label }}
-          </router-link>
+          </NuxtLink>
           <div v-else class="text-sm font-semibold sm:w-full w-36 text-blue-500 truncate">
             {{ item.label }}
           </div>
diff --git a/client/components/global/Navbar.vue b/client/components/global/Navbar.vue
index d7941d440..83913c8b8 100644
--- a/client/components/global/Navbar.vue
+++ b/client/components/global/Navbar.vue
@@ -3,43 +3,43 @@
     <div class="max-w-7xl mx-auto px-8">
       <div class="flex items-center justify-between h-16">
         <div class="flex items-center">
-          <router-link :to="{ name: user ? 'home' : 'index' }" class="flex-shrink-0 font-semibold hover:no-underline flex items-center">
+          <NuxtLink :to="{ name: user ? 'home' : 'index' }" class="flex-shrink-0 font-semibold hover:no-underline flex items-center">
             <img src="/img/logo.svg" alt="notion tools logo" class="w-8 h-8">
 
             <span
               class="ml-2 text-md hidden sm:inline text-black dark:text-white"
             >
               OpnForm</span>
-          </router-link>
+          </NuxtLink>
           <workspace-dropdown class="ml-6" />
         </div>
         <div v-if="showAuth" class="hidden md:block ml-auto relative">
-          <router-link v-if="$route.name !== 'templates'" :to="{name:'templates'}"
+          <NuxtLink v-if="$route.name !== 'templates'" :to="{name:'templates'}"
                        class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8"
           >
             Templates
-          </router-link>
-          <router-link v-if="$route.name !== 'ai-form-builder'" :to="{name:'ai-form-builder'}"
+          </NuxtLink>
+          <NuxtLink v-if="$route.name !== 'ai-form-builder'" :to="{name:'ai-form-builder'}"
                        class="text-sm text-gray-600 dark:text-white hidden lg:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
           >
             AI Form Builder
-          </router-link>
-          <router-link v-if="paidPlansEnabled && (user===null || (user && workspace && !workspace.is_pro)) && $route.name !== 'pricing'" :to="{name:'pricing'}"
+          </NuxtLink>
+          <NuxtLink v-if="paidPlansEnabled && (user===null || (user && workspace && !workspace.is_pro)) && $route.name !== 'pricing'" :to="{name:'pricing'}"
                        class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8"
           >
             <span v-if="user">Upgrade</span>
             <span v-else>Pricing</span>
-          </router-link>
+          </NuxtLink>
           <a v-if="hasCrisp" href="#"
              class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1" @click.prevent="openCrisp"
           >
             Help
           </a>
-          <a v-else :href="helpUrl"
+          <NuxtLink v-else :href="helpUrl"
              class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1" target="_blank"
           >
             Help
-          </a>
+          </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">
@@ -59,7 +59,7 @@
                     </button>
                   </template>
 
-                  <router-link v-if="userOnboarded" :to="{ name: 'home' }"
+                  <NuxtLink v-if="userOnboarded" :to="{ name: 'home' }"
                                class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24"
@@ -70,18 +70,18 @@
                       />
                     </svg>
                     My Forms
-                  </router-link>
+                  </NuxtLink>
 
-                  <router-link v-if="userOnboarded" :to="{ name: 'my_templates' }"
+                  <NuxtLink v-if="userOnboarded" :to="{ name: 'my_templates' }"
                                class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                     </svg>
                     My Templates
-                  </router-link>
+                  </NuxtLink>
 
-                  <router-link :to="{ name: 'settings.profile' }"
+                  <NuxtLink :to="{ name: 'settings.profile' }"
                                class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
                     <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
@@ -95,7 +95,7 @@
                       />
                     </svg>
                     Settings
-                  </router-link>
+                  </NuxtLink>
 
                   <a href="#"
                      class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
@@ -112,12 +112,12 @@
                   </a>
                 </dropdown>
                 <div v-else class="flex gap-2">
-                  <router-link v-if="$route.name !== 'login'" :to="{ name: 'login' }"
+                  <NuxtLink v-if="$route.name !== 'login'" :to="{ name: 'login' }"
                                class="text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white px-0 sm:px-3 py-2 rounded-md text-sm"
                                active-class="text-gray-800 dark:text-white"
                   >
                     Login
-                  </router-link>
+                  </NuxtLink>
 
                   <v-button v-track.nav_create_form_click size="small" :to="{ name: 'forms-create-guest' }" color="outline-blue" :arrow="true">
                     Create a form
diff --git a/client/components/global/VButton.vue b/client/components/global/VButton.vue
index d2264b224..4ee7d8ae6 100644
--- a/client/components/global/VButton.vue
+++ b/client/components/global/VButton.vue
@@ -1,7 +1,7 @@
 <template>
-  <a v-if="href" :class="btnClasses" :href="href" :target="target">
+  <NuxtLink v-if="href" :class="btnClasses" :href="href" :target="target">
     <slot />
-  </a>
+  </NuxtLink>
   <button v-else-if="!to" :type="nativeType" :disabled="loading?true:null" :class="btnClasses"
           @click="onClick($event)"
   >
@@ -15,9 +15,9 @@
         />
       </svg>
     </template>
-    <loader v-else class="h-6 w-6 mx-auto" :class="`text-${colorShades['text']}`" />
+    <Loader v-else class="h-6 w-6 mx-auto" :class="`text-${colorShades['text']}`" />
   </button>
-  <router-link v-else :class="btnClasses" :to="to" :target="target">
+  <NuxtLink v-else :class="btnClasses" :to="to" :target="target">
     <span class="no-underline mx-auto">
       <slot />
     </span>
@@ -26,7 +26,7 @@
             stroke-linejoin="round"
       />
     </svg>
-  </router-link>
+  </NuxtLink>
 </template>
 
 <script>
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index aee5c7318..52b5352a6 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="isAutoSubmit">
     <p class="text-center p-4">
-      <loader class="h-6 w-6 text-nt-blue mx-auto" />
+      <Loader class="h-6 w-6 text-nt-blue mx-auto" />
     </p>
   </div>
   <form v-else-if="dataForm" @submit.prevent="">
diff --git a/client/components/open/forms/OpenFormButton.vue b/client/components/open/forms/OpenFormButton.vue
index 7d0ef8f5c..854939801 100644
--- a/client/components/open/forms/OpenFormButton.vue
+++ b/client/components/open/forms/OpenFormButton.vue
@@ -5,7 +5,7 @@
     <template v-if="!loading">
       <slot />
     </template>
-    <loader v-else class="h-6 w-6 text-white mx-auto" />
+    <Loader v-else class="h-6 w-6 text-white mx-auto" />
   </button>
 </template>
 
diff --git a/client/components/open/forms/components/FormEditor.vue b/client/components/open/forms/components/FormEditor.vue
index 874eac527..beafa5a7e 100644
--- a/client/components/open/forms/components/FormEditor.vue
+++ b/client/components/open/forms/components/FormEditor.vue
@@ -78,7 +78,7 @@
     </div>
   </div>
   <div v-else class="flex justify-center items-center">
-    <loader class="w-6 h-6" />
+    <Loader class="w-6 h-6" />
   </div>
 </template>
 
diff --git a/client/components/open/forms/components/FormStats.vue b/client/components/open/forms/components/FormStats.vue
index 46154e127..7c5032d46 100644
--- a/client/components/open/forms/components/FormStats.vue
+++ b/client/components/open/forms/components/FormStats.vue
@@ -19,7 +19,7 @@
       >
 
     </div>
-    <loader v-else-if="isLoading" class="h-6 w-6 text-nt-blue mx-auto" />
+    <Loader v-else-if="isLoading" class="h-6 w-6 text-nt-blue mx-auto" />
     <LineChart v-else
                :options="chartOptions"
                :data="chartData"
diff --git a/client/components/open/forms/components/FormSubmissions.vue b/client/components/open/forms/components/FormSubmissions.vue
index 626d6ca6e..c67c43ad1 100644
--- a/client/components/open/forms/components/FormSubmissions.vue
+++ b/client/components/open/forms/components/FormSubmissions.vue
@@ -40,7 +40,7 @@
       </div>
     </modal>
 
-    <loader v-if="!form || !formInitDone" class="h-6 w-6 text-nt-blue mx-auto" />
+    <Loader v-if="!form || !formInitDone" class="h-6 w-6 text-nt-blue mx-auto" />
     <div v-else>
       <div v-if="form && tableData.length > 0" class="flex flex-wrap items-end">
         <div class="flex-grow">
diff --git a/client/components/open/forms/components/templates/QuestionsEditor.vue b/client/components/open/forms/components/templates/QuestionsEditor.vue
index dad4b0c2c..5e9b8f6a7 100644
--- a/client/components/open/forms/components/templates/QuestionsEditor.vue
+++ b/client/components/open/forms/components/templates/QuestionsEditor.vue
@@ -7,7 +7,7 @@
       <span v-if="required" class="text-red-500 required-dot">*</span>
     </label>
 
-    <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
+    <Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
     <div v-else class="my-3">
       <div v-for="(questionForm, quesKey) in allQuestions" :key="quesKey" class="bg-gray-100 p-2 mb-4">
           <v-button color="red" size="small" class="mb-2" @click.prevent="onRemove(quesKey)">
@@ -64,7 +64,7 @@ export default {
   watch: { },
 
   computed: { },
-  
+
   methods: {
     onAdd() {
       this.allQuestions.push(this.newQuestion)
diff --git a/client/components/open/tables/OpenTable.vue b/client/components/open/tables/OpenTable.vue
index 61887eb39..8fb2c9fca 100644
--- a/client/components/open/tables/OpenTable.vue
+++ b/client/components/open/tables/OpenTable.vue
@@ -60,14 +60,14 @@
       </tr>
       <tr v-if="loading" class="n-table-row border-t bg-gray-50 dark:bg-gray-900">
         <td :colspan="form.properties.length" class="p-8 w-full">
-          <loader class="w-4 h-4 mx-auto" />
+          <Loader class="w-4 h-4 mx-auto" />
         </td>
       </tr>
     </tbody>
     <tbody v-else key="body-content" class="n-table-body">
       <tr class="n-table-row loader w-full">
         <td :colspan="form.properties.length" class="n-table-cell w-full p-8">
-          <loader v-if="loading" class="w-4 h-4 mx-auto" />
+          <Loader v-if="loading" class="w-4 h-4 mx-auto" />
           <p v-else class="text-gray-500 text-center">
             No data found.
           </p>
diff --git a/client/components/pages/OpenFormFooter.vue b/client/components/pages/OpenFormFooter.vue
index c9d45d646..b83ddbe8c 100644
--- a/client/components/pages/OpenFormFooter.vue
+++ b/client/components/pages/OpenFormFooter.vue
@@ -7,24 +7,24 @@
         </p>
       </div>
       <div class="flex justify-center mt-5 md:mt-0">
-        <router-link :to="{ name: user ? 'home' : 'index' }" class="flex-shrink-0 font-semibold flex items-center">
+        <NuxtLink :to="{ name: user ? 'home' : 'index' }" class="flex-shrink-0 font-semibold flex items-center">
           <img src="/img/logo.svg" alt="notion tools logo" class="w-10 h-10">
 
           <span class="ml-2 text-xl text-black dark:text-white">
             OpnForm
           </span>
-        </router-link>
+        </NuxtLink>
       </div>
       <ul class="flex justify-center mt-5 md:mt-1">
           <li class="mr-10">
-            <router-link :to="{name:'privacy-policy'}" class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
+            <NuxtLink :to="{name:'privacy-policy'}" class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
               Privacy Policy
-            </router-link>
+            </NuxtLink>
           </li>
           <li class="list-disc pl-3">
-            <router-link :to="{name:'terms-conditions'}" class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
+            <NuxtLink :to="{name:'terms-conditions'}" class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
               Terms & Conditions
-            </router-link>
+            </NuxtLink>
           </li>
         </ul>
     </div>
diff --git a/client/components/pages/auth/components/RegisterForm.vue b/client/components/pages/auth/components/RegisterForm.vue
index 740e8c512..d25c6801d 100644
--- a/client/components/pages/auth/components/RegisterForm.vue
+++ b/client/components/pages/auth/components/RegisterForm.vue
@@ -48,10 +48,7 @@
 </template>
 
 <script>
-import { computed } from 'vue'
 import Form from 'vform'
-import { useAuthStore } from '../../../../stores/auth.js'
-import { initCrisp } from '../../../middleware/check-auth.js'
 
 export default {
   name: 'RegisterForm',
@@ -66,8 +63,10 @@ export default {
 
   setup () {
     const authStore = useAuthStore()
+    const amplitude = useAmplitude()
     return {
-      authStore
+      authStore,
+      logEvent: amplitude.logEvent
     }
   },
 
@@ -127,10 +126,8 @@ export default {
         await this.authStore.updateUser(data)
 
         // Track event
-        this.$logEvent('register', { source: this.form.hear_about_us })
 
-        initCrisp(data)
-        this.$crisp.push(['set', 'session:event', [[['register', {}, 'blue']]]])
+        logEvent('register', { source: this.form.hear_about_us })
 
         // AppSumo License
         if (data.appsumo_license === false) {
diff --git a/client/components/pages/forms/show/ExtraMenu.vue b/client/components/pages/forms/show/ExtraMenu.vue
index 5c5a2fc8e..4bb23eb21 100644
--- a/client/components/pages/forms/show/ExtraMenu.vue
+++ b/client/components/pages/forms/show/ExtraMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="loadingDuplicate || loadingDelete" class="pr-4 pt-2">
-      <loader class="h-6 w-6 mx-auto" />
+      <Loader class="h-6 w-6 mx-auto" />
     </div>
     <dropdown v-else class="inline" dusk="nav-dropdown">
       <template #trigger="{toggle}">
diff --git a/client/components/pages/templates/TemplatesList.vue b/client/components/pages/templates/TemplatesList.vue
index 5a2468f74..4f5187c38 100644
--- a/client/components/pages/templates/TemplatesList.vue
+++ b/client/components/pages/templates/TemplatesList.vue
@@ -21,7 +21,7 @@
         </div>
 
         <div v-if="templatesLoading" class="text-center mt-4">
-          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+          <Loader class="h-6 w-6 text-nt-blue mx-auto" />
         </div>
         <p v-else-if="enrichedTemplates.length === 0" class="text-center mt-4">
           No templates found.
@@ -44,8 +44,8 @@
           </div>
 
           <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <router-link v-for="row in types" :key="row.slug" 
-                        :to="{params:{slug:row.slug}, name:'templates.types.show'}" 
+            <router-link v-for="row in types" :key="row.slug"
+                        :to="{params:{slug:row.slug}, name:'templates.types.show'}"
                         :title="row.name"
                         class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
             >
@@ -64,8 +64,8 @@
           </div>
 
           <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <router-link v-for="row in industries" :key="row.slug" 
-                        :to="{params:{slug:row.slug}, name:'templates.industries.show'}" 
+            <router-link v-for="row in industries" :key="row.slug"
+                        :to="{params:{slug:row.slug}, name:'templates.industries.show'}"
                         :title="row.name"
                         class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
             >
diff --git a/client/components/tools/StopImpersonation.vue b/client/components/tools/StopImpersonation.vue
index 70241aaf3..81e8517c9 100644
--- a/client/components/tools/StopImpersonation.vue
+++ b/client/components/tools/StopImpersonation.vue
@@ -16,7 +16,7 @@
       </template>
       <template v-else>
         <div class="px-6">
-          <loader class="h-4 w-4 inline" />
+          <Loader class="h-4 w-4 inline" />
         </div>
       </template>
     </button>
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index e22da17f7..c704711b7 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -30,15 +30,26 @@ export default defineNuxtConfig({
     sentry: {
         dsn: opnformConfig.sentry_dsn,
     },
+    components: [
+        {
+            path: '~/components/forms',
+            pathPrefix: false,
+        },
+        {
+            path: '~/components/global',
+            pathPrefix: false,
+        },
+        '~/components',
+    ],
     routeRules: {
         '/ai-form-builder': {
-            swr: 60*60
+            swr: 60 * 60
         },
         '/privacy-policy': {
-            swr: 60*60
+            swr: 60 * 60
         },
         '/terms-conditions': {
-            swr: 60*60
+            swr: 60 * 60
         },
     }
 })
diff --git a/client/pages/forms/create.vue b/client/pages/forms/create.vue
index 07510d9d6..a8f945d39 100644
--- a/client/pages/forms/create.vue
+++ b/client/pages/forms/create.vue
@@ -11,7 +11,7 @@
                      @on-save="formInitialHash=null"
         />
         <div v-else class="text-center mt-4 py-6">
-          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+          <Loader class="h-6 w-6 text-nt-blue mx-auto" />
         </div>
       </div>
     </transition>
diff --git a/client/pages/forms/create/guest.vue b/client/pages/forms/create/guest.vue
index 300c36365..cad5544b4 100644
--- a/client/pages/forms/create/guest.vue
+++ b/client/pages/forms/create/guest.vue
@@ -12,7 +12,7 @@
                      @openRegister="openRegister"
         />
         <div v-else class="text-center mt-4 py-6">
-          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+          <Loader class="h-6 w-6 text-nt-blue mx-auto" />
         </div>
       </div>
     </transition>
diff --git a/client/pages/forms/edit.vue b/client/pages/forms/edit.vue
index 6130f22b5..e0b68bd81 100644
--- a/client/pages/forms/edit.vue
+++ b/client/pages/forms/edit.vue
@@ -8,7 +8,7 @@
       {{ error }}
     </div>
     <div v-else class="text-center mt-4 py-6">
-      <loader class="h-6 w-6 text-nt-blue mx-auto" />
+      <Loader class="h-6 w-6 text-nt-blue mx-auto" />
     </div>
   </div>
 </template>
diff --git a/client/pages/forms/show-public.vue b/client/pages/forms/show-public.vue
index 58f8614a3..73d8f1a68 100644
--- a/client/pages/forms/show-public.vue
+++ b/client/pages/forms/show-public.vue
@@ -31,13 +31,13 @@
       </div>
       <div v-else-if="formLoading">
         <p class="text-center mt-6 p-4">
-          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+          <Loader class="h-6 w-6 text-nt-blue mx-auto" />
         </p>
       </div>
       <template v-else>
         <div v-if="recordLoading">
           <p class="text-center mt-6 p-4">
-            <loader class="h-6 w-6 text-nt-blue mx-auto" />
+            <Loader class="h-6 w-6 text-nt-blue mx-auto" />
           </p>
         </div>
         <open-complete-form v-show="!recordLoading" ref="open-complete-form" :form="form" class="mb-10"
diff --git a/client/pages/forms/show/index.vue b/client/pages/forms/show/index.vue
index 391871ea7..c4d0469af 100644
--- a/client/pages/forms/show/index.vue
+++ b/client/pages/forms/show/index.vue
@@ -122,7 +122,7 @@
       </div>
     </template>
     <div v-else-if="loading" class="text-center w-full p-5">
-      <loader class="h-6 w-6 mx-auto" />
+      <Loader class="h-6 w-6 mx-auto" />
     </div>
     <div v-else class="text-center w-full p-5">
       Form not found.
diff --git a/client/pages/home.vue b/client/pages/home.vue
index 595e3d100..063e6e60b 100644
--- a/client/pages/home.vue
+++ b/client/pages/home.vue
@@ -95,7 +95,7 @@
             </div>
           </div>
           <div v-if="formsLoading" class="text-center">
-            <loader class="h-6 w-6 text-nt-blue mx-auto" />
+            <Loader class="h-6 w-6 text-nt-blue mx-auto" />
           </div>
         </div>
       </div>
diff --git a/client/pages/login.vue b/client/pages/login.vue
index 2ca55f43a..0f4bd3a7e 100644
--- a/client/pages/login.vue
+++ b/client/pages/login.vue
@@ -45,9 +45,6 @@
               Unlimited submissions
             </p>
           </div>
-<!--          <div class="mt-3 p-6">-->
-<!--            <testimonials />-->
-<!--          </div>-->
         </div>
       </div>
     </div>
@@ -56,22 +53,17 @@
 </template>
 
 <script>
-import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
-import Testimonials from '../../components/pages/welcome/Testimonials.vue'
-import LoginForm from './components/LoginForm.vue'
-import SeoMeta from '../../mixins/seo-meta.js'
+import OpenFormFooter from '~/components/pages/OpenFormFooter.vue'
+import LoginForm from "~/components/pages/auth/components/LoginForm.vue"
 
 export default {
   components: {
     OpenFormFooter,
-    Testimonials,
     LoginForm
   },
 
   middleware: 'guest',
 
-  mixins: [SeoMeta],
-
   data: () => ({
     metaTitle: 'Login',
   }),
diff --git a/client/pages/register.vue b/client/pages/register.vue
index e0ac9dca5..e915c6d38 100644
--- a/client/pages/register.vue
+++ b/client/pages/register.vue
@@ -46,9 +46,6 @@
               Unlimited submissions
             </p>
           </div>
-          <!--          <div class="mt-3 p-6">-->
-          <!--            <testimonials />-->
-          <!--          </div>-->
         </div>
       </div>
     </div>
@@ -57,10 +54,9 @@
 </template>
 
 <script>
-import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
-import RegisterForm from './components/RegisterForm.vue'
-import SeoMeta from '../../mixins/seo-meta.js'
-import AppSumoRegister from '../../components/vendor/appsumo/AppSumoRegister.vue'
+import OpenFormFooter from '~/components/pages/OpenFormFooter.vue'
+import RegisterForm from "~/components/pages/auth/components/RegisterForm.vue"
+import AppSumoRegister from "~/components/vendor/appsumo/AppSumoRegister.vue"
 
 export default {
   components: {
@@ -69,7 +65,6 @@ export default {
     RegisterForm
   },
 
-  mixins: [SeoMeta],
 
   middleware: 'guest',
 
diff --git a/client/pages/settings/workspace.vue b/client/pages/settings/workspace.vue
index d93b390c8..085c1a3b1 100644
--- a/client/pages/settings/workspace.vue
+++ b/client/pages/settings/workspace.vue
@@ -20,7 +20,7 @@
     </div>
 
     <div v-if="loading" class="w-full text-blue-500 text-center">
-      <loader class="h-10 w-10 p-5" />
+      <Loader class="h-10 w-10 p-5" />
     </div>
     <div v-else-if="workspace">
       <div class="mt-4 flex group bg-white items-center">
diff --git a/client/pages/subscriptions/success.vue b/client/pages/subscriptions/success.vue
index e8d976f64..86cd65b15 100644
--- a/client/pages/subscriptions/success.vue
+++ b/client/pages/subscriptions/success.vue
@@ -8,7 +8,7 @@
         We're checking the status of your subscription please wait a moment...
       </h4>
       <div class="text-center">
-        <loader class="h-6 w-6 text-nt-blue mx-auto mt-20" />
+        <Loader class="h-6 w-6 text-nt-blue mx-auto mt-20" />
       </div>
     </div>
     <open-form-footer />
diff --git a/client/pages/templates/industries-show.vue b/client/pages/templates/industries-show.vue
index 697cf8177..e37796177 100644
--- a/client/pages/templates/industries-show.vue
+++ b/client/pages/templates/industries-show.vue
@@ -3,7 +3,7 @@
     <breadcrumb :path="breadcrumbs" />
 
     <div v-if="templatesLoading" class="text-center my-4">
-      <loader class="h-6 w-6 text-nt-blue mx-auto" />
+      <Loader class="h-6 w-6 text-nt-blue mx-auto" />
     </div>
     <p v-else-if="industry === null || !industry" class="text-center my-4">
       We could not find this industry.
@@ -41,7 +41,7 @@
           </div>
 
           <div v-if="templatesLoading" class="text-center mt-4">
-            <loader class="h-6 w-6 text-nt-blue mx-auto" />
+            <Loader class="h-6 w-6 text-nt-blue mx-auto" />
           </div>
           <p v-else-if="enrichedTemplates.length === 0" class="text-center mt-4">
             No templates found.
diff --git a/client/pages/templates/show.vue b/client/pages/templates/show.vue
index ae841e512..c28d49de7 100644
--- a/client/pages/templates/show.vue
+++ b/client/pages/templates/show.vue
@@ -26,7 +26,7 @@
     </breadcrumb>
 
     <div v-if="templatesLoading" class="text-center my-4">
-      <loader class="h-6 w-6 text-nt-blue mx-auto" />
+      <Loader class="h-6 w-6 text-nt-blue mx-auto" />
     </div>
     <p v-else-if="template === null || !template" class="text-center my-4">
       We could not find this template.
diff --git a/client/pages/templates/types-show.vue b/client/pages/templates/types-show.vue
index 8f4821dc2..2a41a21c5 100644
--- a/client/pages/templates/types-show.vue
+++ b/client/pages/templates/types-show.vue
@@ -3,7 +3,7 @@
     <breadcrumb :path="breadcrumbs" />
 
     <div v-if="templatesLoading" class="text-center my-4">
-      <loader class="h-6 w-6 text-nt-blue mx-auto" />
+      <Loader class="h-6 w-6 text-nt-blue mx-auto" />
     </div>
     <p v-else-if="type === null || !type" class="text-center my-4">
       We could not find this type.
@@ -41,7 +41,7 @@
           </div>
 
           <div v-if="templatesLoading" class="text-center mt-4">
-            <loader class="h-6 w-6 text-nt-blue mx-auto" />
+            <Loader class="h-6 w-6 text-nt-blue mx-auto" />
           </div>
           <p v-else-if="enrichedTemplates.length === 0" class="text-center mt-4">
             No templates found.
diff --git a/client/stores/auth.js b/client/stores/auth.js
index 0045f4df3..5fa2c2219 100644
--- a/client/stores/auth.js
+++ b/client/stores/auth.js
@@ -49,6 +49,7 @@ export const useAuthStore = defineStore('auth', {
 
     updateUser (payload) {
       this.user = payload
+      this.initServiceClients()
     },
 
     initServiceClients() {