fix: signup form works again

Author: timelytree

components/form/field-container.vue

@@ -1,8 +1,7 @@
 <template>
   <ZeroFormField
     v-slot="{ field, fieldId, fieldType, state, required, disabled, validationMessage, updateValue, toggleState }"
-    v-bind="props"
-    :class="['field-container', { focused }]">
+    v-bind="props">
 
     <label v-if="scaffold.label" :for="fieldId" :class="['field-label', state]">
       {{ scaffold.label }}
@@ -20,7 +19,7 @@
       :disabled="disabled"
       @update-value="updateValue"
       @toggle-state="toggleState"
-      @toggle-focused="handleFocus($event, toggleState)" />
+      @toggle-focused="toggleState" />
 
     <slot />
 
@@ -77,15 +76,6 @@ const map = {
   'FieldSelect': resolveComponent('FormFieldSelect'),
   'FieldUpload': resolveComponent('FormFieldUpload')
 }
-
-// ======================================================================== Data
-const focused = ref(false)
-
-// ===================================================================== Methods
-const handleFocus = (state, toggleState) => {
-  focused.value = state
-  toggleState(state)
-}
 </script>
 
 <style lang="scss" scoped>

components/signup-card.vue

@@ -11,7 +11,6 @@
           {{ title }}
         </h1>
 
-
       </div>
 
       <div v-if="description" class="description">
@@ -30,8 +29,6 @@
           :scaffold="emailFieldScaffold" />
         <FormFieldContainer
           :scaffold="orgFieldScaffold" />
-        <FormFieldContainer
-          :scaffold="orgFieldScaffold" />
         <FormFieldContainer
           :scaffold="countryFieldScaffold" />
 
@@ -59,7 +56,7 @@
 
 <script setup>
 // const config = useRuntimeConfig()
