From a3a9254665f5a7462514f4e45e924c89d8b09a3a Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Thu, 14 Dec 2023 16:53:05 +0100
Subject: [PATCH] WIP

---
 ...Input.vue => RichTextAreaInput.client.vue} |   0
 client/components/forms/useFormInput.js       |   2 +-
 client/components/global/Modal.vue            |   7 +-
 .../forms/components/FormFieldsEditor.vue     |   2 +-
 .../pages/auth/components/LoginForm.vue       |  13 +-
 .../pages/auth/components/RegisterForm.vue    |   2 +-
 client/components/pages/welcome/AiFeature.vue |   2 +-
 client/composables/lib/vForm/Errors.js        |  75 ++++++++
 client/composables/lib/vForm/Form.js          | 175 ++++++++++++++++++
 client/composables/useForm.js                 |   5 +
 client/composables/useOpnFetch.js             |   5 +
 client/middleware/admin.js                    |   8 +
 client/middleware/auth.js                     |  11 ++
 client/middleware/check-auth.global.js        |   5 +
 client/opnform.config.js                      |   4 +-
 client/package-lock.json                      |  22 +--
 client/package.json                           |   3 +-
 client/pages/ai-form-builder.vue              |   6 +-
 client/pages/home.vue                         |  13 +-
 client/pages/index.vue                        |   2 +-
 client/plugins/fetch.js                       |  45 +++++
 client/stores/auth.js                         |  76 +++++---
 client/stores/forms.js                        |  30 +--
 client/stores/workspaces.js                   |  54 +++---
 24 files changed, 445 insertions(+), 122 deletions(-)
 rename client/components/forms/{RichTextAreaInput.vue => RichTextAreaInput.client.vue} (100%)
 create mode 100644 client/composables/lib/vForm/Errors.js
 create mode 100644 client/composables/lib/vForm/Form.js
 create mode 100644 client/composables/useForm.js
 create mode 100644 client/composables/useOpnFetch.js
 create mode 100644 client/middleware/admin.js
 create mode 100644 client/middleware/auth.js
 create mode 100644 client/middleware/check-auth.global.js
 create mode 100644 client/plugins/fetch.js

