Fix form password

client/composables/useOpnApi.js

@@ -8,10 +8,10 @@ function addAuthHeader(request, options) {
 }
 
 function addPasswordToFormRequest(request, options) {
-  const url = request.url
+  if (!request || !request.startsWith('/forms/')) return
-  if (!url || !url.startsWith('/forms/')) return
+
+  const slug = request.split('/')[2]
 
-  const slug = url.split('/')[3]
   const passwordCookie = useCookie('password-' + slug, {maxAge: 60 * 60 * 24 * 30}) // 30 days
   if (slug !== undefined && slug !== '' && passwordCookie.value !== undefined) {
     options.headers['form-password'] = passwordCookie.value

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

@@ -40,7 +40,7 @@
             <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"
+        <open-complete-form v-show="!recordLoading" ref="openCompleteForm" :form="form" class="mb-10"
                             @password-entered="passwordEntered"
         />
       </template>
@@ -66,6 +66,8 @@ const slug = useRoute().params.slug
 const form = computed(() => formsStore.getByKey(slug))
 const submitted = ref(false)
 
+const openCompleteForm = ref(null)
+
 crisp.hideChat()
 onBeforeRouteLeave((to, from) => {
   crisp.showChat()
@@ -73,26 +75,35 @@ onBeforeRouteLeave((to, from) => {
 })
 
 const passwordEntered = function (password) {
+  console.log('passwordEntered', password, sha256(password))
   useCookie('password-' + slug, {
-    maxAge: {expires: 60 * 60 * 7},
+    maxAge: 60 * 60 * 7,
     sameSite: false,
     secure: true
   }).value = sha256(password)
-  loadForm(slug).then(() => {
+  loadForm().then(() => {
     if (form.value?.is_password_protected) {
-      this.$refs['open-complete-form'].addPasswordError('Invalid password.')
+      console.log(openCompleteForm.value)
+      openCompleteForm.value.addPasswordError('Invalid password.')
     }
   })
 }
 
-const loadForm = async () => {
+const loadForm = async (setup=false) => {
-  if (formsStore.loading || form.value) return Promise.resolve()
+  console.log('loadForm',setup)
-  const {data, error} = await formsStore.publicLoad(slug)
+  if (formsStore.loading || (form.value && !form.value.is_password_protected)) return Promise.resolve()
-  if (error.value) {
+
-    formsStore.stopLoading()
+  if (setup) {
-    return
+    const {data, error} = await formsStore.publicLoad(slug)
+    if (error.value) {
+      formsStore.stopLoading()
+      return
+    }
+    formsStore.save(data.value)
+  } else {
+    const data = await formsStore.publicFetch(slug)
+    formsStore.save(data)
   }
-  formsStore.save(data.value)
   formsStore.stopLoading()
 
   // Adapt page to form: colors, custom code etc
@@ -108,10 +119,10 @@ const loadForm = async () => {
 }
 
 onMounted(() => {
-  loadForm(slug)
+  loadForm()
 })
 
-await loadForm(slug)
+await loadForm(true)
 
 useOpnSeoMeta({
   title: () => {

client/stores/forms.js

@@ -50,6 +50,11 @@ export const useFormsStore = defineStore('forms', () => {
     return useOpnApi('/forms/' + slug)
   }
 
+  const publicFetch = (slug) => {
+    contentStore.startLoading()
+    return opnFetch('/forms/' + slug)
+  }
+
   const allTags = computed(() => {
     let tags = []
     contentStore.getAll.value.forEach((form) => {
@@ -69,6 +74,7 @@ export const useFormsStore = defineStore('forms', () => {
     allLoaded,
     allTags,
     publicLoad,
+    publicFetch,
     loadAll,
     load,
   }