-const buttonStore = useZeroButtonStore()
+// const buttonStore = useZeroButtonStore()
 // ======================================================================= Props
 const props = defineProps({
   signupCard: {
@@ -169,7 +166,7 @@ const submitForm = async () => {
     //   submitError.value = true
     // })
   // }
-  buttonStore.set({id: 'signup-card-form', loading: false})
+  // buttonStore.set({id: 'signup-card-form', loading: false})
 }
 </script>
 

content/core/general.json

@@ -1,14 +1,4 @@
 {
-  "seo": {
-    "title": "Singularity",
-    "description": "Singularity facilitates onboarding of large quantaties of data (PB-scale) to the Filecoin network in an efficient, secure, and flexible way."
-  },
-  "og": {
-    "site_name": "Singularity",
-    "url": "https://singularity.storage",
-    "type": "website",
-    "image": "images/singularity-open-graph.jpg"
-  },
   "header": {
     "navigation": [
       {

content/core/index.json

@@ -1,14 +1,4 @@
 {
-  "seo": {
-    "title": "Singularity",
-    "description": "Singularity facilitates onboarding of large quantaties of data (PB-scale) to the Filecoin network in an efficient, secure, and flexible way."
-  },
-  "og": {
-    "site_name": "Singularity",
-    "url": "https://singularity.storage",
-    "type": "website",
-    "image": "images/singularity-open-graph.jpg"
-  },
   "page_content": [
     {
       "id": "hero-header",

content/core/signup.json

@@ -1,14 +1,4 @@
 {
-  "seo": {
-    "title": "Singularity",
-    "description": ""
-  },
-  "og": {
-    "site_name": "Singularity",
-    "url": "",
-    "type": "website",
-    "image": "images/singularity-open-graph.jpg"
-  },
   "page_content": {
     "back_home_cta": {
         "text": "Back home",
@@ -24,6 +14,7 @@
       "borderGradientAngle": "30deg",
       "signup_form": {
         "first_name": {
+          "id": "firstName",
           "type": "input",
           "formId": "app_preview_signup_form",
           "inputType": "text",
@@ -44,6 +35,7 @@
           }
         },
         "last_name": {
+          "id": "lastName",
           "type": "input",
           "formId": "app_preview_signup_form",
           "inputType": "text",
@@ -64,6 +56,7 @@
           }
         },
         "email": {
+          "id": "email",
           "type": "input",
           "formId": "app_preview_signup_form",
           "inputType": "email",
@@ -84,6 +77,7 @@
           }
         },
         "org": {
+          "id": "organization",
           "type": "input",
           "formId": "app_preview_signup_form",
           "inputType": "text",
@@ -104,6 +98,7 @@
           }
         },
         "country": {
+          "id": "country",
           "type": "select",
           "formId": "app_preview_signup_form",
           "required": true,

layouts/default.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="layout default" tabindex="-1">
 
-    <SiteHeader />
+    <!-- <SiteHeader /> -->
 
     <slot />
 
-    <SiteFooter />
+    <!-- <SiteFooter /> -->
 
   </div>
 </template>

modules/zero/modules/form/components/zero-field-boolean.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['field field-boolean', state, { disabled, checked: value }]">
+  <div :class="['field-boolean', state, { disabled, checked: value }]">
 
     <div class="boolean-container">
       <div v-if="disabled" :class="['boolean', { checked: value }]" />

modules/zero/modules/form/components/zero-field-checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['field field-checkbox', state, { disabled }]">
+  <div :class="['field-checkbox', state, { disabled }]">
 
     <div
       v-for="(option, index) in options"

modules/zero/modules/form/components/zero-field-datepicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['field field-datepicker', state, { disabled, empty }]">
+  <div :class="['field-datepicker', state, { disabled, empty }]">
 
     <VueDatePicker
       :model-value="value"

modules/zero/modules/form/components/zero-field-input.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['field field-input', inputType, state, { empty, disabled, 'no-validate': !validate, 'with-controls': showControls }]">
+  <div :class="['field-input', inputType, state, { empty, disabled, 'no-validate': !validate, 'with-controls': showControls }]">
 
     <div v-if="disabled" class="input-container">
       <div class="input">

modules/zero/modules/form/components/zero-field-json.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['field field-json', state, { empty, disabled, 'no-validate': !validate }]">
+  <div :class="['field-json', state, { empty, disabled, 'no-validate': !validate }]">
 
     <ZeroMarkdownParser
       v-if="disabled"

modules/zero/modules/form/components/zero-field-radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['field field-radio', state, { disabled }]">
+  <div :class="['field-radio', state, { disabled }]">
 
     <div
       v-for="(option, index) in options"

modules/zero/modules/form/components/zero-field-select.vue

@@ -3,7 +3,7 @@
 <template>
   <div
     tabindex="-1"
-    :class="['field field-select', state, {
+    :class="['field-select', state, {
       'select-container-focused': selectContainerFocused,
       'select-native-focused': selectNativeFocused,
       'dropdown-open': dropdownOpen,

modules/zero/modules/form/components/zero-field-textarea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['field field-textarea', state, { empty, disabled, 'no-validate': !validate }]">
+  <div :class="['field-textarea', state, { empty, disabled, 'no-validate': !validate }]">
 
     <div v-if="disabled" class="textarea">
       {{ value || placeholder }}

modules/zero/modules/form/components/zero-form-field.vue

@@ -2,7 +2,7 @@
   <component
     :is="rootHtmlTag"
     v-if="field && displayField"
-    :class="['field', state, { disabled }]">
+    :class="['field-container', state, { disabled }]">
 
     <slot
       :field="field"
@@ -20,7 +20,6 @@
 
 <script setup>
 // ===================================================================== Imports
-import { storeToRefs } from 'pinia'
 import Debounce from 'lodash/debounce'
 
 // ======================================================================= Props
@@ -60,14 +59,17 @@ const required = scaffold.required
 const react = scaffold.react
 const conditions = scaffold.conditions
 const deregisterOnDestroy = scaffold.hasOwnProperty('deregisterOnDestroy') ? scaffold.deregisterOnDestroy : true
-const id = modelKey || scaffold.id || useUuid().v4()
+const id = modelKey || scaffold.id
+if (!id || id === '') {
+  throw new Error('Form field is missing "id" key. Fields must always have a unique id.')
+}
 let debounceSaveFieldToLsUponValueUpdate = null
 const store = useZeroFormStore()
 const { fields } = storeToRefs(store)
 let field = fields.value[id]
 
 if (!field) {
-  await store.setField(useRegisterField(
+  store.setField(useRegisterField(
     id,
     formId,
     scaffold,
@@ -101,6 +103,7 @@ const fieldType = computed(() => {
     case 'wysiwyg' : component = 'FieldWysiwyg'; break
     case 'datepicker' : component = 'FieldDatepicker'; break
     case 'json' : component = 'FieldJson'; break
+    case 'upload' : component = 'FieldUpload'; break
     default : component = `Field${useUnSlugify(type)}`
   }
   return component
@@ -116,14 +119,6 @@ const validationMessage = computed(() => {
 // ======================================================================= Hooks
 onMounted(async () => {
   await nextTick(async () => {
-    if (!field.value) {
-      await store.setField(useRegisterField(
-        id,
-        formId,
-        scaffold,
-        props.forceValidate
-      ))
-    }
     const fieldToRestoreFromLsOrToDisplay = await getLocalStorageValue() || {
       id,
       mounted: displayField.value
@@ -156,7 +151,7 @@ onBeforeUnmount(() => {
  * @method toggleState
  */
 
-const toggleState = async (focused) => {
+const toggleState = async focused => {
   const update = { id }
   if (focused) {
     update.state = 'in-progress'
@@ -177,7 +172,7 @@ const toggleState = async (focused) => {
  * @method updateValue
  */
 
-const updateValue = async (value) => {
+const updateValue = async value => {
   const updated = { id, value }
   await store.setField(updated)
   debounceSaveFieldToLsUponValueUpdate()
@@ -206,7 +201,7 @@ const getLocalStorageValue = () => {
  * @method initializeReactions
  */
 
-const initializeReactions = async (updatedField) => {
+const initializeReactions = async updatedField => {
   if (!react) { return }
   const len = react.length
   for (let i = 0; i < len; i++) {

pages/index.vue

@@ -13,7 +13,6 @@ import BlockBuilder from '@/components/blocks/block-builder'
 // ======================================================================== Data
 const generalStore = useGeneralStore()
 const route = useRoute()
-const { $GetSeo, $CompileSeo } = useNuxtApp()
 const { data } = await useAsyncData('core', async () => {
   return queryContent('core').find()
 })
@@ -22,7 +21,6 @@ const { data } = await useAsyncData('core', async () => {
 watch(data, async (val) => {
   await generalStore.getBaseData('general')
   await generalStore.getBaseData({ key: 'index', data: val.find((item) => item._file === 'core/index.json') })
-  useHead($CompileSeo($GetSeo('general', 'index')))
 }, { immediate: true })
 
 // ==================================================================== Computed

pages/signup.vue

@@ -6,17 +6,16 @@
 
           <ButtonCta
             class="back-home-button"
-            :theme="content.back_home_cta.theme"
-            :arrow-direction="content.back_home_cta.arrow_direction"
-            :tag="content.back_home_cta.tag"
-            :to="content.back_home_cta.to">
+            :theme="pageContent.back_home_cta.theme"
+            :arrow-direction="pageContent.back_home_cta.arrow_direction"
+            :tag="pageContent.back_home_cta.tag"
+            :to="pageContent.back_home_cta.to">
             <template #button-content>
-              <span class="button-label"> {{ content.back_home_cta.text }} </span>
+              <span class="button-label"> {{ pageContent.back_home_cta.text }} </span>
             </template>
           </ButtonCta>
 
-
-          <SignupCard :signup-card="content.signup_card" />
+          <SignupCard :signup-card="pageContent.signup_card" />
         </div>
 
       </div>
@@ -25,28 +24,31 @@
 </template>
 
 <script setup>
+// ===================================================================== Imports
+import Content from '@/content/core/signup.json'
+
+// ======================================================================= Setup
 definePageMeta({
   layout: 'warped-torus-background'
 })
+
 // ======================================================================== Data
-const generalStore = useGeneralStore()
-const { $GetSeo, $CompileSeo } = useNuxtApp()
-const { data } = await useAsyncData('signup', async () => {
-  return queryContent('core').find()
-})
+const pageContent = Content.page_content
+// const generalStore = useGeneralStore()
+// const { data } = await useAsyncData('signup', async () => {
+//   return queryContent('core').find()
+// })
 
 // ==================================================================== Watchers
-watch(data, async (val) => {
-  await generalStore.getBaseData('general')
-  await generalStore.getBaseData({ key: 'signup', data: val.find((item) => item._file === 'core/signup.json') })
-  useHead($CompileSeo($GetSeo('general', 'signup')))
-}, { immediate: true })
+// watch(data, async (val) => {
+//   await generalStore.getBaseData('general')
+//   await generalStore.getBaseData({ key: 'signup', data: val.find((item) => item._file === 'core/signup.json') })
+// }, { immediate: true })
 
 // ==================================================================== Computed
-const content = computed(() => {
-  return generalStore.siteContent?.signup?.page_content
-})
-
+// const content = computed(() => {
+//   return generalStore.siteContent?.signup?.page_content
+// })
 </script>
 
 <style lang="scss" scoped>