WIP

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({

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
     }
   },
 

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) => {

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()

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' })
         }
       }
     }

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' }">-->