diff --git a/client/components/forms/RichTextAreaInput.vue b/client/components/forms/RichTextAreaInput.client.vue
similarity index 100%
rename from client/components/forms/RichTextAreaInput.vue
rename to client/components/forms/RichTextAreaInput.client.vue
diff --git a/client/components/forms/useFormInput.js b/client/components/forms/useFormInput.js
index a478919..6c72199 100644
--- a/client/components/forms/useFormInput.js
+++ b/client/components/forms/useFormInput.js
@@ -33,7 +33,7 @@ export function useFormInput (props, context, formPrefixKey = null) {
   })
 
   const hasError = computed(() => {
-    return hasValidation && props.form?.errors?.has(name)
+    return hasValidation && props.form?.errors?.has(props.name)
   })
 
   const compVal = computed({
diff --git a/client/components/global/Modal.vue b/client/components/global/Modal.vue
index 33f71b9..887e077 100644
--- a/client/components/global/Modal.vue
+++ b/client/components/global/Modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <portal to="modals" :order="portalOrder">
+  <Teleport to="body">
     <transition @leave="(el,done) => motions.backdrop.leave(done)">
       <div v-if="show" v-motion="'backdrop'" :variants="motionFadeIn"
            class="fixed z-30 top-0 inset-0 px-4 sm:px-0 flex items-top justify-center bg-gray-700/75 w-full h-screen overflow-y-scroll"
@@ -46,7 +46,7 @@
         </div>
       </div>
     </transition>
-  </portal>
+  </Teleport>
 </template>
 
 <script>
@@ -71,9 +71,6 @@ export default {
     },
     closeable: {
       default: true
-    },
-    portalOrder: {
-      default: 1
     }
   },
 
diff --git a/client/components/open/forms/components/FormFieldsEditor.vue b/client/components/open/forms/components/FormFieldsEditor.vue
index 7abef66..eb5616f 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/auth/components/LoginForm.vue b/client/components/pages/auth/components/LoginForm.vue
index c1fbfba..2257f9d 100644
--- a/client/components/pages/auth/components/LoginForm.vue
+++ b/client/components/pages/auth/components/LoginForm.vue
@@ -41,19 +41,12 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-import Form from 'vform'
 import Cookies from 'js-cookie'
-import { useAuthStore } from '../../../../stores/auth.js'
-import OpenFormFooter from '../../OpenFormFooter.vue'
-import Testimonials from '../../welcome/Testimonials.vue'
 import ForgotPasswordModal from '../ForgotPasswordModal.vue'
 
 export default {
   name: 'LoginForm',
   components: {
-    OpenFormFooter,
-    Testimonials,
     ForgotPasswordModal
   },
   props: {
@@ -72,7 +65,7 @@ export default {
   },
 
   data: () => ({
-    form: new Form({
+    form: useForm({
       email: '',
       password: ''
     }),
@@ -83,10 +76,10 @@ export default {
   methods: {
     async login () {
       // Submit the form.
-      const { data } = await this.form.post('/api/login')
+      const data = await this.form.post('login')
 
       // Save the token.
-      this.authStore.saveToken(data.token, this.remember)
+      this.authStore.setToken(data.token, this.remember)
 
       // Fetch the user.
       await this.authStore.fetchUser()
diff --git a/client/components/pages/auth/components/RegisterForm.vue b/client/components/pages/auth/components/RegisterForm.vue
index d25c680..441b632 100644
--- a/client/components/pages/auth/components/RegisterForm.vue
+++ b/client/components/pages/auth/components/RegisterForm.vue
@@ -142,7 +142,7 @@ export default {
         if (this.isQuick) {
           this.$emit('afterQuickLogin')
         } else {
-          this.$router.push({ name: 'forms.create' })
+          this.$router.push({ name: 'forms-create' })
         }
       }
     }
diff --git a/client/components/pages/welcome/AiFeature.vue b/client/components/pages/welcome/AiFeature.vue
index 2287324..252bcba 100644
--- a/client/components/pages/welcome/AiFeature.vue
+++ b/client/components/pages/welcome/AiFeature.vue
@@ -67,7 +67,7 @@
 <!--                <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">-->
+<!--                <v-button v-else class="mr-2 block" :to="{ name: 'forms-create' }" :arrow="true">-->
 <!--                  Get started for free-->
 <!--                </v-button>-->
 <!--                <v-button color="light-gray" class="mr-1 block" :to="{ name: 'aiformbuilder' }">-->
diff --git a/client/composables/lib/vForm/Errors.js b/client/composables/lib/vForm/Errors.js
new file mode 100644
index 0000000..e4aa613
--- /dev/null
+++ b/client/composables/lib/vForm/Errors.js
@@ -0,0 +1,75 @@
+
+function arrayWrap(value) {
+  return Array.isArray(value) ? value : [value];
+}
+
+export default class Errors {
+  constructor() {
+    this.errors = {};
+  }
+
+  set(field, messages = undefined) {
+    if (typeof field === 'object') {
+      this.errors = field;
+    } else {
+      this.set({ ...this.errors, [field]: arrayWrap(messages) });
+    }
+  }
+
+  all() {
+    return this.errors;
+  }
+
+  has(field) {
+    return Object.prototype.hasOwnProperty.call(this.errors, field);
+  }
+
+  hasAny(...fields) {
+    return fields.some(field => this.has(field));
+  }
+
+  any() {
+    return Object.keys(this.errors).length > 0;
+  }
+
+  get(field) {
+    if (this.has(field)) {
+      return this.getAll(field)[0];
+    }
+  }
+
+  getAll(field) {
+    return arrayWrap(this.errors[field] || []);
+  }
+
+  only(...fields) {
+    const messages = [];
+
+    fields.forEach((field) => {
+      const message = this.get(field);
+      if (message) {
+        messages.push(message);
+      }
+    });
+
+    return messages;
+  }
+
+  flatten() {
+    return Object.values(this.errors).reduce((a, b) => a.concat(b), []);
+  }
+
+  clear(field = undefined) {
+    const errors = {};
+
+    if (field) {
+      Object.keys(this.errors).forEach((key) => {
+        if (key !== field) {
+          errors[key] = this.errors[key];
+        }
+      });
+    }
+
+    this.set(errors);
+  }
+}
diff --git a/client/composables/lib/vForm/Form.js b/client/composables/lib/vForm/Form.js
new file mode 100644
index 0000000..aacea08
--- /dev/null
+++ b/client/composables/lib/vForm/Form.js
@@ -0,0 +1,175 @@
+import {serialize} from 'object-to-formdata';
+import Errors from './Errors';
+import cloneDeep from 'clone-deep';
+import {useOpnFetch} from "~/composables/useOpnFetch.js";
+
+function hasFiles(data) {
+  return data instanceof File ||
+    data instanceof Blob ||
+    data instanceof FileList ||
+    (typeof data === 'object' && data !== null && Object.values(data).find(value => hasFiles(value)) !== undefined);
+}
+
+class Form {
+  constructor(data = {}) {
+    this.originalData = {};
+    this.busy = false;
+    this.successful = false;
+    this.recentlySuccessful = false;
+    this.recentlySuccessfulTimeoutId = undefined;
+    this.errors = new Errors();
+    this.update(data);
+  }
+
+  static errorMessage = 'Something went wrong. Please try again.';
+  static recentlySuccessfulTimeout = 2000;
+  static ignore = ['busy', 'successful', 'errors', 'originalData', 'recentlySuccessful', 'recentlySuccessfulTimeoutId'];
+
+  static make(augment) {
+    return new this(augment);
+  }
+
+  update(data) {
+    this.originalData = Object.assign({}, this.originalData, cloneDeep(data));
+    Object.assign(this, data);
+  }
+
+  fill(data = {}) {
+    this.keys().forEach((key) => {
+      this[key] = data[key];
+    });
+  }
+
+  data() {
+    return this.keys().reduce((data, key) => (
+      {...data, [key]: this[key]}
+    ), {});
+  }
+
+  keys() {
+    return Object.keys(this).filter(key => !Form.ignore.includes(key));
+  }
+
+  startProcessing() {
+    this.errors.clear();
+    this.busy = true;
+    this.successful = false;
+    this.recentlySuccessful = false;
+    clearTimeout(this.recentlySuccessfulTimeoutId);
+  }
+
+  finishProcessing() {
+    this.busy = false;
+    this.successful = true;
+    this.recentlySuccessful = true;
+    this.recentlySuccessfulTimeoutId = setTimeout(() => {
+      this.recentlySuccessful = false;
+    }, Form.recentlySuccessfulTimeout);
+  }
+
+  clear() {
+    this.errors.clear();
+    this.successful = false;
+    this.recentlySuccessful = false;
+    clearTimeout(this.recentlySuccessfulTimeoutId);
+  }
+
+  reset() {
+    Object.keys(this)
+      .filter(key => !Form.ignore.includes(key))
+      .forEach((key) => {
+        this[key] = deepCopy(this.originalData[key]);
+      });
+  }
+
+  get(url, config = {}) {
+    return this.submit('get', url, config);
+  }
+
+  post(url, config = {}) {
+    return this.submit('post', url, config);
+  }
+
+  patch(url, config = {}) {
+    return this.submit('patch', url, config);
+  }
+
+  put(url, config = {}) {
+    return this.submit('put', url, config);
+  }
+
+  delete(url, config = {}) {
+    return this.submit('delete', url, config);
+  }
+
+  submit(method, url, config = {}) {
+    this.startProcessing();
+
+    config = {
+      body: {},
+      params: {},
+      url: url,
+      method: method,
+      ...config
+    };
+
+    if (method.toLowerCase() === 'get') {
+      config.params = {...this.data(), ...config.params};
+    } else {
+      config.body = {...this.data(), ...config.data};
+
+      if (hasFiles(config.data) && !config.transformRequest) {
+        config.transformRequest = [data => serialize(data)];
+      }
+    }
+
+    return new Promise((resolve, reject) => {
+      useOpnFetch(config.url, config)
+        .then(({data, error}) => {
+          if (error.value) {
+            this.handleErrors(error);
+            reject(error);
+            return;
+          }
+
+          this.finishProcessing();
+          resolve(data.value);
+        })
+    });
+  }
+
+  handleErrors(error) {
+    this.busy = false;
+
+    if (error.value) {
+      this.errors.set(this.extractErrors(error.value.data));
+    }
+  }
+
+  extractErrors(data) {
+    if (!data || typeof data !== 'object') {
+      return {error: Form.errorMessage};
+
+    }
+
+    if (data.errors) {
+      return {...data.errors};
+    }
+
+    if (data.message) {
+      return {error: data.message};
+    }
+
+    return {...data};
+  }
+
+  onKeydown(event) {
+    const target = event.target;
+
+    if (target.name) {
+      this.errors.clear(target.name);
+    }
+  }
+}
+
+export default Form;
diff --git a/client/composables/useForm.js b/client/composables/useForm.js
new file mode 100644
index 0000000..fa2e2ff
--- /dev/null
+++ b/client/composables/useForm.js
@@ -0,0 +1,5 @@
+import Form from "~/composables/lib/vForm/Form.js"
+
+export const useForm = (formData) => {
+  return new Form(formData)
+}
diff --git a/client/composables/useOpnFetch.js b/client/composables/useOpnFetch.js
new file mode 100644
index 0000000..a0b5f5e
--- /dev/null
+++ b/client/composables/useOpnFetch.js
@@ -0,0 +1,5 @@
+import config from "~/opnform.config.js";
+
+export const useOpnFetch = (request, opts) => {
+  return useFetch(request, { baseURL: config.api_url, ...opts })
+}
diff --git a/client/middleware/admin.js b/client/middleware/admin.js
new file mode 100644
index 0000000..54c4acf
--- /dev/null
+++ b/client/middleware/admin.js
@@ -0,0 +1,8 @@
+import {useAuthStore} from "../../resources/js/stores/auth.js";
+
+export default defineNuxtRouteMiddleware((to, from) => {
+  const authStore = useAuthStore()
+  if (!authStore.user?.admin) {
+    navigateTo({ name: 'home' })
+  }
+})
diff --git a/client/middleware/auth.js b/client/middleware/auth.js
new file mode 100644
index 0000000..3c7c35b
--- /dev/null
+++ b/client/middleware/auth.js
@@ -0,0 +1,11 @@
+import {useAuthStore} from "../../resources/js/stores/auth.js";
+
+export default defineNuxtRouteMiddleware((to, from) => {
+  const authStore = useAuthStore()
+
+  if (!authStore.check) {
+    useCookie('intended_url').value = to.path
+
+    navigateTo({ name: 'login' })
+  }
+})
diff --git a/client/middleware/check-auth.global.js b/client/middleware/check-auth.global.js
new file mode 100644
index 0000000..77d9f3a
--- /dev/null
+++ b/client/middleware/check-auth.global.js
@@ -0,0 +1,5 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  const authStore = useAuthStore()
+  authStore.loadTokenFromCookie()
+  useAuthStore().fetchUserIfNotFetched()
+})
diff --git a/client/opnform.config.js b/client/opnform.config.js
index 9035e40..298e5cf 100644
--- a/client/opnform.config.js
+++ b/client/opnform.config.js
@@ -1,6 +1,6 @@
 export default {
-  "appName": "OpnForm",
-  "app_url": "https://opnform.test",
+  "app_ame": "OpnForm",
+  "api_url": "https://opnform.test/api",
   "locale": "en",
   "locales": {"en": "EN"},
   "githubAuth": null,
diff --git a/client/package-lock.json b/client/package-lock.json
index 9d0133e..63a0a1f 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -24,14 +24,13 @@
         "date-fns": "^2.28.0",
         "debounce": "^1.2.1",
         "fuse.js": "^6.4.6",
-        "js-cookie": "^2.2.1",
         "js-sha256": "^0.9.0",
         "libphonenumber-js": "^1.10.44",
+        "object-to-formdata": "^4.5.1",
         "prismjs": "^1.24.1",
         "qrcode": "^1.5.1",
         "query-builder-vue-3": "^1.0.1",
         "tinymotion": "^0.2.0",
-        "vform": "^2.1.1",
         "vue": "^3.2.13",
         "vue-chartjs": "^5.2.0",
         "vue-codemirror": "^4.0.6",
@@ -6751,11 +6750,6 @@
         "jiti": "bin/jiti.js"
       }
     },
-    "node_modules/js-cookie": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
-    },
     "node_modules/js-sha256": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
@@ -8094,6 +8088,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/object-to-formdata": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/object-to-formdata/-/object-to-formdata-4.5.1.tgz",
+      "integrity": "sha512-QiM9D0NiU5jV6J6tjE1g7b4Z2tcUnKs1OPUi4iMb2zH+7jwlcUrASghgkFk9GtzqNNq8rTQJtT8AzjBAvLoNMw=="
+    },
     "node_modules/ofetch": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.3.3.tgz",
@@ -10950,15 +10949,6 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/vform": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vform/-/vform-2.1.2.tgz",
-      "integrity": "sha512-Nobg/0ckWHYQAjJJqucOyRv/a3enO40f087KBpkSUCl0eRQTE8qmUqk/l5gmbxhD8UO3A8dDiSRWKmKF8+l4YQ==",
-      "peerDependencies": {
-        "axios": "*",
-        "vue": "*"
-      }
-    },
     "node_modules/vite": {
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.7.tgz",
diff --git a/client/package.json b/client/package.json
index 1f6fe3d..ca13f56 100644
--- a/client/package.json
+++ b/client/package.json
@@ -36,14 +36,13 @@
     "date-fns": "^2.28.0",
     "debounce": "^1.2.1",
     "fuse.js": "^6.4.6",
-    "js-cookie": "^2.2.1",
     "js-sha256": "^0.9.0",
     "libphonenumber-js": "^1.10.44",
+    "object-to-formdata": "^4.5.1",
     "prismjs": "^1.24.1",
     "qrcode": "^1.5.1",
     "query-builder-vue-3": "^1.0.1",
     "tinymotion": "^0.2.0",
-    "vform": "^2.1.1",
     "vue": "^3.2.13",
     "vue-chartjs": "^5.2.0",
     "vue-codemirror": "^4.0.6",
diff --git a/client/pages/ai-form-builder.vue b/client/pages/ai-form-builder.vue
index 1f16b2d..c1c9038 100644
--- a/client/pages/ai-form-builder.vue
+++ b/client/pages/ai-form-builder.vue
@@ -22,7 +22,7 @@
               <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">
+              <v-button v-else class="mr-1" :to="{ name: 'forms-create' }" :arrow="true">
                 Get started for free
               </v-button>
             </div>
@@ -273,7 +273,7 @@
 <!--&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;-->
+<!--&lt;!&ndash;              <v-button v-else class="mr-1" :to="{ name: 'forms-create' }" :arrow="true">&ndash;&gt;-->
 <!--&lt;!&ndash;                Get started for free&ndash;&gt;-->
 <!--&lt;!&ndash;              </v-button>&ndash;&gt;-->
 <!--&lt;!&ndash;            </div>&ndash;&gt;-->
@@ -446,7 +446,7 @@
             <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">
+            <v-button v-else class="mr-1" :to="{ name: 'forms-create' }" :arrow="true">
               Get started for free
             </v-button>
           </div>
diff --git a/client/pages/home.vue b/client/pages/home.vue
index 063e6e6..609c3f6 100644
--- a/client/pages/home.vue
+++ b/client/pages/home.vue
@@ -7,7 +7,7 @@
             <h2 class="flex-grow text-gray-900">
               Your Forms
             </h2>
-            <v-button v-track.create_form_click :to="{name:'forms.create'}">
+            <v-button v-track.create_form_click :to="{name:'forms-create'}">
               <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M6.99996 1.1665V12.8332M1.16663 6.99984H12.8333" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
@@ -48,7 +48,7 @@
             <div v-if="isFilteringForms && enrichedForms.length === 0 && searchForm.search" class="mt-2 w-full text-center">
               Your search "{{ searchForm.search }}" did not match any forms. Please try again.
             </div>
-            <v-button v-if="forms.length === 0" v-track.create_form_click class="mt-4" :to="{name:'forms.create'}">
+            <v-button v-if="forms.length === 0" v-track.create_form_click class="mt-4" :to="{name:'forms-create'}">
               <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M6.99996 1.1665V12.8332M1.16663 6.99984H12.8333" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
@@ -119,7 +119,7 @@ const loadForms = function () {
   const formsStore = useFormsStore()
   const workspacesStore = useWorkspacesStore()
   formsStore.startLoading()
-  workspacesStore.loadIfEmpty().then(() => {
+  return workspacesStore.loadIfEmpty().then(() => {
     formsStore.loadIfEmpty(workspacesStore.currentId)
   })
 }
@@ -127,10 +127,6 @@ const loadForms = function () {
 export default {
   components: { OpenFormFooter, TextInput, ExtraMenu },
 
-  beforeRouteEnter (to, from, next) {
-    loadForms()
-    next()
-  },
   middleware: 'auth',
 
   props: {
@@ -138,10 +134,11 @@ export default {
     metaDescription: { type: String, default: 'All of your OpnForm are here. Create new forms, or update your existing one!' }
   },
 
-  setup () {
+  async setup () {
     const authStore = useAuthStore()
     const formsStore = useFormsStore()
     const workspacesStore = useWorkspacesStore()
+    loadForms()
     return {
       formsStore,
       workspacesStore,
diff --git a/client/pages/index.vue b/client/pages/index.vue
index 42fd28f..d68d0dd 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -47,7 +47,7 @@
             <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">
+            <v-button v-else class="mr-1" :to="{ name: 'forms-create' }" :arrow="true">
               Create a form for FREE
             </v-button>
           </div>
diff --git a/client/plugins/fetch.js b/client/plugins/fetch.js
new file mode 100644
index 0000000..05f2fcc
--- /dev/null
+++ b/client/plugins/fetch.js
@@ -0,0 +1,45 @@
+import { ofetch } from 'ofetch'
+import {useAuthStore} from "~/stores/auth.js";
+
+function addAuthHeader(request, options) {
+  const authStore = useAuthStore()
+  if (authStore.check) {
+    options.headers = { Authorization: `Bearer ${authStore.token}` }
+    console.log('addidng auth',options)
+  }
+}
+
+function addPasswordToFormRequest (request) {
+  const url = request.url
+  if (!url || !url.startsWith('/api/forms/')) return
+
+  const slug = url.split('/')[3]
+  const passwordCookie = useCookie('password-' + slug, { maxAge: 60 * 60 * 24 * 30 }) // 30 days
+  if (slug !== undefined && slug !== '' && passwordCookie.value !== undefined) {
+    request.headers['form-password'] = passwordCookie.value
+  }
+}
+
+export default defineNuxtPlugin((_nuxtApp) => {
+  globalThis.$fetch = ofetch.create({
+    onRequest ({ request, options }) {
+      // TODO: check that it's our own domain called
+      addAuthHeader(request, options)
+      addPasswordToFormRequest(request)
+    },
+    onResponseError ({ response }) {
+      const authStore = useAuthStore()
+      const { status } = response
+
+      if (status === 401 && authStore.check) {
+        // TODO: check that it's our own domain called
+        authStore.logout()
+        useRouter().push({ name: 'login' })
+      }
+
+      if (status >= 500) {
+        console.error('Request error', status)
+      }
+    }
+  })
+})
diff --git a/client/stores/auth.js b/client/stores/auth.js
index 5fa2c22..3e446ba 100644
--- a/client/stores/auth.js
+++ b/client/stores/auth.js
@@ -1,53 +1,64 @@
-import { defineStore } from 'pinia'
+import {defineStore} from 'pinia'
 import axios from 'axios'
-import Cookies from 'js-cookie'
 
 export const useAuthStore = defineStore('auth', {
-  state: () => ({
-    user: null,
-    token: Cookies.get('token'),
-
-    // For admin impersonation
-    admin_token: Cookies.get('admin_token') ?? null
-  }),
+  state: () => {
+    return {
+      token: null,
+      admin_token: null,
+      user: null,
+    }
+  },
   getters: {
     check: (state) => (state.user !== null && state.user !== undefined),
     isImpersonating: (state) => (state.admin_token !== null && state.admin_token !== undefined)
   },
   actions: {
     // Stores admin token temporarily for impersonation
-    startImpersonating () {
-      this.admin_token = this.token
-      Cookies.set('admin_token', this.token, { expires: 365 })
+    startImpersonating() {
+      this.setAdminToken(this.token)
     },
     // Stop admin impersonation
-    stopImpersonating () {
+    stopImpersonating() {
       this.token = this.admin_token
       this.admin_token = null
-      Cookies.set('token', this.token, { expires: 365 })
-      Cookies.remove('admin_token')
       this.fetchUser()
     },
 
-    saveToken (token, remember) {
+    setToken(token) {
+      useCookie('token', {maxAge: 60 * 60 * 24 * 30}).value = token
       this.token = token
-      Cookies.set('token', token, { expires: remember ? 365 : null })
     },
 
-    async fetchUser () {
+    setAdminToken(token) {
+      useCookie('admin_token', {maxAge: 60 * 60 * 24 * 30}).value = token
+      this.admin_token = token
+    },
+
+    loadTokenFromCookie() {
+      this.token = useCookie('token').value
+      this.admin_token = useCookie('admin_token').value
+    },
+
+    async fetchUser() {
       try {
-        const { data } = await axios.get('/api/user')
+        const {data} = await axios.get('/api/user')
         this.user = data
         this.initServiceClients()
 
         return data
       } catch (e) {
-        this.token = null
-        Cookies.remove('token')
+        this.setToken(null)
       }
     },
 
-    updateUser (payload) {
+    async fetchUserIfNotFetched() {
+      if (this.user === null && this.token) {
+        await this.fetchUser()
+      }
+    },
+
+    updateUser(payload) {
       this.user = payload
       this.initServiceClients()
     },
@@ -56,20 +67,29 @@ export const useAuthStore = defineStore('auth', {
       if (!this.user) return
       useAmplitude().setUser(this.user)
       useCrisp().setUser(this.user)
+
+      // Init sentry
+      Sentry.configureScope((scope) => {
+        scope.setUser({
+          id: this.user.id,
+          email: this.user.email,
+          subscription: this.user?.is_subscribed
+        })
+      })
     },
 
-    async logout () {
+    async logout() {
       try {
         await axios.post('/api/logout')
-      } catch (e) { }
+      } catch (e) {
+      }
 
       this.user = null
-      this.token = null
-      Cookies.remove('token')
+      this.setToken(null)
     },
 
-    async fetchOauthUrl (provider) {
-      const { data } = await axios.post(`/api/oauth/${provider}`)
+    async fetchOauthUrl(provider) {
+      const {data} = await axios.post(`/api/oauth/${provider}`)
       return data.url
     }
   }
diff --git a/client/stores/forms.js b/client/stores/forms.js
index 06c4239..5139c4c 100644
--- a/client/stores/forms.js
+++ b/client/stores/forms.js
@@ -1,7 +1,7 @@
-import { defineStore } from 'pinia'
-import axios from 'axios'
+import {defineStore} from 'pinia'
+import {useOpnFetch} from "~/composables/useOpnFetch.js";
 
-export const formsEndpoint = '/api/open/workspaces/{workspaceId}/forms'
+export const formsEndpoint = '/open/workspaces/{workspaceId}/forms'
 export let currentPage = 1
 
 export const useFormsStore = defineStore('forms', {
@@ -22,7 +22,7 @@ export const useFormsStore = defineStore('forms', {
       if (state.content.length === 0) return []
       let allTags = []
       state.content.forEach(form => {
-        if(form.tags && form.tags.length > 0){
+        if (form.tags && form.tags.length > 0) {
           allTags = allTags.concat(form.tags)
         }
       })
@@ -30,34 +30,34 @@ export const useFormsStore = defineStore('forms', {
     }
   },
   actions: {
-    set (items) {
+    set(items) {
       this.content = items
     },
-    append (items) {
+    append(items) {
       this.content = this.content.concat(items)
     },
-    addOrUpdate (item) {
+    addOrUpdate(item) {
       this.content = this.content.filter((val) => val.id !== item.id)
       this.content.push(item)
     },
-    remove (item) {
+    remove(item) {
       this.content = this.content.filter((val) => val.id !== item.id)
     },
-    startLoading () {
+    startLoading() {
       this.loading = true
     },
-    stopLoading () {
+    stopLoading() {
       this.loading = false
     },
-    resetState () {
+    resetState() {
       this.set([])
       this.stopLoading()
       currentPage = 1
     },
-    load (workspaceId) {
+    load(workspaceId) {
       this.startLoading()
-      return axios.get(formsEndpoint.replace('{workspaceId}', workspaceId)+'?page='+currentPage).then((response) => {
-        if (currentPage == 1) {
+      return useOpnFetch(formsEndpoint.replace('{workspaceId}', workspaceId) + '?page=' + currentPage).get().then((response) => {
+        if (currentPage === 1) {
           this.set(response.data.data)
         } else {
           this.append(response.data.data)
@@ -71,7 +71,7 @@ export const useFormsStore = defineStore('forms', {
         }
       })
     },
-    loadIfEmpty (workspaceId) {
+    loadIfEmpty(workspaceId) {
       if (this.content.length === 0) {
         return this.load(workspaceId)
       }
diff --git a/client/stores/workspaces.js b/client/stores/workspaces.js
index 73c5101..2172193 100644
--- a/client/stores/workspaces.js
+++ b/client/stores/workspaces.js
@@ -1,8 +1,10 @@
-import axios from 'axios'
-import { defineStore } from 'pinia'
-export const workspaceEndpoint = '/api/open/workspaces/'
+import {defineStore} from 'pinia'
+import {useOpnFetch} from "~/composables/useOpnFetch.js"
+import {useStorage} from "@vueuse/core"
 
-const localStorageCurrentWorkspaceKey = 'currentWorkspace'
+export const workspaceEndpoint = 'open/workspaces/'
+
+const storedWorkspaceId = useStorage('currentWorkspace', 0)
 
 export const useWorkspacesStore = defineStore('workspaces', {
   state: () => ({
@@ -21,72 +23,68 @@ export const useWorkspacesStore = defineStore('workspaces', {
     }
   },
   actions: {
-    set (items) {
+    set(items) {
       this.content = items
       if (this.currentId == null && this.content.length > 0) {
         // If one only, set it
         if (this.content.length === 1) {
-          this.currentId = items[0].id
-          localStorage.setItem(localStorageCurrentWorkspaceKey, this.currentId)
-        } else if (localStorage.getItem(localStorageCurrentWorkspaceKey) && this.content.find(item => item.id === parseInt(localStorage.getItem(localStorageCurrentWorkspaceKey)))) {
+          this.setCurrentId(items[0].id)
+        } else if (storedWorkspaceId && this.content.find(item => item.id === parseInt(storedWorkspaceId.value))) {
           // Check local storage for current workspace, or take first
-          this.currentId = parseInt(localStorage.getItem(localStorageCurrentWorkspaceKey))
-          localStorage.setItem(localStorageCurrentWorkspaceKey, this.currentId)
+          this.setCurrentId(parseInt(storedWorkspaceId.value))
         } else {
           // Else, take first
-          this.currentId = items[0].id
-          localStorage.setItem(localStorageCurrentWorkspaceKey, this.currentId)
+          this.setCurrentId(items[0].id)
         }
       } else {
-        localStorage.removeItem(localStorageCurrentWorkspaceKey)
+        this.setCurrentId(null)
       }
     },
-    setCurrentId (id) {
+    setCurrentId(id) {
       this.currentId = id
-      localStorage.setItem(localStorageCurrentWorkspaceKey, id)
+      storedWorkspaceId.value = id
     },
-    addOrUpdate (item) {
+    addOrUpdate(item) {
       this.content = this.content.filter((val) => val.id !== item.id)
       this.content.push(item)
       if (this.currentId == null) {
         this.currentId = item.id
-        localStorage.setItem(localStorageCurrentWorkspaceKey, this.currentId)
+        storedWorkspaceId.value = this.currentId
       }
     },
-    remove (itemId) {
+    remove(itemId) {
       this.content = this.content.filter((val) => val.id !== itemId)
       if (this.currentId === itemId) {
-        this.currentId = this.content.length > 0 ? this.content[0].id : null
-        localStorage.setItem(localStorageCurrentWorkspaceKey, this.currentId)
+        this.setCurrentId(this.content.length > 0 ? this.content[0].id : null)
       }
     },
-    startLoading () {
+    startLoading() {
       this.loading = true
     },
-    stopLoading () {
+    stopLoading() {
       this.loading = false
     },
-    resetState () {
+    resetState() {
       this.set([])
       this.stopLoading()
     },
-    load () {
+    load() {
       this.set([])
       this.startLoading()
-      return axios.get(workspaceEndpoint).then((response) => {
+      return useOpnFetch(workspaceEndpoint).then((response) => {
         this.set(response.data)
         this.stopLoading()
       })
     },
-    loadIfEmpty () {
+    loadIfEmpty() {
       if (this.content.length === 0) {
         return this.load()
       }
       return Promise.resolve()
     },
-    delete (id) {
+    delete(id) {
       this.startLoading()
-      return axios.delete(workspaceEndpoint + id).then((response) => {
+      return useOpnFetch(workspaceEndpoint + id, {method: 'DELETE'}).then((response) => {
         this.remove(response.data.workspace_id)
         this.stopLoading()
       })