Work in progress

client/mixins/form_editor/initForm.js

@@ -0,0 +1,57 @@
+import Form from "vform";
+
+export default {
+  methods: {
+    initForm() {
+      this.form = new Form({
+        title: 'My Form',
+        description: null,
+        visibility: 'public',
+        workspace_id: this.workspace?.id,
+        properties: [],
+
+        notifies: false,
+        slack_notifies: false,
+        send_submission_confirmation: false,
+        webhook_url: null,
+        notification_settings: {},
+
+        // Customization
+        theme: 'default',
+        width: 'centered',
+        dark_mode: 'auto',
+        color: '#3B82F6',
+        hide_title: false,
+        no_branding: false,
+        uppercase_labels: true,
+        transparent_background: false,
+        closes_at: null,
+        closed_text: 'This form has now been closed by its owner and does not accept submissions anymore.',
+        auto_save: true,
+
+        // Submission
+        submit_button_text: 'Submit',
+        re_fillable: false,
+        re_fill_button_text: 'Fill Again',
+        submitted_text: 'Amazing, we saved your answers. Thank you for your time and have a great day!',
+        notification_sender: 'OpnForm',
+        notification_subject: 'We saved your answers',
+        notification_body: 'Hello there 👋 <br>This is a confirmation that your submission was successfully saved.',
+        notifications_include_submission: true,
+        use_captcha: false,
+        is_rating: false,
+        rating_max_value: 5,
+        max_submissions_count: null,
+        max_submissions_reached_text: 'This form has now reached the maximum number of allowed submissions and is now closed.',
+        editable_submissions_button_text: 'Edit submission',
+        confetti_on_submission: false,
+
+        // Security & Privacy
+        can_be_indexed: true,
+
+        // Custom SEO
+        seo_meta: {}
+      })
+    },
+  }
+}

client/mixins/forms/fieldsLogic.js

@@ -0,0 +1,17 @@
+import FormPropertyLogicRule from '../../forms/FormPropertyLogicRule.js'
+export default {
+  methods: {
+    validateFieldsLogic (properties) {
+      properties.forEach((field) => {
+        const isValid = (new FormPropertyLogicRule(field)).isValid()
+        if(!isValid){
+          field.logic = {
+            conditions: null,
+            actions: []
+          }
+        }
+      })
+      return properties
+    }
+  }
+}

client/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) : ''
+    }
+  }
+}

client/mixins/forms/input.js

@@ -0,0 +1,64 @@
+import { themes } from '~/config/form-themes.js'
+
+export default {
+  props: {
+    id: { type: String, default: null },
+    name: { type: String, required: true },
+    label: { type: String, required: false },
+    form: { type: Object, required: false },
+    value: { required: false },
+    required: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    placeholder: { type: String, default: null },
+    uppercaseLabels: { type: Boolean, default: false },
+    help: { type: String, default: null },
+    helpPosition: { type: String, default: 'below_input' },
+    theme: { type: Object, default: () => themes.default },
+    color: { type: String, default: '#3B82F6' },
+    wrapperClass: { type: String, default: 'relative mb-3' }
+  },
+
+  data () {
+    return {
+      content: this.value
+    }
+  },
+
+  computed: {
+    inputStyle () {
+      return {
+        '--tw-ring-color': this.color
+      }
+    },
+    hasValidation () {
+      return this.form !== null && this.form !== undefined && this.form.hasOwnProperty('errors')
+    },
+    compVal: {
+      set (val) {
+        if (this.form) {
+          this.form[this.name] = val
+        } else {
+          this.content = val
+        }
+        if (this.hasValidation) {
+          this.form.errors.clear(this.name)
+        }
+        this.$emit('input', this.compVal)
+      },
+      get () {
+        if (this.form) {
+          return this.form[this.name]
+        }
+        return this.content
+      }
+    }
+  },
+
+  watch: {
+    value (val) {
+      if (val !== this.compVal) {
+        this.compVal = val
+      }
+    }
+  }
+}

client/mixins/forms/saveUpdateAlert.js

@@ -0,0 +1,11 @@
+export default {
+  methods: {
+    displayFormModificationAlert (responseData) {
+      if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
+        this.alertWarning(responseData.message)
+      } else {
+        this.alertSuccess(responseData.message)
+      }
+    }
+  }
+}

client/mixins/seo-meta.js

@@ -0,0 +1,23 @@
+export default {
+  metaInfo () {
+    const title = this.metaTitle ?? 'OpnForm'
+    const description = this.metaDescription ?? "Create beautiful forms for free. Unlimited fields, unlimited submissions. It's free and it takes less than 1 minute to create your first form."
+    const image = this.metaImage ?? this.asset('img/social-preview.jpg')
+    const metaTemplate = this.metaTemplate ?? '%s · OpnForm'
+
+    return {
+      title: title,
+      titleTemplate: metaTemplate,
+      meta: [
+        ...(this.metaTags ?? []),
+        { vmid: 'og:title', property: 'og:title', content: title },
+        { vmid: 'twitter:title', property: 'twitter:title', content: title },
+        { vmid: 'description', name: 'description', content: description },
+        { vmid: 'og:description', property: 'og:description', content: description },
+        { vmid: 'twitter:description', property: 'twitter:description', content: description },
+        { vmid: 'twitter:image', property: 'twitter:image', content: image },
+        { vmid: 'og:image', property: 'og:image', content: image }
+      ]
+    }
+  }
+}