Form submission caching & url pre-fill confusion (#37)

* Form submission caching & url pre-fill confusion

* formPendingSubmissionKey as common mixins

* Rename mixin formPendingSubmissionKey

Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>

resources/js/components/open/forms/OpenCompleteForm.vue

@@ -124,6 +124,7 @@ import OpenFormButton from './OpenFormButton'
 import { themes } from '~/config/form-themes'
 import VButton from '../../common/Button'
 import VTransition from '../../common/transitions/VTransition'
+import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key'
 
 export default {
   components: { VTransition, VButton, OpenFormButton, OpenForm },
@@ -133,6 +134,8 @@ export default {
     creating: { type: Boolean, default: false } // If true, fake form submit
   },
 
+  mixins: [FormPendingSubmissionKey],
+
   data () {
     return {
       loading: false,
@@ -193,7 +196,7 @@ export default {
         })
 
         try {
-          window.localStorage.removeItem(this.form.form_pending_submission_key)
+          window.localStorage.removeItem(this.formPendingSubmissionKey)
         } catch (e) {}
 
         if (response.data.redirect && response.data.redirect_url) {

resources/js/components/open/forms/OpenForm.vue

@@ -63,10 +63,12 @@ import OpenFormButton from './OpenFormButton'
 import clonedeep from 'clone-deep'
 import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver'
 const VueHcaptcha = () => import('@hcaptcha/vue-hcaptcha')
+import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key'
 
 export default {
   name: 'OpenForm',
   components: { OpenFormButton, VueHcaptcha },
+  mixins: [FormPendingSubmissionKey],
   props: {
     form: {
       type: Object,
@@ -223,7 +225,7 @@ export default {
       handler () {
         if(this.isPublicFormPage && this.form && this.dataFormValue){
           try {
-            window.localStorage.setItem(this.form.form_pending_submission_key, JSON.stringify(this.dataFormValue))
+            window.localStorage.setItem(this.formPendingSubmissionKey, JSON.stringify(this.dataFormValue))
           } catch (e) {}
         }
       }
@@ -279,7 +281,7 @@ export default {
       if (this.isPublicFormPage) {
         let pendingData
         try {
-          pendingData = window.localStorage.getItem(this.form.form_pending_submission_key)
+          pendingData = window.localStorage.getItem(this.formPendingSubmissionKey)
         } catch (e) {
           pendingData = null
         }

resources/js/mixins/forms/form-pending-submission-key.js

@@ -0,0 +1,22 @@
+const cyrb53 = (str, seed = 0) => {
+  let h1 = 0xdeadbeef ^ seed,
+    h2 = 0x41c6ce57 ^ seed;
+  for (let i = 0, ch; i < str.length; i++) {
+    ch = str.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+  }
+
+  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+
+  return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+};
+
+export default {
+  computed: {
+    formPendingSubmissionKey() {
+      return (this.form) ? this.form.form_pending_submission_key + '-' + cyrb53(window.location.href) : ''
+    }
+  }
+}